awesome-design-md案例实战Nike单色UI与巨型大写Futura字体如何落地【免费下载链接】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 编码代理就能生成与该品牌视觉语言高度一致的 UI。本篇以 design-md/nike/DESIGN.md 为案例实战拆解 Nike 标志性的单色 UI 与巨型大写 Futura 字体是如何被翻译成机器可执行的设计规则的。为什么是 Nike一个极端的设计系统Nike 的商业化界面建立在一个近乎暴烈的简洁理念上照片说话界面保持沉默photography speaks, the chrome doesnt。来自 design-md/nike/DESIGN.md 的 Overview 原文页面像一本印刷目录一样堆叠而不是像典型 SaaS 落地页那样动来动去——顶部是烧进全幅摄影图的巨型 Futura 标题其余一切导航、筛选、按钮、卡片、页脚都被压缩成中性的排版和胶囊几何形状。这套系统的三大 relentless 手段纯黑白 单一柔灰#111111墨黑、#ffffff纯白、#f5f5f5柔云灰承载约 95% 的界面面积⚫胶囊几何无处不在每个 CTA、搜索框、筛选标签都用 30px 圆角的胶囊形状系统里不存在直角按钮8px 间距基线区块间固定 48px 节奏产品卡片零内边距、零阴影——照片本身就是卡片案例实战四步把 Nike 设计语言接入你的项目第 1 步获取仓库并复制 DESIGN.md克隆仓库后将 Nike 的设计文件复制到项目根目录git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md cp awesome-design-md/design-md/nike/DESIGN.md 你的项目根目录/为什么放在根目录因为 AI 代理扫描项目时会优先发现它。按主文档 README.md 的分工AGENTS.md告诉代理怎么构建项目DESIGN.md告诉代理项目应该长什么样。第 2 步告诉 AI 代理使用它只需一句话参考项目根目录的 DESIGN.md给我做一个看起来像 Nike 的产品页。代理会读取其中的颜色 token、字体层级、组件规格和布局规则。第 3 步用 Dos and Donts 校验产出design-md/nike/DESIGN.md 内置了设计护栏清单是验收 AI 产出时最实用的检查表✅ Do❌ Dont96px Futura 只用于活动 Hero 大字不要给区块标题用 96px 巨型字体每个视口只放一个黑色主 CTA不要用两个实心黑色按钮挤在同一屏产品照片一律放在#f5f5f5灰底上不要引入投影或卡片悬浮效果所有 CTA 保持 30px 胶囊圆角不要出现第三种按钮形状红色#d30005只用于折扣价格不要把促销色用在背景或徽标底色上第 4 步对照 Iteration Guide 迭代design-md/nike/DESIGN.md 给出了逐条迭代建议一次只打磨一个组件、直接引用 token 名称如{colors.ink}而非复述颜色描述、新增状态时单独建条目。文档还提到可运行npx google/design.md lint DESIGN.md自动检测断链引用与对比度问题。Nike 单色 UI 的 Token 速查表颜色三色撑全场语义色极度克制角色Token色值用途品牌黑colors.ink#111111主 CTA、筛选选中态、正文标题画布白colors.canvas#ffffff全部页面背景柔云灰colors.soft-cloud#f5f5f5产品照片底、搜索框、次级按钮促销红colors.sale#d30005折后价 删除线原价唯一红成功绿colors.success#007d48确认消息、有货指示完整的 20 色板定义在 design-md/nike/DESIGN.md 的前置 YAML 里包括粉、紫、青等品类点缀色——它们只允许出现在色卡圆点和编辑类磁贴上绝不许进入主界面配色。字体一块广告牌压在目录之上Token字号 / 行高用途display-campaign96px / 0.9 / 全大写活动摄影图上烧入的巨型标题heading-xl32px / 1.2区块标题如 FEATURED FOOTWEARbody-strong16px / 500产品名、导航链接button-md16px / 500所有标准胶囊按钮utility-xs9px仅页脚法律细则注意这个层级里几乎没有中间地带——从 32px 直接跳到 16px刻意制造上面是广告牌、下面是目录的视觉断层。布局48px 节奏 照片即分隔线最大内容宽度约 1440px超宽屏时两边留白扩展到 80px产品网格桌面 3 列 → 平板 2 列 → 手机 1 列卡片间隙 8px区块之间不加装饰性分隔线照片的出血边缘本身就是分隔线唯一允许的深度是吸顶栏底部 1px 内嵌发丝线整个零售界面没有任何投影完整布局与响应式断点见 design-md/nike/DESIGN.md 与 L528-L557。巨型大写 Futura 字体如何落地Nike Futura ND 是专有字体个人项目拿不到。文档给出了非常务实的替代方案见 L325-L325 与 L348-L349层级原版开源替代巨型活动标题Nike Futura ND96px / 0.9 / 500 / 全大写Bebas Neue或Anton同样 96px / 行高 0.9 / 全大写字距收紧约 -0.5%UI 正文与按钮Helvetica Now Text / MediumInter400/500 字重按钮和说明文字尺寸下几乎无差别落地时的三个关键动作把 96px 大字烧进 Hero 摄影图的左下或左上三分之一位置标题颜色选与背景图对比强的黑或白移动端按 96px → 64px → 48px 递减但行高始终保持 0.9图片做艺术化裁切桌面 16:9 宽幅移动端切 4:5 竖版保证人物居中且标题有烧入空间配合一个锚定在图片左下角的白色描边胶囊按钮button-outline-on-image就是 Nike 标志性的点击购买这张图位。这个案例教会我们什么Nike 这份 DESIGN.md 展示了机器可读的设计系统该有的样子精确到 hex 和 px不是高级感黑而是#111111不是小圆角而是 30px规则即护栏Dos and Donts 直接约束 AI 的输出边界防止它自由发挥出投影和彩色按钮Token 命名自解释soft-cloud、hairline、ink——读名字就知道用在哪⚙️状态独立成条目按钮按下态是单独的button-primary-active缩放 0.5 半透明Nike 招牌的tap collapse反馈不混在文字描述里在仓库里继续找灵感Nike 只是 design-md/ 目录下 73 个品牌案例之一。同属电商零售的还有 design-md/airbnb/DESIGN.md暖珊瑚色、照片驱动、design-md/shopify/DESIGN.md暗色电影感 霓虹绿和 design-md/starbucks/DESIGN.md四级大地绿体系。每个目录下的README.md如 design-md/nike/README.md提供对应案例的入口说明。想贡献修正或补充先读 CONTRIBUTING.md按流程提 issue 再发 PR。选一份DESIGN.md丢进项目然后告诉你的 AI 代理做出一样的感觉——这就是 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案例实战：Nike单色UI与巨型大写Futura字体如何落地
awesome-design-md案例实战Nike单色UI与巨型大写Futura字体如何落地【免费下载链接】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 编码代理就能生成与该品牌视觉语言高度一致的 UI。本篇以 design-md/nike/DESIGN.md 为案例实战拆解 Nike 标志性的单色 UI 与巨型大写 Futura 字体是如何被翻译成机器可执行的设计规则的。为什么是 Nike一个极端的设计系统Nike 的商业化界面建立在一个近乎暴烈的简洁理念上照片说话界面保持沉默photography speaks, the chrome doesnt。来自 design-md/nike/DESIGN.md 的 Overview 原文页面像一本印刷目录一样堆叠而不是像典型 SaaS 落地页那样动来动去——顶部是烧进全幅摄影图的巨型 Futura 标题其余一切导航、筛选、按钮、卡片、页脚都被压缩成中性的排版和胶囊几何形状。这套系统的三大 relentless 手段纯黑白 单一柔灰#111111墨黑、#ffffff纯白、#f5f5f5柔云灰承载约 95% 的界面面积⚫胶囊几何无处不在每个 CTA、搜索框、筛选标签都用 30px 圆角的胶囊形状系统里不存在直角按钮8px 间距基线区块间固定 48px 节奏产品卡片零内边距、零阴影——照片本身就是卡片案例实战四步把 Nike 设计语言接入你的项目第 1 步获取仓库并复制 DESIGN.md克隆仓库后将 Nike 的设计文件复制到项目根目录git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md cp awesome-design-md/design-md/nike/DESIGN.md 你的项目根目录/为什么放在根目录因为 AI 代理扫描项目时会优先发现它。按主文档 README.md 的分工AGENTS.md告诉代理怎么构建项目DESIGN.md告诉代理项目应该长什么样。第 2 步告诉 AI 代理使用它只需一句话参考项目根目录的 DESIGN.md给我做一个看起来像 Nike 的产品页。代理会读取其中的颜色 token、字体层级、组件规格和布局规则。第 3 步用 Dos and Donts 校验产出design-md/nike/DESIGN.md 内置了设计护栏清单是验收 AI 产出时最实用的检查表✅ Do❌ Dont96px Futura 只用于活动 Hero 大字不要给区块标题用 96px 巨型字体每个视口只放一个黑色主 CTA不要用两个实心黑色按钮挤在同一屏产品照片一律放在#f5f5f5灰底上不要引入投影或卡片悬浮效果所有 CTA 保持 30px 胶囊圆角不要出现第三种按钮形状红色#d30005只用于折扣价格不要把促销色用在背景或徽标底色上第 4 步对照 Iteration Guide 迭代design-md/nike/DESIGN.md 给出了逐条迭代建议一次只打磨一个组件、直接引用 token 名称如{colors.ink}而非复述颜色描述、新增状态时单独建条目。文档还提到可运行npx google/design.md lint DESIGN.md自动检测断链引用与对比度问题。Nike 单色 UI 的 Token 速查表颜色三色撑全场语义色极度克制角色Token色值用途品牌黑colors.ink#111111主 CTA、筛选选中态、正文标题画布白colors.canvas#ffffff全部页面背景柔云灰colors.soft-cloud#f5f5f5产品照片底、搜索框、次级按钮促销红colors.sale#d30005折后价 删除线原价唯一红成功绿colors.success#007d48确认消息、有货指示完整的 20 色板定义在 design-md/nike/DESIGN.md 的前置 YAML 里包括粉、紫、青等品类点缀色——它们只允许出现在色卡圆点和编辑类磁贴上绝不许进入主界面配色。字体一块广告牌压在目录之上Token字号 / 行高用途display-campaign96px / 0.9 / 全大写活动摄影图上烧入的巨型标题heading-xl32px / 1.2区块标题如 FEATURED FOOTWEARbody-strong16px / 500产品名、导航链接button-md16px / 500所有标准胶囊按钮utility-xs9px仅页脚法律细则注意这个层级里几乎没有中间地带——从 32px 直接跳到 16px刻意制造上面是广告牌、下面是目录的视觉断层。布局48px 节奏 照片即分隔线最大内容宽度约 1440px超宽屏时两边留白扩展到 80px产品网格桌面 3 列 → 平板 2 列 → 手机 1 列卡片间隙 8px区块之间不加装饰性分隔线照片的出血边缘本身就是分隔线唯一允许的深度是吸顶栏底部 1px 内嵌发丝线整个零售界面没有任何投影完整布局与响应式断点见 design-md/nike/DESIGN.md 与 L528-L557。巨型大写 Futura 字体如何落地Nike Futura ND 是专有字体个人项目拿不到。文档给出了非常务实的替代方案见 L325-L325 与 L348-L349层级原版开源替代巨型活动标题Nike Futura ND96px / 0.9 / 500 / 全大写Bebas Neue或Anton同样 96px / 行高 0.9 / 全大写字距收紧约 -0.5%UI 正文与按钮Helvetica Now Text / MediumInter400/500 字重按钮和说明文字尺寸下几乎无差别落地时的三个关键动作把 96px 大字烧进 Hero 摄影图的左下或左上三分之一位置标题颜色选与背景图对比强的黑或白移动端按 96px → 64px → 48px 递减但行高始终保持 0.9图片做艺术化裁切桌面 16:9 宽幅移动端切 4:5 竖版保证人物居中且标题有烧入空间配合一个锚定在图片左下角的白色描边胶囊按钮button-outline-on-image就是 Nike 标志性的点击购买这张图位。这个案例教会我们什么Nike 这份 DESIGN.md 展示了机器可读的设计系统该有的样子精确到 hex 和 px不是高级感黑而是#111111不是小圆角而是 30px规则即护栏Dos and Donts 直接约束 AI 的输出边界防止它自由发挥出投影和彩色按钮Token 命名自解释soft-cloud、hairline、ink——读名字就知道用在哪⚙️状态独立成条目按钮按下态是单独的button-primary-active缩放 0.5 半透明Nike 招牌的tap collapse反馈不混在文字描述里在仓库里继续找灵感Nike 只是 design-md/ 目录下 73 个品牌案例之一。同属电商零售的还有 design-md/airbnb/DESIGN.md暖珊瑚色、照片驱动、design-md/shopify/DESIGN.md暗色电影感 霓虹绿和 design-md/starbucks/DESIGN.md四级大地绿体系。每个目录下的README.md如 design-md/nike/README.md提供对应案例的入口说明。想贡献修正或补充先读 CONTRIBUTING.md按流程提 issue 再发 PR。选一份DESIGN.md丢进项目然后告诉你的 AI 代理做出一样的感觉——这就是 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），仅供参考