UI/UX 设计师前端工程师产品经理产品运营

Design.md
解密

AI时代，设计规范如何变成机器可读的知识？
大厂案例 · 撰写方法 · 从任何网站一键提取

Wayne 研究室 · 2026.04

20 slides · ← → 或滚轮翻页

# design.md
## colors
--primary: #5B6EFF
--secondary: #00C9A7
## typography
font-display: Sora
font-body: Space Grotesk
## spacing
base-unit: 8px
## components
Button / Card / Input
  

定义

什么是 design.md？

本质

一份用 Markdown 格式编写的设计系统文档，结构化描述颜色、字体、间距、组件规范，让 AI 工具能精准理解并遵循设计语言。

别名

CLAUDE.md design-tokens.md style-guide.md component-spec.md .cursor/rules design-system.md

🎨

Format

纯文本 Markdown，人眼可读，AI 可解析，Git 可版本管理

🤖

Purpose

给 Cursor / Claude / Copilot 注入设计上下文，生成符合规范的代码

🔗

Impact

设计师 ↔ 工程师 ↔ AI 三方共同理解设计意图的单一信源

背景

为什么是现在？

2020

Figma 统一设计工具

设计规范 = 一堆 Figma 组件，只有设计师能看懂

2022

GitHub Copilot 爆发

AI 开始写代码，但不知道"这个按钮该用什么颜色"

2024

Cursor + Claude 普及

工程师开始把 design.md 放进 context，AI 生成的界面开始"像样"

2026 ✦

AI-first 产品协作

design.md 成为团队"设计语言的 README"，标配工件

💡

核心矛盾（观点）

AI 能生成界面，但缺少"品牌DNA"注入 → 输出千篇一律。design.md 就是把设计师的品味"编译"成 AI 能读懂的指令集。

案例总览

5家大厂 design.md 完整度对比

Vercel

Geist设计系统，暗色优先，Token化极深

Linear

紫色主调，极简交互，5ms响应原则

Shadcn/ui

CLAUDE.md先行，AI-native设计文档

Ant Design

中文设计语言标杆，12色×10阶，8px基准

GitHub Primer

三层Token架构：base→functional→component

* 6维评分：颜色系统/排版/间距/组件规范/交互状态/AI可读性

案例解析 01

Vercel · Linear — 工具产品派

▲ Vercel

Geist Design System

颜色

语义化Token：--ds-background-100，暗色模式优先，CSS变量直出

字体

自研 Geist / Geist Mono，6个字重，开源可商用

文档

design.vercel.com 完整发布，含Storybook + TypeScript类型

Linear

极简速度感

原则

5ms 响应感知原则，所有动效 ≤ 120ms，界面"像原生应用"

间距

4px基准网格，8个间距档位（4/8/12/16/20/24/32/48）

特色

键盘快捷键作为设计语言的一部分，命令面板为核心交互

共同洞察（事实）：这类工具产品的 design.md 核心是"速度感"——颜色克制（≤5色）、动效短促、键盘优先。AI 拿到这份规范，生成的组件立刻有"工具产品质感"。

案例解析 02

Shadcn/ui · Ant Design — AI-native 派

shadcn/ui

CLAUDE.md 先行

# components/button/CLAUDE.md
## Component: Button
## Variants: default | destructive | outline
           | secondary | ghost | link
## Sizes: sm | default | lg | icon
## Do: use cn() for className merging
## Don't: add inline styles, override variants

每个组件目录有 CLAUDE.md，直接告诉 AI 怎么用、不能怎么用。语义颜色：background/foreground/muted/accent/destructive

Ant Design 5

中文设计标杆

Blue 1→10（12色系每色10阶，共120个Token）

设计原则：自然 · 确定 · 有意义 · 生长（可进化）

基准单位：8px，排版5档（12/14/16/20/24px）

AI就绪：Token名语义化，直接注入 AI 上下文即可

