[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-5-design-md-ideas-for-ai-ui-builders-zh":3,"article-related-5-design-md-ideas-for-ai-ui-builders-zh":32,"series-industry-5d0f267f-6c2b-4d33-8e3e-89bc85db39af":85},{"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":24,"views":28,"created_at":29,"published_at":30,"topic_cluster_id":31},"5d0f267f-6c2b-4d33-8e3e-89bc85db39af","5-design-md-ideas-for-ai-ui-builders-zh","5 個 DESIGN.md 靈感範例","\u003Cp data-speakable=\"summary\">五個 DESIGN.md 範例示範如何用純文字設計檔，讓 \u003Ca href=\"\u002Fnews\u002Fvatican-ai-brief-copyable-zh\">AI\u003C\u002Fa> 產生一致的 UI。\u003C\u002Fp>\u003Cp>如果你正在評估要把哪一種品牌語氣交給 AI UI builder，這 5 種 DESIGN.md 範例可以直接幫你判斷：你的產品該走溫暖、極簡、電影感、編輯感，還是金融級精緻。看完就能決定先用哪一種風格，去生成第一個頁面。\u003C\u002Fp>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>項目\u003C\u002Fth>\u003Cth>Theme\u003C\u002Fth>\u003Cth>UI cue\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>Claude\u003C\u002Ftd>\u003Ctd>Warm editorial\u003C\u002Ftd>\u003Ctd>Terracotta accent, clean layout\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Vercel\u003C\u002Ftd>\u003Ctd>Precision minimal\u003C\u002Ftd>\u003Ctd>Black and white, Geist font\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Runway\u003C\u002Ftd>\u003Ctd>Cinematic\u003C\u002Ftd>\u003Ctd>Dark heroes, paper-white bands\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Sanity\u003C\u002Ftd>\u003Ctd>Dark editorial\u003C\u002Ftd>\u003Ctd>112px type, coral CTA\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Stripe\u003C\u002Ftd>\u003Ctd>Elegant fintech\u003C\u002Ftd>\u003Ctd>Purple gradients, light weight type\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Ch2>1. Claude\u003C\u002Fh2>\u003Cp>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fvoltagent\u002Fawesome-design-md\">Claude\u003C\u002Fa> 很適合想要「溫和但專業」的產品。它的 DESIGN.md 風格偏向暖色調、乾淨排版與編輯感層級，對內容型頁面特別友善。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1779153226910-lpai.png\" alt=\"5 個 DESIGN.md 靈感範例\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>這類文件對 AI 的好處，是它不只描述顏色，還會把整體情緒寫清楚。當模型要生成 landing page、文件頁或儀表板時，就比較不會跑偏成冷冰冰的模板。\u003C\u002Fp>\u003Cul>\u003Cli>Terracotta 暖色點綴\u003C\u002Fli>\u003Cli>版面留白明確\u003C\u002Fli>\u003Cli>適合內容多、需要信任感的產品\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>2. Vercel\u003C\u002Fh2>\u003Cp>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fvoltagent\u002Fawesome-design-md\">Vercel\u003C\u002Fa> 是最標準的極簡案例，黑白對比乾淨俐落，搭配 \u003Ca href=\"\u002Fnews\u002Fsifive-p570-gen-3-riscv-mainstream-zh\">Ge\u003C\u002Fa>ist 字體，整體很適合\u003Ca href=\"\u002Ftag\u002F開發者工具\">開發者工具\u003C\u002Fa>或技術型 SaaS。\u003C\u002Fp>\u003Cp>如果你希望 AI 生成的元件在按鈕、卡片、標題與空狀態之間保持一致，這種 DESIGN.md 很有用。它給的是一組可重複套用的視覺規則，而不是模糊的風格描述。\u003C\u002Fp>\u003Cul>\u003Cli>黑白配色\u003C\u002Fli>\u003Cli>Geist 字體線索\u003C\u002Fli>\u003Cli>適合 docs、dashboard、dev tool\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>3. Runway\u003C\u002Fh2>\u003Cp>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fvoltagent\u002Fawesome-design-md\">Runway\u003C\u002Fa> 偏電影感，常見設定是深色主視覺、紙白閱讀帶與強烈的標題層級。對創意工具來說，這種設計能同時保留戲劇性與可讀性。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1779153230328-89t1.png\" alt=\"5 個 DESIGN.md 靈感範例\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>對 AI 而言，這比看截圖更容易執行，因為文件裡直接寫了情緒與結構。像是「dark he\u003Ca href=\"\u002Fnews\u002F30b-anthropic-round-puts-ipo-timing-in-view-zh\">ro\u003C\u002Fa>」或「pure black CTA」這類語句，模型通常能更穩定地轉成畫面。\u003C\u002Fp>\u003Cul>\u003Cli>深色 hero 區\u003C\u002Fli>\u003Cli>紙白內容帶\u003C\u002Fli>\u003Cli>黑色膠囊按鈕\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>4. Sanity\u003C\u002Fh2>\u003Cp>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fvoltagent\u002Fawesome-design-md\">Sanity\u003C\u002Fa> 很適合想做 dark-first 行銷頁，但又不想失去編輯感的團隊。它會把 112px 大標、技術標籤與主 CTA 的角色分得很清楚。\u003C\u002Fp>\u003Cp>這種寫法的價值在於，它不只是告訴 AI「用什麼顏色」，而是告訴它「誰該最醒目」。當你在做首頁、產品介紹或價格頁時，這種 hierarchy 指令特別有幫助。\u003C\u002Fp>\u003Cul>\u003Cli>112px display type\u003C\u002Fli>\u003Cli>IBM Plex Mono 技術標籤\u003C\u002Fli>\u003Cli>Coral-red 主要 CTA\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>5. Stripe\u003C\u002Fh2>\u003Cp>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fvoltagent\u002Fawesome-design-md\">Stripe\u003C\u002Fa> 是金融感與高質感兼具的代表，常見特徵是紫色漸層與輕量字重。它很適合想讓介面看起來成熟、可信、又不過度商業化的團隊。\u003C\u002Fp>\u003Cp>如果你的產品牽涉付款、訂閱或商務流程，這種 DESIGN.md 能幫 AI 維持一致的高級感。從 hero、pricing 到 feature block，都能沿用同一套視覺邏輯。\u003C\u002Fp>\u003Cul>\u003Cli>紫色漸層識別\u003C\u002Fli>\u003Cli>輕字重排版\u003C\u002Fli>\u003Cli>適合 payments 與 fintech\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>怎麼挑\u003C\u002Fh2>\u003Cp>想要溫暖、可讀、偏內容品牌，就選 \u003Cstrong>\u003Ca href=\"\u002Ftag\u002Fclaude\">Claude\u003C\u002Fa>\u003C\u002Fstrong>；要極簡、精準、偏開發者工具，就選 \u003Cstrong>Vercel\u003C\u002Fstrong>；想做創意產品或需要戲劇張力，就選 \u003Cstrong>Runway\u003C\u002Fstrong>。\u003C\u002Fp>\u003Cp>如果你的重點是深色編輯感與清楚層級，選 \u003Cstrong>Sanity\u003C\u002Fstrong>；如果你要的是金融級信任感與高完成度，選 \u003Cstrong>Stripe\u003C\u002Fstrong>。第一次測試時，先挑最接近產品主訴求的那一個，再讓 AI 只生成一個頁面，最容易看出效果。\u003C\u002Fp>","5 個 DESIGN.md 範例，示範如何用純文字設計檔讓 AI 產生一致的 UI。","github.com","https:\u002F\u002Fgithub.com\u002Fvoltagent\u002Fawesome-design-md",null,"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1779153226910-lpai.png","industry","zh","4872cf61-210f-49a5-bcd1-6ba738a69aa9",[17,18,19,20,21,22,23],"DESIGN.md","AI UI builder","design system","plain-text design","brand system","Google Stitch","UI consistency",[25,26,27],"DESIGN.md 把品牌風格寫成 AI 容易讀懂的純文字規則。","Claude、Vercel、Runway、Sanity、Stripe 各自適合不同產品氣質。","先選最接近產品主訴求的風格，再用 AI 生成單一頁面測試。",3,"2026-05-19T01:13:21.318893+00:00","2026-05-19T01:13:21.274+00:00","caa87b65-9bbc-46fe-bba8-4f4158dd2d8b",{"tags":33,"relatedLang":44,"relatedPosts":48},[34,36,38,40,42],{"name":20,"slug":35},"plain-text-design",{"name":19,"slug":37},"design-system",{"name":17,"slug":39},"designmd",{"name":21,"slug":41},"brand-system",{"name":18,"slug":43},"ai-ui-builder",{"id":15,"slug":45,"title":46,"language":47},"5-design-md-ideas-for-ai-ui-builders-en","5 DESIGN.md ideas for AI UI builders","en",[49,55,61,67,73,79],{"id":50,"slug":51,"title":52,"cover_image":53,"image_url":53,"created_at":54,"category":13},"d73870f0-f463-413f-8f4e-0b859ca78c97","ai-fraud-blockchain-finance-defenses-zh","AI 詐騙跑太快，防線怎麼追","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780557487797-7fzf.png","2026-06-04T07:17:34.282107+00:00",{"id":56,"slug":57,"title":58,"cover_image":59,"image_url":59,"created_at":60,"category":13},"c64ecc12-d2bf-419c-938f-407b6ae2d74c","5-blockchain-ai-market-signals-for-buyers-zh","5 個區塊鏈 AI 市場訊號","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780556577201-iu8x.png","2026-06-04T07:02:25.523387+00:00",{"id":62,"slug":63,"title":64,"cover_image":65,"image_url":65,"created_at":66,"category":13},"fd2045a8-4772-4615-981c-eabdfa7f558d","7-ways-to-install-openclaw-zh","7 種安裝 OpenClaw 的方式","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780550292997-e3fd.png","2026-06-04T05:17:41.00891+00:00",{"id":68,"slug":69,"title":70,"cover_image":71,"image_url":71,"created_at":72,"category":13},"06734645-2e2f-4903-9e47-e6ac889e34b7","game-thread-prompt-turns-nba-chatter-into-template-zh","Game-thread prompt 把聊天變模板","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780547608583-tp2j.png","2026-06-04T04:33:05.772212+00:00",{"id":74,"slug":75,"title":76,"cover_image":77,"image_url":77,"created_at":78,"category":13},"c323ffb6-20c8-468a-9d37-68e801588ee5","5-takeaways-from-spurs-vs-trail-blazers-game-5-zh","5 個 Spurs 對 Trail Blazers Game 5 重點","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780546677776-oc0j.png","2026-06-04T04:17:25.558061+00:00",{"id":80,"slug":81,"title":82,"cover_image":83,"image_url":83,"created_at":84,"category":13},"0231f359-f786-4e6c-8104-d3fae443f98b","4-chipotle-promo-details-for-members-zh","4 個 Chipotle 會員活動重點","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780540375071-5xa3.png","2026-06-04T02:32:19.54736+00:00",[86,91,96,101,106,111,116,121,126,131],{"id":87,"slug":88,"title":89,"created_at":90},"ee073da7-28b3-4752-a319-5a501459fb87","ai-in-2026-what-actually-matters-now-zh","2026 AI 真正重要的事","2026-03-26T07:09:12.008134+00:00",{"id":92,"slug":93,"title":94,"created_at":95},"83bd1795-8548-44c9-9a7e-de50a0923f71","trump-ai-framework-power-speech-state-preemption-zh","川普 AI 框架瞄準電力、言論與州權","2026-03-26T07:12:18.695466+00:00",{"id":97,"slug":98,"title":99,"created_at":100},"ea6be18b-c903-4e54-97b7-5f7447a612e0","nvidia-gtc-2026-big-ai-announcements-zh","NVIDIA GTC 2026 重點拆解","2026-03-26T07:14:26.62638+00:00",{"id":102,"slug":103,"title":104,"created_at":105},"4bcec76f-4c36-4daa-909f-54cd702f7c93","claude-users-spreading-out-and-getting-better-zh","Claude 用戶更分散，也更會用","2026-03-26T07:22:52.325888+00:00",{"id":107,"slug":108,"title":109,"created_at":110},"bd903b15-2473-4178-9789-b7557816e535","openclaw-raises-hard-question-for-ai-models-zh","OpenClaw 逼問 AI 模型價值","2026-03-26T07:24:54.707486+00:00",{"id":112,"slug":113,"title":114,"created_at":115},"eeac6b9e-ad9d-4831-8eec-8bba3f9bca6a","gap-google-gemini-checkout-fashion-search-zh","Gap 把結帳搬進 Gemini","2026-03-26T07:28:23.937768+00:00",{"id":117,"slug":118,"title":119,"created_at":120},"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":122,"slug":123,"title":124,"created_at":125},"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":127,"slug":128,"title":129,"created_at":130},"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":132,"slug":133,"title":134,"created_at":135},"191d9b1b-768a-478c-978c-dd7431a38149","mistral-ai-faces-its-hardest-year-yet-zh","Mistral AI 迎來最硬的一年","2026-03-26T07:40:23.716374+00:00"]