为什么 DESIGN.md 是 Cursor 的最佳搭档
Cursor 和其他 AI 编程助手最强大的地方在于理解上下文。但问题在于：如果你没有给它足够精确的设计上下文，它只能基于训练数据中的"平均风格"来生成代码。这就是为什么很多人会反馈"AI 生成的界面看起来总是千篇一律"。
Design Extractor 的核心价值，就是把任意网页的视觉 DNA 完整地提取成结构化的 DESIGN.md 文档。这份文档包含了配色、字体、间距、动效、组件规范等全部关键信息。当你把它作为 System Prompt 的一部分喂给 Cursor 时，相当于给了 AI 一副精确的设计眼镜。
第一步：生成 DESIGN.md
安装 Design Extractor Chrome 扩展后，打开你想要复刻的网页——比如 Linear、Vercel 或 Stripe 的官网。点击扩展图标，选择 AI 模型（支持 OpenAI、Kimi 等），等待 30 秒左右，你会得到一份完整的 Markdown 格式设计规范。
这份文档通常包含以下章节：
- Visual DNA：整体氛围和视觉特征描述
- Color System：完整配色方案，包含 HEX、RGB、HSL
- Typography：字体栈、字号层级、行高、字间距
- Spacing：padding、margin、gap 规律
- Motion：transition、animation 参数
- Components：Button、Card、Input 等组件规范
- Layout：栅格系统、断点、响应式策略
第二步：配置 Cursor System Prompt
打开 Cursor 的设置，找到"Rules for AI"或"System Prompt"的配置区域。将你生成的 DESIGN.md 内容完整粘贴进去，并在开头加上一段引导语：
你是一位资深前端工程师，请严格遵循以下设计规范来生成代码。所有样式必须使用 CSS 变量或 Tailwind 类名实现，确保视觉还原度达到 95% 以上。
建议同时加上以下约束：
- 使用设计规范中指定的精确色值，不要近似
- 严格遵循字体栈和字号层级
- 交互元素的 hover、focus 状态必须与设计文档一致
- 动效时长和缓动曲线必须精确匹配
第三步：在对话中引用规范
当你让 Cursor 生成具体组件时，不要只说"做个按钮"。而是要引用设计规范中的具体定义。例如：
根据 DESIGN.md 中 "Buttons" 章节的规范，生成一个 Primary Button 组件。要求：圆角 6px，背景色 #5E6AD2，hover 时背景色变为 #4F5AC0，过渡时长 150ms，缓动函数 ease-out。
这种精确的指令方式，能让 Cursor 直接命中设计规范中的对应段落，生成的代码几乎不需要二次调整。
实战案例：复刻 Linear 风格
我们用上述方法复刻了 Linear 官网的首页 Hero 区域。对比实验显示：
- 无 DESIGN.md：Cursor 生成了通用的蓝色渐变按钮，圆角过大，字体不匹配
- 有 DESIGN.md：生成的按钮圆角、色值、字重、hover 效果与 Linear 官网几乎一致
更关键的是，当后续需要生成其他组件（如导航栏、卡片、表单）时，Cursor 会自动沿用同一套设计系统，保持全站风格一致。
进阶技巧
1. 多页面设计一致性
如果你要做一个多页面的网站，建议把 DESIGN.md 作为全局 System Prompt，同时在每个新对话的开头简要提醒"请继续使用 DESIGN.md 中的设计规范"。
2. 与 Tailwind 结合
Design Extractor 生成的规范中包含大量具体的数值。你可以先用一个简单的脚本把这些数值转换成 Tailwind 配置文件的 theme.extend 部分，然后在 Cursor Prompt 中说明"使用自定义 Tailwind 配置中的颜色/间距名称"。
3. 迭代优化
第一次生成的代码可能仍有细微偏差。不要直接修改代码，而是把问题描述+设计规范中的对应段落一起反馈给 Cursor，让它自行修正。这样可以保持设计规范的唯一权威来源地位。
总结
DESIGN.md + Cursor 的组合，本质上是把"模糊的设计感觉"转化为了"精确的工程规范"。对于独立开发者、前端工程师和设计师来说，这意味着：
- 不再依赖"做成那种感觉"这种无法量化的描述
- AI 生成的代码可以直接用于生产环境
- 团队协作时，设计规范有了唯一可信的来源
如果你还没有尝试过，现在就去 Chrome Web Store 安装 Design Extractor，选一个你喜欢的网站，生成你的第一份 DESIGN.md 吧。