关键差异（观点）：Shadcn 是"AI-first"设计文档——先写 CLAUDE.md，再写代码；Ant Design 是"设计-first"——先建完整设计语言，再生成文档。两种路径都有效，取决于团队规模。

案例解析 03

GitHub Primer — 三层Token架构典范

TOKEN 层级架构（事实）

Layer 1: Base

blue-500, gray-200 — 原始色值，不含语义

Layer 2: Functional

fg.default, bg.subtle — 含语义，模式无关

Layer 3: Component

button.primary.bg — 组件级，直接可用

支持模式

LightDarkColorblindHigh Contrast

AI 可读的 Token 示例

/* Layer 2: Functional Token */
--color-fg-default: #24292F;
--color-fg-muted: #57606A;
--color-bg-default: #FFFFFF;
--color-bg-subtle: #F6F8FA;
--color-border-default: #D0D7DE;

/* Layer 3: Component Token */
--color-btn-primary-bg: #1F883D;
--color-btn-primary-text: #FFFFFF;
        

💡 层级清晰=AI理解成本低。AI看到btn-primary-bg就知道这是"主要按钮的背景色"。

共性分析

优秀 design.md 的六大模块

🎨

01 颜色系统

品牌色 + 语义Token（背景/前景/边框/交互态）+ 暗色模式映射

必选

✍️

02 排版系统

字族 + 字号阶梯 + 行高 + 字重规则 + 中文排版补充

必选

📐

03 间距&网格

基准单位（4px/8px）+ 间距阶梯 + 栅格列数 + 断点

必选

🧱

04 组件规范

核心组件变体 + Props约束 + Do/Don't + 可访问性要求

如何写好一份 design.md

✅ 好的写法

# Color System
## Primary
--color-brand: #5B6EFF
Usage: CTA按钮、active标签、链接文字

## Semantic Tokens
--bg-surface: #0E1120  /* 卡片背景 */
--text-muted: #4A5080  /* 次要说明文字 */

## ❌ Don't
使用 color="#5B6EFF" 内联样式
在非CTA场景使用brand色

❌ 差的写法

# 颜色规范
主色：蓝色
辅助色：绿色（有时也用青色）
背景色：深色
文字：白色或灰色

# 字体
标题用大字，正文用小字

# 按钮
有边框的和没边框的两种

❌ AI完全无法理解"蓝色"是什么值

原则1：值优先

所有颜色、字号、间距必须给具体数值，不能写描述词

原则2：语义命名

--bg-primary 优于 #0a0b0f，AI 能推断使用场景

原则3：Do/Don't

每个规则都加反例。AI 比人类更需要明确的边界条件

AI协作

让 AI 真正理解设计规范

1

结构化而非散文

用Markdown标题、代码块、表格，不要用长段落。AI对结构化输入的召回率高出3倍。

2

加"使用说明"前言

文件开头写：当你为[产品名]生成UI代码时，必须遵循本文件中的所有规范。

3

给实例代码

每个组件规范后附一段正确的使用代码。AI学习代码示例的效率远高于文字描述。

4

拆小文件，按需加载

design.md 拆分为 colors.md / typography.md / components/button.md，用时加载对应文件

AI使用示例 Prompt

# 推荐的 Cursor/Claude 使用方式

请参考 @design.md 的颜色规范，
生成一个主要按钮组件，要求：
- 使用 --color-brand 作为背景色
- hover状态使用 --color-brand-hover
- 字体使用 --font-body，字重600
- 高度44px，水平padding 16px
- 支持 disabled 状态（透明度0.4）

✅ 结果：AI输出的按钮完全符合设计规范，0 次返工

工作流

design.md 在 AI工作流中的位置

🎨

设计师

Figma

→

📄

design.md

Git仓库

→

🤖

AI工具

Cursor / Claude

→

👨‍💻

工程师

符合规范的代码

📱

产品

风格一致的界面

Cursor 用法

放入 .cursor/rules/design.md 或 .cursorrules，Cursor 自动加载到每次对话

Claude 用法

