awesome-design-md 实操指南3 步写出 AI 能直接用的 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 生成页面这次按钮是圆角蓝色下次变方角紫色。配色每次都不一样怎么治awesome-design-md 把 73 个知名品牌的官网扒成了一份份 DESIGN.md纯 Markdown 的视觉规范。AI 读完就能生成风格一致的 UI。它到底管什么DESIGN.md 是 Google Stitch 提出的一种纯文本设计系统文档。它是给 AI Agent 读的视觉规范只管界面长什么样配色、字体、圆角、阴影。构建、测试、部署这些工程问题一概不管那是另一个文件的事。文件谁来读管什么AGENTS.md编码 Agent项目怎么构建DESIGN.md设计 Agent项目长什么样子一句话AGENTS.md 管「怎么做」DESIGN.md 管「长啥样」两个文件各管一摊放一起不打架。第一次跑通你刚 clone 完仓库前 5 分钟只做三件事。第一步把仓库拉下来git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md第二步挑一个喜欢的品牌把它的 DESIGN.md 拷进自己项目的根目录。以 Spotify 为例cp awesome-design-md/design-md/spotify/DESIGN.md ~/my-project/DESIGN.md第三步打开你的 AI 编码 Agent你只需要对它说一句话「Read DESIGN.md, build me a page that looks like this spec.」不用装插件不用改配置。Markdown 本身就是 Agent 读得最顺的格式。核心写法逐项过想自己写一份打开 design-md/spotify/DESIGN.md 对照着看。下面 5 个要素一个都不能省。开头先把设计人格立住正面示例来自 Spotify 那份的开头段the design philosophy is content-first darkness — the UI recedes into shadow so that music, podcasts, and playlists can glow反面如果开头只写「深色、高级、简洁」没有色值、没有数字Agent 读完等于没读。判定标准及格线第一屏之内要出现至少 3 个具体数值色值或 px 都算。还得点出品牌主色是谁。色板先给名字再给值正面示例每个颜色都是三件套Spotify Green(#1ed760): Primary brand accent — play buttons, active states, CTAsNear Black(#121212): Deepest background surfaceNegative Red(#f3727f):--text-negative, error states反面如果只甩一串#1ed760、#121212、#f3727f没名字也没用途Agent 只会拿错色。判定标准及格线色板必须「语义名 色值 用途」三列齐全缺用途列就不算合格。字体把层级表排全正面示例Spotify 那份的字体表就是完整结构RoleFontSizeWeightLine HeightLetter SpacingNotesBodySpotifyMixUI16px (1.00rem)400normalnormalStandard body反面如果只写「用干净的无衬线字体」Agent 只能靠猜。猜出来的层级一定乱。判定标准及格线表格至少覆盖标题、正文、按钮三档。专有字体拿不到时写明免费替代如 Inter。组件把状态写成数值正面示例Linear 那份给按钮的每个状态各占一条令牌token 见下节button-primary-hover: backgroundColor: {colors.primary-hover} rounded: {rounded.md}反面如果只写「按钮质感要高级」hover、pressed 没有数值每次生成手感都不一样。判定标准及格线主按钮至少给出默认 hover 两个状态背景色、圆角、内边距全有具体值。Donts把禁令一条条列出来正面示例Spotify 的禁令都指向具体反模式Dont use Spotify Green decoratively or on backgrounds — its functional onlyDont skip the pill/circle geometry on buttons — square buttons break the identity反面只写「能做什么」不写「不能做什么」AI 会在「看起来都行」的区间里自由发挥。翻车概率直接翻倍。判定标准及格线Dont 条目不少于 3 条每条必须指向一个具体反模式。写「别做得丑」不算数。两种流派怎么选通读 73 份文件写法其实就两个流派。如果你的场景是单页站点、想先把氛围讲透 → 选编号散文式。代表文件design-md/spotify/DESIGN.md1–9 段顺序推进读起来像一份设计简报。如果你的场景是多页面产品、令牌设计令牌就是给颜色、尺寸起的变量名会反复调整 → 选 YAML 令牌式。代表文件design-md/linear.app/DESIGN.md头部声明 token正文用{colors.primary}引用改一处全局生效。拿不准就从编号散文式起步。等组件写稳定了再给文件头部补一段 frontmatter平滑过渡到令牌式。交稿前过一遍像 code review 一样对着过一遍这 5 条❌ 写成了「深色、高级感」 → ✅ 应该是「#121212 背景 24px 模糊重阴影」❌ 写成了同一个色值在文里出现 5 次 → ✅ 应该是token 声明一次正文全部用{colors.primary}引用❌ 写成了只有 Do 一边的条目 → ✅ 应该是Do/Dont 成对出现禁令不少于 3 条❌ 写成了「使用系统字体」 → ✅ 应该是「Inter回退 SF Pro Display」替代方案写死❌ 写成了按钮只给默认态 → ✅ 应该是默认 / hover / pressed 三态都有数值拿走就用主题一句话设计人格首段点破哲学至少带 3 个具体数值色板名字 色值 用途三件套齐全字体层级表排全替代字体写明白组件主按钮至少 2 个状态全带数值Donts少于 3 条禁令AI 必自由发挥流派单页选散文式多页选令牌式73 个品牌的现成文件都躺在 design-md/ 目录里挑一个最顺眼的拷进项目根目录把那句话丢给你的 Agent 【免费下载链接】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），仅供参考
