[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-claude-design-codebase-aware-system-zh":3,"tags-claude-design-codebase-aware-system-zh":27,"related-lang-claude-design-codebase-aware-system-zh":28,"related-posts-claude-design-codebase-aware-system-zh":32,"series-ai-agent-4f83d9b9-d7c4-4ce2-96a0-ee6d52567f9f":51},{"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":9,"x_posted_at":9},"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",0,false,"2026-04-19T13:59:21.426881+00:00","done","claude-design-codebase-aware-system-zh","ai-agent","c360e670-2cca-4abf-b1ad-421babbfa13c","published",[],{"id":25,"slug":29,"title":30,"language":31},"claude-design-codebase-aware-system","The Core Tech Behind Claude Design: Building Design Systems from Your Codebase","en",[33,39,45],{"id":34,"slug":35,"title":36,"cover_image":37,"image_url":37,"created_at":38,"category":24},"b3e4d4ed-a225-456c-8550-8d26c26ce5e5","openai-agents-sdk-safer-enterprise-controls-zh","OpenAI Agents SDK 加強企業控管","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1776513829857-0otz.png","2026-04-18T12:03:31.394038+00:00",{"id":40,"slug":41,"title":42,"cover_image":43,"image_url":43,"created_at":44,"category":24},"c7f4b560-6d6e-4e7f-9124-93c43a5985ab","neubird-ai-falcon-production-ops-launch-zh","NeuBird AI 推出 Falcon，主打自動維運","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1776038833498-gyrk.png","2026-04-13T00:06:40.141753+00:00",{"id":46,"slug":47,"title":48,"cover_image":49,"image_url":49,"created_at":50,"category":24},"a0793170-f21f-4450-9d77-43cc7e43b192","anthropic-managed-agents-enterprise-ai-work-zh","Anthropic 推出 Managed Agents 攻…","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1775779802303-ko9l.png","2026-04-10T00:09:40.716623+00:00",[52,57,62,67,72,77,82,87,92,97],{"id":53,"slug":54,"title":55,"created_at":56},"4ae1e197-1d3d-4233-8733-eafe9cb6438b","claude-now-uses-your-pc-to-finish-tasks-zh","Claude 開始幫你操作電腦","2026-03-26T07:20:48.457387+00:00",{"id":58,"slug":59,"title":60,"created_at":61},"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":63,"slug":64,"title":65,"created_at":66},"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":68,"slug":69,"title":70,"created_at":71},"95c9053b-e3f4-4cb5-aace-5c54f4c9e044","claude-code-controls-mac-desktop-zh","Claude Code 也能操控 Mac 了","2026-03-28T03:01:58.58121+00:00",{"id":73,"slug":74,"title":75,"created_at":76},"dc58e153-e3a8-4c06-9b96-1aa64eabbf5f","cloudflare-100x-faster-ai-agent-sandbox-zh","Cloudflare 的 AI 沙箱跑超快","2026-03-28T03:09:44.142236+00:00",{"id":78,"slug":79,"title":80,"created_at":81},"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":83,"slug":84,"title":85,"created_at":86},"7379b422-576e-45df-ad5a-d57a0d9dd467","openai-plan-automated-ai-researcher-zh","OpenAI 想做自動化 AI 研究員","2026-03-28T03:17:42.090548+00:00",{"id":88,"slug":89,"title":90,"created_at":91},"48c9889e-86df-450b-a356-e4a4b7c83c5b","harness-engineering-ai-agent-reliability-2026-zh","駕馭工程：從「馬具」到「作業系統」，AI Agent 可靠性的終極密碼","2026-03-31T06:42:53.556721+00:00",{"id":93,"slug":94,"title":95,"created_at":96},"e41546b8-ba9e-455f-9159-88d4614ad711","openai-codex-plugin-claude-code-zh","OpenAI 把 Codex 放進 Claude Code","2026-04-01T09:21:54.687617+00:00",{"id":98,"slug":99,"title":100,"created_at":101},"96d8e8c8-1edd-475d-9145-b1e7a1b02b65","mcp-explained-from-prompts-to-production-zh","MCP 怎麼把提示詞變工作流","2026-04-01T09:24:39.321274+00:00"]