那些我用 Cursor 幫自己加速產品設計流程的時刻

最近幾個月，我開始把 AI 工具 Cursor 融入到設計工作流程裡，老實說，真的大大解放了我原本要花在「重工」上的時間。不是那種花俏的 AI 玩具，而是真正有實際產出、能夠協助我把東西「做出來」的工具。

這邊分享兩個我自己覺得最有感的應用方式，或許也可以讓你在工作中試試看。

AI 工具滿天飛，但產品設計師需要的其實不是作圖神器

現在市面上 AI 工具很多，但絕大多數都是針對視覺設計、生成圖片、影片、品牌素材這類的內容。

雖然這些工具對某些設計角色很有幫助，但對於做 B2B、或偏功能型導向的產品設計師來說，這些工具幫上的忙其實不多。

我們的價值不是畫出一張漂漂亮亮的圖，而是：

• 與工程師快速協作，把想法落地

• 驗證使用者需求，讓功能不只是「能用」，而是「真的有用」

• 聚焦在複雜流程的邏輯、資訊架構與使用情境上

而以目前來說，像 Figma 的 AI 也還沒有真正幫上太多忙，所以這時候，我就開始試著找「不是幫我畫圖，而是幫我組出產品原型」的工具——而 Cursor 就是目前我覺得最順手的一個。

一、用 Cursor 直接做出可以互動的 Prototype，不用再反覆拉 Figma 流程圖

在做新產品或新功能探索時，我現在會跳過 Figma，直接打開 Cursor，寫出一個簡單的靜態互動頁面，然後部署到 GitHub Pages，立刻變成一個可以直接操作的 prototype 網站，丟給內部同事、PM、甚至早期使用者體驗看看。

這種做法有幾個優點：

• 比 Figma prototype 更接近真實互動：你可以真的點按鈕、填表單、觸發事件，不需要用一堆 fake transition 去模擬

• 不需要工程師幫忙就能做出可分享的 demo 網站：只要會基本的 HTML/CSS 結構 + 用好 Cursor 的 prompt 就夠了

• 成本低，風險小，適合在早期驗證概念：因為是純靜態頁面，不會有框架版本、前端 build 問題等 bug 地獄

這邊也給一點實際提示：

我會在 prompt 裡明確告訴 Cursor：

幫我用純 HTML、CSS 和 JavaScript 建立一個靜態頁面，不要使用 React、Next.js 或其他框架。

這樣它就不會默默幫你塞進一堆框架，讓原本只想快速做一頁的小作品，變成一個你開都開不起來的全端專案（笑）。

你可以想像這種方式有點像是「以工程的方式做設計」，但其實不難。反而是把產品設計師手上的原型能力往前推了一步——Prototype 變成真的 Product-Like，也更有機會提前測出使用者的反應。

二、把 Cursor 結合 Storybook 元件庫，讓它幫我自動產出 B2B 頁面骨架

我們團隊的工程師有維護一套 Storybook 元件庫，把整個產品的常用 UI 元件都整理成可重複使用的組件，像是按鈕、欄位、卡片、表單、表格等等。

有了這套元件庫之後，我發現 Cursor 簡直像開掛一樣好用。我會在電腦本地裝好元件庫，然後在 Cursor 下 prompt 給它，比如：

幫我用我們的元件庫做一個列表頁，裡面有搜尋欄、篩選器、表格，最後加上一個新增按鈕。

它就會自動產出一整頁程式碼，呼叫對應的元件，排版也符合我們的 spacing 和系統設計邏輯。基本上五分鐘內，我就可以看到一頁長得「很像我們產品」的草稿頁面。

這件事對 B2B SaaS 產品設計師來說，真的是省下大量時間。因為老實說，B2B 很多頁面都差不多——表單填寫、資料查詢、列表展示……內容不同，但架構幾乎一樣。

以前我可能要自己拉元件、微調 spacing、確認狀態，但現在這些初步 layout 的工就可以交給 Cursor 搞定，我只需要進一步調整細節或加上設計邏輯就好。

AI 幫忙的是「重工」，而不是取代創造力

我一直覺得產品設計師的價值，不應該被困在「反覆畫一樣東西」上。

我們真正應該投注時間的，是：

• 理解使用者的需求與痛點

• 規劃複雜但有意義的互動

• 提出設計觀點，釐清策略方向

AI 工具像 Cursor，就是幫你把「重複性高、可以自動生成的產出」先做好，讓我們可以花更多時間在需要判斷力、需要共感力的設計決策上。

小結：產品設計師也可以當黑魔法師

如果你還沒用過 Cursor，我非常推薦你從「做靜態 prototype」開始試試看。你會發現比起用 Figma 模擬互動、畫連接線，直接「寫一個真的東西」反而更快、更容易溝通。

而如果你已經有前端元件庫，請一定要試著把這些元件串進 Cursor 的環境中，讓它幫你快速組出初步的頁面結構。

這個能力會讓你從「只會畫」變成「能做出真的東西」，你的角色也會逐漸往更高價值的產品夥伴靠近。

最後，如果你也在嘗試讓 AI 融入設計工作，或是有更酷的用法，歡迎留言分享，我也還在學習中 🙌

延伸補充：那 Cursor 是什麼？

簡單來說，Cursor 是一款結合 AI 的程式編輯器，它的介面和 VS Code 很像，但內建 AI 協作功能超強。你可以直接用自然語言下指令，它就會幫你生成、修改、重構前端程式碼，甚至懂 context。

比起單純的 AI chat 工具，Cursor 的操作流程更貼近實作開發，非常適合想要「半程式、半設計」的產品設計師使用。

而且你可以搭配自己的元件庫、設計系統，甚至用它部署出一個能跑的 demo，整個流程會比你想像中還輕量許多。

如果你覺得這篇文章實用，歡迎拍手或分享給你身邊的產品設計夥伴們，讓更多人開始探索「設計 x AI」的新可能。我同時也持續在探索 AI 對於產品開發以及設計上的可能，歡迎交流。 Lovable, V0, Canva AI 也都在嘗試中，有興趣想了解更多可以留言讓我知道。

我是 Kyle，一名數位產品設計師，了解我更多可至：https://bento.me/kyle-hsia