当设计被压缩成 DESIGN.md，还要设计怎样

DESIGN.md 是今年三月份，Google 通过旗下的 AI 设计工具 Google Stitch 所提出来的全新概念。随后不到一个月，他们又更新并开源了 DESIGN.md。

一、压缩：从 Figma 到一个 .md 文件

DESIGN.md 是什么？

用一个文件描述整个设计系统，让 AI 能读懂“为什么这样设计”。并且完美的让任何 AI Agent（Claude Code、Codex、Cursor 等）都能直接读取运用。

如果你去 Stitch 调用 DESIGN.md，你可能会觉得并没有多少惊艳之处，甚至没有多少约束条件，毕竟在 Stitch 调用的结果就是这么一小块屏幕的内容（可切换暗色主题）

Google Stitch 中的 DESIGN.md 示例界面

如果你去翻看官网给出的文件，会发现它可能甚至不是一份通用的文件，一份简单结构的 DESIGN.md 如下：

---
version: alpha
name: Tailwind Base
description: Safe, shipping-ready, infinitely remixable.
colors:
  primary: "#0F172A"
  secondary: "#64748B"
  tertiary: "#4F46E5"
  neutral: "#F1F5F9"
  surface: "#FFFFFF"
  on-primary: "#FFFFFF"
typography:
  display:
    fontFamily: Inter
    fontSize: 3.75rem
    fontWeight: 700
    letterSpacing: "-0.03em"
  h1:
    fontFamily: Inter
    fontSize: 2.25rem
    fontWeight: 700
    letterSpacing: "-0.02em"
  body:
    fontFamily: Inter
    fontSize: 0.95rem
    lineHeight: 1.55
  label:
    fontFamily: Inter
    fontSize: 0.75rem
    letterSpacing: "0.02em"
rounded:
  sm: 4px
  md: 8px
  lg: 12px
spacing:
  sm: 8px
  md: 16px
  lg: 32px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.md}"
    padding: 12px 20px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.lg}"
    padding: 24px
---

## Overview

The default you can ship on Monday. Neutral slate, indigo action, clear type hierarchy. Nothing to prove.

## Colors

The palette is built around high-contrast neutrals and a single accent that drives interaction.

- **Primary (`#0F172A`):** Headlines and core text.
- **Secondary (`#64748B`):** Borders, captions, and metadata.
- **Tertiary (`#4F46E5`):** The sole driver for interaction. Reserve it.
- **Neutral (`#F1F5F9`):** The page foundation.

## Typography

- **display:** Inter 3.75rem
- **h1:** Inter 2.25rem
- **body:** Inter 0.95rem
- **label:** Inter 0.75rem

## Do's and Don'ts

- **Do** use Tertiary for exactly one action per screen.
- **Do** let Neutral carry the composition — negative space is a feature.
- **Don't** introduce gradients. This system is flat on purpose.
- **Don't** mix Tertiary with alternate accents; the single-accent rule is load-bearing.

可以看到 DESIGN.md 实际上混用了两种文本格式，前面部分是 YAML 后面是 Markdown：

---
# ① YAML front matter（机器层）
colors:
  primary: "#1A1C1E"  # 机器读这个
---

# ② Markdown body（语义层）
## Colors

Primary 是深墨色，传达永恒感  # AI 理解这个

YAML 层（机器执行）

定义精确值：颜色十六进制、字体参数、间距数值、组件引用。

作用：可验证、可导出、可被工具稳定理解输出。也就是类似下面的结构：

---
version: alpha
name: Daylight Prestige
colors:
  primary: "#1A1C1E"
  secondary: "#6C7278"
  tertiary: "#B8422E"
typography:
  h1:
    fontFamily: Public Sans
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.02em
---

Markdown 层（人类和 AI 理解）

解释设计意图：为什么选这个色、传达什么感觉、如何应用。

作用：让 AI 理解上下文，不只是无脑套用数值。

这部分结构如下（部分可能实际中省略）

概述（也称：“品牌与风格”）
颜色
排版
布局（也称：“布局与间距”）
高程和深度（也称：“海拔”）
形状
成分
注意事项

不好理解是吧，如果以官方示例文件的 Atmospheric Glass 这个 Design.md 为例，如果我用中文把每个结构表示一下就是：

Brand & Style（品牌风格）
该设计系统以高保真玻璃拟态为核心，通过活力极简的色彩渐变与通透的层析美学，将复杂的气象数据转化为一种深邃、空灵且富有高端感的静谧视觉体验。

Colors（颜色）
背景：深蓝夜空 + 多色渐变
组件：半透明白色（0.1 ~ 0.2）
文本：纯白 / 银灰

Typography（字体）
Inter｜几何中性
display-lg：超大温度数字
headline / body / label：标题 / 正文 / 标签
模糊背景上字重 +1 级

Layout & Spacing（布局与间距）
8px 基础网格
24px 容器边距｜16px 卡片间距｜40px 章节边距

Elevation & Depth（深度）
不靠阴影，靠模糊 + 透明
Level 2：blur 20px + 白色 0.1
Level 3：blur 40px + 白色 0.2

Shapes（形状）
卡片 16px 圆角｜按钮 24px 圆角｜柔和流动

Components（组件）
玻璃卡片：standard / elevated
按钮：primary（白底）/ ghost（透明）
输入：半透明 + 柔和圆角

