企业官网建设流程全解析

73 份品牌 DESIGN.md 设计系统文件完整解析：3 步让 AI 写出 Stripe 同款页面

【免费下载链接】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

awesome-design-md 收录了 73 份知名网站的 DESIGN.md 设计系统文件：放进项目根目录，AI 编码代理就能生成与该品牌视觉风格一致的界面。本文带你跑通三件事——文件怎么拿、里面写了什么、怎么喂给 AI 用。

DESIGN.md 是什么：写给 AI 直接读的设计文档

DESIGN.md 是一个纯文本 Markdown 文件，把"这个站点长什么样"翻译成 AI 能读的结构化描述：无 Figma 导出、无 JSON schema、无额外工具链，格式对 LLM 直接可读，代理打开就能用。

工作流很直接：代理先读文件里的 token 与规则，再生成代码。同一份文件用于多个页面时，按钮、卡片、配色自动保持一致，你不需要手动传色值。

它和 AGENTS.md 的分工如下：

仓库的 73 份文件按 8 个分类组织：AI 平台、开发者工具、数据库与 DevOps、效率 SaaS、设计工具、金融科技、电商零售、汽车，另有两个 90 年代的复古彩蛋。比如 Stripe 的完整分析在 design-md/stripe/DESIGN.md。

从仓库复制 DESIGN.md 到项目里的 3 个步骤

1. 拿到仓库：

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

2. 挑品牌：design-md/ 下每个目录对应一个品牌，按站点命名，x.ai、linear.app都直接按目录名找。
3. 把该目录的DESIGN.md复制到项目根目录，对代理说：build me a page that looks like this。

每个品牌目录里有两份文件：DESIGN.md是设计系统本体，README.md只有几行，指向 getdesign.md 上的在线预览页。

拿不准选谁，按场景挑：

复古系列是隐藏玩法：dell-1996记录 1996 年目录时代的企业网页——黑框页面、色块横幅、Helvetica-Black 大标题压 Times 正文；nintendo-2001是 Y2K 的"机箱金属感"。丢给代理，能做出年代感界面。

每份 DESIGN.md 里的 9 个板块各写了什么

光读色值，能想象出站点长什么样吗？完整文件分两层：顶部 YAML frontmatter 声明机器可读的 token，正文用 9 个板块把规则讲成人话。

以 Stripe 为例，frontmatter 里写着primary: "#533afd"、display 56px、字重 300、字距 -1.4px；正文规定金额单元格必须启用 tnum 等宽数字，连"渐变网格不能省"都写成了规则。不同品牌的差异很直观：Linear 是近黑画布配薰衣草蓝，Bugatti 是全黑影院感加单一金色点缀，Wise 用亮绿色走友好路线。第 9 板块直接给出可复制进代理的现成提示词，省去你自己总结。

DESIGN.md 放好之后，怎么跟 AI 说话才有效

文件就位不等于完事，三个细节决定产出质量：

1. 让代理先读DESIGN.md再动手，提示词直接取第 9 板块，不用自己编。
2. 一次只改一个组件，对话里引用 token 名（如{colors.primary}、{button-primary-pill}），输出更稳。
3. 手动改过文件后，跑npx @google/design.md lint DESIGN.md校验格式是否合规。

Do's and Don'ts 是护栏，专治风格漂移：Stripe 的文件明确写着 display 字重不得高于 300、金额格必须开 tnum、胶囊按钮不得换成圆角矩形。第 8 板块的断点表同样值得让代理遵守：移动端 display 从 56px 逐级降到 36px，定价卡 4 列折成 1 列，按钮触控区放大到 44px。

getdesign.md 平台怎么用：预览、下载与补充渠道

本地文件之外，getdesign.md 平台补了三样东西：浅色/深色双主题视觉预览、DESIGN.md 直接下载、定制请求——为指定站点申请生成，私人请求只交付给你自己。

做深色模式适配时，可以把平台深色预览当对照基准，核对代理生成的暗色表面是否偏离品牌。

贡献规则在 CONTRIBUTING.md：改进现有文件（修错 hex、补 token、加强描述）受欢迎，但要先开 issue 与维护者讨论；新品牌的 DESIGN.md 不接受直接 PR，统一走申请渠道。

挑一个喜欢的品牌，把它的DESIGN.md复制进项目根目录，对代理说一句 build me a page that looks like this。首轮不像就引用该品牌的 Do's and Don'ts 列出修改清单再喂回去——这是最快把风格对齐的路线。

【免费下载链接】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