https://github.com/VoltAgent/awesome-design-md前端ui设计

使用 awesome-design-md 的过程非常轻量，核心逻辑就是“把大牌的设计规范丢给 AI，让 AI 照着它写代码”。

具体可以分为以下四个简单的步骤：

第一步：挑选并获取你喜欢的 DESIGN.md

1. 打开 VoltAgent/awesome-design-md GitHub 仓库。
2. 进入 design-md/ 目录，你会看到几十个知名品牌（如 Vercel、Linear、Stripe、Cursor、Apple 等）的文件夹。
3. 进入你心仪的品牌文件夹（例如 vercel），复制或者下载里面的 DESIGN.md 文件。

第二步：放到你的项目根目录

将选好的 DESIGN.md 文件直接复制并放入你当前正在开发的项目根目录下（通常和 package.json、README.md 处于同一层级）。

小贴士：你也可以顺便看一下该目录下的 preview.html 或 preview-dark.html（如果有的化），在浏览器里打开它就能直观看到这个设计风格的配色、字体和按钮长什么样。

第三步：给你的 AI 编码助手下达指令

当你让 Cursor、Claude Code、GitHub Copilot 等 AI 助手写前端页面或组件时，在提示词中明确让它参考这个文件。

💡 提示词（Prompt）示例：

“请帮我实现一个用户登录页面。必须严格遵循根目录下 DESIGN.md 中定义的设计系统，使用其中的色彩规范（背景色、主色、边框色）、字体层级、圆角和阴影效果，不要自己凭空捏造颜色。”

第四步：检查与微调

AI 读取了 DESIGN.md 里的设计令牌（Tokens）和排版规则后，会生成高度风格化的 UI 代码。如果生成的细节需要调整，你可以继续像平时一样让 AI 迭代修改。