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

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-mdawesome-design-md 收录了 73 份知名网站的 DESIGN.md 设计系统文件放进项目根目录AI 编码代理就能生成与该品牌视觉风格一致的界面。本文带你跑通三件事——文件怎么拿、里面写了什么、怎么喂给 AI 用。DESIGN.md 是什么写给 AI 直接读的设计文档DESIGN.md 是一个纯文本 Markdown 文件把这个站点长什么样翻译成 AI 能读的结构化描述无 Figma 导出、无 JSON schema、无额外工具链格式对 LLM 直接可读代理打开就能用。工作流很直接代理先读文件里的 token 与规则再生成代码。同一份文件用于多个页面时按钮、卡片、配色自动保持一致你不需要手动传色值。它和 AGENTS.md 的分工如下文件谁读它定义什么AGENTS.md编码代理项目怎么构建DESIGN.md设计代理项目应该长什么样仓库的 73 份文件按 8 个分类组织AI 平台、开发者工具、数据库与 DevOps、效率 SaaS、设计工具、金融科技、电商零售、汽车另有两个 90 年代的复古彩蛋。比如 Stripe 的完整分析在 design-md/stripe/DESIGN.md。从仓库复制 DESIGN.md 到项目里的 3 个步骤拿到仓库git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md挑品牌design-md/ 下每个目录对应一个品牌按站点命名x.ai、linear.app都直接按目录名找。把该目录的DESIGN.md复制到项目根目录对代理说build me a page that looks like this。每个品牌目录里有两份文件DESIGN.md是设计系统本体README.md只有几行指向 getdesign.md 上的在线预览页。拿不准选谁按场景挑想要这类风格参考品牌极简、紫色强调、工程师向Linear、Vercel紫色渐变、金融科技感Stripe、Coinbase黑白高级感、大幅摄影Apple、Tesla、BMW90 年代复古感Dell (1996)、Nintendo (2001)复古系列是隐藏玩法dell-1996记录 1996 年目录时代的企业网页——黑框页面、色块横幅、Helvetica-Black 大标题压 Times 正文nintendo-2001是 Y2K 的机箱金属感。丢给代理能做出年代感界面。每份 DESIGN.md 里的 9 个板块各写了什么光读色值能想象出站点长什么样吗完整文件分两层顶部 YAML frontmatter 声明机器可读的 token正文用 9 个板块把规则讲成人话。板块内容1 视觉主题与氛围情绪、密度、设计哲学2 色板与角色语义名 hex 值 功能角色3 排版规则字体族、完整字号层级表4 组件样式按钮、卡片、输入框、导航及各状态5 布局原则间距刻度、栅格、留白哲学6 深度与高程阴影系统、表面层级7 Dos and Donts设计护栏与反模式8 响应式行为断点、触控目标、折叠策略9 Agent Prompt Guide现成可用的提示词以 Stripe 为例frontmatter 里写着primary: #533afd、display 56px、字重 300、字距 -1.4px正文规定金额单元格必须启用 tnum 等宽数字连渐变网格不能省都写成了规则。不同品牌的差异很直观Linear 是近黑画布配薰衣草蓝Bugatti 是全黑影院感加单一金色点缀Wise 用亮绿色走友好路线。第 9 板块直接给出可复制进代理的现成提示词省去你自己总结。DESIGN.md 放好之后怎么跟 AI 说话才有效文件就位不等于完事三个细节决定产出质量让代理先读DESIGN.md再动手提示词直接取第 9 板块不用自己编。一次只改一个组件对话里引用 token 名如{colors.primary}、{button-primary-pill}输出更稳。手动改过文件后跑npx google/design.md lint DESIGN.md校验格式是否合规。Dos and Donts 是护栏专治风格漂移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。首轮不像就引用该品牌的 Dos and Donts 列出修改清单再喂回去——这是最快把风格对齐的路线。【免费下载链接】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辅助生成（AIGC），仅供参考