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 写个 Linear 风格页面结果拿回来的是灰底加随机渐变按钮说参考 Stripe它又画出自己想象的紫。问题不在模型「品牌风格」四个字太模糊AI 不知道那抹紫到底是哪个值。awesome-design-md 收录了 73 份 DESIGN.md 设计系统文件丢进项目根目录AI 就能生成风格一致的界面。DESIGN.md 的真身AI 能直接读的设计系统 markdownDESIGN.md 由 Google Stitch 提出本质是一份纯文本设计系统文件把网站的色值、字体层级、组件状态、间距规则全部量化成文字。它不依赖 Figma 导出、JSON schema 或任何特殊工具一个文件丢进项目根目录AI 编码代理就能读懂。为什么是 markdown因为这是 LLM 读得最顺手的格式不用解析、不用配置。它和AGENTS.md正好分工文件谁读定义什么AGENTS.md编码代理项目怎么构建DESIGN.md设计代理项目应该长什么样前者管怎么造后者管长啥样。只有前者的项目AI 做得出能跑但不对味的页面。 73 个品牌设计系统怎么挑README 分类列表把 73 个品牌按行业分成 9 大类外加一个 Retro 系列每个品牌都配了一句风格摘要。先想清楚你要模仿的是哪类网站再按类挑AI 与 LLM 平台Claude暖陶土色、编辑感排版、xAI冷峻单色、未来感、Ollama终端风、单色极简开发者工具与 IDECursor深色界面、渐变点缀、Vercel黑白精确、Geist 字体、Warp块状命令式终端后端、数据库与 DevOpsClickHouse黄色强调、技术文档风、Supabase暗祖母绿、代码优先、Sentry暗色高密度仪表盘效率与 SaaSLinear极致极简、单一紫色强调、Notion暖调极简、衬线标题、Zapier暖橙、插画驱动设计与创意工具Figma多彩活泼、Framer黑蓝撞色、动效优先、Miro亮黄强调、无限画布金融科技与加密Stripe标志性紫色渐变 weight-300 细体、Coinbase干净蓝、机构感、Wise亮绿、友好清晰电商与零售Airbnb暖珊瑚、摄影驱动、Nike黑白 UI Futura 全大写、Shopify暗色优先、霓虹绿媒体与消费科技Apple高级留白 SF Pro、Spotify绿黑撞色、粗犷大字、SpaceX纯黑白、未来感汽车Tesla极端减法、全屏摄影、Ferrari黑白编辑感 Ferrari Red、Bugatti影院黑、巨幅展示字Retro Web 复古系列Dell 1996黑页框、色块卡片、Helvetica-Black 粗标题、Nintendo 2001Y2K 控制台式金属面板——想给页面加点年代感就从这里拿 从预览到落地四步让 AI 照着品牌设计规范干活先看效果再决定。每个品牌目录的 README 都注明设计系统详情已迁移到 getdesign.md 平台色板排成一行、按钮各状态并排摆开亮暗两套表面可以直接对比做深色模式适配时比读文档快得多。把仓库拉到本地。git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md只拷一份到项目根目录。比如design-md/stripe/DESIGN.md纯 markdown、零依赖不接入 AI 时它本身就是一本可查的设计规范手册。一句话交给代理。build me a page that looks like this照着这份设计文件给我做个页面。代理会从文件里读出画布色、强调色和字号层级生成结果这次能肉眼验收风格一致性。DESIGN.md 九大板块速读每份文件结构完全统一共 9 个板块按需取用#板块一句话说明1视觉主题与氛围情绪、密度、设计哲学2色板与语义角色语义名 hex 值 功能角色3排版规则字体族、完整字号层级表4组件样式按钮、卡片、输入框、导航及各状态5布局原则间距刻度、栅格、留白哲学6深度与高程阴影系统、表面层级7Dos Donts设计护栏与反模式8响应式行为断点、触控目标、折叠策略9Agent Prompt 指南快速色值参考、可直接复用的提示词以 design-md/linear.app/DESIGN.md 为例token 细到什么程度画布是#010102近纯黑、带一点蓝调唯一的彩色强调是薰衣草蓝#5e6ad2且只允许出现在品牌标、主 CTA 和焦点环上Display 层级从 80px 起步、weight 600、字距收紧到 -3.0px卡片走#0f1011起跳的四级表面阶梯靠 1px 发丝线区分层级几乎不用投影。AI 生成的页面像 Linear靠的就是这些被钉死在文字里的值。没收录的品牌怎么办顺手提个 PR 的机会想用的品牌不在列表里有两条路向 getdesign.md 平台提交请求可以为指定网站申请一份 DESIGN.md也接受私人请求private requests交付物只给你自己用。在仓库提 Issue 讨论想推动收录新品牌先和维护者沟通讨论达成一致再推进。贡献流程比想象中轻CONTRIBUTING 指南 明确欢迎修 bug 式改进现有文件里错误的色值、缺失的 token、描述含糊的地方都可以修——先开 Issue 说明要改什么对照线上站点核对修正后在 PR 里附上改动前后对比。注意仓库明确不接受全新的 DESIGN.md 提交质量把控由维护方负责改进现有文件才是社区玩法。整个仓库基于 LICENSEMIT授权。把仓库当成设计原料仓库getdesign.md 是展厅——你提走原料展厅负责让你看到成品效果。【免费下载链接】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），仅供参考 
长河君 · 2026/10/17 6:42:40 · 阅读 1.2k awesome-design-md：一份DESIGN.md让AI生成大牌级UI
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 写个 Linear 风格页面结果拿回来的是灰底加随机渐变按钮说参考 Stripe它又画出自己想象的紫。问题不在模型「品牌风格」四个字太模糊AI 不知道那抹紫到底是哪个值。awesome-design-md 收录了 73 份 DESIGN.md 设计系统文件丢进项目根目录AI 就能生成风格一致的界面。DESIGN.md 的真身AI 能直接读的设计系统 markdownDESIGN.md 由 Google Stitch 提出本质是一份纯文本设计系统文件把网站的色值、字体层级、组件状态、间距规则全部量化成文字。它不依赖 Figma 导出、JSON schema 或任何特殊工具一个文件丢进项目根目录AI 编码代理就能读懂。为什么是 markdown因为这是 LLM 读得最顺手的格式不用解析、不用配置。它和AGENTS.md正好分工文件谁读定义什么AGENTS.md编码代理项目怎么构建DESIGN.md设计代理项目应该长什么样前者管怎么造后者管长啥样。只有前者的项目AI 做得出能跑但不对味的页面。 73 个品牌设计系统怎么挑README 分类列表把 73 个品牌按行业分成 9 大类外加一个 Retro 系列每个品牌都配了一句风格摘要。先想清楚你要模仿的是哪类网站再按类挑AI 与 LLM 平台Claude暖陶土色、编辑感排版、xAI冷峻单色、未来感、Ollama终端风、单色极简开发者工具与 IDECursor深色界面、渐变点缀、Vercel黑白精确、Geist 字体、Warp块状命令式终端后端、数据库与 DevOpsClickHouse黄色强调、技术文档风、Supabase暗祖母绿、代码优先、Sentry暗色高密度仪表盘效率与 SaaSLinear极致极简、单一紫色强调、Notion暖调极简、衬线标题、Zapier暖橙、插画驱动设计与创意工具Figma多彩活泼、Framer黑蓝撞色、动效优先、Miro亮黄强调、无限画布金融科技与加密Stripe标志性紫色渐变 weight-300 细体、Coinbase干净蓝、机构感、Wise亮绿、友好清晰电商与零售Airbnb暖珊瑚、摄影驱动、Nike黑白 UI Futura 全大写、Shopify暗色优先、霓虹绿媒体与消费科技Apple高级留白 SF Pro、Spotify绿黑撞色、粗犷大字、SpaceX纯黑白、未来感汽车Tesla极端减法、全屏摄影、Ferrari黑白编辑感 Ferrari Red、Bugatti影院黑、巨幅展示字Retro Web 复古系列Dell 1996黑页框、色块卡片、Helvetica-Black 粗标题、Nintendo 2001Y2K 控制台式金属面板——想给页面加点年代感就从这里拿 从预览到落地四步让 AI 照着品牌设计规范干活先看效果再决定。每个品牌目录的 README 都注明设计系统详情已迁移到 getdesign.md 平台色板排成一行、按钮各状态并排摆开亮暗两套表面可以直接对比做深色模式适配时比读文档快得多。把仓库拉到本地。git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md只拷一份到项目根目录。比如design-md/stripe/DESIGN.md纯 markdown、零依赖不接入 AI 时它本身就是一本可查的设计规范手册。一句话交给代理。build me a page that looks like this照着这份设计文件给我做个页面。代理会从文件里读出画布色、强调色和字号层级生成结果这次能肉眼验收风格一致性。DESIGN.md 九大板块速读每份文件结构完全统一共 9 个板块按需取用#板块一句话说明1视觉主题与氛围情绪、密度、设计哲学2色板与语义角色语义名 hex 值 功能角色3排版规则字体族、完整字号层级表4组件样式按钮、卡片、输入框、导航及各状态5布局原则间距刻度、栅格、留白哲学6深度与高程阴影系统、表面层级7Dos Donts设计护栏与反模式8响应式行为断点、触控目标、折叠策略9Agent Prompt 指南快速色值参考、可直接复用的提示词以 design-md/linear.app/DESIGN.md 为例token 细到什么程度画布是#010102近纯黑、带一点蓝调唯一的彩色强调是薰衣草蓝#5e6ad2且只允许出现在品牌标、主 CTA 和焦点环上Display 层级从 80px 起步、weight 600、字距收紧到 -3.0px卡片走#0f1011起跳的四级表面阶梯靠 1px 发丝线区分层级几乎不用投影。AI 生成的页面像 Linear靠的就是这些被钉死在文字里的值。没收录的品牌怎么办顺手提个 PR 的机会想用的品牌不在列表里有两条路向 getdesign.md 平台提交请求可以为指定网站申请一份 DESIGN.md也接受私人请求private requests交付物只给你自己用。在仓库提 Issue 讨论想推动收录新品牌先和维护者沟通讨论达成一致再推进。贡献流程比想象中轻CONTRIBUTING 指南 明确欢迎修 bug 式改进现有文件里错误的色值、缺失的 token、描述含糊的地方都可以修——先开 Issue 说明要改什么对照线上站点核对修正后在 PR 里附上改动前后对比。注意仓库明确不接受全新的 DESIGN.md 提交质量把控由维护方负责改进现有文件才是社区玩法。整个仓库基于 LICENSEMIT授权。把仓库当成设计原料仓库getdesign.md 是展厅——你提走原料展厅负责让你看到成品效果。【免费下载链接】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），仅供参考