awesome-design-md:把品牌设计规则交给AI生成一致UI
一个给 AI coding agent 用的品牌 DESIGN.md 素材库,把色彩、字体和组件规则带进网页生成。
GitHub VoltAgent/awesome-design-md 更新 2026-09-04 分支 main 星标 112.8K 分叉 12.8K
Markdown Google Stitch AI coding agents DESIGN.md UI design systems

🧭 决策指南

适合,如果你

  • 你用 Cursor、Claude 或 Google Stitch 生成网页,并希望固定品牌视觉规则
    README「What is DESIGN.md?」称 AI coding agent 或 Google Stitch 可直接读取 DESIGN.md;「How to Use」要求复制文件并告诉 AI agent 使用它
  • 你的项目需要 Vercel、Supabase 或 Raycast 风格的具体参考
    README「Collection」列出 Vercel、Supabase、Raycast,并描述各自的颜色、字体和界面风格
  • 你希望用 Markdown 管理色板、字体、组件状态和响应式规则
    README「What's Inside Each DESIGN.md」列出 Color Palette、Typography、Component Stylings 和 Responsive Behavior

不适合,如果你

  • 你的工作流只接受 Figma 导出或 JSON schema,不读取 Markdown
    README「What is DESIGN.md?」明确说 DESIGN.md 是 plain-text markdown,并称不需要 Figma exports 或 JSON schemas
  • 你需要一个带安装、运行和版本发布流程的传统软件包
    项目元数据显示技术栈为 Mixed/Unknown、版本发布为0个,README「How to Use」只描述复制 DESIGN.md
  • 你要验证设计规则的自动化测试覆盖率
    README 的「What's Inside Each DESIGN.md」介绍内容章节和预览文件,但未提供测试或覆盖率信息

前置条件

  • README 要求将某个站点的 DESIGN.md 复制到项目根目录
  • README 称 AI coding agent 或 Google Stitch 能直接理解 DESIGN.md
  • README 说明 DESIGN.md 是 plain-text markdown,不需要 Figma exports、JSON schemas 或 special tooling

要注意

  • 不要把 AGENTS.md 当作视觉规范;README 将构建方式与 DESIGN.md 的外观规则分开
    README「What is DESIGN.md?」表格说明 AGENTS.md 定义 how to build,DESIGN.md 定义 how the project should look and feel
  • 仅复制 DESIGN.md 不会自动生成预览;README 将 preview.html 单独列为视觉目录文件
    README「Each site includes」将 DESIGN.md 与 preview.html、preview-dark.html 列为不同文件
  • 不同品牌规则差异明显,例如 Ollama 是终端单色风格,Cohere 是数据密集渐变风格
    README「Collection」中的 Ollama 与 Cohere 条目分别描述 terminal-first monochrome 和 vibrant gradients、data-rich dashboard

替代方案

  • Figma:已有 Figma 组件库、设计稿和导出流程时,Figma 更贴合现有视觉协作链路
    通用领域知识
  • AGENTS.md:需要描述 AI coding agent 如何构建项目,而不是定义界面外观时,AGENTS.md 更直接
    README「What is DESIGN.md?」

材料未说明

  • README 没有说明 DESIGN.md 文件的具体仓库路径、下载方式或单文件大小
  • README 没有说明 Cursor、Claude、Google Stitch 之外的 AI coding agent 兼容范围
  • README 没有提供 DESIGN.md 内容的自动测试、质量评分或视觉回归结果
  • README 没有说明品牌设计分析的提取流程、人工审核标准或更新频率
  • README 没有说明每个外部 getdesign.md 页面是否拥有独立许可条款
  • README 没有说明将 DESIGN.md 应用于 React、Vue、Next.js 等具体框架时的差异
  • README 没有说明4位贡献者与10个最近提交分别负责哪些文件或功能

💡 深度解析

6
不适合 我正在用 Ollama 做本地 LLM 工具界面,希望得到 terminal-first、monochrome simplicity 的视觉语言;这个项目能否直接替我提供可运行的组件、图标和可访问性实现?
适合读者: 使用 Ollama 构建本地 LLM 工具界面的开发者,希望采用终端优先、单色视觉,同时避免把品牌文件误当成组件库

不适合把它当作可运行的组件库;它适合提供 Ollama 风格的设计约束,但不会替你完成实现。

  • Collection 将 Ollama 描述为“Run LLMs locally. Terminal-first, monochrome simplicity”,因此可以作为界面风格基线。
  • README 说每份 DESIGN.md 定义颜色角色、字体规则、按钮、卡片、输入框、导航及状态,能够指导代理生成界面。
  • 但项目交付物明确是 Markdown 文件和 HTML 预览,不是代码包;洞察也指出它不负责生成代码、同步 Figma 或转换为 CSS、Tailwind 配置和组件库。
  • 因此图标、键盘交互、对比度、焦点状态和本地模型调用仍需在你的应用中自行实现,README 没有提供这些实现细节。
  • Collection / AI & LLM Platforms:Ollama - “Terminal-first, monochrome simplicity”
  • What's Inside Each DESIGN.md:Component Stylings 包含 buttons、cards、inputs、navigation with states
  • 项目洞察 usage_limitations:不负责生成代码、同步 Figma 或自动转换成 CSS、Tailwind 配置或组件库