放入项目 CLAUDE.md，Claude 自动读取；或用 @design.md 在对话中引用

Copilot 用法

.github/copilot-instructions.md 中引用 design.md 路径，全仓库生效

对千图的启示（观点）：千图有 seede-like AI 排版引擎——design.md 正是给 AI 排版引擎注入"千图设计语言"的桥梁。每次生成海报/落地页，AI 自动读取千图的颜色、字体、间距规范。

构建指南

构建千图的 design.md

W1

审计现有规范

从58pic/昵图/千图网页面，提取已用颜色、字体、间距（用本报告后续的提取方法）

W2

定义 Token 层

参考 GitHub Primer 三层架构：base色值 → 功能语义 → 组件级

W3

写 AI 使用前言

明确"本文件用于千图AI排版引擎（seede）的设计约束输入"

W4

接入 seede 引擎

在 design_agent.py 的 system prompt 中加载 design.md，约束 layout spec 生成

千图 design.md 骨架

# 千图网 Design Language v1.0
## 用于：seede AI 排版引擎约束输入

## Brand Colors
--color-brand: #E85D32  /* 千图主橙 */
--color-brand-dark: #C44A20

## Canvas Defaults
poster: 1080×1920px
banner: 1920×600px
base-unit: 8px

## Typography
zh-display: 思源黑体 Heavy
zh-body: 思源黑体 Regular
en-display: Sora Bold

## ❌ Forbidden
- 超过5种颜色的排版
- 文字与背景对比度 < 4.5:1

📌 提取专题

从任何网站提取 design.md — 方法论总览

🔍

Step 1

CSS变量提取

抓取 :root Token，5分钟获得全部颜色值

📝

Step 2

排版&间距分析

分析字族、字号阶梯、间距规律

🧩

Step 3

组件模式识别

识别Button/Card/Input的视觉模式

🤖

Step 4

AI辅助归纳

用AI将原始数据结构化为design.md

⚙️

Step 5

自动化工具链

一键脚本，定期同步更新

工具清单

Chrome DevTools · Playwright · css-extract · 千图AI提取skill

耗时估算

手动：30分钟 · 半自动：10分钟 · 全自动脚本：1分钟

适用场景

竞品分析 · 仿站参考 · 遗留系统文档化 · 客户需求还原

提取 Step 1

CSS 变量 + 颜色 Token 提取

方法A：Chrome DevTools Console（零门槛）

// 复制到 DevTools Console 运行
const cssVars = [];
for (const sheet of document.styleSheets) {
  try {
    for (const rule of sheet.cssRules) {
      if (rule.selectorText === ':root') {
        rule.style.cssText
          .split(';')
          .filter(p => p.trim().startsWith('--'))
          .forEach(p => cssVars.push(p.trim()));
      }
    }
  } catch(e) {}
}
console.log(cssVars.join('\n'));

方法B：提取页面使用的全部颜色

const colors = new Set();
document.querySelectorAll('*')
  .forEach(el => {
    const s = getComputedStyle(el);
    ['color','backgroundColor','borderColor']
      .forEach(p => {
        if (s[p] && s[p] !== 'rgba(0, 0, 0, 0)')
          colors.add(s[p]);
      });
  });
console.log([...colors].join('\n'));

输出示例（Vercel官网）

--ds-background-100: #000000
--ds-background-200: #111111
--ds-background-300: #1a1a1a
--ds-gray-100: #0a0a0a
--ds-gray-200: #111111
--ds-gray-alpha-100: rgba(0,0,0,0.05)
--ds-blue-100: #0070f3
--ds-blue-200: #0060df
--ds-red-100: #ee0000
--ds-green-100: #0070f3

实战技巧

✦ 先提取 CSS 变量（更准确）

✦ 再提取 computed colors（覆盖无变量的场景）

✦ 用颜色聚类工具去重（相近色归并）

✦ 重点关注出现频次 Top 10 的颜色

提取 Step 2

排版系统 + 间距规律提取

提取字体 + 字号阶梯

