awesome-design-md 完整拆解一份 DESIGN.md 如何指挥 AI 生成品牌同款 UI【免费下载链接】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 Agent 就能照着生成品牌同款 UI。白拿收益视觉一致性不再靠人工对齐你不用自己打开 Stripe、Linear 的官网去扒色值和字体73 份现成档案直接选Agent 的产出从每次重新调一遍变成逐页保持一致全程零工具链没有 Figma 导出没有 JSON 解析就是一个文本文件。可以把 DESIGN.md 理解成给 AI 的菜谱卡主料颜色、字体、手法组件、间距和别加味精禁止事项都写清楚了AI 照着下厨就行。一句话定义DESIGN.md 是 Google Stitch 提出的概念——纯 Markdown 的设计系统文档供 AI Agent 阅读后生成风格一致的 UI。项说明谁来读负责设计的 AI Agent构建流程则由 AGENTS.md 管是什么形态纯 Markdown无需任何解析器或配置放哪你的项目根目录Agent 直接读取最快上手三步把品牌气质搬进项目第一步clone 仓库只要一份文件也行git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md cp awesome-design-md/design-md/spotify/DESIGN.md 你的项目/DESIGN.md第二步确认文件在项目根目录文件名保持DESIGN.md不需要改名。第三步对 Agent 说一句build me a page that looks like DESIGN.md它会自行读取色值、字体层级和组件规则开始生成。内部拆解73 份文件按三层逻辑组织目录层一个品牌一个文件夹全部 73 份文件都在 design-md/ 下每个品牌一个文件夹固定两个文件DESIGN.mdAgent 真正读的本体和README.md该站点的一句话说明。行业分类共 10 类从 AI 平台claude、x.ai到开发者工具vercel、cursor、金融科技stripe、coinbase、汽车tesla、ferrari还有一档复古特辑design-md/dell-1996/DESIGN.md 是 1996 年 Dell 官网风格。完整清单在 README.md 的 Collection 章节。内容层氛围、细节、护栏三板块打开任何一份 DESIGN.md内容都可以归入三类职责氛围像什么气质设计哲学 色板 字体层级。Spotify 开篇就点出内容优先的黑暗——界面退进#121212的近黑背景让专辑封面成为唯一色彩来源见 design-md/spotify/DESIGN.md。细节组件长什么样按钮、卡片、输入框的各状态参数、间距刻度、阴影层级。Linear 把间距列成 xxs 4px 到 section 96px 的完整刻度。护栏什么不能做Dos and Donts、响应式折叠策略、以及可直接复制的组件提示词速查。写法层两种排版习惯写法代表文件特点编号叙事design-md/spotify/DESIGN.md9 个编号章节顺序推进散文加表格描述变量表头design-md/linear.app/DESIGN.md顶部 YAML 块集中登记颜色、字体、圆角、间距正文用{colors.primary}式占位引用变量表写法的价值在于primary: #5e6ad2只登记一次正文处处引用改一处全局生效Agent 也不会拿错色值。实操清单6 条硬指标保证生成质量要做核对文件五要素齐全再使用色板带语义名Spotify Green#1ed760只标注用于播放按钮/激活态/主 CTA、完整字体表格、组件状态Linear 的button-primary分默认/hover/pressed 三条记录、间距刻度Linear 从 xxs 4px 到 section 96px、禁止事项。复制用相对路径直接搬cp design-md/stripe/DESIGN.md 你的项目/DESIGN.md。给 Agent 的指令落到具体数值可直接摘自文档的提示词速查节如pill button:#1f1f1f背景、白色文字、9999px 圆角、8px 16px 内边距。别做别只说按 Linear 风格做却不放文件——Agent 读不到就无从对齐。别只搬色值跳过护栏Spotify 明确禁止装饰性使用品牌绿、禁止方形按钮、禁止添加第二品牌色。别只看 README 一句话就选型——打开 DESIGN.md 确认色值与字体层级是具体数字而非形容词。踩坑自检4 个症状对应 4 个修法症状原因修法生成风格与品牌不符没把 DESIGN.md 放进根目录或提示词没指向它文件放根目录指令写成 build me a page that looks like DESIGN.md强调色、字体时准时不准选中了编号叙事写法色值散落在散文里易被 Agent 混用换用 Linear 式变量表头文件核对{colors.primary}类引用组件缺 hover、pressed 等状态Agent 只读了概览没读组件章节指给组件样式一节Linear 每个按钮状态各占一条记录移动端断行、布局散架响应式规则没被读到核对 Responsive 一节Spotify 列出 7 个断点覆盖 425px 到 1280px资源地图三个入口加一条贡献规则全部 73 份设计文档design-md/贡献指南CONTRIBUTING.md——只接受对现有文件的修正错色值、缺失项、弱描述需先开 issue 讨论不接受新品牌的 PR许可证LICENSEMIT 协议从 README.md 的行业清单里挑一个气质对味的品牌把它的 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），仅供参考
