DESIGN.md：又一個你必須知道的Markdown文件

作者：AI工程化
日期：2026年4月27日 上午3:02
來源：WeChat 原文

✦整理版優先睇

速讀 5 個重點 高亮

DESIGN.md：一個 Markdown 檔案，令 AI 助手自動跟足你嘅設計系統

整理版摘要

呢篇文章係整理自 Google Stitch 團隊提出嘅 DESIGN.md 概念。作者想解決嘅問題係：AI 助手生成 UI 時成日亂用 Tailwind 樣式，搞到設計唔一致。傳統做法要靠 Figma 匯出或者寫 JSON config，但 AI 根本睇唔明。DESIGN.md 就係一個放喺 project 根目錄嘅純文字設計規範檔，用 Markdown 寫，Claude、Cursor、Copilot 呢啲 AI 工具可以直接讀取，然後生出一致嘅 UI。

整體結論係：呢個方法將設計系統變成大模型最擅長讀取嘅文本格式，唔使再逼 AI 去解釋 Figma 檔案。作者仲介紹咗兩個實用資源：Awesome DESIGN.md 庫（入面有 54 個真實產品嘅設計系統，包括 Stripe、Vercel、Linear 等）同埋 HyperDesign 工具（可以自動分析網站設計語言，25 秒內生成完整 DESIGN.md）。開發者實測之後話：「Claude 即刻開始尊重我嘅品牌 token，終於唔再自己發明樣式。」

對小團隊同個人項目嚟講，呢個方法特別有用 — 以前要有全職設計師先 keep 到一致性，而家一個幾 KB 嘅 Markdown 檔案就搞掂。

  • DESIGN.md 係一個放喺項目根目錄嘅 Markdown 設計規範文件，AI 助手可以直接讀取，生成一致嘅 UI。
  • 文件包含 9 個核心部分：視覺主題、色彩調色板、排版規則、組件樣式、佈局原則、深度層次、該做唔該做、響應式行為、AI 提示指南。
  • Awesome DESIGN.md 庫提供咗 54 個現成設計系統，全部嚟自真實產品，每個都有亮暗主題預覽。
  • HyperDesign 工具可以自動分析網站，16 秒提取顏色字體，9 秒生成結構化 DESIGN.md，而且係開源嘅。
  • 開發者實測話，放咗 DESIGN.md 之後 Claude 會自動跟品牌設計，唔再亂出樣式，對小團隊特別有幫助。
值得記低
連結 github.com

Awesome DESIGN.md

收錄 54 個知名產品嘅設計系統，每個都包含 DESIGN.md 同亮暗主題預覽。

開啟
工具 github.com

HyperDesign

自動生成 DESIGN.md 嘅開源工具，可分析網站設計語言，16 秒輸出顏色字體，9 秒生成結構化文件。

開啟
結構示例

內容片段

內容片段 text 
---name: DevFocus Darkcolors:  primary: "#2665fd"  secondary: "#475569"  surface: "#0b1326"  on-surface: "#dae2fd"  error: "#ffb4ab"typography:  body-md:    fontFamily: Inter    fontSize: 16px    fontWeight: 400rounded:  md: 8px---# Design System## OverviewA focused, minimal dark interface for a developer productivity tool.Clean lines, low visual noise, high information density.## Colors- **Primary** (#2665fd): CTAs, active states, key interactive elements- **Secondary** (#475569): Supporting UI, chips, secondary actions- **Surface** (#0b1326): Page backgrounds- **On-surface** (#dae2fd): Primary text on dark backgrounds- **Error** (#ffb4ab): Validation errors, destructive actions## Typography- **Headlines**: Inter, semi-bold- **Body**: Inter, regular, 14–16px- **Labels**: Inter, medium, 12px, uppercase for section headers## Components- **Buttons**: Rounded (8px), primary uses brand blue fill- **Inputs**: 1px border, subtle surface-variant background- **Cards**: No elevation, relies on border and background contrast## Do's and Don'ts- Do use the primary color sparingly, only for the most important action- Don't mix rounded and sharp corners in the same view- Do maintain 4:1 contrast ratio for all text
整理重點

DESIGN.md 係咩嘢？點解 AI 助手睇得明？

