# 策展 · X (Twitter) 🔥🔥🔥
> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)
> 作者：小盖 (@xiaogaifun) · 平台：X (Twitter) · 日期：2026-06-23
> 原始來源：https://x.com/xiaogaifun/status/2069014055579509117
## 中文摘要
# 這簡直是教科書等級的 AI 設計規範。
Vercel 的設計系統規範，真的是我見過最頂尖的教科書級範例。
今天認真研讀了他們的 `DESIGN.md`，從亮色與暗色兩套主題出發，將顏色、字體、間距、組件、動效以及文案規則，徹底轉化為一套可執行的設計方法。
感覺以後我所有產品的 `design.md` 都可以照這個路子來寫了。
具體內容在這裡：
[vercel.com/design.md](https://vercel.com/design.md)
[vercel.com/design.dark.md](https://vercel.com/design.dark.md)
可能有些朋友還不太清楚 `DESIGN.md` 是什麼。簡單來說，它是一份給 AI 看的設計規範。當 AI 幫我們撰寫程式碼時，它需要知道該用什麼顏色、多大的字號、元素之間的間隔。
沒有這份文件，AI 每次產出的介面風格都會不一致，顯得飄忽不定。
看完 Vercel 的 `DESIGN.md` 之後，我發現一份好的 `DESIGN.md`，遠遠不止是告訴 AI 用什麼色號、選幾號字。它背後代表著一整套設計思維，這徹底顛覆了我的認知。
今天就拆解開來，聊聊這份文件到底好在哪裡。
---
### 1. 先說顏色
我最開始寫 `DESIGN.md` 時，顏色部分其實很簡單。列出幾個色值，告訴 AI 哪個是主色、哪個是輔助色、哪個是強調色，基本就結束了。
但這樣寫，AI 仍然不知道這些顏色應該如何對應不同的互動狀態。
比如一個按鈕，預設狀態該是什麼顏色？滑鼠懸停時該變深多少？點擊下去那一瞬間又該是什麼顏色？這些細節如果沒有明確規定，AI 每次生成的結果都可能不一樣。
Vercel 的做法完完全全解決了這個問題。
在他們的設計系統裡，每個顏色系列都被拆成了從 100 到 1000 的 10 個梯度，而且每個數字都對應一種固定的介面狀態。
展開畫面重點
該畫面為一段技術文件內容，標題為「## Colors」，說明非背景色階（non-background scale）包含 10 個步驟（從 `100` 到 `1000`），且每個步驟不僅代表明度，更定義了具體的設計意圖。詳細對應如下：
- `100` default background（預設背景）
- `200` hover background（懸停背景）
- `300` active background（點擊/啟用背景）
- `400` default border（預設邊框）
- `500` hover border（懸停邊框）
- `600` active border（點擊/啟用邊框）
- `700` solid fill, high contrast（實心填充，高對比）
- `800` solid fill, hover（實心填充，懸停）
- `900` secondary text and icons（次要文字與圖示）
- `1000` primary text and icons（主要文字與圖示）
展開畫面重點
圖片以手繪風格呈現，中央有一隻橘白色的柯基犬，雙手各拉著一條連接線，分別連接左側的「淺色」介面與右側的「深色」介面。
1. 左側標示為「淺色」，介面包含太陽圖示及各種 UI 元件框。
2. 中央標示為「語義」，下方列出了一系列圖示，包括圓形、方形、文字 T、方形、點陣圖示及堆疊圖示，這些圖示右側均對應一條橫線。
3. 右側標示為「深色」，介面包含月亮圖示及對應的深色 UI 元件框。
4. 底部兩側分別標示「取值」，並以虛線指向兩側介面，象徵從介面中提取數值或樣式設定。
展開畫面重點
## Typography
Geist Sans sets UI and prose; Geist Mono sets code, data, and tabular figures. Both are open-source. The `typography` tokens above carry concrete `fontFamily`, `fontSize`, `fontWeight`, `lineHeight`, and `letterSpacing`:
- Headings, `heading-72` through `heading-14`, title pages and sections; `letterSpacing` tightens as the size grows.
- Labels, `label-20` through `label-12`, carry single-line, scannable text: navigation, form labels, table headers, metadata.
- Copy, `copy-24` through `copy-13`, set multi-line body text with a taller `lineHeight`.
- Buttons, `button-16` through `button-12`, are medium-weight labels for buttons and compact controls.
`copy-14` and `label-14` cover most text. The `-mono` tokens pair Geist Mono with the same metrics; prefer tabular figures when numbers need to align.
這段文字詳細說明了設計系統中字體的使用規範，明確區分了 Geist Sans 與 Geist Mono 的應用場景（UI/內文與程式碼/數據），並定義了標題（Headings）、標籤（Labels）、內文（Copy）與按鈕（Buttons）的字體代號（tokens）及其對應的排版特性。
展開畫面重點
該畫面列出了「Voice & Content」（語氣與內容）的設計準則，強調文案應精簡且無贅字。具體規範如下：
- 標籤、按鈕、標題與分頁標籤使用標題大小寫（Title Case）；內文、輔助文字與提示訊息（toasts）使用句首大寫（sentence case）。
- 動作命名需包含動詞與名詞（例如：`Deploy Project`、`Delete Member`），避免使用單純的 `Confirm`、`OK` 或單一動詞。
- 錯誤訊息應包含「發生什麼事」以及「下一步該怎麼做」（例如：`Build failed. Bundle exceeds 50 MB. Reduce it or raise the limit.`）。
- 提示訊息（toasts）應明確指出變更的項目，移除句尾句號，且不使用 `Successfully`（例如：`Project deleted`，而非 `Successfully deleted the project.`）。
- 空白狀態（Empty states）應引導使用者執行第一個動作（例如：`No deployments yet. Push to your Git repository to create one.`）。
- 進行中的狀態應使用現在分詞加上省略號（例如：`Deploying...`、`Saving...`）。
- 使用數字（例如：`3 projects`）、彎引號與省略號字元；避免使用 `please` 及行銷誇飾用語。