材料未说明:README 未说明 Ollama DESIGN.md 是否覆盖模型加载、流式输出、错误和长文本等本地 LLM 特有状态;README 未提供图标库、无障碍验收规则或可运行组件实现
适合 我正在用 Google Stitch 快速生成 SaaS 页面,不想维护 Figma 导出、JSON schema 或额外工具;把这个项目中的 DESIGN.md 放进项目根目录,是否足以让代理持续遵循颜色、字体和响应式规则?
适合读者: 使用 Google Stitch 为 SaaS 产品生成页面、希望把视觉约束以纯文本放进项目根目录的独立开发者

适合,因为它正是为 Google Stitch 和 AI 编码代理提供纯文本设计上下文,而不是要求额外的构建工具。

  • README 说明 DESIGN.md 是“a plain-text design system document that AI agents read”,并明确“不需要 Figma exports, JSON schemas, no special tooling”。
  • 使用路径很短:复制某个站点的 DESIGN.md 到项目根目录,再告诉 AI agent 使用它。
  • 每份文件不仅包含颜色和字体,还包含组件状态、间距、阴影层级、响应式行为及 Agent Prompt Guide,因此比单独复制色板更完整。

不过,“足以持续遵循”仍取决于代理是否完整读取并遵守长 Markdown;README 没有提供跨代理一致性指标。

  • What is DESIGN.md?:“No Figma exports, no JSON schemas, no special tooling.”
  • How to Use:Copy a site's DESIGN.md into your project root;Tell your AI agent to use it.
  • What's Inside Each DESIGN.md:Color Palette、Typography、Component Stylings、Responsive Behavior、Agent Prompt Guide
材料未说明:README 未说明 Google Stitch 或其他代理对同一份 DESIGN.md 的遵循率和上下文长度限制;README 未说明代理忽略部分规则时是否有自动检测或校验机制
适合 我想用 AI 代理制作一个时期准确的复古网页概念验证,候选风格是 Dell (1996) 和 Nintendo.com (2001);这个项目能否把截图式灵感转成页面框架、字体、装饰和色彩规则?
适合读者: 希望做 1990 年代复古网页概念验证的创意开发者,正在使用 Dell (1996) 和 Nintendo.com (2001) 两份设计规范

适合概念验证,因为 README 明确把复古案例整理成可被代理直接读取的时期视觉语法,而不只是展示截图。

  • Retro Web 分类包含 Dell (1996) 和 Nintendo.com (2001),并分别记录黑色页面框架、色块卡片、Helvetica-Black/Times Roman、GIF 贴纸,以及 Y2K 金属面板、点阵导航、Arial-Black 和像素 Mario 等细节。
  • 项目洞察说明复古集合可描述页面框架、字体组合、装饰素材和色彩结构,证明其目标不仅是提供配色灵感。
  • 每份规范统一包含视觉氛围、颜色角色、字体层级、组件样式、布局、响应式行为和 Agent Prompt Guide,便于代理把风格映射到页面生成。

但“时期准确”不能由 README 单独证明;它没有说明采样来源、考据方法,也没有授权复古品牌资产或原始图像。

  • Retro Web · DESIGN.md Nostalgia:Dell (1996) 与 Nintendo.com (2001) 的具体视觉描述
  • What's Inside Each DESIGN.md:Visual Theme、Typography、Layout、Responsive Behavior、Agent Prompt Guide
  • 项目洞察 innovation_points:可描述特定历史时期的视觉语法
材料未说明:README 未说明复古视觉分析使用了哪些原始网页、截图或研究来源;README 未说明 GIF、Logo、角色图像和字体的具体许可边界
视情况 我正在做企业 AI 平台的 data-rich dashboard,需要在 Cohere、Together AI 和 Replicate 之间选择视觉基线;这些 DESIGN.md 能否覆盖复杂权限、表单校验、异常流程和国际化,而不只是营销页面?
适合读者: 为企业 AI 平台设计数据密集型仪表盘的产品工程师,正在比较 Cohere、Together AI 和 Replicate 的界面语言

视情况:它能缩短仪表盘的视觉定向过程,但不能据 README 证明已经覆盖企业产品的完整业务状态。

  • Collection 将 Cohere定位为“Enterprise AI platform”且具有“data-rich dashboard aesthetic”,Together AI 是“Open-source AI infrastructure”,Replicate 则是“code-forward”,三者可提供不同的产品语言起点。
  • 每份规范包含组件状态、布局原则、响应式行为和 Do’s and Don’ts,适合约束密度、层级和基础交互外观。
  • 但项目洞察明确指出,单个 DESIGN.md 不一定覆盖权限状态、表单校验、数据密度、国际化、无障碍和异常流程。
  • preview.html 只展示色板、字体、按钮和卡片,不能替代真实数据量和复杂交互测试,因此需额外建立项目级规则。
  • Collection / AI & LLM Platforms:Cohere、Together AI、Replicate 的产品与视觉描述
  • What's Inside Each DESIGN.md:Component Stylings、Layout Principles、Responsive Behavior、Do's and Don'ts
  • 项目洞察 usage_limitations:不一定覆盖权限状态、表单校验、数据密度、国际化、无障碍和异常流程
  • Each site includes:preview.html 展示 color swatches、type scale、buttons、cards
