AI 可读规范DESIGN.md
什么是
DESIGN.md?
DESIGN.md 是一份给 AI 编程助手阅读的设计说明书。它把风格方向、设计 token、组件结构、使用规则和禁止项写成清晰文本，让 AI 在任何代码项目里都能按同一套视觉系统生成界面。
适配
+10
兼容性
可配合主流 AI coding agent 使用
DESIGN.md
规范片段
把审美决策写成可执行约束
## Components
- Primary button: ember fill, 40px height.
- Card: graphite surface, 1px hairline border.
- Form fields: visible label, focus uses accent ring.
## Do
- Reuse the token scale before adding new colors.
- Pair every icon action with a readable label.
## Don't
- Don't invent gradients or extra accent colors.
- Don't use decorative badges without real state.它不是组件库
DESIGN.md 不绑定 React、Vue 或任何框架。它更像一份跨项目的风格协议，告诉 AI 应该如何组织界面。
它不是普通文档
它写给人看，也写给 AI 看。内容需要足够具体，能直接约束颜色、字号、间距、组件状态和交互边界。
它让生成更稳定
当 AI 读过 DESIGN.md，同一产品里的页面会更一致，减少随机颜色、奇怪圆角、重复布局和风格漂移。
文件 anatomy
一份好的 DESIGN.md 里面应该有什么？
核心不是把审美写得漂亮，而是把“可以执行的视觉判断”写清楚。AI 需要具体边界，越具体，生成结果越稳定。
品牌与场景
说明这套规范适合什么产品、目标用户是谁、界面应该传递什么气质。
视觉 token
把颜色、字体、圆角、阴影、间距写成明确变量，减少 AI 自由发挥。
组件规则
规定按钮、卡片、输入框、导航、状态标签等组件应该如何组合和响应。
生成边界
列出 Do / Don’t，告诉 AI 哪些写法必须遵守，哪些视觉噪音不能出现。
使用方式
放进项目后，AI 就有了风格上下文
1
选择一套设计系统，下载包含 DESIGN.md、system.css、预览 HTML 和截图的资源包。
2
把 DESIGN.md 放到项目根目录或交给 AI 编程助手读取。
3
让 AI 按文件里的 token、组件结构和禁用规则生成页面，而不是重新发明一套样式。
提示词示例
让 AI 先读规范，再开始生成
prompt可复制
请先阅读项目根目录的 DESIGN.md 和 css/system.css。接下来生成页面时，必须复用其中的颜色、字体、间距、组件结构和禁用规则。不要新增未定义的视觉风格，也不要把页面做成营销页，优先生成可实际使用的产品界面。