系列文章: Opendesign (7/11)

← Open Design Skills 完全指南：19 個內建 skill 與如何加自己的Open Design 的五個視覺方向：客戶沒品牌時的決定論答案 →
Open Design 的 71 套 Design Systems：DESIGN.md 九大區塊完整解析
#open-design#design-system#design-md#branding#tokens

Open Design 的 71 套 Design Systems：DESIGN.md 九大區塊完整解析

7 min read

Skill 決定畫面長什麼樣，design system 決定它穿什麼顏色、用什麼字、間距怎麼配。Open Design 內建 71 套品牌級 design system，全部以 DESIGN.md 格式寫成——一個檔案描述一個品牌。這篇拆它的格式跟用法。

71 套 design system 是哪 71 套？

按類別大致分：

  • AI & LLM — Claude、Cohere、Mistral、Replicate、ElevenLabs、Ollama、X.AI…
  • Developer Tools — Cursor、Vercel、Linear、Framer、Supabase、Sentry、Webflow、Mintlify、PostHog、ClickHouse、MongoDB…
  • Productivity — Notion、Figma、Miro、Airtable、Superhuman、Intercom、Zapier、Cal、Raycast…
  • Fintech — Stripe、Coinbase、Binance、Mastercard、Revolut、Wise…
  • E-Commerce — Shopify、Airbnb、Uber、Nike、Starbucks、Pinterest…
  • Media — Spotify、PlayStation、Wired、The Verge、Meta…
  • Automotive — Tesla、BMW、Ferrari、Lamborghini、Bugatti…
  • Other — Apple、IBM、Nvidia、Resend、SpaceX…
  • Starters — default（Neutral Modern）、warm-editorial

來源是 VoltAgent/awesome-design-md，透過 scripts/sync-design-systems.ts 同步——upstream 更新就跑一次 sync 拉新版本。

DESIGN.md 的 9 段式 schema

每套 design system 就是一個資料夾、一個 DESIGN.md 檔。內容固定 9 段：

1. Color
2. Typography
3. Spacing
4. Layout
5. Components
6. Motion
7. Voice
8. Brand
9. Anti-patterns

這個 schema 不是 Open Design 發明的，是直接沿用 awesome-design-md 的規範。9 段都是必填，但每段內容多寡因品牌而異——簡單品牌可以一段三行，複雜品牌會寫成幾百行。

逐段拆一下實際在寫什麼：

1. Color

不是 hex 列表，是「色彩邏輯」：

## Color
 
Foundation: warm neutrals built on oklch(96% 0.01 80) cream.
Brand accent: oklch(48% 0.18 30) terracotta — used sparingly for CTA only.
 
DO use accent for max 5% of any view.
DO use cream as the page background.
DON'T use accent on body text.
DON'T introduce a third hue without writing it here first.

agent 讀到的不只是「用這幾個顏色」，是「為什麼用、什麼時候用、什麼情況不准用」。

2. Typography

字型 stack + 用法準則：

## Typography
 
Display: 'GT Sectra Display', Georgia, serif — only for h1/h2 above 32px.
Body: 'Inter', system-ui, sans-serif — 14–18px.
Mono: 'JetBrains Mono' — code blocks, never as a display face.
 
Line-height tight (1.1) on display, generous (1.6) on body.

3. Spacing

間距系統不是「8px grid」這種廢話，是具體的 spacing scale：

## Spacing
 
Tokens: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128
Section: 96–128 vertical, 24 horizontal on desktop.
Card: 24 padding, 16 gap between cards.

4–6. Layout / Components / Motion

排版 grid、按鈕 / 卡片 / form 的長相、動畫風格——什麼時候用 fade、什麼時候用 spring、duration 多長。

7. Voice

文案語氣。這段在 design system 是少見的：

## Voice
 
Confident, never hyperbolic. Sentences short.
Forbidden: "revolutionary", "game-changing", emoji headlines.
Prefer: concrete numbers over adjectives.

8. Brand

品牌故事壓縮版，agent 用來自我校準：

## Brand
 
Linear is what enterprise software wishes it was —
fast, opinionated, slightly cold, deeply functional.

9. Anti-patterns

最重要的一段——明確列出「絕對不准做的事」：

## Anti-patterns
 
DON'T: rounded cards with left-border accent stripes.
DON'T: gradient buttons.
DON'T: emoji as feature icons.
DON'T: "10x faster" or any made-up metric.
DON'T: stock people SVGs / hand-drawn humans.

這段直接對應到 反 AI-slop 機器 的 slop 黑名單。

切換 design system 等於下次 render 用新 token

Open Design 介面右上角有個下拉，71 套都列在裡面。切換的瞬間：

  1. UI 把 active design system 換成新的
  2. 下一次發 prompt，prompt stack 把新 DESIGN.md 全文注入
  3. agent render 出來的 artifact 自動套新 token

不需要改 skill、不需要重啟 daemon、不需要清快取——就是換一個檔案進 prompt 而已。這就是 六個核心理念 第 3 條「Design Systems are portable Markdown」帶來的好處。

怎麼做你公司專用的 design system

實作步驟：

cd design-systems
cp -r default acme-corp
cd acme-corp

然後改 DESIGN.md：

  1. 先做 brand-spec extraction — 給 agent 你公司網站、LOGO、品牌指南，讓它跑五步驟協議：locate → download → grep hex → 寫 brand-spec.md → 念回給你聽（反 AI-slop 那篇 細講）
  2. 把 extraction 結果填進 9 段 — 顏色、字型、間距填具體值
  3. Anti-patterns 是重點 — 把你公司「絕對不要長這樣」的東西寫進去，agent 才不會 slop
  4. 重啟 daemon、選你的 design system — 下次 render 全部按你的 token 走

整個過程通常一個下午就好。比起在 Figma 拉一套 component library，這個成本低很多——而且更重要的：Open Design 認得這份檔案、會用它、會檢查它。

一個小提醒：別把 DESIGN.md 寫得太鬆

新手很容易犯的錯：DESIGN.md 寫得太抽象、什麼都「視情況」「彈性」——agent 拿到模糊指令就會自由發揮。寫 design system 的訣竅是寧可寫得太死也別寫得太鬆：

  • 「用暖色系」 → 改成 oklch(96% 0.01 80) cream + oklch(48% 0.18 30) terracotta
  • 「字型大小要層次分明」 → 改成 display 32–64, body 14–18, mono 13
  • 「不要太花俏」 → 改成「DON'T: gradient, DON'T: emoji icons, DON'T: rounded card with accent border」

agent 會嚴格按你寫的執行，所以模糊就是不確定——把不確定減到最低，輸出品質就直接拉高。

下一站：當客戶沒品牌時

那如果使用者根本沒有自己的 design system 怎麼辦？Open Design 有第二道防線——五個 curated 視覺方向，每個都是決定論的色票 + 字體 + 排版規格。

下一篇講五個視覺方向：Editorial Monocle、Modern Minimal、Tech Utility、Brutalist、Soft Warm，每個都配好現成的 OKLch 色票跟字體 stack，使用者選一個 radio 就能跑。