Google Stitch 團隊最近提出咗一個簡單但有效嘅方法：DESIGN.md。佢係一個放喺項目根目錄嘅 Markdown 文件，裡面寫清楚顏色調色板、字體規則、間距尺度、按鈕樣式、網格系統等基礎設計規範。AI 助手好似 Claude、Cursor、Copilot 呢啲，可以直接讀取呢個文件，然後生成一致嘅 UI。

呢個方法嘅核心好處係：Markdown 係大模型最擅長讀取嘅格式，比起 Figma 匯出或者 JSON config，AI 可以更快理解你嘅設計系統。而且唔需要任何額外工具，一個 DESIGN.md 文件就可以搞掂。

整理重點

DESIGN.md 包含邊 9 個核心部分？

DESIGN.md 跟 Stitch 格式，有 9 個必要部分。每一個都係設計系統嘅基礎，AI 助手會根據呢啲定義生成 UI。

  • 視覺主題和氛圍：定義情緒、密度、設計哲學。
  • 色彩調色板和角色：語義名稱 + 十六進制值 + 功能角色。
  • 排版規則：字體族、完整層級表。
  • 組件樣式：按鈕、卡片、輸入框、導航及其狀態。
  • 佈局原則：間距尺度、網格、留白哲學。
  • 深度和層次：陰影系統、表面層次。
  • 該做和不該做：設計護欄和反模式。
  • 響應式行為：斷點、觸摸目標、摺疊策略。

呢 9 個部分涵蓋咗設計系統嘅所有關鍵維度，AI 助手可以喺生成 UI 嗰陣逐項參考。

整理重點

現成設計系統庫同自動生成工具

Awesome DESIGN.md 項目入面已經有 54 個現成嘅設計系統，全部嚟自真實產品，例如 Stripe、Vercel、Linear、Notion、Claude、Cursor、Warp 等。每個系統都提供 DESIGN.md 文件同兩個預覽檔案（亮色同暗色主題），你可以直接攞嚟用或者參考改。

另外，HyperDesign 工具可以自動生成 DESIGN.md。你只要畀一個網站網址，佢就會分析設計語言，16 秒輸出顏色、字體、間距規範，再 9 秒生成結構化嘅 DESIGN.md 文件。佢唔係普通取色器，而係會判斷風格，例如話 Anthropic 官網嘅風格係「剋制、學術、借鑑印刷傳統」。呢個工具係開源嘅，以前大公司要花幾百萬做嘅設計系統，而家 25 秒就複製到。

整理重點

實際使用效果：開發者點樣講？

有開發者分享咗佢嘅經驗：「將 DESIGN.md 放喺 Cursor 項目根目錄，Claude 即刻開始尊重我嘅品牌 token。終於，AI 助手唔再自己發明 Tailwind 樣式。」另一個用戶話：「呢個對小團隊同個人項目太重要啦。以前設計一致性需要全職設計師或者冇人睇嘅品牌指南，而家一個 Markdown 檔案喺倉庫度，每個接觸你 code 嘅 AI 工具都知道你嘅品牌係點樣。」

DESIGN.md 檔案通常得 幾 KB 到 20 KB，可以直接餵畀 Claude 等大模型。呢個方法將設計當作 大模型能原生解析嘅文本格式，而唔係逼 AI 去解讀 Figma 匯出文件。對於團隊嚟講，只要喺 git 入面 maintain 一個 DESIGN.md，所有 AI 工具就會自動跟，唔使再逐個 tool 去 set 設計規範。

Google Stitch 最近出咗一個好簡單嘅方法：DESIGN.md。一個 Markdown 檔案，放喺項目根目錄，Claude、Cursor、Copilot 呢啲 AI 助手都直接睇到。

DESIGN.md 係咩嚟？

DESIGN.md 係 Google Stitch 引入嘅新概念，一個純文字嘅設計系統文檔。AI 助手讀取之後就可以生成一致嘅 UI。

圖片

呢個文件裏面有顏色調色板、字型規則、間距尺度、掣嘅樣式、網格系統等基礎設計規範。唔需要 Figma 匯出，都唔需要 JSON 設定檔。

