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

TL;DR — Claude Design 在 6/17 推出更新後，跟 Claude Code 的整合變得更深。這代表它不再只是憑提示詞生成漂亮畫面，而是可以透過 design-sync 讀進網站真實的設計系統，讓後續產出的設計更接近原本的品牌語言。

我這次把 paulkuo.tw 的品牌 tokens 接進 Claude Design：同步 10 個檔案、validate exit 0、零 force 收尾。但真正值得記下來的，是過程中每一個需要人判斷的瞬間：權限能不能放行、AI 讀到的檔案是否正確、我自己的記憶是否已經過時、最後需不需要另一雙眼睛來驗證。

工具越強，人的判斷力就越值錢。

Claude Design 更新後，我第一時間想測的不是它能不能生成更漂亮的畫面，而是它能不能真正接上我的網站。

於是我用 design-sync 把 paulkuo.tw 的設計系統餵進去。流程跑到一半，我盯著終端機上的權限確認框，手指停在 Enter 上方。它要的存取範圍，比我眼前的動作大了一截：我只是要同步幾個顏色和字體，它卻要求碰一個看起來毫不相關的子目錄。

那一秒，如果我只是習慣性按下 Yes，流程也許會繼續往前走；但我不會真的知道，它到底準備動哪裡。所以我停下來，退回去讀它要做什麼。後來證明，這個停頓是對的。

我想藉這個停頓，拆解 Claude Design 這次更新背後更重要的問題：當 AI 工具強到可以把設計系統接進 codebase、甚至開始替你執行一整段工作流程時，人真正不能外包的是什麼？我的答案是把關。而把關，比下指令難多了。

design ↔ code 打通了，這對有 codebase 的人意味什麼？

以前用 AI 做設計，東西通常都夠漂亮，真正的問題是它太像「任何人都可以用的漂亮」。Claude Design 原本可以幫你產 mock、產元件，但它不認得你的網站，也不知道你真正使用哪些顏色、字體、間距與元件邏輯，產出常常帶著一種「通用 AI 設計感」：看起來不差，但不是你。這次更新真正有意思的地方就在這裡：Claude Design 開始能夠透過 Claude Code 接上 codebase，把你的設計現場讀進來。

6/17 這版更新，對我來說關鍵不只是多了一個功能，而是 Claude Design 跟 Claude Code 之間的邊界開始變薄。最重要的改變是設計系統匯入被重做了：現在 Claude Design 不只是聽你描述品牌，而是可以讀進一個 GitHub repo、設計檔或原始資料，拿你的真實設計系統作為生成依據，甚至會自己拿產出去對照、發現不對再修。

對一個有自己 codebase 的人來說，這是一個分水嶺。以前我的網站長什麼樣、用什麼顏色和字體，跟 AI 幫我生出來的設計基本上是兩個世界；現在，我可以用一個指令把這兩個世界接起來。

上面是 Claude Design 現在的樣子。左上角還掛著 Beta，但該有的入口都已經出現了：從檔案開始、做簡報、做產品原型、做線框圖；下面則是你累積的設計專案。我這趟要做的，就是讓清單裡的東西，從一開始就長得像 paulkuo.tw。

順帶一提，它的用量是獨立計量的：有自己每週的額度，跟你 chat、Claude Code 的額度分開算、不在同一池，所以設計上的用量不會回頭吃掉你的對話或 Code 額度。我用的是 Max 方案，這趟同步額度上沒有卡關。

這趟同步的數字不大，但它代表一件事：AI 不再只靠提示詞猜測我的網站風格，而是開始讀取真實的設計規格。

📊 這趟同步的數字

• 同步檔案：10 個
• 內容範圍：品牌 tokens（顏色、字體、間距）
• 驗證結果：validate exit 0（零錯誤）
• 版控收尾：commit + push 三鏡像，fast-forward、零 force
• 未來成本：建立 .design-sync/ 設定檔，之後 re-sync 一個指令即可完成

先分清楚：桌機 app 是門，Claude Code 是引擎，Claude Design 是工作的地方

