# Claude Design 更新後，我用一個指令把網站設計系統餵進 AI：難的不是下指令，是看懂它要動哪裡 > Claude Design 在 6/17 推出更新、跟 Claude Code 深度整合，設計工具開始能讀 codebase、同步真實設計系統。我用 design-sync 把 paulkuo.tw 的設計系統餵進 AI，這篇拆解的不是操作，而是 AI agent 越能動手、人越要顧好的三件事：權限把關、以現場為準、獨立驗證。10 個檔案、validate exit 0、零 force 收尾。 - Author: Paul Kuo（郭曜郎） - Date: 2026-06-18 - Pillar: 智能與秩序 / Intelligence & Order - Tags: Claude Design, design-sync, AI agent 協作, 設計系統, 權限把關, 超級個體, 人機協作 - Canonical: https://paulkuo.tw/articles/claude-design-sync-codebase/ - Site index for LLMs: https://paulkuo.tw/llms.txt --- > **TL;DR** — Claude Design 在 6/17 推出更新後，跟 Claude Code 的整合變得更深。這代表它不再只是憑提示詞生成漂亮畫面，而是可以透過 `design-sync` 讀進網站真實的設計系統，讓後續產出的設計更接近原本的品牌語言。 > > 我這次把 paulkuo.tw 的品牌 tokens 接進 Claude Design：同步 10 個檔案、validate exit 0、零 force 收尾。但真正值得記下來的，是過程中每一個需要人判斷的瞬間：權限能不能放行、AI 讀到的檔案是否正確、我自己的記憶是否已經過時、最後需不需要另一雙眼睛來驗證。 > > 工具越強，人的判斷力就越值錢。
▶ 聽摘要
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](https://claude.com/blog/claude-design-stays-on-brand-for-daily-work) 之間的邊界開始變薄。最重要的改變是設計系統匯入被重做了：現在 Claude Design 不只是聽你描述品牌，而是可以讀進一個 GitHub repo、設計檔或原始資料，拿你的真實設計系統作為生成依據，甚至會自己拿產出去對照、發現不對再修。 對一個有自己 codebase 的人來說，這是一個分水嶺。以前我的網站長什麼樣、用什麼顏色和字體，跟 AI 幫我生出來的設計基本上是兩個世界；現在，我可以用一個指令把這兩個世界接起來。 ![Claude Design 的 designs 列表畫面，列出 Design System、Paul_Ai Capibility 等多個設計專案](/images/articles/claude-design-designs-list-anon.png) 上面是 Claude Design 現在的樣子。左上角還掛著 Beta，但該有的入口都已經出現了：從檔案開始、做簡報、做產品原型、做線框圖；下面則是你累積的設計專案。我這趟要做的，就是讓清單裡的東西，從一開始就長得像 paulkuo.tw。 順帶一提，它的[用量是獨立計量的](https://support.claude.com/en/articles/14667344-claude-design-subscription-usage-and-pricing)：有自己每週的額度，跟你 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。 | 角色 | 它負責什麼 | |---|---| | 桌機 Claude app | Claude Design 的入口，負責讓你直達工作區 | | Claude Code | 真正驅動「餵 codebase ↔ 接回開發」的引擎 | | Claude Design | 生成設計、製作原型的工作區 | 一句話：桌機 app 是門，Claude Code 是引擎，Claude Design 是工作的地方。所以接下來你看到的同步，全是 Code 在背後做的，不是 Chat，也不是 Cowork。 ## 流程總覽：五個階段，兩個關鍵決策 我把整趟走過的路畫成一張圖。重點不在步驟多漂亮，而是每一步背後都藏著一個判斷。 ![把 codebase 的設計系統接進 Claude Design 的實戰流程：五階段加兩個關鍵決策，底部三條把關心法](/images/articles/claude-design-sync-flow.svg) 整個流程大概是這樣：開一個全新的 Claude Code session、跑 `/update` 抓最新指令、在 repo 根目錄啟動 `/design-sync`、逐一判斷權限、用獨立的眼睛驗證，最後乾淨收尾。聽起來像例行公事，但真正花腦力的是兩個決策：第一，要同步到什麼程度；第二，哪些權限可以放行。 ## 為什麼只同步 tokens？因為工具還沒真正吃得下 Astro 元件 `design-sync` 跑起來後會問你要同步什麼。我選了 tokens-only，也就是只搬品牌的底層規格，不搬完整元件。簡單說，就是先讓 AI 認得我的顏色、字體與間距，而不是急著讓它理解整套 Astro 元件。 這不是保守，而是看清楚工具的邊界。Claude Design 的設計系統匯入是讀你的 [codebase 跟設計檔](https://www.anthropic.com/news/claude-design-anthropic-labs)起家的，但我實測 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。 這個動作是整趟最該被記住的紀律：讓執行者自己驗收自己，等於沒驗收。任何要推出去見人的東西，不管是程式、設計還是文章，在送出去之前，都該找一個沒有參與製作的角色重新看一遍。 這也是我長期主張[多模型認知協作](/articles/multi-model-collab-website-rebuild/)的原因。重點不在多開幾個視窗湊熱鬧，而在讓不同角色互相質疑、互相校對。人則留在中間，負責定義標準、判斷風險、確認最後的結果。 中途還有一個小烏龍。畫面突然卡住，我一度以為斷線，後來才發現只是誤按 `Ctrl+Z`，把工具丟到背景暫停而已，打一個 `fg` 整個流程就回來了。這也再次提醒我：很多恐慌，其實來自於不知道底層正在發生什麼。 ## 工具越強，判斷力越貴 把這趟濃縮成一句話：用 AI 做事，真功夫不在你會不會下指令，而在你看不看得懂它要動什麼、肯不肯當場查證、懂不懂得找人把關。 design-sync 確實很強，一個指令就把我網站的品牌接進了 AI，以後做設計 AI 就能自動 on-brand。但讓這件事「做對」而不只是「做完」的，從頭到尾都是那些沒有寫在指令裡的判斷。這跟我一直在談的[品味與判斷力](/articles/post-code-era-taste/)是同一回事：當執行的成本被壓到接近零，剩下的差異全部都在決策的品質。 Claude Design 這次更新，只是開始。接下來會有更多 AI 工具不只幫你生成內容，而是直接接上你的工作現場、讀你的檔案、改你的流程。能一鍵完成的事會越來越多，但正因如此，那個在按下去之前願意停半秒、退回去讀一眼的人，會越來越重要。 下次確認框跳出來時，別急著按 Yes。先問一句：你到底要動哪裡？