DESIGN.md 使用指南
DESIGN.md 把网站的设计系统变成一个你的编程智能体可以读取的文件:颜色、字体排版、间距、圆角和组件,以及使用它们的规则。这些指南一步步演示如何使用它,每篇都附有一个基于 DESIGN.md 示例库中真实文件的实例。
刚接触这个格式?请从什么是 DESIGN.md开始。准备好生成一份了吗?从任意网站获取 DESIGN.md。
按使用场景浏览指南
- 使用 AI 编程智能体开发的开发者
让 Claude Code 和 Cursor 构建与网站风格一致的界面
提取你喜欢的网站,把它的 DESIGN.md 放进仓库并让智能体指向它,附 Claude Code 和 Cursor 的完整提示词。
- 独立创始人和小团队
没有设计师?为你的应用借鉴一套成熟的设计系统
如何挑选参考网站,DESIGN.md 中哪些该保留、哪些该修改,让结果属于你自己而不是一份复制品。
- 计划重构、品牌升级或迁移的团队
要重构网站?先提取它的设计系统
在重构、品牌升级或迁移框架之前,把当前网站保存为 DESIGN.md,并了解哪些内容需要手动检查。
- 做原型的设计师和代理机构
把两个参考网站融合成一套原型设计
逐个令牌比较两份提取出的 DESIGN.md,然后手动或借助智能体把它们合并成一份用于原型的规范。
- 构建智能体和智能体工作流的开发者
用 MCP 按需为你的编程智能体提供设计规范
连接 MCP 服务器,让你的智能体自己提取网站的 DESIGN.md,等待提取完成,然后据此构建。