awesome-design-md直接拿走 73 份 DESIGN.md3 步生成品牌同款 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本文讲清拿哪份、放哪、怎么写自己的。DESIGN.md 到底管什么DESIGN.md 是 Google Stitch 提出的一种纯 Markdown 设计系统文档AI Agent 读完它就能生成风格一致的 UI。没有 Figma 导出没有 JSON Schema就是一个谁都能读的文本文件。仓库里还住着另一个容易混淆的兄弟文件谁来读管什么AGENTS.md编码 Agent项目怎么构建怎么做DESIGN.md设计 Agent界面长什么样长啥样说白了一个管施工一个管装修各干各的。怎么拿一份来用三步跑通拉仓库git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md放对位置把目标品牌的DESIGN.md拷到项目根目录无需解析、无需配置。一句话开工对 Agent 说 build me a page that looks like this它会自己读取设计令牌tokens和规则。73 份文档去哪挑所有文件都在design-md/目录下一品牌一文件夹每个文件夹固定两个文件——DESIGN.md是设计系统本体Agent 真正读的README.md是站点的简要说明。合集按行业分成 8 大类、覆盖 70 品牌按口味挑几份 开发者工具Vercel、Linear 流媒体与创意Spotify、Figma 金融科技Stripe、Coinbase 汽车Tesla、Ferrari 复古怀旧Dell 1996完整分类清单在 README.md按需自取。怎么写才算好通读这 73 份文档写法其实就两种。编号式Spotify 派正文用 1–9 编号章节顺序推进——Visual Theme Atmosphere、Color Palette Roles、Typography Rules、Component Stylings、Layout Principles、Depth Elevation、Dos and Donts、Responsive Behavior、Agent Prompt Guide——纯 Markdown 散文描述结构一目了然。令牌式Linear / Stripe 派文件头部放一段 YAML frontmatter定义 colors、typography、rounded、spacing、components 等令牌正文改用{colors.primary}这类引用代替反复出现的色值。改一处令牌、全局生效Agent 也不会拿错色--- name: Linear-design-analysis colors: primary: #5e6ad2 canvas: #010102 ink: #f7f8f8 surface-1: #0f1011 ---想自己写一份照这张自检清单过一遍开头写设计人格2–3 句散文讲清设计哲学。Spotify 直接点出内容优先的黑暗——UI 退进阴影让专辑封面成为唯一色彩来源。色板名字、色值、用途一个都不能少。Spotify Green#1ed760只给播放按钮和主 CTA绝不装饰#121212是最深背景#f3727f仅用于错误。字体给一张完整层级表角色、字号、字重、行高、字间距、用途逐行列全再注明字重策略Spotify 只用 700/400 两档和开源替代专有字体加载不了时用 Inter、Geist Sans。组件写全状态间距圆角给刻度按钮默认 / hover / pressed / focus 逐一给值间距从 4px 或 8px 基础单位往上排圆角从 4px 徽章排到 9999px 胶囊。禁令 即用型提示词Donts 直接砍掉跑偏——Spotify 明令 ❌ 装饰性使用品牌绿第 9 章还附可复制的现成 prompt把文档升级成工具。容易踩的坑有哪些⚠️ 写自己的 DESIGN.md 前先看这四条只写虚词不写数值深色高级感对 Agent 没有信息量要写#121212、24px 模糊阴影。同一色值散落硬编码改一处漏一处用令牌式引用收口。只写能做什么不写不能做什么没有 DontsAI 容易自由发挥。忘记字体 fallback专有字体加载失败时Agent 需要一个明确的替代选择。一张表记住要点一句话是什么纯 Markdown 设计系统文档AI Agent 的视觉规范怎么用拷到项目根目录让 Agent 读取后生成页面两种写法编号式Spotify/ 令牌式Linear质量关键语义化色板、完整字体表、组件状态、Donts资源入口design-md/目录73 个品牌任选项目遵循 MIT 协议贡献指南见 CONTRIBUTING.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），仅供参考