這裡要先打個岔。很多人一聽到「Claude Design 跟桌機 app 整合了」，會以為這只是一句話的事，其實這個連動有兩層，分開看才不會混在一起。

第一層是入口的連動。桌機 Claude app 的側邊欄現在有 Claude Design 的捷徑，點一下就能直達工作區，不用另外開瀏覽器。這一層只是「進得去」，app 把 Claude Design 收進來，讓它成為一個可以直達的地方。

第二層才是重點：能力的連動。把既有 codebase 餵進去、設計完再接回開發，這種雙向打通的引擎是 Claude Code，不是桌機 app 本身。而且桌機 app 裡有 Chat、Code、Cowork 三個模式：Chat 不能驅動這套同步流程；Cowork 比較像知識工作的第二雙眼睛，適合拿來做獨立驗證，等一下你會看到我就是這樣用它；真正能把設計系統餵進 codebase、再接回開發流程的，是 Claude Code。

一句話：桌機 app 是門，Claude Code 是引擎，Claude Design 是工作的地方。所以接下來你看到的同步，全是 Code 在背後做的，不是 Chat，也不是 Cowork。

流程總覽：五個階段，兩個關鍵決策

我把整趟走過的路畫成一張圖。重點不在步驟多漂亮，而是每一步背後都藏著一個判斷。

整個流程大概是這樣：開一個全新的 Claude Code session、跑 /update 抓最新指令、在 repo 根目錄啟動 /design-sync、逐一判斷權限、用獨立的眼睛驗證，最後乾淨收尾。聽起來像例行公事，但真正花腦力的是兩個決策：第一，要同步到什麼程度；第二，哪些權限可以放行。

為什麼只同步 tokens？因為工具還沒真正吃得下 Astro 元件

design-sync 跑起來後會問你要同步什麼。我選了 tokens-only，也就是只搬品牌的底層規格，不搬完整元件。簡單說，就是先讓 AI 認得我的顏色、字體與間距，而不是急著讓它理解整套 Astro 元件。

這不是保守，而是看清楚工具的邊界。Claude Design 的設計系統匯入是讀你的 codebase 跟設計檔起家的，但我實測 paulkuo.tw 這種 Astro 專案，.astro 元件它目前還吃不進去。硬要它同步元件，得到的很可能是一套半準不準的東西；與其如此，不如只搬最乾淨、最不容易出錯的那一層：顏色、字體、間距。這些是品牌的底色，搬過去之後，AI 之後幫我做任何設計，至少配色和字型是對的。

第二個決策是目標：tokens 要同步到哪裡？它預設想倒進既有的 design system 母體，但我選了「開一個全新專案」。理由很簡單：我不想讓這次專屬於 paulkuo.tw 的 tokens，混進那個以後還可能重複使用的共用設計系統裡。一個動作會不會弄髒一個你以後還要用的東西，這種事工具不會幫你想，得自己判斷。

AI 要你按 Yes 的時候，先問它到底要動哪裡

回到開頭那個權限框。跟 AI agent 協作時，你會一直遇到權限確認，多數人按到後面會麻木，看到框就直接 Yes。這是最危險的習慣。我的做法是把每個確認都當成一次小考，問自己兩件事：它要動什麼？放行範圍有多大？

shell 指令其實也有基本文法。你不用會寫程式，但至少可以先分辨一件事：它只是「讀資料」，還是準備「改檔案」。像 grep、sed 這類通常偏向讀取或處理文字，但看到 > 這種重導向，就要知道它可能會把結果寫進某個檔案。能分辨「看」和「改」，就已經能避開很多不必要的風險。鎖在工具自己沙盒裡的動作大多可以放心，但一碰到你真實的程式碼目錄，或者出現「以後都不問」這種選項，就要把神經拉回來。

那個讓我停手的框就是最好的例子。它一直冒出來，想讓我授權一個 worker 子目錄，但那個地方跟我正在做的 token 同步毫無關係。後來才搞懂，是因為當下的工作目錄剛好在那個子目錄底下，它才把那串路徑當成預設範圍丟出來。放行選項的範圍，跟眼前的動作兜不起來，就是該踩煞車的訊號。 不是它居心不良，而是它的預設邏輯不見得貼著你的意圖走，這時候就得由你來校正。