材料未说明:README 未说明各份规范实际覆盖的权限模型、表单规则和错误流程;README 未说明不同页面类型和真实数据规模下的视觉回归结果
视情况 我们没有专职 UI/UX 设计师,正在用 AI 编码代理制作营销站;如果参考 Claude、Mistral AI 或 VoltAgent 的 DESIGN.md,能否降低从空白页面开始设计的成本,同时避免把第三方品牌直接搬进产品?
适合读者: 没有专职 UI/UX 设计师、使用 AI 编码代理制作营销站的初创团队,想从 Claude、Mistral AI 和 VoltAgent 中选择品牌参考

视情况:项目能显著降低视觉起稿成本,但是否安全可用取决于团队能否把品牌参考抽象成规则,而不是直接复制品牌资产。

  • README 的价值主张是复制 DESIGN.md 后让代理生成“matching UI”,并提供真实网站分析出的 patterns、tokens 和 rules,适合没有设计师时建立初始视觉基线。
  • Collection 提供 Claude 的暖陶土色编辑风格、Mistral AI 的紫色极简风格和 VoltAgent 的黑底翡翠绿终端风格,选择空间具体且可比较。
  • 每份文件包含 Do’s and Don’ts、组件状态和响应式行为,有助于减少代理只模仿颜色而忽略整体规则。
  • 但项目洞察明确提醒,MIT 许可证不自动授予第三方品牌资产或商标授权;README 也没有保证生成结果不会造成品牌混淆。
  • README 开头:生成 “high-quality UI that stays visually consistent with the design language”
  • Collection / AI & LLM Platforms:Claude、Mistral AI、VoltAgent 的视觉描述
  • What's Inside Each DESIGN.md:Do's and Don'ts、Component Stylings、Responsive Behavior
  • 项目洞察 common_pitfalls:MIT 许可证不自动授予第三方品牌资产或商标授权
材料未说明:README 未说明各品牌分析是否得到品牌方授权或是否经过法律审查;README 未说明代理生成页面对 Logo、专属插画、商标和文案的默认处理方式
适合 我正在用 Framer 做落地页,需要在 Webflow、Framer 和 Figma 三种视觉方向之间快速比较;这个项目的 DESIGN.md 和 preview.html 是否能支持这种选择,而不必先接入完整设计工具?
适合读者: 负责落地页的前端工程师,正在使用 Framer,希望快速比较 Webflow、Framer 和 Figma 的品牌视觉方向

适合做视觉方向比较,但不适合把比较结果直接当成 Framer 的完整生产设计系统。

  • Collection 同时列出 Figma、Framer、Webflow,并分别描述其视觉倾向,例如 Framer 的“Bold black and blue, motion-first”和 Webflow 的“Blue-accented, polished marketing site aesthetic”。
  • 每个站点提供 DESIGN.md、preview.html 和 preview-dark.html;预览文件展示色板、字体层级、按钮和卡片,能在浏览器中快速观察差异。
  • 项目不绑定 React、Vue、Tailwind 或特定 CSS 架构,README 将 Markdown 定义为可被人和 LLM 读取的通用格式,因此可作为 Framer 之外的参考上下文。

限制是 README 没有说明 preview 是否模拟 Framer 动效,也没有提供把规范导入 Framer 的自动转换流程。

  • Collection:Figma、Framer、Webflow 条目及其风格描述
  • Each site includes:DESIGN.md、preview.html、preview-dark.html
  • What is DESIGN.md?:“Markdown is the format LLMs read best”
材料未说明:README 未说明 preview.html 是否包含动效、交互状态或 Framer 特有能力;README 未提供 DESIGN.md 到 Framer 样式或组件的导入工具

✨ 核心亮点

  • 收录 Claude、Cursor、Vercel 等品牌 DESIGN.md
  • 每份文件覆盖9类设计规则与 Agent Prompt Guide
  • 同步提供 preview.html 与 preview-dark.html
  • 覆盖AI平台、IDE、DevOps和复古网页场景

🔧 工程化

  • 复制目标站点的 DESIGN.md 到项目根目录,供 AI agent 读取
  • 文件定义色板、字体、组件、响应式行为和设计禁忌
  • 每个站点配套 preview.html 和 preview-dark.html 视觉目录

⚠️ 风险

  • README 没有安装命令,技术栈标为 Mixed/Unknown
  • 项目0个版本、仅4位贡献者,发布流程信息有限
  • README 未说明各 DESIGN.md 的测试或自动校验方式

👥 适合谁?

  • 使用 Cursor、Claude 或 Google Stitch 生成网页UI的开发者
  • 需要复刻 Vercel、Supabase 或 Raycast 视觉语言的团队
  • 想用 Markdown 维护设计规则而非 Figma 导出的项目