企业官网建设流程全解析

awesome-design-md｜DESIGN.md 合集：丢一个文件进项目，AI Agent 直接生成品牌同款 UI

【免费下载链接】awesome-design-mdA collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-design-md

你每次让 AI Agent 生成页面，第一反应常常是“长得不对”。色板、字体、圆角都交代了，它记住的往往只有最后一句。问题不在提示词，设计语言没落在文件里，而 awesome-design-md 就是为此准备的DESIGN.md设计文档合集，73 个品牌官网的设计语言被写成纯文本，Agent 读完就能按同款风格出界面。

一句话说清它是给谁的

这是一份设计系统文档合集，替用 AI 编码 Agent 生成页面的人解决“没风格、不像样”的问题。每个文件都是纯 Markdown，没有 Figma 导出，没有 JSON Schema，其实就是一个文本文件，放进项目根目录就能用。

仓库对分工的表述很直白：AGENTS.md管“怎么做”，DESIGN.md管“长啥样”，两者互补不冲突。

拆开看：73 份文档能拿到什么

• 覆盖量：design-md/ 下 73 个品牌文件夹，一个品牌一个目录，按 AI 平台、开发者工具、金融科技、汽车等 9 类归档，完整清单在 README.md。
• 统一规范：每份文件按 9 个章节组织，从 Visual Theme & Atmosphere 到 Agent Prompt Guide，氛围、色板、字体、组件、提示词一次读齐。
• 令牌化色板：Linear 那份头部的frontmatter放了 20 多个颜色令牌，正文一律用 {colors.primary} 这类引用代替硬编码色值，改一处令牌全局生效，Agent 拿错色值的机会基本归零。
• 完整字体表：Spotify 那份列出 15 档字级，从 10px 微字到 24px 标题，字号、字重、行高、字距逐行写死，专有字体的回退方案也一并注明。
• 即用提示词：第 9 章直接给可复制的组件提示词，比如“Design a pill button: #1f1f1f 背景、9999px 圆角、8px 16px 内边距、全大写、字距 1.4px”，拿去就能跑。

三步跑通第一个品牌风格页面

1. Clone 仓库：

git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md

2. 打开design-md/，挑一个品牌文件夹，比如linear.app，先读它的DESIGN.md确认口味。
3. 把这份文件复制到你项目根目录，对 Agent 说一句 “build me a page that looks like this”，它会自己读令牌和规则出页面，没有解析步骤，没有配置项。

聊透两个关键设计取舍

为什么是纯 Markdown，不上结构化格式。DESIGN.md 这个概念由 Google Stitch 提出，思路是零门槛。Markdown 是大模型读得最懂的格式，一个文件走到底，Agent 不需要任何前置工具。换成 JSON Schema 或 Figma 导出的代价，是给读取链路多挂一层解析器，而它恰好是最先开始腐烂的一环。说白了，格式选错了，后面写得多细都白费。

两种骨架并存，各有分工。73 份文档其实走两条路：

第二种更值得抄作业。frontmatter 长这样，节选自 Linear 那份：

--- colors: primary: "#5e6ad2" canvas: "#010102" ink: "#f7f8f8" ---

正文里按钮背景就写 {colors.primary}，不再复写色值。

另一处容易被忽略、却最影响生成质量的是Do's and Don'ts。Spotify 那份写明：品牌绿只做功能不做装饰，不做方形按钮，不加第四种品牌色。这类禁令把 Agent 的自由发挥砍掉一半，就像快递单上的条形码，扫一下就知道该怎么打印。

看清适合谁、卡在哪

• 适合：你用 AI Agent 生成页面，想要结果有稳定的品牌感，而不是千篇一律的 AI 默认样式，从 73 份里挑一份放进项目就行。
• 不适合：团队已有完整设计系统加 Figma 协作流程的话，它替代不了协作，它服务的是“生成”这一端。想要像素级复刻某个网站也不行，它提炼的是设计语言，不是那个站的 CSS。
• 已知限制：文件按 “as is” 提供，不作保证。SpotifyMixUI 这类专有字体加载不到，得靠文档里写明的回退字体。CONTRIBUTING.md 写明只接收对现有文件的改进，不接受新增品牌文档。

周末挑一份口味合的，clone 下来把 DESIGN.md 丢进项目根目录，对 Agent 说一句 build me a page that looks like this，五分钟就能看到页面出来。

【免费下载链接】awesome-design-mdA collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-design-md