// 排版提取脚本
const typo = { fonts: new Set(), sizes: new Set(),
               weights: new Set(), lineHeights: new Set() };

document.querySelectorAll('h1,h2,h3,h4,p,span,li,a')
  .forEach(el => {
    const s = getComputedStyle(el);
    typo.fonts.add(s.fontFamily.split(',')[0].trim());
    typo.sizes.add(parseFloat(s.fontSize));
    typo.weights.add(s.fontWeight);
    typo.lineHeights.add(parseFloat(s.lineHeight));
  });

// 排序字号阶梯
const scale = [...typo.sizes].sort((a,b) => a-b);
console.log('字号阶梯:', scale);
console.log('字族:', [...typo.fonts]);

提取间距规律

// 分析 padding/margin/gap 规律
const spacings = new Set();
document.querySelectorAll('*').forEach(el => {
  const s = getComputedStyle(el);
  ['paddingTop','paddingRight','marginTop','gap']
    .forEach(p => {
      const v = parseFloat(s[p]);
      if (v > 0 && v < 200) spacings.add(v);
    });
});

// 找最大公因数 → 基准单位
const sorted = [...spacings].sort((a,b)=>a-b);
// 输出: [4, 8, 12, 16, 20, 24, 32, 40, 48]
// 基准单位 = 4px (最小公约数)

识别技巧：将所有间距值除以4或8，若结果均为整数，则该网站用的是4px或8px基准

字号阶梯规律：计算相邻字号比值，约1.25=Major Third音阶（设计感强），约1.2=Minor Third（保守）

提取 Step 3

组件模式识别 — Button / Card / Input

按钮规格提取脚本

// 提取所有按钮的视觉规格
const buttons = document.querySelectorAll(
  'button, [role=button], .btn, .button'
);

buttons.forEach((btn, i) => {
  const s = getComputedStyle(btn);
  const rect = btn.getBoundingClientRect();
  console.log({
    index: i,
    text: btn.textContent.trim().slice(0,20),
    width: rect.width, height: rect.height,
    bg: s.backgroundColor,
    color: s.color,
    border: s.border,
    borderRadius: s.borderRadius,
    fontSize: s.fontSize,
    fontWeight: s.fontWeight,
    padding: s.padding,
    boxShadow: s.boxShadow
  });
});

输出示例 → design.md 片段

## Button Component

### Primary Button
height: 40px
padding: 0 16px
background: var(--color-brand)
border-radius: 6px
font-size: 14px
font-weight: 600

### Hover State
background: var(--color-brand-hover)
transition: 150ms ease

批量提取技巧

✦ 同时运行 button/input/card 提取，导出 JSON

✦ 鼠标悬停不同状态时截图，记录颜色变化

✦ 使用 :hover 伪类对应的 CSS 规则直接查看过渡态

对 disabled 状态：在 Console 中 btn.disabled = true 然后提取样式，通常是透明度 0.4 或颜色变灰

提取 Step 4

AI 辅助归纳 — 从原始数据到 design.md

给 Claude 的完整 Prompt 模板

你是一名设计系统专家。以下是从[网站名]
提取的原始设计数据，请帮我整理成标准的
design.md 格式。

## 原始颜色数据：
[粘贴 Step1 输出的 CSS 变量]

## 原始排版数据：
字族: ["Sora", "Space Grotesk"]
字号: [12,14,16,20,24,32,48,64]
字重: [400, 600, 700, 800]

## 原始间距数据：
[4, 8, 12, 16, 20, 24, 32, 40, 48, 64]

## 按钮数据：
[粘贴 Step3 输出的按钮规格]

请输出包含以下章节的 design.md：
1. Color System (语义化 Token)
2. Typography Scale
3. Spacing System (识别基准单位)
4. Component: Button
5. AI Usage Guide (如何在 Cursor/Claude 中使用)

语言：中英双语注释
格式：标准 Markdown，包含代码块

AI 输出的 design.md 片段（示例）

