[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-claude-design-codebase-aware-system-zh":3,"tags-claude-design-codebase-aware-system-zh":28,"related-lang-claude-design-codebase-aware-system-zh":39,"related-posts-claude-design-codebase-aware-system-zh":43,"series-ai-agent-4f83d9b9-d7c4-4ce2-96a0-ee6d52567f9f":80},{"id":4,"title":5,"content":6,"summary":7,"source":8,"source_url":9,"author":10,"image_url":11,"keywords":12,"language":18,"translated_content":9,"views":19,"is_premium":20,"created_at":21,"updated_at":21,"cover_image":11,"published_at":21,"rewrite_status":22,"rewrite_error":9,"rewritten_from_id":9,"slug":23,"category":24,"related_article_id":25,"status":26,"google_indexed_at":27,"x_posted_at":9,"tweet_text":9,"title_rewritten_at":9,"title_original":9,"key_takeaways":9,"topic_cluster_id":9,"embedding":9,"is_canonical_seed":20},"4f83d9b9-d7c4-4ce2-96a0-ee6d52567f9f","Claude Design 最關鍵的技術細節：讀 codebase 建設計系統","\u003Cp>Anthropic Labs 於 4 月 17 日推出 Claude Design，多數媒體報導集中在「對 Figma 的衝擊」。但從開發者和設計工程師的角度，這個產品最有看頭的是一個被低估的功能：onboarding 階段的 \u003Cstrong>codebase-aware design system 建立機制\u003C\u002Fstrong>。\u003C\u002Fp>\n\u003Cp>簡單說，Claude Design 會讀你的 codebase 與 design files，自動提取出顏色、字型、元件定義，組成一套專屬於你團隊的 design system，之後所有在 Claude Design 產出的作品都會自動套用。這個機制代表 AI agent 從「會寫 code」進化到「理解系統」，是一個值得認真看的里程碑。\u003C\u002Fp>\n\u003Ch2>傳統 design system 建構有多痛\u003C\u002Fh2>\n\u003Cp>任何做過 design system 的人都知道這件事多痛：\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1776609018078-9uxl.png\" alt=\"Claude Design 最關鍵的技術細節：讀 codebase 建設計系統\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\n\u003Cul>\n\u003Cli>\u003Cstrong>人工整理 token\u003C\u002Fstrong>：設計師要開會定義 primary color 是 #2563EB 還是 #1D4ED8，工程師要把這個值寫進 CSS、Tailwind config、iOS asset catalog、Android color resource 四個地方\u003C\u002Fli>\n\u003Cli>\u003Cstrong>跨 repo 同步\u003C\u002Fstrong>：行銷官網、App、管理後台各自用不同技術棧，token 同步靠人肉\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Drift 問題\u003C\u002Fstrong>：半年後你會發現設計稿上寫 #2563EB，生產環境實際跑 #2064E8，沒有人知道什麼時候被誰改的\u003C\u002Fli>\n\u003Cli>\u003Cstrong>文件落後\u003C\u002Fstrong>：Storybook 寫的和實際 component 做的可能已經對不起來\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>大公司會花整個 Design System Team 處理這些問題，小公司只能放給它爛。\u003C\u002Fp>\n\u003Ch2>Claude Design 怎麼做\u003C\u002Fh2>\n\u003Cp>根據官方公告，Claude Design 的 onboarding 流程大致是：\u003C\u002Fp>\n\u003Col>\n\u003Cli>\u003Cstrong>連接 codebase\u003C\u002Fstrong>：使用者授權 Claude 讀取 repo\u003C\u002Fli>\n\u003Cli>\u003Cstrong>解析 design files\u003C\u002Fstrong>：掃 Figma、Sketch 或其他設計檔案\u003C\u002Fli>\n\u003Cli>\u003Cstrong>提取 token\u003C\u002Fstrong>：從程式碼（Tailwind config、CSS variables、component library）與設計檔中抽出顏色、字型、間距、圓角、陰影等基礎 token\u003C\u002Fli>\n\u003Cli>\u003Cstrong>建構 component 識別\u003C\u002Fstrong>：辨認常用的 button、card、input 等 component 特徵\u003C\u002Fli>\n\u003Cli>\u003Cstrong>生成可用 design system\u003C\u002Fstrong>：整理成一套 Claude Design 內部可用的系統\u003C\u002Fli>\n\u003Cli>\u003Cstrong>持續更新\u003C\u002Fstrong>：團隊修改後 Claude 可以重新同步\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>這個流程裡最關鍵的是第 3 步和第 4 步。過去 AI 只會做「視覺辨識」或「語法分析」，現在 Claude 需要跨模態：從 CSS 變數名看出「這是 primary color」，從 Figma component 看出「這跟 codebase 裡的 Button.tsx 是同一個東西」。這是 Opus 4.7 高解析度視覺能力加上長上下文推理的組合拳。\u003C\u002Fp>\n\u003Ch2>對 AI agent 的意義\u003C\u002Fh2>\n\u003Cp>這個功能真正重要的地方，不是「做出了好看的設計系統」，而是展示出 AI agent 的能力邊界又往前推了一格。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1776609023266-49bv.png\" alt=\"Claude Design 最關鍵的技術細節：讀 codebase 建設計系統\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\n\u003Cp>過去的 AI agent 分成幾種：會寫程式的（GitHub Copilot）、會處理語義的（文字生成）、會理解圖片的（視覺模型）。\u003Cstrong>Claude Design 第一次把這三件事綁在一起做一個具體任務\u003C\u002Fstrong>：讀程式碼、看設計稿、理解設計師意圖、生成符合系統規範的新作品。\u003C\u002Fp>\n\u003Cp>換句話說，這不是「code + image + text」的簡單加總，而是「system thinking」的 AI 化。Claude 必須理解「為什麼這個 color 叫 primary、那個叫 accent」才能把新作品的顏色用對。這種系統性理解，是 AI agent 從「執行工具」進化到「協作夥伴」的必要能力。\u003C\u002Fp>\n\u003Ch2>給開發者與設計工程師的啟示\u003C\u002Fh2>\n\u003Cp>這個轉變有幾個直接的實務意義：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>你的 token 命名會直接影響 AI 產出品質\u003C\u002Fstrong>：如果你的 CSS 變數叫 \u003Ccode>--color-1\u003C\u002Fcode>、\u003Ccode>--color-2\u003C\u002Fcode>，Claude 沒辦法推測語意；如果叫 \u003Ccode>--color-primary\u003C\u002Fcode>、\u003Ccode>--color-on-surface\u003C\u002Fcode>，就有脈絡可以用\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Design file 的結構也很重要\u003C\u002Fstrong>：Figma 裡有用 variable 和 component 的團隊，Claude 能提取的資訊比純圖層多得多\u003C\u002Fli>\n\u003Cli>\u003Cstrong>文件品質會變成 AI 成果的天花板\u003C\u002Fstrong>：Component README、Storybook story、TypeScript 型別註解，這些過去對人類有價值的文件，現在對 AI 也一樣有價值\u003C\u002Fli>\n\u003Cli>\u003Cstrong>「為 AI 可讀」會變成新的工程品質指標\u003C\u002Fstrong>：就像過去「為測試可寫」成為好程式碼的一個標準\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>這不是要你為了 AI 重寫專案，而是「好的工程實踐本來就對 AI 友善」這件事被放大了。\u003C\u002Fp>\n\u003Ch2>可能的風險與限制\u003C\u002Fh2>\n\u003Cp>這個機制也有值得警惕的地方：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Drift 風險\u003C\u002Fstrong>：Claude 讀了一次 codebase 後，如果 token 後來被改，AI 用的還是舊的。需要搞清楚同步機制\u003C\u002Fli>\n\u003Cli>\u003Cstrong>私有 codebase 資安\u003C\u002Fstrong>：把整個 repo 給 Claude 讀，涉及機密邏輯和未發表功能的洩漏風險。官方有說明資料處理政策，但企業部署前要仔細看\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Monorepo 複雜度\u003C\u002Fstrong>：大型 monorepo 內可能有多套風格不同的 design system，Claude 要選哪一套？目前不清楚\u003C\u002Fli>\n\u003Cli>\u003Cstrong>品質依賴來源\u003C\u002Fstrong>：如果你的 codebase 裡 token 命名本來就亂，Claude 建出的系統只會一樣亂\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>換句話說，Claude Design 的 design system 功能效果好壞，很大程度取決於\u003Cstrong>你自己的工程品質\u003C\u002Fstrong>。\u003C\u002Fp>\n\u003Ch2>結語\u003C\u002Fh2>\n\u003Cp>Claude Design 的 codebase-aware 機制可能是這次發布最被低估的部分。它不只是一個功能，而是 AI agent 進化路線上的一個明確信號：下一代工具不只會執行任務，會理解你的系統。對開發者和設計工程師來說，這件事的意義比「多一個 AI 畫圖工具」大得多。\u003C\u002Fp>\n\u003Ch2>延伸閱讀\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"\u002Fnews\u002Fclaude-design-anthropic-launch\">Claude Design 上線：Anthropic 推 AI 設計工具挑戰 Figma\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"\u002Fnews\u002Fclaude-design-vs-figma-canva\">Figma 股價當日下跌：Claude Design 如何改寫設計工具戰場\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"\u002Fnews\u002Fclaude-design-features-guide\">Claude Design 功能完整解析：從對話到 slide 只要一句話\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n","Claude Design 最被低估的功能是它在 onboarding 時會讀取團隊的 codebase 與 design files，自動建出包含顏色、字型、元件的 design system，之後每個專案都自動套用。對開發者來說，這是 AI agent 從「會寫 code」進化到「理解 design tokens 與系統」的一大步。本文拆解這個機制對 AI agent 與設計工程的意義。","OraCore Original",null,"OraCore","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1776609018078-9uxl.png",[13,14,15,16,17],"Claude Design","Anthropic","Opus 4.7","AI 設計工具","Figma","zh",1,false,"2026-04-19T13:59:21.426881+00:00","done","claude-design-codebase-aware-system-zh","ai-agent","c360e670-2cca-4abf-b1ad-421babbfa13c","published","2026-04-20T09:00:12.707+00:00",[29,31,33,35,37],{"name":16,"slug":30},"ai-設計工具",{"name":15,"slug":32},"opus-47",{"name":14,"slug":34},"anthropic",{"name":13,"slug":36},"claude-design",{"name":17,"slug":38},"figma",{"id":25,"slug":40,"title":41,"language":42},"claude-design-codebase-aware-system","The Core Tech Behind Claude Design: Building Design Systems from Your Codebase","en",[44,50,56,62,68,74],{"id":45,"slug":46,"title":47,"cover_image":48,"image_url":48,"created_at":49,"category":24},"e7874ed9-592f-4e06-b7b7-ab733fe779db","claude-agent-dreaming-outcomes-multiagent-zh","Claude 幫 Agent 加了做夢功能","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1778868642412-7woy.png","2026-05-15T18:10:24.427608+00:00",{"id":51,"slug":52,"title":53,"cover_image":54,"image_url":54,"created_at":55,"category":24},"38406a12-f833-4c69-ae22-99c31f03dd52","switch-ai-outputs-markdown-to-html-zh","怎麼把 AI 輸出改成 HTML","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1778743243861-8901.png","2026-05-14T07:20:21.545364+00:00",{"id":57,"slug":58,"title":59,"cover_image":60,"image_url":60,"created_at":61,"category":24},"c7c69fe4-97e3-4edf-a9d6-a79d0c4495b4","anthropic-cat-wu-proactive-ai-assistants-zh","Cat Wu 談 Claude 的主動式 AI","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1778735455993-gnw7.png","2026-05-14T05:10:30.453046+00:00",{"id":63,"slug":64,"title":65,"cover_image":66,"image_url":66,"created_at":67,"category":24},"e1d6acda-fa49-4514-aa75-709504be9f93","how-to-run-hermes-agent-on-discord-zh","如何在 Discord 執行 Hermes Agent","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1778724655796-cjul.png","2026-05-14T02:10:34.362605+00:00",{"id":69,"slug":70,"title":71,"cover_image":72,"image_url":72,"created_at":73,"category":24},"4104fa5f-d95f-45c5-9032-99416cf0365c","why-ragflow-is-the-right-open-source-rag-engine-to-self-host-zh","為什麼 RAGFlow 是最適合自架的開源 RAG 引擎","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1778674262278-1630.png","2026-05-13T12:10:23.762632+00:00",{"id":75,"slug":76,"title":77,"cover_image":78,"image_url":78,"created_at":79,"category":24},"7095f05c-34f5-469f-a044-2525d2010ce9","how-to-add-temporal-rag-in-production-zh","如何在正式環境加入 Temporal RAG","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1778667053844-osvs.png","2026-05-13T10:10:30.930982+00:00",[81,86,91,96,101,106,111,116,121,126],{"id":82,"slug":83,"title":84,"created_at":85},"4ae1e197-1d3d-4233-8733-eafe9cb6438b","claude-now-uses-your-pc-to-finish-tasks-zh","Claude 開始幫你操作電腦","2026-03-26T07:20:48.457387+00:00",{"id":87,"slug":88,"title":89,"created_at":90},"5bede67f-e21c-413d-9ab8-54a3c3d26227","googles-2026-ai-agent-report-decoded-zh","Google 2026 AI Agent 報告解讀","2026-03-26T11:15:22.651956+00:00",{"id":92,"slug":93,"title":94,"created_at":95},"2987d097-563f-46c7-b76f-b558d8ef7c2b","kimi-k25-review-stronger-still-not-legend-zh","Kimi K2.5 評測：更強，但還不是神作","2026-03-27T07:15:55.277513+00:00",{"id":97,"slug":98,"title":99,"created_at":100},"95c9053b-e3f4-4cb5-aace-5c54f4c9e044","claude-code-controls-mac-desktop-zh","Claude Code 也能操控 Mac 了","2026-03-28T03:01:58.58121+00:00",{"id":102,"slug":103,"title":104,"created_at":105},"dc58e153-e3a8-4c06-9b96-1aa64eabbf5f","cloudflare-100x-faster-ai-agent-sandbox-zh","Cloudflare 的 AI 沙箱跑超快","2026-03-28T03:09:44.142236+00:00",{"id":107,"slug":108,"title":109,"created_at":110},"1c8afc56-253f-47a2-979f-1065ff072f2a","openai-backs-isara-agent-swarm-bet-zh","OpenAI 挺 Isara 的 agent swarm …","2026-03-28T03:15:27.513155+00:00",{"id":112,"slug":113,"title":114,"created_at":115},"7379b422-576e-45df-ad5a-d57a0d9dd467","openai-plan-automated-ai-researcher-zh","OpenAI 想做自動化 AI 研究員","2026-03-28T03:17:42.090548+00:00",{"id":117,"slug":118,"title":119,"created_at":120},"48c9889e-86df-450b-a356-e4a4b7c83c5b","harness-engineering-ai-agent-reliability-2026-zh","駕馭工程：從「馬具」到「作業系統」，AI Agent 可靠性的終極密碼","2026-03-31T06:42:53.556721+00:00",{"id":122,"slug":123,"title":124,"created_at":125},"e41546b8-ba9e-455f-9159-88d4614ad711","openai-codex-plugin-claude-code-zh","OpenAI 把 Codex 放進 Claude Code","2026-04-01T09:21:54.687617+00:00",{"id":127,"slug":128,"title":129,"created_at":130},"96d8e8c8-1edd-475d-9145-b1e7a1b02b65","mcp-explained-from-prompts-to-production-zh","MCP 怎麼把提示詞變工作流","2026-04-01T09:24:39.321274+00:00"]