DESIGN.md 是什么？

你只需要把 DESIGN.md 放到项目根目录里，支持它的 AI 工具（比如 Cursor、Claude Code）就会自动读取并参考里面的规则。而且它还能在不同项目之间复用，你不用每次重新定义一套设计语言。当然，这本身只是一个规范模板，并不意味着你必须严格照着写。重点其实只有一个：让 AI 能够“清晰理解”你的设计体系。你完全可以用自己的方式描述，只要表达足够清楚即可。目前比较常见的几种生成方式： 方式 A：给 AI 看设计稿, 截图或描述 把 Figma 截图、品牌色板、UI 页面截图发给 Claude 或 ChatGPT，然后用类似这样的 Prompt：“请根据以下设计内容，生成标准的 DESIGN.md 文件。 格式要求： 1. 顶部用 YAML front matter 定义所有设计 token（颜色、字体、间距、圆角、阴影） 2. 正文用 Markdown 说明每个 token 的使用场景和禁止事项 3. 包含 Components 章节，描述主要组件的视觉规则 设计内容如下：[粘贴你的描述 / 上传截图] 这个方式其实非常实用，我最近主要也是这么做的。 方式 B：从 Figma Variables 导出如果你本身就在用 Figma Variables / Design Tokens：可以直接导出 JSON再让 AI 自动转换成 DESIGN.md这样效率会更高。方式 C：Google Stitch 自动生成Google Stitch 本身支持直接导出 DESIGN.md。如果你已经在用 Stitch 做项目，那这个应该是最省事的方式了，一键就能生成。方式 D：直接使用现成的 DESIGN.md 模板现在 GitHub 上已经有不少现成的 DESIGN.md 模板了，包括很多独立开发者网站也会分享。很多人会专门去研究一些设计非常优秀的网站，然后把它们的设计体系整理成 Markdown 格式，最终变成一份完整的 DESIGN.md。这样你其实就不用从零开始写。你可以直接把这些模板下载下来，丢进自己的项目里，再交给 Claude Code、Codex、Cursor 这种 AI Agent。比如直接一句：“按照这个 DESIGN.md 的风格，帮我生成一个 SaaS 官网”AI 基本就能直接开始按那个视觉体系输出页面了。后面你自己再补充品牌内容、文案、图片、业务逻辑即可。

That’s it.

好看的Markdown阅读编辑器 没有必要用AI手搓