不要相信印象，要相信現場讀到的檔案

中間有個小插曲，我蠻喜歡的。design-sync 要去找我的品牌 tokens 到底定義在哪裡，我很有把握地以為在 src/ 裡，畢竟原始碼都在那。結果它自己比對了一圈，在 public/styles/ 找到真正的源頭。我記錯了。

這件事反過來很有意思：它沒有因為我語氣篤定就照我說的去 src/ 裡亂抓，而是認真核對，找到對的地方。這跟很多人對 AI 的刻板印象剛好相反：大家常說 AI 會亂編、會討好你，但至少在這一次，它沒有被我的篤定語氣帶偏，而是回到檔案本身核對。

不過這也提醒我另一件事：AI 會核對，不代表它永遠對。它跟人一樣，腦袋裡都有一份「記憶裡的舊版本」，重要的事要當場讀檔查證，不要靠任何一方的印象。這趟我就被自己的記憶騙了一次，幸好流程裡有核對這一關。

說到記憶騙人，還有另一個例子。同步完準備收尾時，我也預設 git push 會觸發線上自動重建，就像很多 CI/CD 那樣；但現場讀了 repo 裡的 CLAUDE.md 才發現，那個自動重建功能早就停用，現在部署走的是另一條路。又一次，現場檔案覆蓋掉我腦中的舊版本。這種被更正的時刻不該抗拒，要欣然接受，它就是「以現場為準」這條原則在替你擋掉一個錯。

別讓 AI 自己驗自己：找獨立的第二雙眼睛

同步完成後，validate 回報 exit 0，十個檔案也都到位了，看起來成了。但「工具說它成功了」跟「它真的對」是兩件事。

我沒有讓執行同步的 Claude Code 自己驗收自己，而是另外開了 Cowork，把它當成一個沒有參與前面流程的第二雙眼睛，拿原始 tokens 源頭跟同步後的產出逐項比對：顏色值有沒有抄錯、有沒有漏掉哪一條。確認無誤後，我才 commit、push 到三個鏡像，對齊乾淨、fast-forward、零 force。

這個動作是整趟最該被記住的紀律：讓執行者自己驗收自己，等於沒驗收。任何要推出去見人的東西，不管是程式、設計還是文章，在送出去之前，都該找一個沒有參與製作的角色重新看一遍。

這也是我長期主張多模型認知協作的原因。重點不在多開幾個視窗湊熱鬧，而在讓不同角色互相質疑、互相校對。人則留在中間，負責定義標準、判斷風險、確認最後的結果。

中途還有一個小烏龍。畫面突然卡住，我一度以為斷線，後來才發現只是誤按 Ctrl+Z，把工具丟到背景暫停而已，打一個 fg 整個流程就回來了。這也再次提醒我：很多恐慌，其實來自於不知道底層正在發生什麼。

工具越強，判斷力越貴

把這趟濃縮成一句話：用 AI 做事，真功夫不在你會不會下指令，而在你看不看得懂它要動什麼、肯不肯當場查證、懂不懂得找人把關。

design-sync 確實很強，一個指令就把我網站的品牌接進了 AI，以後做設計 AI 就能自動 on-brand。但讓這件事「做對」而不只是「做完」的，從頭到尾都是那些沒有寫在指令裡的判斷。這跟我一直在談的品味與判斷力是同一回事：當執行的成本被壓到接近零，剩下的差異全部都在決策的品質。

Claude Design 這次更新，只是開始。接下來會有更多 AI 工具不只幫你生成內容，而是直接接上你的工作現場、讀你的檔案、改你的流程。能一鍵完成的事會越來越多，但正因如此，那個在按下去之前願意停半秒、退回去讀一眼的人，會越來越重要。

下次確認框跳出來時，別急著按 Yes。先問一句：你到底要動哪裡？