awesome-design-md案例完整拆解Uber城市能量黑白设计与紧凑排版【免费下载链接】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 设计系统文档合集收录了 73 个流行网站的品牌设计语言分析。本文以其中的 Uber 案例为例拆解其城市能量黑白设计与紧凑排版的核心技巧——无需设计师团队也能让 AI 代理生成风格一致的 UI。1️⃣ 为什么是黑白Uber 的设计哲学很多人以为做高级网站要堆叠彩色渐变Uber 恰恰相反。在项目 README.md 中官方对这套设计的一句话概括是Bold black and white, tight type, urban energy大胆黑白、紧凑排版、城市能量。整套页面只有黑白二重奏没有第三种颜色、没有强调色没有与主标题争夺注意力的装饰唯一的装饰是 4:3 比例的城市人物编辑插画DESIGN.md 是什么由 Google Stitch 提出的一种纯文本设计系统文档格式。把它放进项目根目录AI 编码代理或设计工具就能直接读懂你的 UI 应该长什么样——不需要 Figma 导出、不需要 JSON Schema、不需要额外工具。2️⃣ Uber 黑白设计拆解克制的四层密码黑色是唯一的转化色design-md/uber/DESIGN.md 的配色区Colors 章节定义了极简色板颜色角色色值用途Ink Black主色#000000唯一的黑色 CTA 胶囊、页脚底色、深色促销带Canvas 白#ffffff默认页面背景柔灰canvas-soft#efefef分类芯片、表单输入行、次级按钮正文灰body#5e5e5e次要文本、说明文案项目给出的红线非常直接整套 UI 只有黑白 灰阶一旦引入第二品牌强调色橙、蓝、绿系统就会被压扁。胶囊Pill形状唯一的签名形状Uber 设计系统最标志性的元素是胶囊Shapes 章节 定义了清晰规则所有交互元素主 CTA、次 CTA、分类芯片、下载徽章统一使用999px圆角卡片与容器统一使用16px圆角Hero 表单的 Ride / Drive 选项卡是唯一出格的36px微胶囊刻意比标准胶囊更紧文档原话胶囊 IS 品牌的几何签名——即使没有插画只要保留胶囊几何 黑白二重奏品牌依然可识别。黑白交替的节奏带页面结构遵循固定节奏白色功能卡片 → 黑色促销卡片 → 白色功能卡片 → 黑色页脚黑色带不止出现在 Hero而是频繁作为页中促销区块出现。这种极性翻转本身就是深度暗示纯黑带打破白上白的单调全程不靠阴影、不靠渐变。3️⃣ Uber 紧凑排版拆解两种字体一个刻度字体分工UberMove 双字族Typography 章节 只定义了两个字族且永不交叉角色字族字重角色UberMove几何展示无衬线仅 700所有标题20–52pxUberMoveText文本无衬线400 / 500正文、按钮、链接12–18px这个搭配读起来像工程级——无斜体、无装饰字重、从不调整字距。标题一律句首大写sentence-case全大写仅保留给极少数的眉标签eyebrow tag。从 52px 到 12px 的紧凑刻度Token字号 / 字重用途display-xxl52px / 700Hero 主标题Go anywhere with Uberdisplay-xl36px / 700页面分区标题display-md24px / 700卡片标题body-md16px / 400默认正文body-sm14px / 400说明、次级元数据caption12px / 400细小说明、页脚次级行大字号行高被压缩到1.22–1.25形成浇铸在页面上的密集感——这就是紧凑排版的视觉冲击力来源。4px 基础间距紧凑但有秩序Layout 章节 定义了间距系统基础单位 4px间距 Token 从 4px 到 32px内容卡片内边距 24px乘车请求表单卡片仅16px刻意保持紧凑卡片内部堆叠标题/正文/CTA间距仅8px而卡片与卡片之间留出32px卡内紧凑、卡间宽松——这正是 Uber 紧凑排版的精髓信息密度高节奏依然清晰。4️⃣ 快速上手3 步用 AI 生成 Uber 风格 UI第 1 步获取设计文档git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md第 2 步复制到项目根目录把 Uber 案例文件 design-md/uber/DESIGN.md 复制到你的项目根目录即可。第 3 步让 AI 代理读取并生成 UI只需告诉 AI 编码代理阅读根目录的 DESIGN.md构建一个符合该设计语言的页面。无需手动交代色值和字号——文档已把设计语言精确到十六进制与像素级如 999px 胶囊圆角、52px/700 Hero 标题、4px 间距基准。若发现文档有误想参与维护可查看 CONTRIBUTING.md 中的贡献流程。5️⃣ Uber 设计红线4 个最容易踩的坑项目提供了明确的设计护栏Dos and Donts 章节最重要的 4 条别引入第二强调色——黑白 灰阶就是全部系统别用全大写主标题——句首大写才是品牌的声音别给每张卡片加柔和阴影——扁平是默认态阴影只留给浮动胶囊与表单卡片别调整展示字体的字距——品牌从不 letter-spacing默认字距本身就是声音6️⃣ 写在最后Uber 黑白设计的力量来自极致克制唯一的转化色是黑唯一的签名形状是胶囊唯一的装饰是城市插画。而 awesome-design-md 项目把这套城市能量设计语言浓缩成一份 AI 可直接阅读的 DESIGN.md——放进项目根目录紧凑、有秩序的黑白 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辅助生成（AIGC），仅供参考
