Claude Design 更新後，我用一個指令把網站設計系統餵進 AI：難的不是下指令，是看懂它要動哪裡

摘要

Claude Design 6/17 更新整合 Claude Code，讓設計工具能直接讀取網站的真實設計系統（design-sync），使生成的設計自動符合品牌規範。作者將 paulkuo.tw 的品牌 tokens（顏色、字體、間距）同步進 Claude Design，流程順利完成。但核心價值不在工具功能本身，而在過程中的人類判斷——權限確認、檔案驗證、獨立把關。文章強調當 AI 工具能力越強、執行成本趨近於零時，人的價值就轉移到決策品質：看懂工具要動什麼、敢於質疑與現場核對、找獨立視角驗收。這反映了 AI 時代從「執行力」到「判斷力」的價值轉移。

重点

• Design-sync 讓 AI 讀取真實設計系統，產出不再是通用 AI 風格而是符合品牌規範
• 權限確認框出現時要停頓，釐清工具要動哪裡，分辨讀取與改寫操作的差別
• 現場檔案與印象不符時以檔案為準，不靠任何一方記憶，防止基於過時認知的決策
• 執行者不能自己驗收自己，需找沒有參與製作流程的獨立角色進行把關驗證
• 工具執行成本趨零後，人的價值轉移到決策品質而非執行速度，判斷力成為稀缺資源

章节

1. Design-sync 如何改變設計與開發的協作

   Claude Design 新增 design-sync 功能，透過 Claude Code 讀取 codebase 的真實設計規格，使 AI 生成的設計自動符合品牌，而非通用風格。

2. 三層角色釐清：App、Code、Design 各自負責什麼

   桌機 app 是入口、Claude Code 是驅動引擎、Claude Design 是工作區。三層各司其職，避免混淆誰在做真正的同步工作。

3. 同步流程與兩個關鍵決策

   作者選擇只同步 tokens 層級（顏色、字體、間距），而非完整元件，並開新專案避免污染既有設計系統——這兩個選擇都來自工具邊界認知。

4. 權限確認時該問自己什麼

   遇到權限框要停頓，分辨工具要讀檔還是改檔，確認放行範圍是否與當下動作相符，避免盲目 Yes 帶來的風險。

5. 現場檔案優於記憶，當場核對避免錯誤

   作者預期 tokens 在 src/ 但實際在 public/styles/；預期自動部署卻已停用。現場讀檔才能發現認知過時，防止基於舊印象的決策。

6. 獨立驗收：不讓執行者自己驗自己

   用 Cowork 開獨立視角，將同步輸出與原始 tokens 逐項比對，確認無誤後才 commit 與 push，確立第二雙眼睛的必要性。

7. 工具越強，判斷力越貴

   執行成本趨近零後，人的價值轉移到決策品質。能否看懂工具意圖、敢於質疑、找人把關，成為 AI 時代真正的競爭力。

金句