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

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

✦整理版優先睇

速讀 5 個重點 高亮

DESIGN.md：用Markdown統一AI工具嘅UI設計，告別混亂樣式

整理版摘要

呢篇文章介紹咗Google Stitch團隊提出嘅新概念：DESIGN.md。佢哋發現AI助手（例如Claude、Cursor、Copilot）喺生成UI嗰陣成日自己亂咁用Tailwind樣式，令到設計唔一致。為咗解決呢個問題，佢哋設計咗一個純文字嘅設計系統文件，放喺項目根目錄，AI助手直接讀取之後就可以跟住規範生成UI。文章亦提到Awesome DESIGN.md項目已經收集咗54個真實產品嘅設計系統，同埋一個叫HyperDesign嘅開源工具可以自動分析網站並生成DESIGN.md。

整體結論係：與其迫AI解讀Figma導出嘅複雜格式，不如直接將設計規範寫成Markdown——呢種大模型最擅長讀取嘅格式。咁樣做可以令設計一致性大幅提升，尤其係對小團隊同個人開發者嚟講，唔使再靠全職設計師或者無人睇嘅品牌指南。作者用開發者嘅親身反饋證實呢個方法有效，例如「Claude開始尊重我嘅品牌token」呢類評價。

文章仲詳細列出DESIGN.md嘅9個核心部分（視覺主題、顏色、排版、組件、佈局、深度、Do/Don't、響應式、AI提示），同埋實際範例同工具用法。最後提醒讀者可以參考Awesome DESIGN.md同HyperDesign工具。

  • DESIGN.md係一個放喺項目根目錄嘅Markdown檔案，AI工具（Claude、Cursor、Copilot等）可以直接讀取，用嚟生成一致嘅UI，避免AI自己亂用Tailwind樣式。
  • 佢包含9個核心部分：視覺主題、色彩調色板（語義名稱+十六進制+功能）、排版規則（字體族、層級表）、組件樣式（按鈕、卡片、輸入框等）、佈局原則（間距、網格、留白）、深度層次（陰影、表面）、設計護欄（Do/Don't）、響應式行為（斷點、觸摸目標）、AI助手提示指南。
  • 相比傳統Figma導出或JSON配置文件，DESIGN.md用Markdown呢種大模型最擅長嘅純文字格式，令AI理解成本大減，實現「設計即代碼」嘅效果。
  • Awesome DESIGN.md項目提供咗54個現成設計系統（包括Stripe、Vercel、Linear、Notion等知名產品），可以直接攞嚟用或者參考；每個系統仲附有亮暗主題預覽檔案。
  • HyperDesign工具可以自動分析任何網站（例如Anthropic官網），16秒內輸出顏色、字體、間距規範，9秒生成結構化DESIGN.md，而且開源免費，大大降低設計系統門檻。
值得記低
連結 github.com

Awesome DESIGN.md 項目

收錄咗54個真實產品嘅設計系統，包含DESIGN.md檔案同亮暗主題預覽。

開啟
工具 github.com

HyperDesign 工具

開源工具，可以自動分析網站並生成DESIGN.md檔案。

開啟
結構示例

內容片段

內容片段 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 係乜嘢？點解突然咁重要？

Google Stitch 團隊最近提出一個簡單但好有效嘅概念：DESIGN.md。佢係一個 Markdown 檔案，放喺項目根目錄，Claude、Cursor、Copilot 呢啲 AI 助手可以直接讀取，用嚟生成一致嘅 UI。

唔需要 Figma 導出，亦唔需要 JSON 配置文件

呢個檔案包含顏色調色板、字體規則、間距尺度、按鈕樣式、網格系統等基礎設計規範。Markdown 係大模型最擅長讀取嘅格式，所以 AI 助手可以直接理解你嘅 UI 應該長成點。

整理重點

DESIGN.md 嘅9個核心部分

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

呢9個部分涵蓋曬整個 UI 設計系統，而且全部用純 Markdown 寫成，任何 AI 工具都讀得明。

整理重點

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

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

Stripe、Vercel、Linear、Notion、Claude、Cursor、Warp 等知名產品嘅設計喺曬裏面

每個系統都包含 DESIGN.md 檔案同兩個預覽檔案（亮色主題同暗色主題），方便直接睇效果。

另外仲有一個叫 HyperDesign 嘅開源工具，可以自動生成 DESIGN.md。

將 Anthropic 官網掟入去，16 秒輸出顏色、字體、間距規範，9 秒生成結構化 DESIGN.md

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

整理重點

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

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

呢個對小團隊同個人項目太重要喇

另一位用戶話：「設計一致性過去需要全職設計師或者冇人會睇嘅品牌指南。而家一個 Markdown 檔案喺倉庫入面，每個接觸你代碼嘅 AI 工具都知道你嘅品牌長成點。」

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

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

關注微信公眾號回覆「入group」加入羣組討論。

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

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