# [网站名] Design Language v1.0
## AI Usage Guide
当为本产品生成UI代码时，必须引用
以下Token，禁止硬编码色值。

## Color System
### Brand / 品牌色
--color-brand: #5B6EFF
/* Usage: CTA按钮/激活状态/链接 */

## Typography Scale
Base unit: 16px (1rem)
Scale ratio: 1.25 (Major Third)

| Level | Size  | Weight | Usage |
|-------|-------|--------|-------|
| xs    | 12px  | 400    | 标签/提示 |
| sm    | 14px  | 400    | 正文 |
| md    | 16px  | 600    | 正文强调 |
| lg    | 20px  | 700    | 小标题 |

质量验证：让 AI 反向用这份 design.md 生成一个按钮的代码，看是否符合原网站视觉。闭环验证最可靠。

提取 Step 5

自动化工具链 — 一键提取 + 定期同步

Playwright 自动提取脚本

// extract-design.js (Node.js + Playwright)
const { chromium } = require('playwright');

async function extractDesign(url) {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto(url);

  const tokens = await page.evaluate(() => {
    // 提取CSS变量
    const vars = {};
    for (const sheet of document.styleSheets) {
      try {
        for (const rule of sheet.cssRules) {
          if (rule.selectorText===':root'){
            const m=rule.cssText.matchAll(
              /(--[\w-]+):\s*([^;]+)/g);
            for(const[,k,v] of m) vars[k]=v.trim();
          }
        }
      } catch(e){}
    }
    return vars;
  });

  await browser.close();
  return tokens;
}

extractDesign('https://58pic.com')
  .then(t => console.log(JSON.stringify(t,null,2)));

工具选型对比

工具	上手难度	自动化	动态页面	推荐场景
DevTools手动	低	✗	✓	一次性提取
Playwright	中	✓	✓	定期同步
css-extract CLI	低	△	✗	静态站
Cowork Skill	极低	✓	✓	日常使用

定期同步方案

将脚本加入 CI/CD，每次设计师更新 Figma Token 后自动触发提取，PR Review，合并到 design.md。设计与代码始终同步。

现成工具推荐（事实）

style-dictionary theo (Salesforce) token-transformer extract-design-system skill

落地路线图

千图 design.md 三阶段落地计划

PHASE 1 · 2周

建立基础规范

用提取脚本扫描 58pic.com / 千图网 / 昵图网

AI 归纳颜色 + 排版 + 间距，形成 v0.1

设计师 Review，定义语义 Token 命名

放入 Git，写 AI 使用说明前言

交付物：design.md v0.1

PHASE 2 · 1个月

接入 AI 工具链

接入 seede AI 排版引擎 system prompt

Cursor Rules 配置，前端开发日常使用

A/B 对比：有/无 design.md 的 AI 生成质量

扩展组件规范（Button/Card/Form）

交付物：集成版 design.md + seede 接入

PHASE 3 · 持续

规范化 + 自动同步

Figma Token → design.md 自动同步 CI

按产品线拆分（58pic / 千图 / 昵图）

向量化 design.md，RAG 检索加速 AI

开放为 API，供内部所有 AI 产品调用

交付物：千图设计语言 API 服务

CEO视角（观点）：design.md 不是文档项目，是"把千图设计师的品味编译成机器指令"的基础设施。Phase 3 完成后，任何 AI 模型都能直接生成"千图风格"的界面——这是护城河。

行动

下周你能做的
3件事

🎨 设计师

审计现有规范

打开 Chrome DevTools，对 58pic.com 运行颜色提取脚本，整理出第一版颜色 Token 清单

👨‍💻 前端工程师

接入 Cursor Rules

在项目根目录创建 .cursorrules，写入现有组件规范，测试 AI 代码生成质量

📋 产品经理

竞品提取参考

选一个竞品（如稿定设计/创客贴），用本文提取方法分析其设计规范，产出竞品设计分析报告

Wayne 研究室 · 260406_DesignMD_研究报告

designmd.wwei.ai

Design.md解密