DESIGN.md 檔案跟 Stitch 格式，包含 9 個核心部分：

  1. 視覺主題同氛圍 - 情緒、密度、設計哲學
  2. 色彩調色板同角色 - 語義名稱 + 十六進制值 + 功能角色
  3. 排版規則 - 字型家族、完整層級表
  4. 組件樣式 - 掣、卡片、輸入框、導航同佢哋嘅狀態
  5. 佈局原則 - 間距尺度、網格、留白哲學
  6. 深度同層次 - 陰影系統、表面層次
  7. 應該做同唔應該做 - 設計護欄同反模式
  8. 響應式行為 - 斷點、觸摸目標、摺疊策略
  9. AI 助手提示指南 - 快速色彩參考、即用提示詞

Markdown 係大模型最擅長讀取嘅格式，所以 AI 助手可以直接理解你嘅 UI 應該係點樣。

---
name: DevFocus Dark
colors:
  primary: "#2665fd"
  secondary: "#475569"
  surface: "#0b1326"
  on-surface: "#dae2fd"
  error: "#ffb4ab"
typography:
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
rounded:
  md: 8px
---

# Design System

## Overview
A focused, minimal dark interface for a developer productivity tool.
Clean lines, low visual noise, high information density.

## Colors
- **Primary** (#2665fd): CTAs, active states, key interactive elements
- **Secondary** (#475569): Supporting UI, chips, secondary actions
- **Surface** (#0b1326): Page backgrounds
- **On-surface** (#dae2fd): Primary text on dark backgrounds
- **Error** (#ffb4ab): Validation errors, destructive actions

## Typography
- **Headlines**: Inter, semi-bold
- **Body**: Inter, regular, 14–16px
- **Labels**: Inter, medium, 12px, uppercase for section headers

## Components
- **Buttons**: Rounded (8px), primary uses brand blue fill
- **Inputs**: 1px border, subtle surface-variant background
- **Cards**: No elevation, relies on border and background contrast

## Do's and Don'ts
- Do use the primary color sparingly, only for the most important action
- Don't mix rounded and sharp corners in the same view
- Do maintain 4:1 contrast ratio for all text

現成嘅設計系統庫

Awesome DESIGN.md 項目入面已經有 54 個現成嘅設計系統，全部都係由真實產品度提取出嚟嘅。


圖片


Stripe、Vercel、Linear、Notion、Claude、Cursor、Warp 等知名產品嘅設計都喺裏面。每個設計系統都包含 DESIGN.md 檔案同兩個預覽檔案，一個亮色主題一個暗色主題，方便睇實際效果。

一個快速生成 DESIGN.md 嘅工具



HyperDesign 工具可以自動生成 DESIGN.md 檔案。將 Anthropic 官網掟入去，16 秒輸出顏色、字型、間距規範，9 秒生成結構化嘅 DESIGN.md 檔案。


佢唔係一個簡單嘅取色器，而係會分析設計語言。例如判斷 Anthropic 嘅風格係剋制、學術、參考印刷傳統嘅。每個字號對應嘅行高字重都列得好清楚。

呢個工具係開源嘅，以前大公司用幾百萬整嘅設計系統，而家 25 秒就可以複製。

實際使用效果

一位開發者分享：「將 DESIGN.md 放喺 Cursor 項目根目錄，Claude 即刻開始尊重我嘅品牌 token。終於，AI 助手唔再自己發明 Tailwind 樣式啦。」

另一位用戶話：「呢個對小團隊同個人項目嚟講真係好重要。設計一致性以前需要全職設計師或者冇人睇嘅品牌指南。而家一個 Markdown 檔案喺倉庫入面，每個接觸你代碼嘅 AI 工具都知道你嘅品牌係點樣。」

DESIGN.md 檔案一般喺幾 KB 到 20 KB 之間，可以直接餵畀 Claude 等大模型。呢個方法嘅優點係將設計當作大模型可以原生解析嘅文字格式，而唔係強迫 AI 去解釋 Figma 匯出檔案。

Awesome DESIGN.md：https://github.com/VoltAgent/awesome-design-md

hyperbrowser：https://github.com/hyperbrowserai/hyperbrowser-app-examples

關注公眾號回覆「進羣」入羣討論。

Google Stitch最近推出了一個簡單的方法：DESIGN.md。一個Markdown文件，放在項目根目錄，Claude、Cursor、Copilot這些AI助手都能直接讀取。

DESIGN.md是什麼？

DESIGN.md是Google Stitch引入的新概念，一個純文本的設計系統文檔。AI助手讀取後能生成一致的UI。

圖片

這個文件裏面有顏色調色板、字體規則、間距尺度、按鈕樣式、網格系統等基礎設計規範。不需要Figma導出，也不需要JSON配置文件。

DESIGN.md文件遵循Stitch格式，包含9個核心部分：

  1. 視覺主題和氛圍 - 情緒、密度、設計哲學
  2. 色彩調色板和角色 - 語義名稱+十六進制值+功能角色
  3. 排版規則 - 字體族、完整層級表
  4. 組件樣式 - 按鈕、卡片、輸入框、導航及其狀態
  5. 佈局原則 - 間距尺度、網格、留白哲學
  6. 深度和層次 - 陰影系統、表面層次
  7. 該做和不該做 - 設計護欄和反模式
  8. 響應式行為 - 斷點、觸摸目標、摺疊策略
  9. AI助手提示指南 - 快速色彩參考、即用提示詞

Markdown是大模型最擅長讀取的格式，所以AI助手能直接理解你的UI應該長什麼樣。

---
name: DevFocus Dark
colors:
  primary: "#2665fd"
  secondary: "#475569"
  surface: "#0b1326"
  on-surface: "#dae2fd"
  error: "#ffb4ab"
typography:
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
rounded:
  md: 8px
---

# Design System

## Overview
A focused, minimal dark interface for a developer productivity tool.
Clean lines, low visual noise, high information density.

## Colors
- **Primary** (#2665fd): CTAs, active states, key interactive elements
- **Secondary** (#475569): Supporting UI, chips, secondary actions
- **Surface** (#0b1326): Page backgrounds
- **On-surface** (#dae2fd): Primary text on dark backgrounds
- **Error** (#ffb4ab): Validation errors, destructive actions

## Typography
- **Headlines**: Inter, semi-bold
- **Body**: Inter, regular, 14–16px
- **Labels**: Inter, medium, 12px, uppercase for section headers

## Components
- **Buttons**: Rounded (8px), primary uses brand blue fill
- **Inputs**: 1px border, subtle surface-variant background
- **Cards**: No elevation, relies on border and background contrast

## Do's and Don'ts
- Do use the primary color sparingly, only for the most important action
- Don't mix rounded and sharp corners in the same view
- Do maintain 4:1 contrast ratio for all text

現成的設計系統庫

Awesome DESIGN.md 項目裏已經有54個現成的設計系統，都是從真實產品中提取出來的。


圖片


Stripe、Vercel、Linear、Notion、Claude、Cursor、Warp等知名產品的設計都在裏面。每個設計系統都包含DESIGN.md文件和兩個預覽文件，一個亮色主題一個暗色主題，方便查看實際效果。

一個快速生成DESIGN.md的工具



HyperDesign工具可以自動生成DESIGN.md文件。把Anthropic官網扔進去，16秒輸出顏色、字體、間距規範，9秒生成結構化的DESIGN.md文件。


它不是簡單的取色器，而是會分析設計語言。比如判斷Anthropic的風格是剋制的、學術的、借鑑印刷傳統的。每個字號對應的行高字重都列得清清楚楚。

工具是開源的，以前大公司花幾百萬做的設計系統，現在25秒就能複製。

實際使用效果

一位開發者分享："把DESIGN.md放在Cursor項目根目錄，Claude立刻開始尊重我的品牌token。終於，AI助手不再自己發明Tailwind樣式了。"

另一位用戶說："這對小團隊和個人項目太重要了。設計一致性過去需要全職設計師或沒人讀的品牌指南。現在一個Markdown文件在倉庫裏，每個接觸你代碼的AI工具都知道你的品牌長什麼樣。"

DESIGN.md文件一般在幾KB到20KB之間，可以直接餵給Claude等大模型。這個方法的優點是把設計當作大模型能原生解析的文本格式，而不是強迫AI去解釋Figma導出文件。

Awesome DESIGN.md：https://github.com/VoltAgent/awesome-design-md

hyperbrowser：https://github.com/hyperbrowserai/hyperbrowser-app-examples

關注公眾號回覆“進羣”入羣討論。