Claude

我有一個自己在用的三鐵工具網站（bike-power-calculator.web.app），三個頁面：功率計算、補給規劃、補給品資料庫。功能做得差不多了，但 UI 一直讓我不太滿意，手機版更是幾乎不能用。 一直拖著沒處理，因為 UI 設計是我最頭痛的部分。我甚至認真考慮過要不要去學 Figma。後來看到 Claude Design，就想說試試看。 結論先說：流程比我想像中麻煩跟費時，但成果我覺得還不錯。 用 Claude Design 先確認方向 第一步是把網站連結丟給 Claude Design，它會主動問很多問題：主要使用情境、視覺方向、語言、痛點、希望保留什麼、想要幾個對比方向、配色偏好。不需要想太清楚，回答到哪算哪，它會幫你補齊。 它一次做出三個完整可互動的 prototype 並排比較，用的是我網站真實的欄位（FTP、體重、配速、賽事距離 51.5/113/226）。我說不喜歡哪一個，它就砍掉重做，加了 %FTP 強度徽章、T1/自行車/跑步分段卡片、手機比賽模式的大字倒數計時。 這個階段最有價值的地方是：layout、component 結構、互動邏輯在寫程式前就定好了，之後改需求的成本比直接改程式碼低很多。 Claude Code 接手實作：先踩了一個很貴的坑 設計方向確認後，Claude Design 會自動打包一個 handoff 套件：README（版面結構、欄位 spec、互動行為、實作順序）、design tokens、React 設計原始碼、原版備份。把這包東西丟給 Claude Code，理論上它應該能照著做。 一開始我的做法完全錯誤。 我照claude design跟我說的，直接叫它「幫我把 index.html 改成新設計」，它就開始整檔重寫。第一次跑到一半撞到 output limit，輸出截斷、檔案壞掉。我重來，它又整檔重寫，再次撞限制。兩次就把 5 小時的 token 從 0% 用到 100%，什麼都沒完成。 後來才摸出有效的做法，核心概念是：一頁一次、用 Edit 工具而非整檔重寫、每個區塊做完先停下來確認。 實際的 prompt 流程大概是這樣： Step 1：先讓它讀懂全貌，但不要動檔案 請讀 README.md 並告訴我你理解的： 1. 三頁的新版設計重點是什麼 2. 共用的 design tokens 有哪些 3. 需要保留的現有功能清單 不要開始改檔案，先確認理解一致。 Step 2：從最簡單的開始（共用 tokens） ...