awesome-design-md案例Miro无限画布美学与亮黄强调色全解【免费下载链接】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 设计系统文档集合把任意一份 DESIGN.md 丢进项目根目录AI 编码代理就能直接生成风格统一的界面。本文以 design-md/miro/DESIGN.md 为案例带你快速读懂 Miro 标志性的无限画布美学——纯白画布、黑色胶囊按钮、以及那张著名的亮黄强调色到底该用在哪里。什么是 awesome-design-md1 分钟上手DESIGN.md 是 Google Stitch 提出的一种新玩法一个纯文本的 Markdown 设计系统文件专门给 AI 代理阅读用来定义项目应该长什么样。它不需要 Figma 导出、不需要 JSON 配置Markdown 正是大模型读得最好的格式。这个项目提供了 70 份从真实网站提取的 DESIGN.md完整清单见 README.md涵盖 Miro、Figma、Linear、Stripe 等品牌。使用方式极简把目标站点的DESIGN.md复制到你的项目根目录本仓库可直接git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md获取告诉你的 AI 代理用项目里的 DESIGN.md 帮我生成一个页面。Miro 的完整设计系统就在 design-md/miro/DESIGN.md贡献规范参考 CONTRIBUTING.md。Miro 设计系统速览一页纸看懂核心 TokenMiro 的品牌声音是自信又带点小俏皮白色画布上是小小的金丝雀黄canary yellowwordmark黑色胶囊主按钮主导营销页彩色马卡龙卡片则呼应着真实白板上的便利贴配色。Token色值角色brand-yellow#ffd02f品牌亮黄wordmark、顶部促销横幅、黄色标签brand-yellow-deep#fcb900更深的黄用于强调与按压态yellow-light#fff4c4浅黄背景色用于标签芯片yellow-dark#746019深橄榄色黄色标签上的文字primary#1c1c1e近黑色主 CTA 按钮与页脚背景brand-blue#4262ff行动蓝行内链接、推荐定价卡描边canvas#ffffff页面画布白无限画布的底色亮黄强调色全解金丝雀黄的 3 种正确用法 这是整份设计系统里最值得记住的纪律——黄色是签名色但绝不是按钮色品牌 wordmark左上角黄色方形 Miro 标志是整个开屏页面的识别符号顶部促销横幅导航栏上方的黑色 sticky 促销条promo-banner里内嵌一枚黄色GET YOUR SPOT胶囊黄色标签芯片badge-tag-yellow浅黄底#fff8e0 深橄榄文字与badge-promo亮黄底用于功能页的标签装饰。对应的设计守则非常明确✅ Do把brand-yellow限定在 wordmark、促销横幅、黄色标签三类位置。 ❌ Dont不要用亮黄做标准 CTA也不要用在大面积背景上。主 CTA 永远交给黑色胶囊button-primary#1c1c1e底 白字 rounded.full全圆角 12px 24px内边距。黄色按钮button-yellow只出现在需要品牌强调时刻的场景。无限画布美学留白、层级与阴影Miro 官网本身就是一张白板——留白哲学贯穿始终4px 基础栅格间距从4px一路到120pxhero 区营销页区块间距96px定价页收紧到64px5 级阴影系统默认卡片完全扁平无阴影 1px 细线描边阴影只战略性地留给 hero 区的白板模拟图——rgba(5, 0, 56, 0.08) 0px 12px 32px -4px让画布里的便利贴仿佛真的浮在纸面上马卡龙功能卡片card-feature-yellow / coral / teal / rose四色卡片正是真实白板便利贴配色的呼应圆角统一28px与白色卡片同屏混排真实产品截图代替摄影图whiteboard-mockup组件规定——展示产品时用真实的 Miro 白板模拟图禁止使用图库照片。字体与组件一套 Roobert PRO 走天下 整套系统从 80px 的 hero 大标题到 11px 的微标签只使用 Roobert PRO 一种字体族字重也只用 400 / 500 / 600 三档场景字号字重行高hero 大标题80px5001.05紧排区块标题60px / 48px5001.10 / 1.15正文16px4001.50数字统计100M users64px5001.10几个易被忽略的细节hero 行高不得低于 1.05、大字号使用负字距-2px 到 -1.5px、所有按钮 / 胶囊 Tab / 徽章一律9999px全圆角——胶囊是品牌签名不许磨圆成矩形。Dos Donts给 AI 代理的设计护栏 ✨每个 DESIGN.md 都带红线清单这正是 AI 生成 UI 保持品牌一致性的关键。Miro 案例的完整清单design-md/miro/DESIGN.md浓缩为四条别扩散色板——除亮黄 品牌马卡龙外不引入新强调色别软化按钮圆角——全圆角胶囊不可妥协别给扁平卡片加重阴影——深度感只留给白板模拟图别用 stock 图——产品画面一律用真实白板 UI 的色块与便利贴层次。响应式方面hero 字号按断点从 80px → 60px → 48px → 36px 逐级收缩胶囊按钮触控高度保持在 40–44px 的 WCAG 无障碍下限之上。总结为什么这个案例值得收藏Miro 案例展示了 awesome-design-md 最有价值的部分不只罗列色值而是把**什么能用、什么不能碰**写成了 AI 可直接执行的规则。把 design-md/miro/DESIGN.md 拷进项目你的代理就会自动遵守黑按钮、黄签名、马卡龙卡片、全圆角的完整品牌纪律——这就是无限画布美学的可复制精髓。项目源码见 LICENSEMIT 协议更多品牌案例可在仓库design-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），仅供参考 awesome-design-md案例：Miro无限画布美学与亮黄强调色全解
awesome-design-md案例Miro无限画布美学与亮黄强调色全解【免费下载链接】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 设计系统文档集合把任意一份 DESIGN.md 丢进项目根目录AI 编码代理就能直接生成风格统一的界面。本文以 design-md/miro/DESIGN.md 为案例带你快速读懂 Miro 标志性的无限画布美学——纯白画布、黑色胶囊按钮、以及那张著名的亮黄强调色到底该用在哪里。什么是 awesome-design-md1 分钟上手DESIGN.md 是 Google Stitch 提出的一种新玩法一个纯文本的 Markdown 设计系统文件专门给 AI 代理阅读用来定义项目应该长什么样。它不需要 Figma 导出、不需要 JSON 配置Markdown 正是大模型读得最好的格式。这个项目提供了 70 份从真实网站提取的 DESIGN.md完整清单见 README.md涵盖 Miro、Figma、Linear、Stripe 等品牌。使用方式极简把目标站点的DESIGN.md复制到你的项目根目录本仓库可直接git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md获取告诉你的 AI 代理用项目里的 DESIGN.md 帮我生成一个页面。Miro 的完整设计系统就在 design-md/miro/DESIGN.md贡献规范参考 CONTRIBUTING.md。Miro 设计系统速览一页纸看懂核心 TokenMiro 的品牌声音是自信又带点小俏皮白色画布上是小小的金丝雀黄canary yellowwordmark黑色胶囊主按钮主导营销页彩色马卡龙卡片则呼应着真实白板上的便利贴配色。Token色值角色brand-yellow#ffd02f品牌亮黄wordmark、顶部促销横幅、黄色标签brand-yellow-deep#fcb900更深的黄用于强调与按压态yellow-light#fff4c4浅黄背景色用于标签芯片yellow-dark#746019深橄榄色黄色标签上的文字primary#1c1c1e近黑色主 CTA 按钮与页脚背景brand-blue#4262ff行动蓝行内链接、推荐定价卡描边canvas#ffffff页面画布白无限画布的底色亮黄强调色全解金丝雀黄的 3 种正确用法 这是整份设计系统里最值得记住的纪律——黄色是签名色但绝不是按钮色品牌 wordmark左上角黄色方形 Miro 标志是整个开屏页面的识别符号顶部促销横幅导航栏上方的黑色 sticky 促销条promo-banner里内嵌一枚黄色GET YOUR SPOT胶囊黄色标签芯片badge-tag-yellow浅黄底#fff8e0 深橄榄文字与badge-promo亮黄底用于功能页的标签装饰。对应的设计守则非常明确✅ Do把brand-yellow限定在 wordmark、促销横幅、黄色标签三类位置。 ❌ Dont不要用亮黄做标准 CTA也不要用在大面积背景上。主 CTA 永远交给黑色胶囊button-primary#1c1c1e底 白字 rounded.full全圆角 12px 24px内边距。黄色按钮button-yellow只出现在需要品牌强调时刻的场景。无限画布美学留白、层级与阴影Miro 官网本身就是一张白板——留白哲学贯穿始终4px 基础栅格间距从4px一路到120pxhero 区营销页区块间距96px定价页收紧到64px5 级阴影系统默认卡片完全扁平无阴影 1px 细线描边阴影只战略性地留给 hero 区的白板模拟图——rgba(5, 0, 56, 0.08) 0px 12px 32px -4px让画布里的便利贴仿佛真的浮在纸面上马卡龙功能卡片card-feature-yellow / coral / teal / rose四色卡片正是真实白板便利贴配色的呼应圆角统一28px与白色卡片同屏混排真实产品截图代替摄影图whiteboard-mockup组件规定——展示产品时用真实的 Miro 白板模拟图禁止使用图库照片。字体与组件一套 Roobert PRO 走天下 整套系统从 80px 的 hero 大标题到 11px 的微标签只使用 Roobert PRO 一种字体族字重也只用 400 / 500 / 600 三档场景字号字重行高hero 大标题80px5001.05紧排区块标题60px / 48px5001.10 / 1.15正文16px4001.50数字统计100M users64px5001.10几个易被忽略的细节hero 行高不得低于 1.05、大字号使用负字距-2px 到 -1.5px、所有按钮 / 胶囊 Tab / 徽章一律9999px全圆角——胶囊是品牌签名不许磨圆成矩形。Dos Donts给 AI 代理的设计护栏 ✨每个 DESIGN.md 都带红线清单这正是 AI 生成 UI 保持品牌一致性的关键。Miro 案例的完整清单design-md/miro/DESIGN.md浓缩为四条别扩散色板——除亮黄 品牌马卡龙外不引入新强调色别软化按钮圆角——全圆角胶囊不可妥协别给扁平卡片加重阴影——深度感只留给白板模拟图别用 stock 图——产品画面一律用真实白板 UI 的色块与便利贴层次。响应式方面hero 字号按断点从 80px → 60px → 48px → 36px 逐级收缩胶囊按钮触控高度保持在 40–44px 的 WCAG 无障碍下限之上。总结为什么这个案例值得收藏Miro 案例展示了 awesome-design-md 最有价值的部分不只罗列色值而是把**什么能用、什么不能碰**写成了 AI 可直接执行的规则。把 design-md/miro/DESIGN.md 拷进项目你的代理就会自动遵守黑按钮、黄签名、马卡龙卡片、全圆角的完整品牌纪律——这就是无限画布美学的可复制精髓。项目源码见 LICENSEMIT 协议更多品牌案例可在仓库design-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），仅供参考