VibeCoding时代,AI生成UI的速度已经很快了。但生成出来的界面往往风格不一致——因为AI没有"参考设计系统",每次生成都是随机的。

Google Stitch解决了这个问题,而VoltAgent的awesome-design-md把这个思路做成了一个可复用的文档库。

核心思路

文件读者作用
AGENTS.md编码Agent如何构建这个项目
DESIGN.md设计Agent项目长什么样

DESIGN.md = 纯文本设计系统,LLM原生,无需Figma或JSON配置文件。

每一个DESIGN.md包含9个部分

  1. 视觉主题与氛围
  2. 色彩体系与角色
  3. 字体规范
  4. 组件样式(按钮、卡片、输入框、导航)
  5. 布局原则
  6. 深度与层级
  7. 做与不做
  8. 响应式行为
  9. Agent提示词指南

使用方法

  1. 找一个风格接近你需求的DESIGN.md
  2. 复制到项目根目录
  3. 告诉AI agent:"用这个DESIGN.md作为参考构建页面"

这就是用自然语言做设计——不需要截图,不需要上传Figma,AI可以直接"读"这个文档然后生成代码。