如何让 AI Agent 生成风格一致的 UIDESIGN.md 的 5 个核心要素【免费下载链接】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——纯 Markdown 的设计系统文档AI Agent 读它就能产出风格统一的 UI。本文按色彩、字体、组件状态、边界与提示词 5 个要素拆解帮你写出品牌级的 DESIGN.md。AI 生成的 UI 为什么总跑偏让 Agent「做个 Spotify 风格的页面」第一版绿色对了第二版按钮变方了第三版又混进来一个品牌里不存在的灰。问题不在模型能力而在视觉规范没有落地的载体——你口头描述的「深色、简洁」每次生成都是一次重新理解。DESIGN.md 就是来填这个缺口的。它由 Google Stitch 提出是一个纯 Markdown 文件什么色值用在哪、字体怎么排、按钮有哪些状态、哪些事不许做全部写下来。Agent 读完再生成 UI风格才稳得住 它和 AGENTS.md 容易混但分工很明确文件谁来读定义什么AGENTS.md编码 Agent怎么构建项目依赖、构建命令、测试约定DESIGN.md设计 Agent项目该长什么样色彩、字体、组件样式一个管工程约定一个管视觉表达放在项目根目录里互补互不冲突。如何把 DESIGN.md 放进项目73 份文件都在 design-md/ 目录下一个品牌一个文件夹每个文件夹里有两个文件DESIGN.mdAgent 真正读的设计系统本体和README.md该站点的简要说明。跑起来只需两行命令git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md cp design-md/spotify/DESIGN.md my-project/把文件放进自己的项目根目录再对 Agent 说一句「按 DESIGN.md 把页面做出来」就行。不用装工具链不用做配置——Markdown 恰好是大语言模型读得最顺的格式。想要精密的暗色界面选 Linear 或 Stripe想复刻 1996 年 Dell 官网的复古感dell-1996 那份可以直接用 决定生成质量的要素正文必须写清的 5 件事合集里的文件遵循同一套内容规范从视觉氛围到 Agent 提示词共九个标准章节但你自己写的时候抓住 5 个要素就够了。色彩与字体只写 Agent 能执行的数字「深色主题、高级感」这类词对 Agent 没有信息量。写#121212写24px 模糊阴影它才接得住。色彩部分语义名、色值、功能角色要齐不要只甩一堆十六进制要说清每种颜色用在哪。Spotify 的做法值得照抄——品牌绿#1ed760只出现在播放按钮、激活态和主 CTA绝不装饰错误红#f3727f只服务错误状态。正文里也不重复硬编码同一个色值。字体部分的核心是一张层级表角色、字体、字号、字重、行高、用途各占一列Agent 靠它精确复现标题和按钮文字的差别。两个加分点一是说明字重对比策略Spotify 的层级就靠 700 与 400 两档字重撑起来不靠字号堆二是专有字体加载不了时写明开源替代方案Linear 的文档就注明了 Inter 和 Geist Sans。组件、边界与可复制的提示词组件写作的要点是把状态写全默认、hover、按下、聚焦一个都不能少。Linear 的文档给button-primary单独拆出三个状态各自的规格Agent 就不会拿错色。顺手再给两套量化刻度——间距从 4px 或 8px 基础单位起、分出 xs 到 lg 的档位圆角从 4px 徽章一路排到 9999px 胶囊。最容易被漏掉、却最决定质量的是「不要做」清单。AI 自由发挥最怕「看起来都行」把边界写死能直接砍掉一半跑偏。Spotify 的文档划了三条线品牌绿不许做装饰、胶囊按钮不许改成方形、不许引入第二种品牌色。最后一步把文档从参考变成工具文末附上可复制粘贴的组件提示词比如「一个胶囊按钮#1f1f1f 背景、白字、9999px 圆角、内边距 8px 16px」Agent 拿到就能开工 ✍️两种写法编号章节与 frontmatter 令牌73 份文件归纳起来是两种写法内容相同组织方式不同。编号章节式用 1–9 编号章节推进纯 MarkdownSpotify 是代表。可读性好能用散文讲透设计哲学适合快速成文。frontmatter 令牌式在文件头部放一段结构化区块令牌就是一组「名字 → 值」的映射正文用{colors.primary}这样的引用代替重复的色值Linear 和 Stripe 都用这种colors: primary: #5e6ad2 canvas: #010102 components: button-primary: backgroundColor: {colors.primary}好处是改一处令牌、全局生效Agent 也不会拿错色值。取舍一目了然编号章节式frontmatter 令牌式正文取值字面量反复出现令牌写一次按名引用单点修改全文搜索替换改定义即全局生效适合场景快速成文、散文表达多长期维护、组件多代表文档SpotifyLinear、Stripe一次性页面选前者要长期维护一份规范选后者。现在就动手三个可执行的动作先跑一个从 design-md/ 里挑一个顺眼的品牌把它的DESIGN.md复制到自己项目根目录让 Agent 重做一个已有页面和官网对照看差距在哪。再写自己的按 5 个要素走——语义化色值、字体层级表、组件状态、「不要做」清单、可复制提示词形容词换成数字别只写「该做什么」不写「不能做什么」。反馈与许可发现合集里色值有误可按 CONTRIBUTING.md 的指引提 issue 反馈项目采用 MIT 协议见 LICENSE。下次让 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），仅供参考
