[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-design-md-bridge-taste-to-ui-scaffolds-zh":3,"article-related-design-md-bridge-taste-to-ui-scaffolds-zh":30,"series-ai-agent-362a448e-b40e-437c-9529-94b0fd6a7689":75},{"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":22,"views":26,"created_at":27,"published_at":28,"topic_cluster_id":29},"362a448e-b40e-437c-9529-94b0fd6a7689","design-md-bridge-taste-to-ui-scaffolds-zh","DESIGN.md 是把品味變成 UI 骨架的缺失橋樑","\u003Cp data-speakable=\"summary\">DESIGN.md 是把視覺品味變成可執行 UI 骨架的來源檔。\u003C\u002Fp>\u003Cp>我支持 DESIGN.md，因為它把原本只能靠感覺傳達的設計偏好，變成 AI 可以反覆遵守的規格。像 VoltAgent 的 awesome-\u003Ca href=\"\u002Ftag\u002Fclaude\">claude\u003C\u002Fa>-design 這類專案，已經證明一份 markdown 不只是說明文件，而是能把參考風格轉成可交付的 UI 骨架、色彩與元件規則。\u003C\u002Fp>\u003Ch2>第一個論點\u003C\u002Fh2>\u003Cp>純 prompt 式設計最大的問題，是第二個畫面開始就容易走樣。第一個 landing page 也許還像樣，但一旦再生成一個設定頁或列表頁，間距、字級、色彩就會漂移，因為\u003Ca href=\"\u002Fnews\u002Fworld-action-models-robotics-second-bet-zh\">模型\u003C\u002Fa>沒有持續存在的視覺契約。DESIGN.md 的價值就在於把規則留在檔案裡，讓每次生成都能回到\u003Ca href=\"\u002Fnews\u002Fai-web3-equal-rules-not-special-gates-zh\">同一套\u003C\u002Fa>準則。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782586072806-w93e.png\" alt=\"DESIGN.md 是把品味變成 UI 骨架的缺失橋樑\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>這不是抽象理論，而是工作流差異。該專案主張一份 markdown 可以展開成 README.md、colors_and_type.css、preview cards 與可運作的 UI kit，等於把設計輸入從「一句話」升級成「可追蹤的系統」。對團隊來說，這代表一致性不再靠記憶，而是靠版本化的規格維持。\u003C\u002Fp>\u003Ch2>第二個論點\u003C\u002Fh2>\u003Cp>DESIGN.md 最重要的地方，是它把品味變成可重用資產。多數團隊其實知道自己要什麼風格，缺的不是靈感，而是能被\u003Ca href=\"\u002Fnews\u002Fai-payment-bots-strict-limits-web3-zh\">代理\u003C\u002Fa>模型理解的表達格式。把 tokens、規則與設計理由放進同一份檔案，等於讓「為什麼這樣設計」跟著「設計本身」一起流動。\u003C\u002Fp>\u003Cp>這件事在實際案例裡很清楚。像 Claude 的溫暖編輯感、Linear 的極簡精準、Stripe 的紫色漸層、Spotify 的深色張力，都不是隨機 mood board，而是能直接對應產品意圖的起點。對創辦人或 PM 來說，這種格式可以先鎖定品牌方向，再開始做元件，避免團隊在尚未對齊時就大規模產出。\u003C\u002Fp>\u003Ch2>反方可能怎麼說\u003C\u002Fh2>\u003Cp>最強的反對意見是：設計本來就有脈絡，不可能被一份 markdown 完整描述。法務限制、無障礙要求、受眾信任、地區文化，這些都不是 \u003Ca href=\"\u002Ftag\u002Ftoken\">token\u003C\u002Fa> 表能完全捕捉的。若把 DESIGN.md 當成萬能答案，確實會低估真正的設計判斷。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782586068617-vddq.png\" alt=\"DESIGN.md 是把品味變成 UI 骨架的缺失橋樑\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>另一個合理疑慮是審美同質化。當大家都拿現成參考集去生成 UI，最後可能得到一堆看起來很乾淨、但彼此相似的產品。這不是工具壞掉，而是工具太好用，容易鼓勵複製而不是思考。\u003C\u002Fp>\u003Cp>但這些問題不構成否定理由，反而說明 DESIGN.md 的角色應該更精確：它不是要取代設計主管，而是把設計主管的判斷寫成可執行規格。真正該做的不是丟掉這個檔案，而是把它放進審查流程，讓人類在例外、無障礙與品牌邊界上做最後決策。\u003C\u002Fp>\u003Ch2>你能做什麼\u003C\u002Fh2>\u003Cp>如果你是工程師，把 DESIGN.md 當成契約，不要當裝飾品：把它納入版本控制，讓 AI 生成的 tokens、元件與預覽都受它約束，並像審 code 一樣審設計輸出。如果你是 PM 或創辦人，先用它對齊品牌與產品方向，再開始做 UI 骨架，先選一個參考風格，生成初版，接著用真實需求修正檔案，而不是用 prompt 反覆賭運氣。\u003C\u002Fp>\u003Ch2>第一個論點\u003C\u002Fh2>\u003Cp>純 prompt 式設計最大的問題，是第二個畫面開始就容易走樣。第一個 landing page 也許還像樣，但一旦再生成一個設定頁或列表頁，間距、字級、色彩就會漂移，因為模型沒有持續存在的視覺契約。DESIGN.md 的價值就在於把規則留在檔案裡，讓每次生成都能回到同一套準則。\u003C\u002Fp>\u003Cp>這不是抽象理論，而是工作流差異。該專案主張一份 markdown 可以展開成 README.md、colors_and_type.css、preview cards 與可運作的 UI kit，等於把設計輸入從「一句話」升級成「可追蹤的系統」。對團隊來說，這代表一致性不再靠記憶，而是靠版本化的規格維持。\u003C\u002Fp>\u003Ch2>第二個論點\u003C\u002Fh2>\u003Cp>DESIGN.md 最重要的地方，是它把品味變成可重用資產。多數團隊其實知道自己要什麼風格，缺的不是靈感，而是能被代理模型理解的表達格式。把 tokens、規則與設計理由放進同一份檔案，等於讓「為什麼這樣設計」跟著「設計本身」一起流動。\u003C\u002Fp>\u003Cp>這件事在實際案例裡很清楚。像 Claude 的溫暖編輯感、Linear 的極簡精準、Stripe 的紫色漸層、Spotify 的深色張力，都不是隨機 mood board，而是能直接對應產品意圖的起點。對創辦人或 PM 來說，這種格式可以先鎖定品牌方向，再開始做元件，避免團隊在尚未對齊時就大規模產出。\u003C\u002Fp>","我認為 DESIGN.md 是 AI 設計工作最實用的中介層，因為它把視覺品味變成可執行、可重用、可審查的設計來源。","github.com","https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-claude-design",null,"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782586072806-w93e.png","ai-agent","zh","936eafb7-dbcb-42e4-9b4c-0abc46a58ca7",[17,18,19,20,21],"DESIGN.md","Claude Design","UI scaffolds","design system","AI design workflow",[23,24,25],"DESIGN.md 把視覺品味變成 AI 可執行的規格，而不是只靠 prompt 猜風格。","它最大的價值是維持跨畫面的設計一致性，並把設計知識變成可重用資產。","它不能取代人類設計判斷，但能成為工程、PM 與創辦人對齊與生成的共同基礎。",0,"2026-06-27T18:47:23.886521+00:00","2026-06-27T18:47:23.878+00:00","e3b68196-9e64-4c18-a3b6-a73e73bfb367",{"tags":31,"relatedLang":34,"relatedPosts":38},[32],{"name":18,"slug":33},"claude-design",{"id":15,"slug":35,"title":36,"language":37},"design-md-bridge-taste-to-ui-scaffolds-en","DESIGN.md is the missing bridge from taste to UI scaffolds","en",[39,45,51,57,63,69],{"id":40,"slug":41,"title":42,"cover_image":43,"image_url":43,"created_at":44,"category":13},"4a77707d-c370-4584-bf40-e71c0414720e","openclaw-agent-control-layer-matters-zh","OpenClaw 證明：代理系統的勝負在控制層，不在模型","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782561770712-4ch7.png","2026-06-27T12:02:20.114404+00:00",{"id":46,"slug":47,"title":48,"cover_image":49,"image_url":49,"created_at":50,"category":13},"d0a20a18-1c6f-40ad-b438-e10b5c48ed2e","openclaw-persistent-ai-assistant-chat-apps-zh","OpenClaw 把聊天 App 變成持久 AI","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782559967933-o1i5.png","2026-06-27T11:32:21.569788+00:00",{"id":52,"slug":53,"title":54,"cover_image":55,"image_url":55,"created_at":56,"category":13},"e1195f1f-e00e-4172-82e2-495772599d93","extracted-prompts-turn-model-behavior-into-a-map-zh","抽出提示詞把模型行為變地圖","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782529389449-k81x.png","2026-06-27T03:02:47.173746+00:00",{"id":58,"slug":59,"title":60,"cover_image":61,"image_url":61,"created_at":62,"category":13},"0191a50f-e166-40d4-aee9-bdfa70dc0e1d","hippo-deploys-devin-insurance-engineering-zh","Hippo 導入 Devin 進入保險工程","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782482570930-ug1v.png","2026-06-26T14:02:24.69399+00:00",{"id":64,"slug":65,"title":66,"cover_image":67,"image_url":67,"created_at":68,"category":13},"4bae46b4-28cb-40fc-b4d0-ea7d5d2b2d70","doubao-pro-turns-agent-into-office-tool-zh","豆包专业版把Agent做成日常工具","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782479016692-y1zq.png","2026-06-26T13:03:04.750034+00:00",{"id":70,"slug":71,"title":72,"cover_image":73,"image_url":73,"created_at":74,"category":13},"20ab5533-36c9-4566-afea-9eb589151180","valkey-bots-backporting-pipeline-zh","Valkey 用 bots 把回補變流水線","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782457402862-z23r.png","2026-06-26T07:02:54.72319+00:00",[76,81,86,91,96,101,106,111,116,121],{"id":77,"slug":78,"title":79,"created_at":80},"4ae1e197-1d3d-4233-8733-eafe9cb6438b","claude-now-uses-your-pc-to-finish-tasks-zh","Claude 開始幫你操作電腦","2026-03-26T07:20:48.457387+00:00",{"id":82,"slug":83,"title":84,"created_at":85},"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":87,"slug":88,"title":89,"created_at":90},"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":92,"slug":93,"title":94,"created_at":95},"95c9053b-e3f4-4cb5-aace-5c54f4c9e044","claude-code-controls-mac-desktop-zh","Claude Code 也能操控 Mac 了","2026-03-28T03:01:58.58121+00:00",{"id":97,"slug":98,"title":99,"created_at":100},"dc58e153-e3a8-4c06-9b96-1aa64eabbf5f","cloudflare-100x-faster-ai-agent-sandbox-zh","Cloudflare 的 AI 沙箱跑超快","2026-03-28T03:09:44.142236+00:00",{"id":102,"slug":103,"title":104,"created_at":105},"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":107,"slug":108,"title":109,"created_at":110},"7379b422-576e-45df-ad5a-d57a0d9dd467","openai-plan-automated-ai-researcher-zh","OpenAI 想做自動化 AI 研究員","2026-03-28T03:17:42.090548+00:00",{"id":112,"slug":113,"title":114,"created_at":115},"48c9889e-86df-450b-a356-e4a4b7c83c5b","harness-engineering-ai-agent-reliability-2026-zh","駕馭工程：從「馬具」到「作業系統」，AI Agent 可靠性的終極密碼","2026-03-31T06:42:53.556721+00:00",{"id":117,"slug":118,"title":119,"created_at":120},"96d8e8c8-1edd-475d-9145-b1e7a1b02b65","mcp-explained-from-prompts-to-production-zh","MCP 怎麼把提示詞變工作流","2026-04-01T09:24:39.321274+00:00",{"id":122,"slug":123,"title":124,"created_at":125},"f2ca7720-b471-4ce5-9336-2a9ac2a876fd","amazon-bedrock-agents-multi-agent-workflows-zh","Amazon Bedrock Agents 進入多代理工作流","2026-04-01T09:30:29.945429+00:00"]