主题
Skill: Design.md
基于 VoltAgent 的
awesome-design-md,让 AI 客户端在生成页面前读取DESIGN.md设计系统说明,从颜色、字体、组件、布局和响应式规则上保持一致。
作用说明
DESIGN.md 是一种面向 AI Agent 的纯 Markdown 设计系统文件。它不依赖 Figma 导出、JSON Schema 或专用工具,而是把一个产品或品牌的视觉语言写成 AI 容易读取的文本约束。
VoltAgent 的 awesome-design-md 收集了来自真实网站的 DESIGN.md 示例。使用方式很直接:复制某个站点的 DESIGN.md 到项目根目录,再要求 AI 按这个设计系统生成页面或组件。
它适用于:
- 为新页面快速确定视觉方向
- 让 AI 按指定品牌或产品风格生成 UI
- 给已有页面补齐颜色、字体、间距、按钮、卡片和响应式规则
- 在没有完整设计稿时,用成熟网站的设计系统作为参考
- 与 Vue、Vite、Antdv Next 等开发 Skill 组合使用
DESIGN.md 定义什么
awesome-design-md 的 README 将 DESIGN.md 与 AGENTS.md 做了明确区分:
| 文件 | 读取者 | 定义内容 |
|---|---|---|
AGENTS.md | Coding agents | 项目如何构建、测试、修改 |
DESIGN.md | Design agents | 项目应该如何呈现视觉和体验 |
换句话说,AGENTS.md 管工程规则,DESIGN.md 管视觉规则。两者可以同时存在,并且互不替代。
常见内容结构
awesome-design-md 中的每个 DESIGN.md 通常覆盖这些内容:
| 区块 | 说明 |
|---|---|
| Visual Theme & Atmosphere | 情绪、密度、设计哲学 |
| Color Palette & Roles | 语义颜色、十六进制色值和使用场景 |
| Typography Rules | 字体族、字号层级、字重和标题规则 |
| Component Stylings | 按钮、卡片、输入框、导航及状态 |
| Layout Principles | 间距、网格、留白和版式原则 |
| Depth & Elevation | 阴影、层级和表面系统 |
| Do's and Don'ts | 设计守则和反模式 |
| Responsive Behavior | 断点、触控目标和移动端策略 |
| Agent Prompt Guide | 可直接复制给 AI 的提示词和关键颜色参考 |
获取方式
浏览仓库:
text
https://github.com/VoltAgent/awesome-design-md克隆到本地:
bash
git clone https://github.com/VoltAgent/awesome-design-md.git然后从 design-md/<brand>/DESIGN.md 中选择合适的设计系统,复制到当前项目根目录或放入约定的设计参考目录。
每个站点目录通常包含:
| 文件 | 用途 |
|---|---|
DESIGN.md | AI 读取的设计系统说明 |
preview.html | 展示颜色、字体、按钮、卡片等视觉目录 |
preview-dark.html | 深色表面的视觉目录 |
使用方法
为了稳定触发,建议在提示词前显式声明:
text
use design.md skill, <你的需求>常见示例:
text
use design.md skill, 参考 Claude 的 DESIGN.md 重做当前首页text
use design.md skill and vue skill, 按 Vercel 风格实现一个项目详情页text
use design.md skill and antdv-next skill, 参考 Stripe 风格实现一个后台仪表盘,组件使用 Ant Design Vue Next选择参考风格
awesome-design-md 按行业整理了大量示例,常见分类包括。点击公司名可以直接前往官网,快速查看它们的真实页面设计:
- AI 与大模型平台: Claude（克劳德）、Cohere（科希尔）、ElevenLabs（十一实验室）、Mistral AI（米斯特拉尔 AI）、Ollama（奥拉马）、Replicate（瑞普利凯特）、Runway（润威）、Together AI（Together AI）、VoltAgent（伏特智能体）、xAI（xAI） 等
- 开发工具与 IDE: Cursor（光标）、Expo（世博）、Lovable（洛瓦布）、Raycast（射线）、Superhuman（超人邮件）、Vercel（维ercel）、Warp（沃普终端） 等
- 金融科技与加密货币: Binance（币安）、Coinbase（Coinbase）、Kraken（Kraken）、Mastercard（万事达卡）、Revolut（Revolut）、Stripe（Stripe）、Wise（Wise） 等
- 电商与零售: Airbnb（爱彼迎）、Meta（元宇宙公司）、Nike（耐克）、Shopify（Shopify）、Starbucks（星巴克） 等
- 媒体与消费科技: Apple（苹果）、IBM（国际商业机器）、NVIDIA（英伟达）、Pinterest（品趣志）、PlayStation（游戏站）、SpaceX（太空探索技术公司）、Spotify（声田）、The Verge（边缘网）、Uber（优步）、WIRED（连线） 等
- 汽车与出行: BMW（宝马）、Bugatti（布加迪）、Ferrari（法拉利）、Lamborghini（兰博基尼）、Renault（雷诺）、Tesla（特斯拉） 等
选择时不要只看品牌名,应看它的视觉特征是否匹配当前产品:
- SaaS 后台:优先选择 Vercel、Stripe、Linear 类的克制、信息密度高的风格
- AI 工具:优先选择 Claude、Mistral AI、VoltAgent、Together AI 等技术产品风格
- 内容站:优先选择 The Verge、WIRED、Apple 等编辑和展示能力强的风格
- 电商和活动页:优先选择 Nike、Shopify、Airbnb 等视觉资产驱动的风格
与其他 Skill 的关系
- Vue: 负责 Vue 组件、状态、路由和测试实现
- Vite: 负责 Vite 配置、构建、插件和开发服务器
- Ant Design Vue Next: 负责 Antdv Next 组件 API、示例和主题 Token
DESIGN.md: 负责页面应该长什么样、用什么视觉语言和交互密度
推荐工作流:
- 先选择或编写
DESIGN.md - 再用
vue/antdv-next/vite等 Skill 完成实现 - 最后检查页面是否遵守
DESIGN.md中的颜色、字体、间距、组件状态和响应式规则
常见问题
DESIGN.md 可以替代设计稿吗?
不能完全替代。它适合给 AI 明确视觉约束和风格方向,但复杂产品仍需要信息架构、交互流程和关键页面验收。
是否应该直接照搬品牌?
不建议照搬商标、专属素材或完整品牌识别。更合适的做法是借鉴设计系统的结构,例如颜色角色、排版密度、按钮状态和布局节奏。
放在项目哪里?
最简单的方式是放在项目根目录 DESIGN.md。如果项目维护多个视觉方向,可以放在 docs/design/ 或 design-md/ 下,并在提示词中明确使用哪个文件。
参考链接
- Awesome DESIGN.md: https://github.com/VoltAgent/awesome-design-md
- README: https://github.com/VoltAgent/awesome-design-md/blob/main/README.md
- VoltAgent: https://github.com/VoltAgent