用 DESIGN.md 设计系统约束 AI73 份品牌规范直接可用的落地方法【免费下载链接】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 代理画一个看起来专业的页面结果往往是主色比品牌实际用的紫更艳、正文行高过松、按钮圆角忽大忽小。问题不在模型能力而在约束缺失——代理手里没有一份写得足够具体的设计规范。awesome-design-md 这个仓库把 73 个知名网站的设计系统拆成了 73 份 DESIGN.md 文件配套的 getdesign.md 平台提供在线预览、浅色 / 深色示例、单文件下载与缺失品牌申请入口。选一份放进项目根目录再让 AI 代理照着生成界面产出的页面就能稳定贴合该品牌的视觉语言。DESIGN.md 是什么把形容词翻译成参数DESIGN.md 是 Google Stitch 提出的纯文本设计系统文档一个 Markdown 文件回答项目应该长什么样它和 AGENTS.md 说的怎么构建恰好互补。没有 Figma 导出没有 JSON schema放进项目根目录任何 AI 编码代理都能直接读取。它的价值在于把形容词翻译成参数。克制的强调色不是指令参数才是色板写语义角色design-md/linear.app/DESIGN.md 里背景 #010102、卡片 #0f1011、正文 #f7f8f8强调色 #5e6ad2 的使用范围被限定在 logo、焦点环和少量关键按钮上金融产品的稳重要靠数值表达design-md/stripe/DESIGN.md 给出主色 #533afd、深海蓝文字 #0d253d正文用 Söhne 细体字重 300金额部分开启表格数字对齐让一串数字整齐落地结构统一方便对照每份文件都覆盖视觉主题与氛围、色板与语义角色、排版规则、组件样式、布局原则、深度与高程、Dos Donts、响应式行为、Agent Prompt 指南这九个维度代理的取用路径是固定的代理拿到的不再是高级感三个字而是一整张可以直接落进样式表的数值表。用平台预览锁定目标品牌选型不用 clone 仓库。getdesign.md 上可以按行业浏览 73 份文件每套设计系统都附浅色与深色两套预览。几个快速判断的技巧看深色预览比看浅色更照妖镜——暗色背景下色阶断档、对比度不足的问题会被直接暴露出来对比同类品牌再拍板同为 AI 平台Claude 偏暖陶土色的编辑风xAI 走冷峻单色同一业务方向的审美差异一目了然仓库里还收了两份复古样例——1996 年的 Dell 与 2001 年的 Nintendo专门服务年代感页面的复刻需求确认色板和组件气质都对了再去拿文件。DESIGN.md 怎么拿单份下载与整仓 clone 怎么选两条路径按使用范围选只锁定一套风格在 getdesign.md 上找到对应品牌直接下载单份 DESIGN.md拷进项目即可不用碰整个仓库要跨项目对比、参与贡献或本地离线检索clone 整个仓库73 份文件按品牌目录组织结构是平的检索成本低git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-mdREADME.md 的 Collection 章节列出了全部品牌与一句话风格描述可以当目录用。提示词怎么写指向文件而不是描述感觉文件放进项目根目录后提示词要明确指向文件本身。做得像 Vercel只给了品牌名代理仍可能按自己的理解发挥下面这种写法把约束落在了具体来源上严格遵循项目根目录下的 DESIGN.md 设计系统生成落地页色彩、字体阶梯、圆角与间距必须取自该文件中的 token组件状态hover、focus、disabled按文件中的组件样式定义实现文件没有覆盖的地方不要自行发挥。两个小提醒生成后对照文件里的Dos Donts自查这是代理最容易越界的地方文件末尾的Agent Prompt 指南通常带有现成的取色参考可以直接复用拆一份 Vercel 文件看量化到什么程度以 design-md/vercel/DESIGN.md 为例它锁住的颗粒度字体阶梯标题从 48px / 字重 600 / 字距 -2.4px 起步逐级降到 12px 的辅助说明文字正文 16px、行高 24px每个层级都是字号 行高 字距的完整三元组圆角分档常规容器在 4px 到 16px 之间取档药丸形按钮直接 9999px间距刻度从 4px 一路排到 192px 的 section 级留白代理不需要猜松一点是多少对比一下 Linear 那份80px 起的 Display、4px 到 24px 的圆角档、9999px 药丸按钮就能看出每个品牌的气质差异最终都被写成了可枚举的数值差而不是风格描述上的微妙不同。品牌缺失时申请一份或自己补进去列表里没有想要的网站两条路申请getdesign.md 有 Request 入口可以按指定网站申请一份 DESIGN.md也支持只交付给你自己的私人请求贡献想补新品牌、修正色值或补齐缺失 token按 CONTRIBUTING.md 的流程走——先提 Issue 讨论确认后提 PR。合集按 as-is 提供数值勘误是最受欢迎的贡献方向高频问题深色模式适配怎么做同一份 DESIGN.md 里就带着深色侧的 token平台预览也能亮暗对照。原则是两套 token 的语义角色保持一致只换色值不动结构。生成结果偶尔越出规范怎么办先检查代理是否真的读了文件确认 DESIGN.md 在项目根目录、提示词明确引用它。如果某类问题反复出现多半是该文件对应维度的描述太粗可以走贡献流程把规则补具体。多品牌参考会不会更全面不建议。一套页面混用多份设计系统代理会两边取数输出必然发散。主视觉锁定一份其余需求另开页面另行指定。【免费下载链接】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），仅供参考
