给AI写一份"UI说明书"，就能生成和任何大牌网站一样风格的界面

这个思路来自 Google Stitch 提出的 DESIGN.md 概念——一个纯文本的设计系统文档，AI Agent 读完之后就知道这个项目的 UI 该长什么样。

VoltAgent 做的事是：把 72 个知名网站的设计系统全部提炼成了 DESIGN.md 文件，放到 GitHub 上开源。

DESIGN.md 是什么

就是一个 Markdown 文件。没有 Figma 导出，没有 JSON Schema，没有任何特殊工具。

扔到项目根目录，告诉你的 AI 编程助手"按照这个风格帮我做一个页面"，它就能生成视觉上高度一致的 UI。

逻辑上和 AGENTS.md 是一对：

AGENTS.md — 告诉 AI 怎么构建项目（工程规范）
DESIGN.md — 告诉 AI 项目应该长什么样（设计规范）

每个文件包含什么

每份 DESIGN.md 都按照固定结构提炼了 9 个维度：（1）视觉主题与氛围（设计哲学、信息密度）

（2）色板与语义角色（颜色 + Hex + 用途定义）

（3）字体规则（字族、完整层级表）

（4）组件样式（按钮、卡片、输入框，含各状态）

（5）布局原则（间距尺度、网格、留白哲学）

（6）层次与阴影（投影系统、表面层级）

（7）Do's & Don'ts（设计护栏和反例）

（8）响应式行为（断点、触摸目标）

（9）Agent Prompt 指南（颜色速查表 + 现成 prompt）

非常有用！

Vibe Coding 时代最大的痛点之一是：AI 生成的 UI 视觉质量参差不齐，风格混乱，和你想要的差一截。

DESIGN.md 本质上是在给 AI 装一个"美学约束"——不是靠 prompt 里描述颜色，而是直接把完整的设计语言喂给它。

这个项目把别人已经验证过的、被市场认可的设计系统，变成随手可取的文件。

现在覆盖的网站

72 个，横跨主流 AI、开发工具、金融科技、电商、汽车、媒体： Claude（暖陶砖色调）、Cursor（暗色+渐变）、Vercel（黑白精准）、Stripe（紫色渐变+字重 300）、Linear（超极简+紫色）、Notion（温暖极简+衬线标题）、Figma（多色+活泼）、Spotify（暗色+绿色+专辑封面驱动）、Tesla（激进减法+全视口摄影）、Ferrari（黑白高对比+极度稀疏）……

甚至还有 Dell 1996 年的老网站设计——让 AI 生成复古 UI 也行。

项目地址：github.com/VoltAgent/awesome-design-md