[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-claude-design-codebase-aware-system-zh":3,"article-related-claude-design-codebase-aware-system-zh":24,"series-ai-agent-4f83d9b9-d7c4-4ce2-96a0-ee6d52567f9f":77},{"id":4,"slug":5,"title":6,"content":7,"summary":8,"source":9,"source_url":10,"author":11,"image_url":12,"cover_image":12,"category":13,"language":14,"translated_content":10,"related_article_id":15,"keywords":16,"key_takeaways":10,"views":22,"created_at":23,"published_at":23,"topic_cluster_id":10},"4f83d9b9-d7c4-4ce2-96a0-ee6d52567f9f","claude-design-codebase-aware-system-zh","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","ai-agent","zh","c360e670-2cca-4abf-b1ad-421babbfa13c",[17,18,19,20,21],"Claude Design","Anthropic","Opus 4.7","AI 設計工具","Figma",9,"2026-04-19T13:59:21.426881+00:00",{"tags":25,"relatedLang":36,"relatedPosts":40},[26,28,30,32,34],{"name":20,"slug":27},"ai-設計工具",{"name":19,"slug":29},"opus-47",{"name":18,"slug":31},"anthropic",{"name":17,"slug":33},"claude-design",{"name":21,"slug":35},"figma",{"id":15,"slug":37,"title":38,"language":39},"claude-design-codebase-aware-system","The Core Tech Behind Claude Design: Building Design Systems from Your Codebase","en",[41,47,53,59,65,71],{"id":42,"slug":43,"title":44,"cover_image":45,"image_url":45,"created_at":46,"category":13},"83c2f8f6-3710-466e-b52c-473b811f0535","how-to-set-up-openclaw-safely-zh","如何安全架設 OpenClaw","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780549368665-1t2l.png","2026-06-04T05:02:21.26625+00:00",{"id":48,"slug":49,"title":50,"cover_image":51,"image_url":51,"created_at":52,"category":13},"0ba5b1a8-82c5-464a-bea5-9a2c8730da74","aws-devops-agent-turns-incident-chaos-into-triage-zh","AWS DevOps Agent 把事故排查變成三步","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780466689960-g1sv.png","2026-06-03T06:03:14.154923+00:00",{"id":54,"slug":55,"title":56,"cover_image":57,"image_url":57,"created_at":58,"category":13},"841eac88-b0f0-4a4c-9e1e-efc3b5c16281","kimi-k26-live-300-agent-workflows-zh","Kimi K2.6 上線：300 代理工作流","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780430574285-hqpn.png","2026-06-02T20:02:24.972179+00:00",{"id":60,"slug":61,"title":62,"cover_image":63,"image_url":63,"created_at":64,"category":13},"f0411957-bcdb-42d9-a267-3e90ae7d9cb1","how-to-take-a-sabbatical-at-openai-zh","怎麼申請 OpenAI sabbatical","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780398216422-8fi7.png","2026-06-02T11:02:25.74372+00:00",{"id":66,"slug":67,"title":68,"cover_image":69,"image_url":69,"created_at":70,"category":13},"37a5e429-4235-439c-9b05-bb377085462c","8-steps-build-production-rag-with-langchain-zh","8 步驟打造可上線的 LangChain RAG","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780178597493-4hz7.png","2026-05-30T22:02:48.14022+00:00",{"id":72,"slug":73,"title":74,"cover_image":75,"image_url":75,"created_at":76,"category":13},"e73c041b-852b-44c3-85aa-0f1e2e5848e3","ai-agents-hit-chaos-mode-claude-code-openclaw-zh","Claude Code＋OpenClaw 讓 AI 代理失控升溫","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780160576178-yqcs.png","2026-05-30T17:02:25.725767+00:00",[78,83,88,93,98,103,108,113,118,123],{"id":79,"slug":80,"title":81,"created_at":82},"4ae1e197-1d3d-4233-8733-eafe9cb6438b","claude-now-uses-your-pc-to-finish-tasks-zh","Claude 開始幫你操作電腦","2026-03-26T07:20:48.457387+00:00",{"id":84,"slug":85,"title":86,"created_at":87},"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":89,"slug":90,"title":91,"created_at":92},"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":94,"slug":95,"title":96,"created_at":97},"95c9053b-e3f4-4cb5-aace-5c54f4c9e044","claude-code-controls-mac-desktop-zh","Claude Code 也能操控 Mac 了","2026-03-28T03:01:58.58121+00:00",{"id":99,"slug":100,"title":101,"created_at":102},"dc58e153-e3a8-4c06-9b96-1aa64eabbf5f","cloudflare-100x-faster-ai-agent-sandbox-zh","Cloudflare 的 AI 沙箱跑超快","2026-03-28T03:09:44.142236+00:00",{"id":104,"slug":105,"title":106,"created_at":107},"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":109,"slug":110,"title":111,"created_at":112},"7379b422-576e-45df-ad5a-d57a0d9dd467","openai-plan-automated-ai-researcher-zh","OpenAI 想做自動化 AI 研究員","2026-03-28T03:17:42.090548+00:00",{"id":114,"slug":115,"title":116,"created_at":117},"48c9889e-86df-450b-a356-e4a4b7c83c5b","harness-engineering-ai-agent-reliability-2026-zh","駕馭工程：從「馬具」到「作業系統」，AI Agent 可靠性的終極密碼","2026-03-31T06:42:53.556721+00:00",{"id":119,"slug":120,"title":121,"created_at":122},"96d8e8c8-1edd-475d-9145-b1e7a1b02b65","mcp-explained-from-prompts-to-production-zh","MCP 怎麼把提示詞變工作流","2026-04-01T09:24:39.321274+00:00",{"id":124,"slug":125,"title":126,"created_at":127},"f2ca7720-b471-4ce5-9336-2a9ac2a876fd","amazon-bedrock-agents-multi-agent-workflows-zh","Amazon Bedrock Agents 進入多代理工作流","2026-04-01T09:30:29.945429+00:00"]