倦怠反而推了我一把

去年的某個凌晨。

Figma 畫布正中央的 Frame 從螢幕發出冷光 ，把空氣切得稜角分明。

按照標準流程，我現在應該定義好四種按鈕狀態（Default, Hover, Active, Disabled），然後開始在那無窮無盡的 Auto-layout 屬性欄裡，把 Pixel 對齊到偶數。

手指懸在滑鼠上，有種生理抗拒讓我遲遲按不下去：

「不管我把它們畫得再像真的，它們不會動，連一個簡單的 Input 框都無法真的打字。」

低效的勞動

那是一個後台系統專案，我的工作是推敲合適的資料呈現，以及如往常一樣壓制自己在排版、對齊的自虐式執著（俗稱設計師的毛）。

Dribbble 上有很多前輩示範過儀表板的理想模樣：設色簡練的數據圖表、有序展開的巢狀選單，且不止好看，更是著重在設計樣式與互動反饋對易用性的影響。

我也想交付有品質的畫面，但想著想著卻是點起一股「無效勞動」的恐懼…

• 折線圖的 12 種幽靈狀態： 為了展示滑鼠移上去顯示數值的效果，我得畫一個 Tooltip Component，再小心翼翼地拉出一條虛線對齊數據點。如果有 12 個月份，不就要畫 12 個 Variant？想著就頭很痛。
• 填充假資料的虛無感： 為了讓畫面看起來像真的，我得在 Table 裡手動編造一堆 "User A"、"Test B"、"$9,999"。我是誰？我在做什麼？

我大可以找套件或是 Figma 自帶的 AI 解決上述的問題。但可預見自己會先對效率提升而沾沾自喜，最後還是會在需求改變時又獨自嘆氣：

「那個 X 軸的單位可以改成『週』嗎？然後我想看密度高一點會長怎樣。」

「這一欄要不要試試看顯示成標籤，原本的文字太單調了。」

喝下一口涼透的咖啡，我決定關掉那個剛建好的 Frame。

縮短的決策循環

打開當時已躍躍欲試的 v0.app。這是我第一次在真實專案中用它，盯著空白的輸入框看了幾秒，難免帶著忐忑：如果這作法沒戲，我又得回到原本的工作方法嗎？

我將 User Story 和 IA 架構轉化為一份提示詞，現在回想起來那真像一封求救信。

「You are an expert Product Designer, please HEEELP…」

但隨著畫面在眼前生成，疑慮很快被一種槓桿騰飛的輕盈感所消彌。

過去，設計師的時間成本被大量消耗在視覺化的過程，為了把設計儘量完整表達給利益關係人，得先花好一段時間堆疊圖層，然後抓著箭頭把線連來連去。

現在，這段過程被壓縮到幾秒鐘。

瀏覽器裡跳出了初步的介面。

「資訊架構的呈現是準確的；縮放視窗時 Flexbox 斷點如我預期；而且那些 mock data 是結構化的，不是我在畫布上隨手打的假字。」

若這個專案是一部動畫，那我不再是一幀一幀調整畫面，而更像是直接檢查依照分鏡初剪好的毛片。

我獲得全新的視角看待自己的交付。

「這邊資料密度太高，難以閱讀」、「這裡操作流程有斷層」、「這裡是過度設計」。這些洞察，過去往往要稿子畫到一半，甚至等到開發完成才能發現，而現在馬上就能捕捉到蛛絲馬跡。

這種加速感，不是因為省去畫稿雙手解放，而是來自於決策循環的縮短。

後來隨著稿件越來越完整，我開始把它連上 GitHub，在本機用 Cursor 繼續調整。

至於 Figma ，後來就當成靈感剪貼簿（雜物堆）。這裡丟幾張競品截圖，那裡貼幾個色票代碼，旁邊散落著一些架構筆記和會議記錄。

過去投注了許多光陰，我們學過如何在設計稿把陰影調得完美，如何把 Component Properties 設得天衣無縫。我們以為那就是設計師的護城河。但現在透過幾行提示詞就能得到比設計稿更真實、互動更細膩的原型，心情當然是複雜的。

但至少不再為了對齊那 1px ，而籠罩在低價值的勞動憂鬱之下。

名正言順地偷懶

雖然跳過了設計稿，但必須建立秩序才不會讓產出只是漂亮的壁紙。首先，設計系統能在程式碼裡直接被調用，讓新的改動都會遵守設計規範。

另外，我在專案裡建好程式化的 component，封裝了業務邏輯的最小單位，例如：

• 元件 A： 一張會判斷數字趨勢語意的卡片。隨數字變化更換文字顏色，輔助圖標也會自動更換。不用每次都重新設定顏色邏輯。
• 元件 B： 一個專為上百道篩選條件打造的聰明選單。會自動分類、支援搜尋、還會顯示每個選項的說明，讓使用者不會迷失在選項海裡。
• 元件 C： 一個摘要面板。點進去就能看到某個對象的濃縮資訊，還搭配常用的操作按鈕，不用跳到別的頁面就能完成動作。

每當因為新的設計需求而需改版這份原型，我不需要回去 Figma 拉元件，也不用寫重複的 HTML。我只需要對 Cursor 說：

「幫我在這頁的列表加一個 Action 按鈕，點開用元件 C 顯示摘要，讓使用者不用跳頁就能操作。」

積木已經做好了，我只需要專注在「怎麼堆積木」來解決問題，而不是花時間打磨積木的邊角。

若要將這份偷懶帶來的紅利量化，體感效率至少提升了 300%。這不僅僅是因為少畫了幾張圖，而是徹底削減了那些「為了溝通而存在，卻不產生實際價值」的轉譯成本：

• 省去手動建構元件的時間： 不必在 Figma 裡為了 Auto-layout 的層級與命名糾結，程式碼裡的 Component 即是最終真理。
• 省去規格文件的撰寫： 不用再製作精美的紅線圖或標註文件去解釋互動細節，因為原型本身就是規格書。
• 省去無意義的高仿真追求： 不在靜態畫布上費盡心機去模擬「帶有資料的操作行為」，那本來就是瀏覽器該做的事。

當這些低效的摩擦力被移除，我們換取到的是更高速的決策循環。時間被釋放出來，留給真正值得琢磨的設計決策。我們能更快地對齊到使用者的視角去審視產品，而不是在反覆修改低效設計稿的過程中，逐漸磨損本該用來洞察問題的清晰眼睛。

Julius