AI Agent 照着 DESIGN.md 生成 UI，为什么还差点意思？73 份设计系统的用法

AI Agent 照着 DESIGN.md 生成 UI为什么还差点意思73 份设计系统的用法【免费下载链接】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 照着 DESIGN.md 生成落地页要求就一句长得像 Linear 一点。结果主按钮蓝色、圆角 4px、配色全靠玄学。问题不在模型在于视觉需求用自然语言给对方只能猜。awesome-design-md 就是为这个来的一个收录 73 份 DESIGN.md 的合集全部从 Stripe、Spotify、Linear 这类品牌官网提取纯 Markdown 设计系统文档。放进项目里AI Agent 读完就能生成风格一致的 UI。一份施工图纸一张配料表DESIGN.md 和 AGENTS.md 怎么分工仓库把两个文件分得很清楚AGENTS.md给编码 Agent 读定义项目怎么构建——依赖、构建、测试相当于施工图纸DESIGN.md给设计 Agent 读定义项目长什么样——配色、字体、组件相当于菜品的配料表。配料表的好处是每种原料都有名字、含量和用途Agent 照着表知道什么色能用在哪、不能往哪用不用现场发挥。说白了一个管怎么做一个管长啥样互不冲突。拆开一份真实文档看从色板读起73 份文档都遵循同一套内容标准9 个标准章节只是呈现方式不同。拿 design-md/spotify/DESIGN.md 解剖给你看。色板为什么不能只扔十六进制正确写法是三件套语义名 色值 角色。Spotify 版里每一条都长这样Spotify Green#1ed760播放按钮、激活态、主 CTA——只服务功能绝不装饰Near Black#121212最深背景表面Negative Red#f3727f仅错误状态只甩色值Agent 只知道有这个颜色不知道能用在哪。角色写清楚取色才不会乱。红绿灯最容易被忽略、最决定质量的一节Dos and Donts 本质是给 Agent 挂红绿灯。Spotify 的三条 Donts 可以直接抄作业❌ 别把品牌绿当装饰——它只服务功能❌ 别用方形按钮——会破坏品牌识别别自己加品牌色——绿 无彩灰已经是完整色板AI 自由发挥最怕看起来都行几条红灯直接砍掉一半跑偏概率。字体层级一张表说了算字体章节的核心是一张表角色 | 字体 | 字号 | 字重 | 行高 | 字间距 | 用途。标题、正文、按钮文字的差别Agent 全靠这张表精确复现。两个加分项写清字重对比策略Spotify 基本只用 700 和 400 两档600 很少用靠粗细而不是大小分层级以及字体替代方案专有字体 SpotifyMixUI 给了一长串 fallback 栈你自己写的话写明可替换的开源字体比如 Inter、Geist Sans。把手感写成数值状态、间距、圆角按钮要把状态写全默认 / hover / pressed / focus。Linear 版里button-primary三个状态各占一个令牌见 design-md/linear.app/DESIGN.md。两套刻度全给数字间距以 8px 为基础单位逐级放大圆角从 2px 徽章、6px 卡片到 9999px 胶囊、50% 圆形Spotify 的刻度。手感这两个字变成数值才算进了 Agent 手里。开头那几段废话和结尾的现成提示词每份文档开头都有 2–3 段散文讲设计哲学再跟一组 Key Characteristics。Spotify 直接点出content-first darknessUI 退隐到阴影里专辑封面成为唯一色彩来源。这段决定生成结果的气质。结尾第 9 章 Agent Prompt Guide 更实用给的是可复制的提示词比如 Design a pill button: #1f1f1f background, white text, 9999px radius, 8px 16px padding…。到这里文档不只是文档是工具了。自由散文体 vs 结构化令牌体两种写法怎么选写法代表特点自由散文体Spotify1–9 编号章节纯 Markdown通读顺手适合快速建立感觉结构化令牌体Linear、StripeYAML frontmatter色值集中在令牌里改一处全文生效散文体片段SpotifyBold/regular binary: Most text is either 700 (bold) or 400 (regular), with 600 used sparingly. This creates a clear visual hierarchy through weight contrast rather than size variation.令牌体片段Linear frontmattercolors: primary: #5e6ad2 on-primary: #ffffff primary-hover: #828fffLinear 正文里直接写backgroundColor: {colors.primary}这类引用不再重复色值。令牌改一处全文跟着变Agent 也不会拿错色。交稿前先过这张体检表想自己写一份 DESIGN.md写完先自测五项哪项亮红灯生成就容易飘体检项红灯绿灯数值深色主题、高级感#121212、24px 模糊阴影色值管理同一颜色硬编码五处语义名 令牌引用全局唯一边界只写能做什么Donts 明确禁止常见跑偏字体只写字体名层级表 fallback 替代方案组件状态只有默认态默认 / hover / pressed / focus 齐全现在就做挑一个品牌一句话交给 Agent仓库 clone 下来git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md或者只从 design-md/ 里拿你要的那一份放进项目根目录即可无需解析、无需配置。然后对 Agent 说一句build me a page that looks like this。73 个品牌、8 大行业分类Vercel、Linear 这类开发者工具Stripe、Coinbase 这类金融科技Tesla、Ferrari 这类汽车还有 Dell (1996) 这种复古系列总有一款合眼缘。挑一份放进项目让 Agent 开工吧 想改进或校准合集里的文档看 CONTRIBUTING.md项目采用 MIT 协议见 LICENSE。【免费下载链接】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），仅供参考