73 份 DESIGN.md 任选其一让 AI 生成的页面不再是千篇一律【免费下载链接】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 写页面时卡住进度的常常不是功能而是视觉生成出来的页面总是一个样子怎么强调高级一点都像通用模板。问题在于模型手里没有具体的设计依据。awesome-design-md 收录了 73 份 DESIGN.md 设计系统文档——每个知名品牌的官网风格被分析成一份纯 Markdown 文件。把其中任意一份放进项目根目录Agent 就能按文档生成风格统一的界面。最短上手路径两条命令git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md cp design-md/spotify/DESIGN.md ~/your-project/全部文档位于 design-md/ 目录一个品牌一个文件夹内含 DESIGN.mdAgent 读取的设计文档、README.md站点简介以及 preview.html、preview-dark.html 两份可视化预览。不需要解析工具也不需要配置Markdown 本来就是大语言模型读得最顺的格式。另外注意它与 AGENTS.md 的分工前者管怎么构建项目DESIGN.md 管项目长什么样两者可以并存。怎么从 73 份里挑一份品牌文档73 份文件按行业分成 8 类README.md 里有完整清单。按你的产品行业和想要的观感对号入座即可行业类别品牌示例视觉特点开发者工具Vercel、Linear、Cursor黑白精密、深色界面、几何无衬线字体金融科技Stripe、Coinbase、Wise标志性紫色渐变、信任感蓝、绿色点缀消费媒体Spotify、Apple、The Verge深色基调、大字号展示、电影感配图汽车Ferrari、Tesla、Lamborghini满屏大图、品牌色极度克制、强明暗对比挑选时先看 README 的一句话描述再打开 preview.html 直观感受比只看名字靠谱。DESIGN.md 的两种写法73 份文件有两种写法内容规范一致都是九个标准章节视觉理念、色板、字体、组件、布局、深度、禁令、响应式、提示词指南。第一种是编号章节式。以 design-md/spotify/DESIGN.md 为例正文按 1 到 9 顺次展开色板用带色值的条目描述品牌绿#1ed760只用于播放按钮和主行动点背景则由#121212到#1f1f1f三层深灰递进。第二种是令牌式。Linear 和 Vercel 的版本在文件头部写一段 YAML 块颜色、字体、圆角、组件的令牌全部集中在里面正文用{colors.primary}这样的引用代替色值。好处是改颜色只改令牌定义一处所有引用处自动同步Agent 也不会拿错色值。Agent 靠哪些信息还原风格对比阅读几份文件后会发现 Agent 依赖的信息高度一致设计哲学。首章用几段散文说明视觉立场。Spotify 版本提出内容优先的暗色——界面退进深灰阴影让专辑封面成为唯一色彩来源。这段让 Agent 明白该营造什么氛围而不只是该用什么色。语义化色板。每个颜色有语义名、色值和用途说明三者缺一Agent 就会分不清哪个场景该用哪个色。字体层级表。按角色、字体、字号、字重、行高排成表格用来精确复现标题、正文与按钮文字的差别Spotify 版本还注明靠字重700/400 两档而非字号做层级并为未公开的专有字体列出开源替代。组件状态。按钮要写全默认、hover、pressed。Linear 版本把主按钮的三种状态各定义为一个令牌hover 时背景换成更亮的薰衣草色。明确禁令。Donts 一节最不起眼也最关键。Spotify 版本直接写明品牌绿不得装饰性使用、按钮不得做成方形、不得增加额外品牌色——UI 的色彩只来自内容。对 AI 来说划边界比写十条自由发挥管用。即取提示词。Spotify 版本末尾附了几条可直接复制的提示词例如指定背景色、9999px 圆角、内边距和字重来描述一枚胶囊按钮文档因此能当工具用。如何验证生成效果是否合格把 DESIGN.md 放进项目根目录后对 Agent 说按这份文档建一个页面。判断质量可以查三点一、对照同目录的 preview.html生成页面的整体观感应与官方样例一致二、抽查数值按钮圆角、字号层级与文档给出的数字一致品牌色只出现在功能位置三、检查状态交互按钮 hover 有变化窄屏下页面按响应式章节折叠。如果跑偏多半是没把文档给 Agent只给了一句口头描述。下一步就今晚做打开 design-md/ 目录按行业翻几份挑一个最贴近你产品气质的品牌把它的 DESIGN.md 复制到项目根目录让 Agent 生成一页再对照预览文件打分。这比你自己写设计描述要快得多生成得也不像AI 味模板。【免费下载链接】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），仅供参考