5 個 DESIGN.md 靈感範例
5 個 DESIGN.md 範例，示範如何用純文字設計檔讓 AI 產生一致的 UI。
五個 DESIGN.md 範例示範如何用純文字設計檔，讓 AI 產生一致的 UI。
如果你正在評估要把哪一種品牌語氣交給 AI UI builder，這 5 種 DESIGN.md 範例可以直接幫你判斷：你的產品該走溫暖、極簡、電影感、編輯感，還是金融級精緻。看完就能決定先用哪一種風格，去生成第一個頁面。
| 項目 | Theme | UI cue |
|---|---|---|
| Claude | Warm editorial | Terracotta accent, clean layout |
| Vercel | Precision minimal | Black and white, Geist font |
| Runway | Cinematic | Dark heroes, paper-white bands |
| Sanity | Dark editorial | 112px type, coral CTA |
| Stripe | Elegant fintech | Purple gradients, light weight type |
1. Claude
訂閱 AI 趨勢週報
每週精選模型發布、工具應用與深度分析，直送信箱。不定期，不騷擾。
不會寄垃圾信，隨時可取消。
Claude 很適合想要「溫和但專業」的產品。它的 DESIGN.md 風格偏向暖色調、乾淨排版與編輯感層級，對內容型頁面特別友善。
這類文件對 AI 的好處，是它不只描述顏色，還會把整體情緒寫清楚。當模型要生成 landing page、文件頁或儀表板時，就比較不會跑偏成冷冰冰的模板。
- Terracotta 暖色點綴
- 版面留白明確
- 適合內容多、需要信任感的產品
2. Vercel
Vercel 是最標準的極簡案例，黑白對比乾淨俐落，搭配 Geist 字體，整體很適合開發者工具或技術型 SaaS。
如果你希望 AI 生成的元件在按鈕、卡片、標題與空狀態之間保持一致，這種 DESIGN.md 很有用。它給的是一組可重複套用的視覺規則，而不是模糊的風格描述。
- 黑白配色
- Geist 字體線索
- 適合 docs、dashboard、dev tool
3. Runway
Runway 偏電影感，常見設定是深色主視覺、紙白閱讀帶與強烈的標題層級。對創意工具來說，這種設計能同時保留戲劇性與可讀性。
對 AI 而言，這比看截圖更容易執行，因為文件裡直接寫了情緒與結構。像是「dark hero」或「pure black CTA」這類語句，模型通常能更穩定地轉成畫面。
- 深色 hero 區
- 紙白內容帶
- 黑色膠囊按鈕
4. Sanity
Sanity 很適合想做 dark-first 行銷頁，但又不想失去編輯感的團隊。它會把 112px 大標、技術標籤與主 CTA 的角色分得很清楚。
這種寫法的價值在於，它不只是告訴 AI「用什麼顏色」，而是告訴它「誰該最醒目」。當你在做首頁、產品介紹或價格頁時，這種 hierarchy 指令特別有幫助。
- 112px display type
- IBM Plex Mono 技術標籤
- Coral-red 主要 CTA
5. Stripe
Stripe 是金融感與高質感兼具的代表，常見特徵是紫色漸層與輕量字重。它很適合想讓介面看起來成熟、可信、又不過度商業化的團隊。
如果你的產品牽涉付款、訂閱或商務流程，這種 DESIGN.md 能幫 AI 維持一致的高級感。從 hero、pricing 到 feature block，都能沿用同一套視覺邏輯。
- 紫色漸層識別
- 輕字重排版
- 適合 payments 與 fintech
怎麼挑
想要溫暖、可讀、偏內容品牌，就選 Claude；要極簡、精準、偏開發者工具，就選 Vercel；想做創意產品或需要戲劇張力，就選 Runway。
如果你的重點是深色編輯感與清楚層級，選 Sanity；如果你要的是金融級信任感與高完成度，選 Stripe。第一次測試時，先挑最接近產品主訴求的那一個，再讓 AI 只生成一個頁面，最容易看出效果。