会发现这是一个很清晰的常见的设计系统的思路，毕竟官方也说 DESIGN.md 的 Token 系统受 W3C Design Token Format (DTCG) 启发。

但是有趣的在第一点：概述（也称：“品牌与风格”）。

传统设计系统中，“空灵的静谧体验”这类表达只是理念层文档，帮助设计师理解方向，或是奠定品牌基因，但不进入实现层，最终往往被忽略。

design.md 的突破在于改变了它的角色：从“描述感觉”变成“生成约束”。AI 每次生成 UI 时都会读取这句话，作为决策依据持续生效——从软性审美指导，变成硬性生成上下文，直接影响颜色、动效、信息密度、交互节奏。

之所以用这种抽象表达，是因为“界面要干净”“不要制造焦虑”“节奏要克制”这类约束无法被 token 化。它们无法用颜色、间距、字体精确描述，却真实影响体验。因此需要一句话压缩表达，用极低信息成本承载大量隐性规则。

这类句子本质是“语义压缩”，通过一句话定义一整套决策边界。design.md 的突破不是发明这种表达，而是让它进入执行，尽可能让“品味”这种东西，不再只是被理解，而是被稳定复现。

压缩的威力：

设计从“人来解释”变成“系统直接执行”

传统设计系统流程：

Figma / 文档规范 → 设计师解释 → 开发理解与实现 → Design Token → UI 落地（过程可能产生偏差）

design.md 流程是：

design.md（设计即源代码） → AI / 工具解析 → 自动生成 Token + 组件 → UI 落地（结果天然一致）

看起来，设计被“压缩”了。

但真的是这样吗？

二、被压缩的不是设计

传统设计师的日常：

画 200 个组件变体，写 50 页文档，同步 Figma 和代码。最耗时的是什么？开会。一个下午三个会，解释为什么这里用蓝色、那里圆角改成 8px。

有了 DESIGN.md 后：

定义 primary 是“永恒感的墨色”，AI 自动生成 200 个变体，代码、文档自动同步，推理层已经写清楚“为什么”。

消失的是重复劳动，不是设计本身。

而留下的，是那些最需要思考的问题：

为什么 primary 是 #1A1C1E 而不是 #000000？

为什么字间距是 -0.02em 而不是 0.05em？

为什么圆角 4px 传达“工业感”？

AI 不会替你回答。

DESIGN.md 只是容器，设计师提供的是：

品牌基因
审美决策
设计哲学

这些，才是设计的更重要的表达。

三、设计师如何代入新角色

从“执行者”到“决策者”

传统角色：画图 + 写文档 + 维护一致性

新角色：做选择 + 解释为什么 + 验证结果

规范让建筑师从画施工图中解放，专注空间美学。DESIGN.md 让设计师从“文档工”回归“设计师”本质。

Token 是决策，不是变量

primary: "#1A1C1E"  # 不是"一个颜色值",是"主要文本墨色"这个角色

改一次 primary，所有组件同步更新。不是变量替换，是语义传播。

推理层：让上下文不脱节

传统痛点：

风格指南说“温暖主色调”，代码写 #B8422E，半年后没人记得为什么。

DESIGN.md 解法：

colors:
  tertiary: "#B8422E"

## Colors

**Tertiary:** 陶土红作为交互唯一驱动，传达温暖而克制的行动召唤。

同一文件牢牢绑定，你始终理解“为什么”。

三个层次的分工

L1 - 执行层：画一个按钮

L2 - 系统层：定义按钮规则

L3 - 产品层：为什么需要这个按钮

DESIGN.md 接管 L1 和 L2，设计师专注 L3。

AI 生成上百种设计表达，设计师选对的那个

比如 Atmospheric Glass 的表达：

空灵 + 功能性 + 高保真玻璃折射，让用户感受宁静和高级感，核心武器是光学折射而非阴影

这个表达可能是 AI 生成的，有可能是设计师改动加入的，但关键在于：

方向对不对、符不符合品牌、出了问题谁负责——这些判断，还是设计师做。

设计师的价值从“生成答案”变成“做出正确的选择”。

AI 时代的设计师思考什么

为什么这样设计？每个决策背后的意图
想传达什么感觉？情感目标而非视觉目标
如何让 AI 理解？把隐性知识显性化

测试方法：

把制作的 DESIGN.md 发给 AI，让“生成一个登录页”。检查 AI 是否用对了颜色角色、理解了品牌人格、设计“对味”。

四、还需要设计师做什么？

当设计被压缩成 DESIGN.md，还需要设计师做什么？

答案：一切 AI 无法决定的事。

AI 能做的：

生成 200 个变体
检查对比度
同步代码和文档

AI 做不到的：

为什么选这个颜色
想传达什么感觉
品牌的灵魂是什么

DESIGN.md 不是压缩设计，是解放设计师，不是终点，是起点。

**AI 能理解“为什么这样设计”，设计师的价值不是降低了，而是回归了，从重复劳动中解放，回归设计的本质，**思考我们需要通过设计来解决什么问题？定义感觉和创造意义。

这些，永远需要人。

而 DESIGN.md，只是让我们有更多时间思考这些问题。

Design is how it works

公众号《重启视觉》同步更新。

END ◆

当设计被压缩成 DESIGN.md，还要设计怎样 | Zero Yue