说起来并不复杂。每次让AI生成页面时，很多人都会卡在同一个问题上。
第一眼效果还不错，翻到第二屏就开始走样。按钮样式、字体选择、间距控制、卡片阴影，每一部分都像来自不同项目。截屏反馈、逐句写描述、甚至贴Figma链接，效果依然不稳定——AI能理解一部分内容，但也一定会自行脑补另一部分。页面数量一多，整体风格就彻底乱了。
这正是DESIGN.md诞生的背景，它绝非偶然出现的想法。
2025年5月20日，Google在I/O大会上正式发布Stitch，目标非常明确：将自然语言或图片提示快速转化为高保真的UI与前端代码。到了2026年3月18日，Google又补充推出了DESIGN.md，官方定义为“一种适合agent阅读的Markdown设计规则文件”，既能从URL中抽取设计系统，也能在Stitch与其他工具之间实现导入导出和复用。
社区这边同样在积极推进，awesome-design-md就是大家共同整理出的示例库，相当于一整套开箱即用的现成模板。Google负责确立方向，社区负责填充样板，两条路线同步推进。
为什么这东西值得学习
DESIGN.md的核心价值，一句话就能讲清楚：它把设计约束从脑海中的感性认知，变成了项目里的可执行文件。
过去你跟AI说“做得更有质感一些”“极简风格”“像Vercel那样”，这些指令全都比较模糊。AI偶尔能猜对，更多时候直接跑偏。现在你可以把颜色、字体、字号层级、按钮风格、圆角大小、阴影效果、留白原则，全部写进一个文本文件里，让AI先读取规则再生成页面。这样做出来的成果，至少不会飘忽不定。
更有价值的变化还在后面。
过去设计系统是设计团队的专属资产，被锁在Figma、Design Token平台或者一大堆规范文档里。如今它们开始变成AI可以直接消费的项目上下文。换句话说，设计不再仅仅是一份给人阅读的说明书，它开始演变为机器也能执行的配置文件。这个趋势如果持续下去，未来很多团队的设计交付方式都将发生改变——交付物不再是设计稿，而是一份AI能够持续读取、持续执行的设计规则文件。
所以这个思路值得现在就上手实践，理由有几个：第一，成本非常低，只是一个Markdown文件；第二，见效很快，尤其适合独立开发者、前端工程师、产品经理，或者没有完整设计团队的小项目；第三，它和当前的AI编码工作流天然契合，AI本来就擅长处理文本，DESIGN.md恰好为它提供了一份既结构化又轻量的设计说明；第四，越早养成这种习惯，后期你和AI的协作成本就越低。项目规模一大，再补充设计规则，往往更加痛苦。
DESIGN.md到底长什么样
直接浏览社区仓库里的示例，你会发现它本质上就是一份写得很细致的设计系统说明。以Vercel的样本为例，一份典型的DESIGN.md通常涵盖这些内容：
- 整体视觉气质定位
- 颜色体系与颜色角色定义
- 字体选择与字号层级规划
- 按钮、卡片、输入框、导航等组件的样式规则
- 布局与留白基本原则
- 阴影与层级关系处理
- 推荐做法与禁止做法清单
- 响应式行为规范
- 面向agent的提示语模板
你可以把它理解成一份专门为AI重新编写过的设计规范，核心信息全部保留，但写法更便于模型读取和执行。
开始前，先准备这几样东西
初次上手不需要太复杂的配置。有这些就足够了：
- 一个现成项目，哪怕是空的前端项目也可以
- 一个AI编码工具，比如Codex、Cursor、Claude Code这类
- 一份你看得顺眼的DESIGN.md，直接从社区仓库里获取
- 最好再有一个明确的目标页面，比如官网首页、登录页、产品介绍页
如果你还没有自己的设计语言体系，最简单的起步方式，就是直接从awesome-design-md里挑选一个风格直接借鉴。
标准上手教程
第一步，先选一个参考风格
对新手来说，不要一开始就想着自己写一份完整的DESIGN.md。先借一份成熟样本更加省时省力。
从仓库里挑一个你喜欢的网站风格，比如Vercel那个。每个站点通常都附带三份文件：
- DESIGN.md
- preview.html
- preview-dark.html
最有价值的其实不只是DESIGN.md，还有preview.html——它能让你先直观确认这套规则最终会产出什么样的视觉效果。很多人一上来就直接复制文件，结果做完才发现整体气质不对，白白浪费好几轮调试。
第二步，把DESIGN.md放进项目根目录
这一步特别关键，千万别把它丢进某个角落文件夹里。
大多数AI编码工具在读取项目上下文时，会优先关注根目录里的关键说明文件。所以你的目录结构应该像这样：
my-project/ DESIGN.md package.json src/ public/
如果使用社区仓库样本，直接把目标站点里的DESIGN.md复制出来，放到这个位置就可以了。
第三步，先仔细读一遍文件，别急着生成
这一步很多人会跳过，然后在第五步开始对着AI发脾气。
你至少需要确认三件事。第一，整体气质是否符合你的预期；第二，文件写得是否足够细致，有没有清晰的颜色、字体、组件规则；第三，它有没有包含你根本不想要的东西，比如过重的阴影、强烈的渐变、很夸张的圆角。这些方向如果没有对齐，后面再怎么调整提示词，AI也会带着错误的设计规则一路跑偏。
第四步，给AI的第一条指令要具体明确
很多人把DESIGN.md放进去之后，就只扔一句“做个首页”，这样的指令太模糊了。
更稳妥的做法，是明确告诉AI先读取DESIGN.md，再限定页面目标、信息结构和输出范围。比如：
请先完整阅读项目根目录的DESIGN.md。基于其中的颜色、字体、间距、按钮、卡片和响应式规则，先实现一个SaaS官网首页的首屏。页面包含：1.顶部导航 2.主标题和副标题 3.两个CTA按钮 4.一张产品预览图。要求：1.严格遵守DESIGN.md 2.先做桌面端，再兼顾移动端 3.不要自由发挥新的颜色和组件风格 4.先只完成首屏，不要一次铺满整页。
DESIGN.md的作用不是替代提示词，而是为提示词提供基础。没有这个基础，AI只能靠猜测；有了这个基础，AI才开始依据规则执行。
第五步，先做一屏，再扩展整页
这是一条非常实用的经验——不要一开始就让AI生成完整站点。
先做一屏，原因很简单：你需要先验证它是否真正理解了DESIGN.md。重点观察这些方面：字体气质是否合适、按钮是否像同一套系统、间距有没有明显失衡、卡片边框阴影是否按规则执行、移动端有没有直接崩溃。首屏都没有站稳，继续往下扩展，只会把错误复制到更多页面上。
第六步，不满意时优先修改DESIGN.md，别只改提示词
这一步是很多人从“试玩”进入“真正会用”的分水岭。
如果你发现AI每次都把按钮做得太圆、阴影太重、或者标题不够克制，第一反应通常是继续加提示词。这能解决一次问题，但解决不了下一次。更稳妥的办法，是直接修改DESIGN.md里的规则。
比如你可以在文件里写：## Buttons - Primary button radius: 6px - Do not use full pill buttons for primary actions - Shadow should stay subtle and low contrast ## Typography - Headings should feel compact and restrained - A void oversized letter spacing
规则写进文件后，AI后面每一轮都会自动继承。到了这一步，DESIGN.md才真正开始像设计系统，而不只是一次性的提示词附件。
第七步，开始扩展到第二屏、第三屏
首屏确认没有问题之后，再继续做功能区、案例区、价格区、FAQ、页脚这些模块。
这时观察的重点发生了变化：前面看的是单个模块是否协调，现在要看的是整站一致性。比如第二屏和第一屏是否还像同一个产品？卡片体系有没有突然换风格？正文段落和标题层级有没有出现混乱？新增模块有没有偷偷引入新颜色？如果有，继续回头补充DESIGN.md，而不是只在当前模块打补丁。
第八步，如果你在用Stitch，可以走官方工作流
如果直接使用Google Stitch，玩法会更加完整。根据Google 2026年3月18日的官方更新，Stitch已经支持两件事：一是从任意URL提取设计系统；二是通过DESIGN.md在Stitch和其他工具之间导入导出设计规则。
对新用户最稳妥的用法是这样的：先找一个你喜欢的网站，或者先在Stitch里做出第一版风格→让Stitch抽取或整理出设计系统→导出为DESIGN.md→把这份文件放进你的代码项目根目录→再让编码agent按这份规则生成页面→如果代码侧改得更合理，再把规则回写到DESIGN.md→需要时再带回Stitch继续迭代。这里没有写某个按钮的具体文案，因为Stitch还在快速迭代，界面细节以后会变，但这个工作流本身是稳定的，今天能用，后面大概率也还成立。
第九步，把它当项目资产，不要当临时文件
当项目里已经有3到5个页面都在按这份规则生成时，就别把DESIGN.md当成一次性的实验文件了。把它纳入版本管理，每次修改设计方向时同步更新它，团队里有多人协作时也让大家都认可这一份规则。到了这一步，它的价值才真正体现出来：你不再需要每次开新页面都重新讲一遍风格，而是可以复用一套已经验证过的设计上下文。
最容易踩的几个坑
- 是把DESIGN.md当作万能药。它能显著提升一致性，但页面的信息架构、文案质量、业务理解，还是得靠你自己提供清楚。
- 是样本抄得太满。用Vercel风格起步没问题，但如果连信息组织、文案语气、组件布局都一股脑复制，最后做出来的东西很容易像高仿站。更好的方式，是借鉴它的设计语言，而不是照搬它的业务表达。
- 是文件写得太抽象。“高级”“现代”“科技感”这类词汇，AI能理解一些但不够稳定。真正有效的，还是颜色值、字号层级、圆角大小、阴影参数、布局密度、组件约束这些具体规则。
最后
如果你今天还把AI做页面理解成“多写几句提示词”，那大概率已经开始落后了。
DESIGN.md让设计规则第一次像代码规则一样，能够被保存、复用、传递、版本化，也能被agent直接执行。这个方向一旦成立，后面的UI工作流会越来越成体系。
所以建议很直接。如果你是新手，今天就去找一份现成的DESIGN.md，先跑通一个首页。如果你已经在用AI写前端，把DESIGN.md放进项目根目录，别再只靠口头描述风格。如果你有自己的产品，尽早把那套隐性的审美偏好写成文件——越早写下来，后面返工越少。
这东西现在还处在早期阶段，但已经足够实用了。早点用起来，收益是立竿见影的。
