项目研究：awesome-design-md

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

仓库：https://github.com/VoltAgent/awesome-design-md 作者：VoltAgent 团队（AI Agent 框架公司）原研究语境：2026-06-25；本次不据即时 Star/Fork 或仓库年龄判断质量与维护承诺 Topics：vibe-coding · vibe-design · google-stitch · design-system · design-tokens · figma · landing-page License：MIT 规模：持续变化的品牌设计分析目录；旧稿 73/74 两个数字口径不一，本文不再把品牌数或行数当固定规格

「这是什么」一句话定性

把公开网站的视觉设计语言，整理成给 AI Agent 看的纯文本说明书：颜色、字体层级、间距和组件规则都能读。放进项目并告诉 Agent 使用，可以帮助约束风格，不是 CSS 源码复刻，也不保证像素级一致。官方 README

它把设计参考写成可执行的约定，最后的取舍和验收仍然要有人做。

「它怎么转」逻辑全景图

DESIGN.md 的九个设计系统模块结构 — 图 2：它把视觉主题、色彩、字体、组件、布局和护栏统一成一份说明书。

awesome-design-md 运转链
│
├─ 触发层：什么时候会想到用它？
│   ├─ 想做个"看起来像 Linear / Vercel / Stripe"的页面，但自己调不动视觉
│   ├─ vibe coding 时，AI 生成的 UI 太丑/太通用，想锁定视觉风格
│   ├─ 给客户/老板做风格提案：拿来 Vercel 风格、Stripe 风格各出一版对比
│   └─ 团队想统一视觉语言，但请不起专业设计师
│
├─ 核心层：做了什么？
│   │
│   │  ★ 第一步：观察与整理（项目自述为公开可见设计分析）
│   │   从网站提炼色彩 / 字体 / 间距；不假设每一项都有自动抓取或品牌方确认
│   │
│   │  ★ 第二步：提炼（标准化为 9 个章节）
│   │   ├─ 视觉主题（氛围、密度、设计哲学）
│   │   ├─ 色彩（语义名 + hex + 功能角色）
│   │   ├─ 字体规则（家族 + 完整层级表）
│   │   ├─ 组件样式（按钮/卡片/输入框/导航 + 各状态）
│   │   ├─ 布局原则（间距尺度、栅格、留白哲学）
│   │   ├─ 景深系统（阴影、层级）
│   │   ├─ Do's and Don'ts（设计护栏、反模式）
│   │   ├─ 响应式行为（断点、触摸目标、折叠策略）
│   │   └─ Agent Prompt 指南（即抄即用的 prompt 模板）
│   │
│   │  ★ 第三步：可视化验证
│   │   参考项目提供的预览或自己做组件样张
│   │   → 检查颜色、字体、状态与响应式，不把预览当品牌官方规范
│   │
│   └─ 第四步：消费
│       用户复制 DESIGN.md 到项目根 → 告诉 AI Agent 读它 → 出图
│
├─ 输出层：怎么判断做对了？
│   ├─ 读得到 DESIGN.md，规则能映射到自己的组件和 token
│   ├─ 实际生成页面后检查，预览文件是否存在以所选目录/站点为准
│   ├─ 字体授权、中文回退、颜色对比度和交互状态适合自己的产品
│   └─ README 的 9 类章节是组织方式，不是“缺一即不合格”的硬标准
│
└─ 卡点层：新手最容易在哪里翻车？
    ├─ ❌ 只复制 DESIGN.md 但不告诉 Agent "按这个来"——Agent 看不到它
    ├─ ❌ 期待完全像素级一致——DESIGN.md 是设计意图，不是 CSS 源码
    ├─ ❌ 把整库风格混着用——撞色/撞气质
    ├─ ❌ 把 MIT 当品牌授权——字体、Logo、截图与品牌身份要分别核对
    └─ ❌ 选错了风格——比如金融后台用 Stripe 紫渐变就不对味

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

├─ 入门段（能用，10 分钟）
│   → 学会两件事：
│     1. 在 design-md/linear.app/ 之类的子目录里挑一个文件
│     2. 复制到项目根，对 Cursor/Claude Code 说："读 DESIGN.md，按这个风格给我做一个登录页"
│   → 验收：看真实页面的色彩/字体/间距和响应式，而不是要求 Agent 一次成功
│
├─ 进阶段（用好，1–2 小时）
│   → 需要补 3 个认知：
│     1. 配对使用：DESIGN.md（管长相）+ AGENTS.md（管行为），一个文件不够
│     2. 局部混搭：可以 Vercel 的字体 + Linear 的配色，但要自己审
│     3. 调试方法：Agent 出图不对时，回到 DESIGN.md 对应章节改"权重"（强调某个 token）
│   → 习惯：每次让 Agent 出 UI 前，先问它"你读了 DESIGN.md 哪个章节？"
│
└─ 高手段（用活，做自己的）
    → 高手和普通人的差距在两件事：
      1. 自己逆向一个新品牌并贡献 PR——你才算真正懂了"设计 token 提取"这门手艺
      2. 写自己的 DESIGN.md，把公司品牌沉淀成 markdown 喂给所有 Agent
         → 这就是把"公司设计资产"从 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 接到任务前先读，避免它自由发挥
迁移注意：条款要可执行、可验证，别写"请注意用户隐私"

这里的 POLICY.md 只表达要求，不自动执行访问控制、脱敏或合规审查；真正的约束还要落到代码、权限和测试里。

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

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

好处

✅ 文档本身无需构建，可本地阅读；Agent 调用、字体和页面实现仍有依赖与成本
✅ 把 vibe coding 从"出图随机"升级到"出图可控"
✅ 是学习“如何把设计意图结构化”的一个参考；Linear 分析原文展示了语义颜色和字体层级，但并非 Linear 官方设计系统

注意事项

⚠️ 不是一律禁止商用：MIT LICENSE 允许在保留相应声明的条件下复用仓库材料；README 的“公开可见 CSS、无担保、不主张品牌视觉身份所有权”不是非商业条款。也不要把它读成品牌方已授权你的字体、商标、图片或仿冒式外观
⚠️ 准确性靠人工维护：逆向 CSS 抓的不一定 100% 准，重要项目自己再校验一遍
⚠️ 不是万灵药：复杂交互动效（hover 微动画、过渡曲线）这种"设计精髓"在 markdown 里很难表达全
⚠️ Stitch 是来源，不是唯一引擎：README 参考 Stitch DESIGN.md 章节，但文件仍是 Markdown，也能由其他 Agent 阅读；不是只能在 Stitch 里运行

风险

素材权利：优先借鉴抽象规则、换成自己的品牌资产；不要暗示品牌合作或官方背书。项目的 Linear 说明页明确写为独立分析、未获该品牌背书
准确性与时效：品牌改版后分析可能滞后；记录所用文件版本，色值和字体信息需要实际核对，不能凭行数/星标认证
预览交付：README 介绍 preview.html / preview-dark.html，但本次查看的 Linear 仓库目录只列出 DESIGN.md 和 README.md；网页另有预览入口。不能保证复制任意目录就自带两份预览文件

一句话灵魂

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

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

资料核对（2026-10-13）

本次读取 VoltAgent 官方仓库 README、MIT LICENSE、Linear DESIGN.md 的 token/字体部分和目录列表，并查看项目自己的 Linear 说明页。Google Stitch 文档入口可访问，但本次未取得可读正文，未据此核验独立规范细节。没有运行 Agent 生成页面或测试像素一致性、对比度、品牌授权。