AI 应用人工智能AI 技能设计系统媒体生成【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址https://gitcode.com/gh_mirrors/opend/open-design点击查看免费下载本文围绕 OpenDesign 仓库中 design-systems/uber/DESIGN-fr.md法语版对应英文原版 design-systems/uber/DESIGN.md展开。该文档完整定义了 Uber 风格设计系统的视觉语言——纯黑纯白、胶囊形交互元素、UberMove 字体层级与低透明度阴影体系并配套 tokens.css、components.html、tailwind-v4.css 等可直接落地的工程资产。读完本文你将掌握这套设计系统从色彩令牌、排版规则到组件样式、响应式策略的完整规格并能在 Claude Code、Codex、Cursor 等 Agent 环境中用文中给出的提示词模板让编码代理直接产出高保真的 Uber 风格原型、落地页或仪表盘。1. 视觉主题与氛围自信的极简主义Uber 的设计语言是有底气留白的极简主义教科书——整个体验建立在墨黑#000000与纯白#ffffff的锋利二元对立之上UI 框架中几乎没有中间灰阶来稀释信息。这不是一家尚未完成设计的初创公司那种苍白极简而是一个足够成熟、敢于轻声说话的品牌所展现的克制。这种克制在排版上体现为签名式字体UberMove一款具有明显方形、工程感气质的专有几何无衬线字体。52px 的 UberMove Bold 标题带有广告牌般的重量感配套的UberMoveText以中等字重500承担正文与按钮文字更柔和、更易读。两者共同构成一套像交通图一样的排版系统清晰、高效、为快速扫读而生。真正让 Uber 风格与众不同的是满幅摄影/插画 胶囊形border-radius 999px交互元素的组合。导航 chips、CTA 按钮、分类选择器共享这种胶囊形态形成一种触感友好、适合拇指操作的界面语言。温暖的、略带风格化的人物插画司机、乘客、城市景观为人本可能冷冰冰的单色系统注入了人情味。页面在白色内容区与全黑页脚之间交替卡片布局使用最轻柔的阴影rgba(0,0,0,0.12-0.16)在不破坏扁平美学的前提下制造轻微抬升。关键特征速览纯黑纯白基底UI 框架几乎无中间灰阶UberMove标题 UberMoveText正文/UI双字体系统万物皆胶囊按钮、chips、导航项一律 999px border-radius温暖人物插画与冷峻单色界面形成对比卡片布局使用耳语级阴影0.12–0.16 透明度8px 间距网格布局紧凑、信息密度高满幅摄影用作 hero 背景黑色页脚以高对比度暗色环境锚定页面2. 色彩系统二元对立中的完整角色分工Uber 色彩系统的核心是没有渐变。黑白二元与扁平色块构成了全部视觉层级——每一块表面都是纯色每一次过渡都是硬边或阴影。仓库中的 tokens.css 将这套角色分工固化为 56 个结构化令牌design-tokens.json统计totalTokens: 56评分score: 100/grade: excellent可直接在 CSS 中使用。2.1 主色令牌值角色--bg/--surface#ffffff页面底色与卡片表面卡片靠阴影而非颜色区分--fg/--fg-2#000000真正无妥协的黑色用于主按钮、标题、导航文本、页脚2.2 交互态与按钮令牌值角色--accent-hoverHover Gray#e2e2e2白色按钮 hover 态——干净偏冷的浅灰反馈清晰而无温度Hover Light#f3f3f3悬浮白色按钮的微妙 hover几乎不可察觉Chip Gray#efefef次级/筛选按钮与导航 chips 的底色2.3 文本与内容令牌值角色--mutedBody Gray#4b4b4b次级文本与页脚链接无冷暖偏置的真正中灰--metaMuted Gray#afafaf三级文本、弱化页脚链接、占位内容2.4 边框与层级令牌值角色--border#0000001px 结构边框仅用于分隔线与表单容器惜用--border-softrgba(0,0,0,0.1)chip/卡片分隔--elev-raisedrgba(0,0,0,0.12) 0px 4px 16px 0px卡片标准抬升耳语级阴影中档rgba(0,0,0,0.16)悬浮按钮与 overlay--accent-activeButton Pressrgba(0,0,0,0.08)inset次级按钮按下态的内阴影--focus-ringrgb(255,255,255) 0px 0px 0px 2px inset键盘焦点指示器2.5 链接态与语义色Default Link Blue#0000ee正文中带下划线的标准浏览器蓝Link White#ffffff深色表面页脚、暗色区上的链接Link Black#000000浅色表面上的下划线链接需要特别指出的是tokens.css 中的设计决策注释明确写道在纯黑白系统中黑色本身就是主 CTA 色--accent: #000000。与此同时令牌表还保留了--success: #16a34a、--warn: #eab308、--danger: #dc2626三个语义色用于状态反馈但这三个颜色不应出现在界面框架UI chrome中。3. 排版规则双字体、严格分工3.1 字体家族与替代方案--font-display: UberMove, UberMoveText, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif; --font-body: UberMoveText, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif;注意UberMove 与 UberMoveText 均为专有字体。外部实现中建议使用system-ui或 Inter 作为最接近的替代UberMove 的几何方形特质可用 Inter 或 DM Sans 近似。3.2 完整字号层级表角色字体字号字重行高说明Display/HeroUberMove52px (3.25rem)7001.23紧凑最大冲击力广告牌存在感区块标题UberMove36px (2.25rem)7001.22紧凑主要区块锚点卡片标题UberMove32px (2rem)7001.25紧凑卡片与功能标题副标题UberMove24px (1.5rem)7001.33次级区块标题小标题UberMove20px (1.25rem)7001.40紧凑标题、列表标题导航/大 UIUberMoveText18px (1.13rem)5001.33导航链接、显著 UI 文本正文/按钮UberMoveText16px (1rem)400–5001.25–1.50标准正文、按钮标签说明文字UberMoveText14px (0.88rem)400–5001.14–1.43元数据、描述、小链接MicroUberMoveText12px (0.75rem)4001.67舒展小字、法律文本components.html 的源码印证了这套规则h1, h2, h3统一使用var(--font-display)且font-weight: 700始终加粗——广告牌级力量h1采用--text-4xl--leading-tight1.23且无字距h2行高 1.22h3行高 1.33与规范表一一对应。3.3 四条铁律标题加粗、正文中重UberMove 标题只允许字重 700正文/UI 用 UberMoveText 400–500通过字重对比建立视觉层级。标题行高收紧所有标题行高 1.22–1.40紧凑有力适合扫读而非精读。功能型排版全系统没有任何装饰性文字处理——无字距、无大小写转换、无装饰性字号每个文本元素都服务于直接沟通。双字体、严格分工UberMove 只用于标题UberMoveText 只用于正文、按钮、链接与 UI边界从不逾越。tokens.css 中--tracking-display: normal正是这一功能性排版原则的工程落地。4. 组件样式规格4.1 按钮体系主按钮·黑CTA背景Uber Black#000000文字Pure White#ffffff内边距10px 12px圆角999px完整胶囊无描边焦点内嵌环rgb(255,255,255) 0px 0px 0px 2px大胆、高对比、不可错过的首要动作按钮次级按钮·白背景Pure White文字Uber Black内边距10px 12px圆角999pxHover背景变为 Hover Gray#e2e2e2Focus背景变灰并出现内嵌环用于深色表面或与主黑按钮组成双动作布局Chip/筛选背景Chip Gray#efefef文字Uber Black内边距14px 16px圆角999px激活态内阴影rgba(0,0,0,0.08)用于导航 chips、分类选择器、筛选开关悬浮动作按钮背景Pure White文字Uber Black内边距14px圆角999px阴影rgba(0,0,0,0.16) 0px 2px 8px 0px位移translateY(2px)Hover背景变为#f3f3f3用于地图控件、回到顶部、悬浮 CTAcomponents.html 中的.btn实现补充了工程细节按钮采用inline-flexgap: var(--space-2)transition: background-color var(--motion-fast) var(--ease-standard)150ms cubic-bezier(0.2, 0, 0, 1).btn-black:hover微调为#222.btn-white用 1px--border-soft描边界定边界。4.2 卡片与容器背景白页上的 Pure White卡片与背景不做色彩区分默认无边框——卡片靠阴影而非描边定义圆角普通内容卡 8px主推/促销卡 12px阴影rgba(0,0,0,0.12) 0px 4px 16px 0px标准抬升卡片信息密度高、内边距最小化图片主导的卡片使用满幅图 文字叠加或置于图下4.3 输入框与表单文字 Uber Black、背景 Pure White边框1px 纯黑——全系统唯一醒目出现可见边框的地方圆角8px内边距标准舒适间距焦点无自定义焦点态依赖浏览器标准焦点环在 components.html 中.field input:focus实际补充了box-shadow: 0 0 0 2px rgba(0,0,0,0.1)的轻量焦点增强占位符使用--meta灰。4.4 导航白色背景粘性顶栏Logo 为 24×24px 黑色 Uber 字标/图标链接UberMoveText 14–18px、字重 500、Uber Black胶囊形导航 chipsChip Gray 底用于分类导航Ride/Réserver、Drive/Conduire、Business/Entreprise、Uber Eats菜单开关50% 圆角的圆形按钮移动端使用汉堡菜单4.5 图片处理功能区块使用温暖的手绘插画场景而非照片插画风格略风格化的人物、插画内暖色调、当代氛围Hero 区块使用大胆照片或插画作为全宽背景应用下载 CTA 使用 QR 码卡片内的所有图片统一使用 8px 或 12px 圆角4.6 三个标志性组件分类胶囊导航一排横向胶囊按钮构成一级导航每颗胶囊为 Chip Gray 底 黑字 999px 圆角激活态反转成黑底白字。双动作 Hero左右分栏——左侧文字/CTA右侧地图/插画卡片上下并排两个出发/目的地输入框黑色胶囊 See prices/Voir les prix CTA 按钮。该结构在 components.html 中被完整实现.hero-grid双列网格 .chip-row胶囊导航 .field双输入 .btn-black全宽 CTA。Plan-Ahead 卡片推广 Uber Reserve 与行程规划类功能插画丰富、人物温暖底部为黑底白字 CTA 按钮。5. 布局原则5.1 间距系统基础单位8px完整刻度4px、6px、8px、10px、12px、14px、16px、18px、20px、24px、32px按钮内边距10px 12px紧凑或 14px 16px舒适卡片内边距约 24–32px区块垂直间距慷慨但高效主区块间约 64–96pxtokens.css 将间距固化为--space-1至--space-12并将区块节奏参数化为--section-y-desktop: 80px、--section-y-tablet: 48px、--section-y-phone: 32px——即文档64–96px区间的工程化取值。5.2 网格与容器容器最大宽度约1136px居中Hero左右分栏左文右图功能区块2 列卡片网格或单列全宽页脚黑底多列链接网格全宽区块延伸到视口边缘5.3 留白哲学高效而非空灵Uber 的留白是功能性的——足以分隔绝不显得空旷。这是交通系统的间距紧凑、清晰、目标驱动。内容密集型卡片卡片以最小内部间距密集打包信息靠阴影与圆角界定边界。区块呼吸空间主区块获得慷慨的垂直间距但区块内部元素紧密成组。5.4 圆角刻度级别取值用途锐角0px交互元素不使用方角标准8px内容卡片、输入框、列表框舒适12px主推卡片、大型容器、链接卡片完整胶囊999px所有按钮、chips、导航项、胶囊圆形50%头像、图标容器、圆形控件6. 深度与层级耳语级阴影层级处理用途扁平L0无阴影、纯色底页面背景、内联内容、文本区微妙L1rgba(0,0,0,0.12) 0px 4px 16px标准内容卡、功能块中等L2rgba(0,0,0,0.16) 0px 4px 16px抬升卡片、overlay 元素悬浮L3rgba(0,0,0,0.16) 0px 2px 8px translateY(2px)悬浮动作按钮、地图控件下压L4rgba(0,0,0,0.08) inset999px spread按钮激活/按下态焦点环rgb(255,255,255) 0px 0px 0px 2px inset键盘焦点指示阴影哲学Uber 将阴影纯粹视为结构工具绝不做装饰。阴影始终是极低透明度0.08–0.16的黑色只提供分离内容层所需的最小抬升模糊半径适中8–16px自然但绝不戏剧化没有彩色阴影、没有阴影堆叠、没有环境光晕。深度更多由黑白区块对比传达而非阴影抬升。在工程侧tailwind-v4.css 将这三档阴影映射为--shadow-flat、--shadow-ring、--shadow-raised、--shadow-focus-ring可直接在 Tailwind v4 主题中使用。7. 该做什么与不该做什么该做Do使用真黑#000000与纯白#ffffff作为主色板——强烈的对比本身就是 Uber所有按钮、chips、胶囊形导航元素使用 999px border-radius所有标题保持 UberMove Bold700达到广告牌级冲击力卡片抬升使用耳语级阴影0.12–0.16 透明度——几乎不可见保持紧凑、信息密度高的布局——Uber 优先效率而非空灵用温暖、以人为中心的插画柔化单色界面内容卡用 8px 圆角主推容器用 12px导航与显著 UI 文本使用字重 500 的 UberMoveText黑色主按钮配白色次按钮构建双动作布局不该做Dont不要在 UI 框架中引入颜色——Uber 界面严格黑、白、灰按钮不要使用小于 999px 的圆角——完整胶囊形态是核心身份元素不要使用高透明度的重阴影或 drop-shadow——深度是耳语级的任何地方都不要用衬线字体——Uber 排版专属几何无衬线不要创造过度留白的空旷布局——Uber 的密度是刻意的不要使用渐变或颜色叠加——每块表面都是扁平纯色不要将 UberMove 混入正文也不要把 UberMoveText 混入标题——层级严格不要使用装饰性边框——边框要么功能化输入框、分隔线要么干脆没有不要用米白或近黑软化黑白对比——这种二元对立是刻意的8. 响应式行为8.1 断点表名称宽度关键变化小屏手机320px最小布局、单列、输入框堆叠、紧凑排版手机600px标准移动端、堆叠布局、汉堡导航小平板768px双列网格开始、卡片布局扩展平板1119px完整平板布局、hero 内容并排小桌面1120px桌面网格激活、横向导航胶囊桌面1136px完整桌面布局、容器最大宽度、分栏 hero8.2 触控目标所有胶囊按钮最小高度 44px10–14px 垂直内边距 行高导航 chips 使用 14px 16px 的慷慨内边距拇指点按舒适圆形控件菜单、关闭50% 圆角保证大而易点的目标移动端卡片表面作为整区触控目标8.3 折叠策略导航横向胶囊导航折叠为汉堡菜单 圆形开关Hero分栏布局文本 地图/视觉堆叠为单列——上文本下视觉输入框并排的出发/目的地输入垂直堆叠功能卡2 列网格折叠为全宽堆叠卡片标题52px 显示字号依次缩放至 36px、32px、24px、20px页脚多列链接网格折叠为手风琴或单列堆叠分类胶囊小屏下横向滚动 溢出components.html 的实际实现采用 1023px 与 639px 两个媒体查询平板以下容器 gutter 从 24px 降至 16px、区块垂直间距从 80px 降至 48px/32px.hero-grid在 1023px 以下切换为单列.features-grid依次从 3 列 → 2 列 → 1 列。8.4 图片行为插画在容器内等比缩放Hero 图片保持宽高比小屏可能裁剪QR 码区块在移动端隐藏应用下载切换为直接商店链接卡片图片在所有尺寸下保持 8–12px 圆角9. Agent 提示词指南让编码代理生成 Uber 风格界面这一节是该设计系统在 OpenDesign 工作流中的落地接口——DESIGN-fr.md 明确面向 AgentClaude Code、Codex、Cursor 等提供可复制的提示词模板。9.1 快速颜色速查表元素提示词中应写主按钮Uber Black (#000000)页面背景Pure White (#ffffff)按钮文字黑底Pure White (#ffffff)按钮文字白底Uber Black (#000000)次级文本Body Gray (#4b4b4b)三级文本Muted Gray (#afafaf)Chip 背景Chip Gray (#efefef)Hover 态Hover Gray (#e2e2e2)卡片阴影rgba(0,0,0,0.12) 0px 4px 16px页脚背景Uber Black (#000000)9.2 组件提示词示例可直接复制Hero 区块在 Pure White (#ffffff) 上创建 hero 区块标题为 52px UberMove Bold (700)、行高 1.23、Uber Black (#000000) 文字。副标题用 Body Gray (#4b4b4b)、16px UberMoveText、字重 400、行高 1.50。放置一个 Uber Black (#000000) 胶囊 CTA 按钮白字、999px 圆角、内边距 10px 12px。分类导航栏设计一个带横向胶囊按钮的分类导航栏。每颗胶囊Chip Gray (#efefef) 背景、Uber Black (#000000) 文字、14px 16px 内边距、999px border-radius。激活胶囊反转成 Uber Black 背景 Pure White 文字。使用 14px 字重 500 的 UberMoveText。功能卡片在 Pure White (#ffffff) 上构建 8px 圆角、阴影 rgba(0,0,0,0.12) 0px 4px 16px 的功能卡。标题用 24px 字重 700 的 UberMove描述用 Body Gray (#4b4b4b) 16px UberMoveText。底部添加黑色胶囊 CTA 按钮。深色页脚在 Uber Black (#000000) 上创建深色页脚标题文字 Pure White (#ffffff)、UberMove 20px 字重 700。页脚链接用 Muted Gray (#afafaf)、14px UberMoveTexthover 变 Pure White。多列网格布局。悬浮动作按钮设计一个悬浮动作按钮Pure White (#ffffff) 背景、999px 圆角、14px 内边距、阴影 rgba(0,0,0,0.16) 0px 2px 8px。Hover 背景变为 #f3f3f3。用于回到顶部或地图控件。9.3 迭代指南一次只聚焦一个组件引用严格的黑白调色板——写 使用 Uber Black (#000000) 而非 弄暗一点始终为按钮与胶囊指定 999px 圆角——这是 Uber 身份不可妥协的元素显式描述字体家族——标题用 UberMove Bold标签用 UberMoveText Medium阴影使用耳语阴影rgba(0,0,0,0.12) 0px 4px 16px——绝不用厚重的 drop-shadow保持布局紧凑、信息密集——Uber 高效而非空灵插画要温暖而人性化——描述暖色调中的风格化人物而非抽象形状黑色 CTA 配白色次级按钮构成平衡的双动作布局附Uber 设计系统包在仓库中的工程资产该设计系统在 OpenDesign 中并非孤立文档而是一个完整的、可审计的包结构详见 manifest.jsonschemaVersion: od-design-system-project/v1DESIGN.md英文规范主文档本文所讲法语版 DESIGN-fr.md 的对应原文另有 DESIGN-zh.md 等 20 种语言版本tokens.css56 个 CSS 自定义属性令牌含完整注释说明每个设计决策的来源品牌身份三段论、schema 决策design-tokens.json结构化令牌清单56 个令牌全部有source溯源到 tokens.css 行号分层统计A1-identity 8 个、A1-structure 18 个、A2 26 个、B-slot 4 个tailwind-v4.cssTailwind v4theme映射层将 tokens.css 桥接到--color-*、--spacing-*、--radius-*、--shadow-*等 Tailwind 命名空间components.html39 个选择器、19 个类、21 个元素的参考实现 fixture覆盖 hero、features、dark footer 三大区块components.manifest.json组件清单buttons、inputs、cards、badges、links、icons、typography、layout 8 个分组记录每个组件引用的令牌USAGE.md包使用指南——先读它理解契约再读 DESIGN.md将 tokens.css 粘贴进首个 artifact 的style块后再写组件 CSSpreview/colors.html、typography.html、spacing.html 三个可视化预览页用于视觉抽查source/evidence.md、tokens.source.json、token-contract.report.json 审计证据使用顺序建议遵循 USAGE.md 的 Read Order先读本文/ DESIGN-fr.md 建立视觉意图与约束 → 把 tokens.css 完整复制进生成物首个style块 → 用 components.manifest.json 快速检索组件需要精确选择器或状态时打开 components.html → 需要视觉校验时查看 preview/ 页面。其中一条重要约束是不要脱离 tokens.css 单独重定义 Tailwind 或 design-token 值也不要新增 components.html 与 DESIGN.md 中不存在的组件配方从而保证跨品牌切换时令牌命名保持稳定。赞分享AI 应用人工智能AI 技能设计系统媒体生成【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址https://gitcode.com/gh_mirrors/opend/open-design点击查看免费下载相关推荐OpenDesign 中的 NVIDIA 设计系统从品牌信号色到 Agent 可执行的组件规范OpenDesign 中的 NVIDIA 设计系统从品牌信号色到 Agent 可执行的组件规范 本文以仓库文档 design systems/nvidia/DAI 应用人工智能AI 技能设计系统媒体生成OpenDesign Contemporary 设计系统实战解析从设计令牌到 Agent 可执行的设计规范OpenDesign Contemporary 设计系统实战解析从设计令牌到 Agent 可执行的设计规范 Contemporary 是 OpenDesignAI 应用人工智能AI 技能设计系统媒体生成Open Design 中的 Uber 风格设计系统黑白二元、全药丸组件与可执行的 Agent 设计规范Open Design 中的 Uber 风格设计系统黑白二元、全药丸组件与可执行的 Agent 设计规范 本文以 design systems/uber/DEAI 应用人工智能AI 技能设计系统媒体生成创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考