awesome-design-md 的 Dos and Donts 章节价值为什么反模式对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-mdawesome-design-md 是一个精选的 DESIGN.md 设计系统文档合集收录了 73 个主流品牌网站的设计分析。把任意一份 DESIGN.md 放进项目根目录再告诉 AI 编码代理照着做就能生成视觉风格与目标品牌保持一致的高质量 UI。 而每个文档里最容易被忽略、却对 AI 输出质量影响最大的正是第 7 章——Dos and Donts设计与反模式清单。DESIGN.md 里有什么Dos and Donts 在九大章节中的位置每个品牌的文档都遵循同一套九段式结构完整说明见 README.md#章节作用1Visual Theme Atmosphere氛围、密度、设计理念2Color Palette Roles语义化颜色令牌 功能角色3Typography Rules字体族与完整字号层级表4Component Stylings按钮、卡片、输入框及各状态5Layout Principles间距刻度、网格、留白哲学6Depth Elevation阴影体系与表面层级7Dos and Donts设计护栏与反模式⚠️8Responsive Behavior断点、触控目标、折叠策略9Agent Prompt Guide快速取色参考与即用提示词前 6 章回答这个品牌长什么样第 7 章回答绝对不能怎么画。对 AI 来说后半句往往更值钱。为什么不要做什么比要做什么对 AI 更重要AI 有默认审美反模式负责拦截它的自由发挥大模型生成 UI 时带有强烈的行业先验加圆角阴影卡片、多塞几种强调色、用渐变背景点缀……这些恰好是各品牌明令禁止的反模式。Do 部分定义风格的下限Dont 部分划定边界——没有边界AI 每次生成的 UI 都会悄悄漂移出品牌。每条反模式都绑定了具体令牌AI 可以逐条自检这份合集的 Donts 不是空泛的口号而是直接引用 YAML 令牌可验证、可执行。以 design-md/stripe/DESIGN.md 为例不要把展示级字重升到 300 以上——到 400 时品牌的编辑感会垮掉不要用品牌靛蓝colors.primary做正文文字——它是 CTA 色不是字色不要把药丸按钮换成圆角矩形再看 design-md/linear.app/DESIGN.md不要上线浅色模式营销页不要用#000000纯黑做画布——#010102的那一丝蓝调是刻意为之不要给 CTA 用全药丸圆角最后一条很有意思药丸按钮在 Apple 体系里是品牌签名在 Linear 体系里却是反模式。同一组件规则在品牌间完全相反——靠 AI 的常识根本判断不了只能靠文档显式声明。反模式附带为什么让 AI 举一反三优质 Donts 都会解释原因比如 design-md/apple/DESIGN.md 中的正文不要用字重 500——Apple 的字重阶梯是 300/400/600/700500 被刻意留空。有了原因AI 在遇到文档没覆盖的边缘场景时也能按同一逻辑决策而不是只背规则。三步用上反模式清单最快让 AI 输出对味的 UI挑选品牌文档浏览 design-md/ 目录每个品牌一个文件夹如 design-md/spotify/DESIGN.md、design-md/claude/DESIGN.md把目标品牌的DESIGN.md复制到你的项目根目录。提示词显式引用第 7 章让 AI严格按照 DESIGN.md 的 Dos and Donts 章节约束生成完成后逐条自查 Dont 清单。把反模式当验收标准用产出一致性会显著提升。对照预览页人工核验每个品牌文件夹还配有preview.html/preview-dark.html视觉目录含色板、字阶、按钮卡片示例可用来直观对比 AI 输出是否越界。 进阶玩法AI 生成的 UI 如果不太像先别改提示词直接去该品牌的 Dont 章节找它违反了哪一条把违反的条款贴回去让它修正——这是成本最低的调优路径。相关资源合集总览与使用方式README.md文档结构规范与贡献指南如何修正错误色值、补充缺失令牌CONTRIBUTING.md更多品牌的反模式清单design-md/nike/DESIGN.md、design-md/superhuman/DESIGN.md、design-md/tesla/DESIGN.md 等 70 份文档全部包含独立的 Dos and Donts 章节总结在 awesome-design-md 中颜色令牌和字号表让 AI 能画出像的 UI而Dos and Donts 章节让 AI 画不出错的 UI。反模式是写给 AI 的护栏它拦截模型的默认审美漂移、提供可逐条自检的验收标准、并用为什么支撑边缘决策。下次让 AI 照着 DESIGN.md 生成页面时把第 7 章当作硬性验收清单你会得到明显更对味的结果。✅【免费下载链接】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），仅供参考