Article

项目研究：awesome-design-md

项目研究：awesome-design-md

蓝色像素虾把网站视觉语言翻译成 DESIGN.md 合约
图 1：DESIGN.md 把设计感觉翻译成 Agent 能执行的纯文本合约。

> 仓库：<https://github.com/VoltAgent/awesome-design-md> > 作者：VoltAgent 团队（AI Agent 框架公司） > Star / Fork：92.9k / 11.0k（截至 2026-06-25） > 创建：2026-03-31（约 3 个月大），仍在活跃更新 > Topics：vibe-coding · vibe-design · google-stitch · design-system · design-tokens · figma · landing-page > License：MIT > 规模：74 个品牌的 DESIGN.md 目录，单个文件 300–600 行 Markdown

「这是什么」一句话定性

把全球 73 个顶级网站的视觉设计语言，逆向提炼成一份给 AI Agent 看的纯文本说明书——你扔一个 Markdown 进项目，对 Cursor / Claude Code 说"按这个风格给我做一个页面"，它就能输出像素级贴脸那个品牌的 UI。

它不教你设计，它让 AI 替你设计。

「它怎么转」逻辑全景图

DESIGN.md 的九个设计系统模块结构
图 2：它把视觉主题、色彩、字体、组件、布局和护栏统一成一份说明书。
awesome-design-md 运转链
│
├─ 触发层：什么时候会想到用它？
│   ├─ 想做个&quot;看起来像 Linear / Vercel / Stripe&quot;的页面，但自己调不动视觉
│   ├─ vibe coding 时，AI 生成的 UI 太丑/太通用，想锁定视觉风格
│   ├─ 给客户/老板做风格提案：拿来 Vercel 风格、Stripe 风格各出一版对比
│   └─ 团队想统一视觉语言，但请不起专业设计师
│
├─ 核心层：做了什么？
│   │
│   │  ★ 第一步：抓取（人工 + 工具）
│   │   访问目标网站 → 抓 CSS / 字体 / 间距 → 提取 design token
│   │
│   │  ★ 第二步：提炼（标准化为 9 个章节）
│   │   ├─ 视觉主题（氛围、密度、设计哲学）
│   │   ├─ 色彩（语义名 + hex + 功能角色）
│   │   ├─ 字体规则（家族 + 完整层级表）
│   │   ├─ 组件样式（按钮/卡片/输入框/导航 + 各状态）
│   │   ├─ 布局原则（间距尺度、栅格、留白哲学）
│   │   ├─ 景深系统（阴影、层级）
│   │   ├─ Do&#x27;s and Don&#x27;ts（设计护栏、反模式）
│   │   ├─ 响应式行为（断点、触摸目标、折叠策略）
│   │   └─ Agent Prompt 指南（即抄即用的 prompt 模板）
│   │
│   │  ★ 第三步：可视化验证
│   │   生成 preview.html + preview-dark.html（色彩/字体/组件的可视化目录）
│   │   → 肉眼检查有没有抓错
│   │
│   └─ 第四步：消费
│       用户复制 DESIGN.md 到项目根 → 告诉 AI Agent 读它 → 出图
│
├─ 输出层：怎么判断做对了？
│   ├─ 单个 DESIGN.md 300–600 行，纯文本，无二进
│   ├─ 每个品牌都配预览 HTML，眼见为实
│   ├─ AI 生成的页面能在&quot;不查源码&quot;的情况下让人一眼认出像哪个品牌
│   └─ 9 个章节都有，缺一个算半成品
│
└─ 卡点层：新手最容易在哪里翻车？
    ├─ ❌ 只复制 DESIGN.md 但不告诉 Agent &quot;按这个来&quot;——Agent 看不到它
    ├─ ❌ 期待完全像素级一致——DESIGN.md 是设计意图，不是 CSS 源码
    ├─ ❌ 把所有 73 个风格混着用——撞色/撞气质
    ├─ ❌ 用在生产项目对外公开——可能踩商标/版权线（README 自己已声明）
    └─ ❌ 选错了风格——比如金融后台用 Stripe 紫渐变就不对味

「怎么升级」三段位路线图

