README「What is DESIGN.md?」称 AI coding agent 或 Google Stitch 可直接读取 DESIGN.md;「How to Use」要求复制文件并告诉 AI agent 使用它
awesome-design-md:把品牌设计规则交给AI生成一致UI
一个给 AI coding agent 用的品牌 DESIGN.md 素材库,把色彩、字体和组件规则带进网页生成。
🧭 决策指南
为什么现在热: 材料显示仓库在 2026-09-02 登上 GitHub Trending daily,当日新增323颗星;README 同时介绍了 Google Stitch 新引入的 DESIGN.md 概念、AI coding agent 用法,并列出 Claude、Cursor、Vercel 等品牌文件,因此受关注与 AI 生成一致 UI 和 DESIGN.md 生态相关,但无法从材料进一步确认具体传播原因。
适合,如果你
-
你用 Cursor、Claude 或 Google Stitch 生成网页,并希望固定品牌视觉规则
-
你的项目需要 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,不读取 MarkdownREADME「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 配置或组件库
适合
我正在用 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
适合
我想用 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:可描述特定历史时期的视觉语法
视情况
我正在做企业 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
视情况
我们没有专职 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 许可证不自动授予第三方品牌资产或商标授权
适合
我正在用 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”
✨ 核心亮点
-
收录 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 导出的项目