awesome-design-md 使用规范

实际使用场景：用 awesome-design-md 复刻 Vercel 风格做官网

工具：Cursor IDE + 该仓库 DESIGN.md 目标：让AI全程严格按Vercel视觉规范写页面

步骤1：拉取仓库资源

1. 打开终端，克隆仓库

git clone https://github.com/VoltAgent/awesome-design-md.git

2. 进入仓库文件夹，浏览分类目录

步骤2：挑选目标设计规范

1. 进入 dev-tool/ 目录
2. 找到 vercel.md，全选复制全部内容

步骤3：项目内放置规范文件

1. 打开自己的前端项目（Vue/React/HTML均可）
2. 在项目最根目录，新建文件，命名必须为： DESIGN.md
3. 把刚才复制的 Vercel 设计内容，完整粘贴进去，保存

规则：文件名不能改、位置不能改、内容不删减不修改

步骤4：确认DESIGN.md内部标准字段齐全

核对内含内容（无需编辑）

• 品牌视觉定位
• 主色/辅助色/中性色色值
• 全局字体、字号层级
• 圆角、间距、阴影统一规则
• 按钮、卡片、导航、输入框组件样式
• 页面布局、留白、响应式规则

步骤5：打开Cursor开启设计约束

1. 打开Cursor，加载当前项目
2. 在AI对话框输入固定触发指令

请严格遵循本项目根目录下 DESIGN.md 文件内的所有设计规范进行开发，所有页面配色、字体、圆角、边距、组件样式、排版布局全部对齐Vercel设计风格，禁止自定义额外样式，做到视觉统一。

步骤6：下达具体开发需求

接着输入实际业务需求，示例：

帮我写一个产品官网首页，包含顶部导航栏、英雄区介绍、功能模块卡片、底部页脚，整体风格跟随DESIGN.md规范。

步骤7：AI生成代码 & 自查合规

1. AI自动读取根目录DESIGN.md，自动套用色值、圆角、间距
2. 生成完成后人工快速校验3点
   • 颜色是否和文档色值一致
   • 按钮圆角、阴影是否统一
   • 字体层级、行距是否匹配规范

步骤8：微调修改规范（如需改风格）

1. 不想用Vercel风格
2. 直接删掉根目录DESIGN.md
3. 重新从仓库挑选如linear.md/claude.md
4. 重新粘贴覆盖，再次告知AI遵循新规范即可

步骤9：团队协作统一规范

1. 项目提交代码时，把DESIGN.md一并提交入库
2. 所有成员拉取代码后自动同步统一设计标准
3. 全员开发都按同一份文档执行，UI无偏差

步骤10：使用禁忌收尾

1. 不拼接多个不同网站的md内容混用
2. 不商用做高度高仿竞品页面，仅用于学习、自用项目
3. 不删减设计文档里的细节约束