├─ 入门段（能用，10 分钟）
│   → 学会两件事：
│     1. 在 design-md/linear.app/ 之类的子目录里挑一个文件
│     2. 复制到项目根，对 Cursor/Claude Code 说：&quot;读 DESIGN.md，按这个风格给我做一个登录页&quot;
│   → 验收：Agent 一次出图，色彩/字体/间距明显贴合品牌
│
├─ 进阶段（用好，1–2 小时）
│   → 需要补 3 个认知：
│     1. 配对使用：DESIGN.md（管长相）+ AGENTS.md（管行为），一个文件不够
│     2. 局部混搭：可以 Vercel 的字体 + Linear 的配色，但要自己审
│     3. 调试方法：Agent 出图不对时，回到 DESIGN.md 对应章节改&quot;权重&quot;（强调某个 token）
│   → 习惯：每次让 Agent 出 UI 前，先问它&quot;你读了 DESIGN.md 哪个章节？&quot;
│
└─ 高手段（用活，做自己的）
    → 高手和普通人的差距在两件事：
      1. 自己逆向一个新品牌并贡献 PR——你才算真正懂了&quot;设计 token 提取&quot;这门手艺
      2. 写自己的 DESIGN.md，把公司品牌沉淀成 markdown 喂给所有 Agent
         → 这就是把&quot;公司设计资产&quot;从 Figma 里解放出来，Agent 也能消费
    → 进阶动作：把 DESIGN.md + AGENTS.md 当作项目 onboarding 标准件，
                像 README 一样每个仓库都放

「能用在哪」场景迁移

底层逻辑：把"知识"从只有人能看的格式（Figma、设计稿），翻译成 LLM 能直接消费的纯文本约定。

这个模式可以平移到任何"专家知识被锁在专用工具里"的场景：

场景 1：公司内部 DESIGN.md

  • 给你们自己的产品提炼一份 DESIGN.md，放进 monorepo
  • 新人 oncall、新 Agent 上岗、Cursor Composer 写组件——都先读这一份
  • 迁移注意：色彩/字体别和品牌冲突；token 命名要语义化（不要 red500，要 danger-bg）

场景 2：API.md / ENDPOINT.md

  • 同样的思路可以做 API 设计规范——ENDPOINT.md，告诉 AI Agent 你的 RESTful 风格、错误码、鉴权约定
  • 替代那些散落在 wiki 里的"代码风格指南"
  • 迁移注意：要保留反例（"不要返回 200 + error code"），Do-Don't 比规则本身更有价值

场景 3：POLICY.md

  • 安全/合规类要求（如"不允许在 UI 中显示用户的手机号中间四位"）写成 POLICY.md
  • 任何 Agent 接到任务前先读，避免它自由发挥
  • 迁移注意：条款要可执行、可验证，别写"请注意用户隐私"

部署这个项目的收益 & 风险

DESIGN.md 的设计意图、风格混搭和商用边界
图 3：DESIGN.md 能控风格，但不能把逆向品牌样式直接当商业外观。

好处

  • ✅ 零成本、零依赖，73 个一线品牌的设计语言拿来即用
  • ✅ 把 vibe coding 从"出图随机"升级到"出图可控"
  • ✅ 是学"如何把设计意图结构化"的最佳教材——读 Linear 那份就值回票价

注意事项

  • ⚠️ 不要对外发布商业项目：README 自己声明这是基于"公开可见 CSS"逆向的，品牌方不认可
  • ⚠️ 准确性靠人工维护：逆向 CSS 抓的不一定 100% 准，重要项目自己再校验一遍
  • ⚠️ 不是万灵药：复杂交互动效（hover 微动画、过渡曲线）这种"设计精髓"在 markdown 里很难表达全
  • ⚠️ 生态绑定 Google Stitch：Stitch 是格式定义者，如果 Stitch 改了规范，这份仓库需要跟进

风险

  • 🚨 商标风险：用 Apple / Nike / Ferrari 的设计做商业产品会有法律灰区
  • 🚨 风格过时：品牌方改版后，仓库更新有延迟（最近一次提交 2026-06-25，节奏 OK）
  • 🚨 vendor lock-in：现在只支持 Stitch 格式，万一 Google 放弃 Stitch，仓库价值会缩水

一句话灵魂

DESIGN.md 是设计领域的 AGENTS.md —— 把"只可意会"的设计感觉，变成 Agent 能秒懂的纯文本合约。

如果说 AGENTS.md 让 Agent 学会怎么写代码，DESIGN.md 让 Agent 学会怎么长得好看。两件事放在一起，vibe coding 才真正闭环。

返回列表