[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-designmd-agent-ready-ui-specs-zh":3,"article-related-designmd-agent-ready-ui-specs-zh":35,"series-industry-35538382-b124-4903-94cc-ccfdee792f8b":78},{"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":11,"related_article_id":15,"keywords":16,"key_takeaways":27,"views":31,"created_at":32,"published_at":33,"topic_cluster_id":34},"35538382-b124-4903-94cc-ccfdee792f8b","designmd-agent-ready-ui-specs-zh","design.md 把品牌 token 變成可執行 UI 規格","\u003Cp data-speakable=\"summary\">design.md 把品牌 \u003Ca href=\"\u002Ftag\u002Ftoken\">token\u003C\u002Fa>、設計意圖和檢查規則放進同一份檔案，讓 coding \u003Ca href=\"\u002Ftag\u002Fagent\">agent\u003C\u002Fa> 能直接讀、驗、比、匯出。\u003C\u002Fp>\u003Cp>讀完這 5 項，你可以判斷 design.md 是否適合當作團隊的設計\u003Ca href=\"\u002Fnews\u002Fclaude-design-assets-to-design-system-zh\">系統\u003C\u002Fa>單一來源，並決定要先用 lint、diff，還是 export 進入工作流。\u003C\u002Fp>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>項目\u003C\u002Fth>\u003Cth>用途\u003C\u002Fth>\u003Cth>重點\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>design.md 格式\u003C\u002Ftd>\u003Ctd>保存 token 與說明\u003C\u002Ftd>\u003Ctd>YAML front matter + Markdown\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>lint\u003C\u002Ftd>\u003Ctd>檢查結構與對比\u003C\u002Ftd>\u003Ctd>錯誤時回傳 exit code 1\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>diff\u003C\u002Ftd>\u003Ctd>比較兩版設計\u003C\u002Ftd>\u003Ctd>標示 token 級回歸\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>export\u003C\u002Ftd>\u003Ctd>輸出到其他系統\u003C\u002Ftd>\u003Ctd>可轉 Tailwind、CSS、DTCG\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Windows CLI\u003C\u002Ftd>\u003Ctd>避免執行衝突\u003C\u002Ftd>\u003Ctd>建議用 designmd alias\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Ch2>1. design.md 檔案格式\u003C\u002Fh2>\u003Cp>design.md 的核心不是單一命令，而是一種把設計系統寫成檔案的方式。它把可機器讀取的 token 和可供人閱讀的設計說明放在一起，讓 agent 不必猜測品牌規則。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781947068866-7u40.png\" alt=\"design.md 把品牌 token 變成可執行 UI 規格\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>這種結構適合把顏色、字體、圓角、間距與元件語意一起保存，因為 token 是可執行的，文字則負責交代意圖。\u003C\u002Fp>\u003Cul>\u003Cli>YAML front matter 放精確 token\u003C\u002Fli>\u003Cli>Markdown 章節寫 Overview、Colors、Typography、Components\u003C\u002Fli>\u003Cli>可包含 \u003Ccode>{colors.primary}\u003C\u002Fcode>、\u003Ccode>{rounded.sm}\u003C\u002Fcode> 這類引用\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>2. lint 檢查\u003C\u002Fh2>\u003Cp>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fgoogle-labs-code\u002Fdesign.md\">design.md\u003C\u002Fa> 的 lint 會檢查檔案結構、token 是否能解析，以及對比是否符合 WCAG。對 agent 來說，這比讀一段自然語言規範可靠得多，因為結果是結構化 JSON。\u003C\u002Fp>\u003Cp>它也能直接看出哪個元件在深色背景上對比不足，並在有錯誤時回傳 exit \u003Ca href=\"\u002Fnews\u002Fvs-code-turns-folder-into-workspace-zh\">code\u003C\u002Fa> 1，方便接到 CI 或腳本。\u003C\u002Fp>\u003Ccode>npx @google\u002Fdesign.md lint DESIGN.md\ncat DESIGN.md | npx @google\u002Fdesign.md lint -\u003C\u002Fcode>\u003Cul>\u003Cli>輸出可供腳本處理的 JSON\u003C\u002Fli>\u003Cli>支援 stdin\u003C\u002Fli>\u003Cli>可標出 errors、warnings、info\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>3. diff 比對版本\u003C\u002Fh2>\u003Cp>如果團隊常改品牌系統，diff 會是最實用的保護網。它比較兩份 DESIGN.md，列出新增、刪除與修改的 token，還會告訴你新版是否在錯誤或警告上退步。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781947073677-lkiv.png\" alt=\"design.md 把品牌 token 變成可執行 UI 規格\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>這讓設計審查不只看視覺，也能看規格有沒有被悄悄改壞。像是顏色從 tertiary 改成 accent，這種變動會被清楚攔下。\u003C\u002Fp>\u003Cul>\u003Cli>輸入是 before \u002F after 兩份檔案\u003C\u002Fli>\u003Cli>輸出是 token 層級變更報告\u003C\u002Fli>\u003Cli>可標示 regression true\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>4. export 匯出到別的系統\u003C\u002Fh2>\u003Cp>design.md 的另一個價值，是把同一份來源轉成不同前端格式。export 可以輸出 Tailwind v3 的 theme.extend、Tailwind v4 的 CSS theme block，或 DTCG 相容 JSON。\u003C\u002Fp>\u003Cp>這表示設計 token 可以維持單一真源，不必每個框架手動重寫一次。對需要跨專案維護品牌一致性的團隊，這比複製貼上可靠得多。\u003C\u002Fp>\u003Ccode>npx @google\u002Fdesign.md export --format json-tailwind DESIGN.md\nnpx @google\u002Fdesign.md export --format css-tailwind DESIGN.md\nnpx @google\u002Fdesign.md export --format dtcg DESIGN.md\u003C\u002Fcode>\u003Ch2>5. Windows 與腳本細節\u003C\u002Fh2>\u003Cp>這個專案也處理了命令列的實務問題。在 Windows 上，直接叫 \u003Ccode>design.md\u003C\u002Fcode> 可能和 Markdown 檔案關聯衝突，所以文件建議在 package.json script 裡用 \u003Ccode>designmd\u003C\u002Fcode> alias。\u003C\u002Fp>\u003Cp>這種小細節很重要，因為自動化最怕不是功能不夠，而是執行環境卡住。若安裝失敗，文件也提醒先檢查 \u003Ca href=\"\u002Ftag\u002Fnpm\">npm\u003C\u002Fa> registry \u003Ca href=\"\u002Fnews\u002Fset-up-memetoro-ai-crypto-presale-screening-zh\">設定\u003C\u002Fa>。\u003C\u002Fp>\u003Cul>\u003Cli>腳本中可用 \u003Ccode>designmd lint DESIGN.md\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>安裝異常時檢查 \u003Ccode>npm config get registry\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>套件名稱是 \u003Ccode>@google\u002Fdesign.md\u003C\u002Fcode>\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>哪種適合你\u003C\u002Fh2>\u003Cp>如果你要的是一份能讓 agent 長期記住設計規則、又能被 CI 驗證的規格，design.md 很適合。它特別適合已經在管 token、對比與版本回歸的團隊。\u003C\u002Fp>\u003Cp>如果你只是想寫一份靜態 style guide，這套系統可能偏重；但如果你需要把品牌意圖接到實作流程，先從檔案格式和 lint 開始最穩。\u003C\u002Fp>","4 個重點看 design.md 如何讓 coding agent 長期記住設計系統，並檢查 token、對比與回歸。","github.com","https:\u002F\u002Fgithub.com\u002Fgoogle-labs-code\u002Fdesign.md",null,"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781947068866-7u40.png","industry","zh","7f9867eb-30df-48d7-9ca0-a38c2fc75394",[17,18,19,20,21,22,23,24,25,26],"design.md","design tokens","coding agents","UI specs","lint","diff","export","Tailwind","DTCG","WCAG",[28,29,30],"design.md 把 token 與設計意圖合併成 agent 可讀的單一檔案。","lint 和 diff 讓團隊能檢查對比、回歸與規格偏差。","export 可把同一份來源轉成 Tailwind、CSS 與 DTCG。",0,"2026-06-20T09:17:20.204707+00:00","2026-06-20T09:17:20.181+00:00","fe20f6f6-432b-47bf-a410-a5f516d885ed",{"tags":36,"relatedLang":37,"relatedPosts":41},[],{"id":15,"slug":38,"title":39,"language":40},"designmd-agent-ready-ui-specs-en","design.md turns brand tokens into agent-ready UI specs","en",[42,48,54,60,66,72],{"id":43,"slug":44,"title":45,"cover_image":46,"image_url":46,"created_at":47,"category":13},"4a0eec7c-3964-49d6-9605-de8f69fe633a","wso2-600m-sale-open-source-enterprise-software-zh","WSO2 600M 美元賣身案","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781951574834-hfa2.png","2026-06-20T10:32:30.542398+00:00",{"id":49,"slug":50,"title":51,"cover_image":52,"image_url":52,"created_at":53,"category":13},"778c1685-052f-45ce-91e0-e505f6fb2d5b","google-ax-resumable-agent-runtime-zh","Google AX 把代理執行變成可恢復工作","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781950665233-yr36.png","2026-06-20T10:17:16.442913+00:00",{"id":55,"slug":56,"title":57,"cover_image":58,"image_url":58,"created_at":59,"category":13},"ff19d422-4694-464f-8184-fff9bfba954a","claude-vs-gpt-vs-gemini-cheng-shi-ma-ji-zhun-dui-jue-zh","Claude vs GPT vs Gemini：程式碼基準對決","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781939879962-8wf9.png","2026-06-20T07:17:34.904794+00:00",{"id":61,"slug":62,"title":63,"cover_image":64,"image_url":64,"created_at":65,"category":13},"ba974156-c051-482e-a173-682115e06871","clip-converter-rivals-faster-safer-2026-zh","4 款 Clip Converter 替代品，格式更廣也更安全","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781935361809-s27m.png","2026-06-20T06:02:18.601585+00:00",{"id":67,"slug":68,"title":69,"cover_image":70,"image_url":70,"created_at":71,"category":13},"487c9b6d-f5b0-4af9-b51d-e768c7b74b08","openai-sora-shutdown-unit-economics-zh","OpenAI 的 Sora 停止服務證明：AI 不是贏在聲量，而是算得過單位經濟","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781933566229-4oaw.png","2026-06-20T05:32:17.291619+00:00",{"id":73,"slug":74,"title":75,"cover_image":76,"image_url":76,"created_at":77,"category":13},"3f6c0c0f-4d9f-4222-96df-307ea939e4cd","anthropics-model-shutdown-safety-can-bite-back-zh","Anthropic 模型下架：安全警告反噬了自己","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781932661694-7w2n.png","2026-06-20T05:17:21.729285+00:00",[79,84,89,94,99,104,109,114,119,124],{"id":80,"slug":81,"title":82,"created_at":83},"ee073da7-28b3-4752-a319-5a501459fb87","ai-in-2026-what-actually-matters-now-zh","2026 AI 真正重要的事","2026-03-26T07:09:12.008134+00:00",{"id":85,"slug":86,"title":87,"created_at":88},"83bd1795-8548-44c9-9a7e-de50a0923f71","trump-ai-framework-power-speech-state-preemption-zh","川普 AI 框架瞄準電力、言論與州權","2026-03-26T07:12:18.695466+00:00",{"id":90,"slug":91,"title":92,"created_at":93},"ea6be18b-c903-4e54-97b7-5f7447a612e0","nvidia-gtc-2026-big-ai-announcements-zh","NVIDIA GTC 2026 重點拆解","2026-03-26T07:14:26.62638+00:00",{"id":95,"slug":96,"title":97,"created_at":98},"4bcec76f-4c36-4daa-909f-54cd702f7c93","claude-users-spreading-out-and-getting-better-zh","Claude 用戶更分散，也更會用","2026-03-26T07:22:52.325888+00:00",{"id":100,"slug":101,"title":102,"created_at":103},"bd903b15-2473-4178-9789-b7557816e535","openclaw-raises-hard-question-for-ai-models-zh","OpenClaw 逼問 AI 模型價值","2026-03-26T07:24:54.707486+00:00",{"id":105,"slug":106,"title":107,"created_at":108},"eeac6b9e-ad9d-4831-8eec-8bba3f9bca6a","gap-google-gemini-checkout-fashion-search-zh","Gap 把結帳搬進 Gemini","2026-03-26T07:28:23.937768+00:00",{"id":110,"slug":111,"title":112,"created_at":113},"0740e53f-605d-4d57-8601-c10beb126f3c","google-pushes-gemini-transition-to-march-2026-zh","Google 把 Gemini 轉換延到 2026 年 3…","2026-03-26T07:30:12.825269+00:00",{"id":115,"slug":116,"title":117,"created_at":118},"e660d801-2421-4529-8fa9-86b82b066990","metas-llama-4-benchmark-scandal-gets-worse-zh","Meta Llama 4 分數風波又擴大","2026-03-26T07:34:21.156421+00:00",{"id":120,"slug":121,"title":122,"created_at":123},"183f9e7c-e143-40bb-a6d5-67ba84a3a8bc","accenture-mistral-ai-sovereign-enterprise-deal-zh","Accenture 攜手 Mistral AI 賣主權 AI","2026-03-26T07:38:14.818906+00:00",{"id":125,"slug":126,"title":127,"created_at":128},"191d9b1b-768a-478c-978c-dd7431a38149","mistral-ai-faces-its-hardest-year-yet-zh","Mistral AI 迎來最硬的一年","2026-03-26T07:40:23.716374+00:00"]