OpenDesign 设计系统实战BMW M 汽车运动子品牌的黑场视觉规范与组件实现指南【免费下载链接】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/bmw-m/DESIGN.md 为核心系统拆解 BMW M 这一「汽车运动性能子品牌」的设计系统包从近纯黑画布、M 三色条纹、BMW Type Next 拉丁字体的排版纪律到零圆角工业按钮、全出血汽车摄影、96px 节拍间距等组件与布局规则。读完本文你将掌握如何用{token.refs}引用体系落地一套完整的暗色汽车运动风格界面并了解仓库内 tokens.css、components.html、design-tokens.json 与 components.manifest.json 等实现文件如何与设计规范一一对应、互相校验。1. 包结构与阅读路径在设计系统 2.0 的包约定见 manifest.json中bmw-m是一个od-design-system-project/v1规范下的 bundled 包属于 Automotive汽车分类。包内文件及其职责如下文件职责DESIGN.md视觉意图、约束与反模式本文主体USAGE.md包的使用契约与阅读顺序tokens.css结构化 token 绑定首个 artifact 的style起点design-tokens.json56 个 token 的契约化 JSON 输出tailwind-v4.cssTailwind v4 适配层components.html组件参考夹具reference fixturecomponents.manifest.json组件清单与 token 引用统计source/evidence.md审计证据说明preview/colors / typography / spacing 三页视觉预览system/index.html、kit.html、kit.dark.html、tokens.default.json 等系统级产出USAGE.md 给出的推荐阅读顺序是先读 USAGE.md 理解包契约 → 再读 DESIGN.md 掌握视觉意图与反模式 → 把tokens.css粘贴进第一个 artifact 的style块 → 用components.manifest.json做组件清单速查需要精确选择器时打开components.html→ 需要视觉抽查时看preview/页面。值得注意source/evidence.md 明确声明该包源自 OpenDesign 精选的 bundled fixture并不主张对上游官网做过重新抓取因此设计文档中的量化结论应视为基于已分析页面集的观察证据。2. 视觉主题与氛围摄影即品牌电压BMW M 的分析对象是官方编辑与营销页面其核心氛围一句话概括近纯黑画布{colors.canvas}— #000承载白色 BMW Type Next Latin 大标题品牌能量全部来自全出血full-bleed汽车摄影UI 镀铬件保持极简。关键特征包括近纯黑画布 白字贯穿所有已分析的编辑与营销页面配置器、账户、结算、订单管理等流程未解析可能引入浅色表面展示级标题默认使用 UPPERCASE 的 BMW Type Next Latin Light更重的粗体大写仅保留给标签、按钮、卡片标题和观察到的 M 专属强调M 三色条纹{colors.m-blue-light}#0066b1 →{colors.m-blue-dark}#1c69d4 →{colors.m-red}#e22718只作为 4px 品牌条、M 字标点缀和赛车镀铬出现绝不做按钮或填充摄影铺满整个 band车辆永远是视觉主体UI 镀铬退让为叠加在摄影上的小号白色标签按钮扁平、0px 圆角、全大写加字距标签——「工业精密的矩形轮廓」本身就是品牌全系统圆角基本为零少数例外是圆形图标按钮如轮播箭头与已确认的小号 toggle 药丸间距慷慨且对齐网格{spacing.section}96px分隔主要 band{spacing.xxl}64px用于 hero 摄影 band 内部{spacing.xl}40px用于内容卡片内部。从源码结构看tokens.css 与 components.html 提供的是归一化后的浅色参考实现--bg: #f7f8fa、--surface: #ffffff而 DESIGN.md 描述的是目标黑场视觉规范二者是「意图规范」与「可复用夹具」的分工关系在落地暗色 BMW M 界面时应以 DESIGN.md 的颜色与排版语义为准同时复用 tokens.css 的 token 命名骨架。3. 色彩体系与角色分工品牌与强调色Token色值角色{colors.primary}#ffffff主类型与 CTA 颜色h1/h2/h3 展示字、暗底正文、主按钮文字按钮本体透明或画布色白字描边即按钮{colors.m-blue-light}#0066b1M 三色条纹第一段M 徽章点缀与赛车镀铬{colors.m-blue-dark}#1c69d4三色条纹中段BMW 传承蓝被复用为 M 条纹中带{colors.m-red}#e22718第三段标志性 M-Power 红用于条纹与赛车节奏标注{colors.electric-blue}#0653b6独立电动车强调色用于 M xDrive 电动车型页面比传承蓝更冷、更数码表面色Token色值角色{colors.canvas}#000000默认页面地板真黑{colors.surface-soft}#0d0d0d与黑几乎无差的表面用于规格表单元格与页脚相邻条{colors.surface-card}#1a1a1a卡片、次级按钮、图标按钮背景{colors.surface-elevated}#262626再亮一档用于暗色 band 内的嵌套卡片{colors.carbon-gray}#2b2b2b碳纤维质感表面用于技术规格卡发丝线与边框{colors.hairline}#3c3c3c暗底上的 1px 分隔色用于正文分区、表格行、卡片轮廓{colors.hairline-strong}#262626与surface-elevated同值边框更像「升一阶的表面」而非墨线。文字色{colors.on-dark}#ffffff暗画布上的全部标题与主文字{colors.body}#bbbbbb默认正文比纯白略冷正文段落与次级元数据{colors.body-strong}#e6e6e6强调正文 / 导语段{colors.muted}#7e7e7e页脚链接、面包屑、图注。语义色{colors.warning}#f4b400极少用于技术警告标注{colors.success}#0fa336订单确认态营销面少见。对照归一化实现tokens.css 的--accent: #0066b1与--meta: #0066b1正好对应 M Blue Light--danger: #e4002b接近 M Red 的强调应用--success: #16a34a承担语义成功色而 design-tokens.json 的 token 契约报告显示 56 个 token 全部具备tokens.css源码行级背书sourceBackedTokens: 56评分 100等级 excellent--accent-hover与--accent-active使用color-mix(in oklab, var(--accent), black 8%/14%)派生无需手工维护深浅变体。4. 字体规则克制对比而非硬性 700/300 二分字体家族与回退BMW Type Next Latin 是 BMW 的授权展示 正文字体。回退链建议对齐既有 BMW 设计系统展示优先BMWTypeNextLatin Light正文/UI 用BMWTypeNextLatin最后回退到Helvetica, Arial, Hiragino Kaku Gothic ProN, Hiragino Sans, Meiryo, sans-serif覆盖日文环境。归一化实现中 tokens.css 提供了--font-display与--font-bodyBMWTypeNext, Helvetica Neue, Arial, sans-serif及等宽--font-mono。字重基线展示Light300用于大号 h1/h2 编辑头条除非抓取的 M 页面明显用了更重的静态字重正文/UIregular400用于段落、描述性文案与常驻导航强调700 用于按钮、分类标签、卡片标题900 仅在明确观察到导航强调时使用。核心原则是对比与克制而不是硬性的 700/300 二分大号展示用 Light、阅读文字用 regular、更重的字重只给短 UI 标签或 M 专属强调避免「中粗字重糊成一片」。层级表完整 token 规格Token字号字重行高字距用途{typography.display-xl}80px300 Light1.00Hero h1THE ULTIMATE、MORE BMW M.{typography.display-lg}56px300 Light1.050章节头MORE FROM BMW M MAGAZINE.{typography.display-md}40px300/4001.10子章节头、车型名{typography.display-sm}32px4001.150CTA band 头、分类页标题{typography.title-lg}24px7001.30三列网格的卡片标题{typography.title-md}20px4001.40卡片副标题、导语段{typography.title-sm}18px4001.40规格标注、引言段{typography.label-uppercase}14px7001.31.5px分类 tab、VIEW MORE 行内标签{typography.body-md}16px4001.50默认正文{typography.body-sm}14px4001.50页脚正文、Cookie 同意、小字{typography.caption}12px4001.40.5px图注、图片来源行{typography.button}14px7001.01.5px全部按钮标签大写、加字距{typography.nav-link}14px4001.40.5px顶部导航菜单项排版原则与字体替代系统的气质是「轻量的建筑感展示字 清爽的常规正文」重字重只服务于短标签与动作镀铬。字距是非平凡的按钮标签与分类标签的 1.5px tracking 让文字有「机械加工」而非「打字」的质感展示标题保持 0 字距让 BMW Type 自身的字高在放大后自然处理间距。h1/h2 的 UPPERCASE 是默认语态——句首大写只出现在正文与引言段很少出现在标题上全大写是品牌语态信号而非风格选择。若 BMW Type Next Latin 不可用Inter可变字体300/400/700 是最接近的开源替代展示字距保持 0除非所选回退字体在大字号下显得松散Saira Condensed可作为短赛车标签的压缩感备选。归一化实现里 components.html 将标题设为letter-spacing: var(--tracking-display)-0.025em并规定 h1/h2/h3 用font-family: var(--font-display)、line-height: var(--leading-tight)1.02h1上限 820px 宽、--text-4xl78px、字重 700。5. 组件样式清单顶部导航top-nav—— 每页顶部固定的黑色导航栏高 64px{colors.canvas}背景。左侧为 BMW M 徽标M 三色 BMW 圆标 M 字标中间横向主菜单Models、Topics、Magazine、Configurator、Fastlane右侧为语言选择器、搜索图标、账户图标。菜单项用{typography.nav-link}渲染句首大写标签。按钮体系组件规格button-primary标志性主 CTA背景{colors.canvas}或摄影上透明文字{colors.on-dark}白1px 白色描边0px 圆角内边距 16px×32px高 48px类型{typography.button}14px / 700 / 1.5px tracking。矩形轮廓 大写加字距标签即品牌按钮button-primary-outline与主按钮同形仅透明背景 白描边用于叠在摄影上、填充按钮会与图片冲突的场景button-on-light未解析浅色上下文配置器、账户、结算、订单弹窗的暂定模式黑底白字与暗底默认反转。落地前需对照具体流程确认button-icon圆形图标按钮轮播控制、分享、收藏48×48px{colors.surface-card}背景白色图标居中全圆角——系统内唯一的非矩形按钮carousel-arrow照片轮播中 48×48 圆形箭头形状同button-icon带 chevron 字形text-link行内大写加字距链接VIEW ALL MODELS、READ MORE{typography.label-uppercase}暗底白字无下划线多数链接旁带 → 箭头字形归一化夹具的.btn基类components.html给出可参考实现最小高度 44px、--radius-md圆角、700 字重--text-sm、transition使用--motion-fast130ms--ease-standard.btn-primary填充--accent、文字--accent-onhover 用--accent-hover并上移 1px.btn-secondary白底、--elev-ring1px 描边hover 描边与文字转向--accent:focus-visible使用--focus-ring0 0 0 4px rgba(0, 102, 177, 0.24)——这与 DESIGN.md「2px 白描边 2px electric-blue 偏移环」的暗底焦点策略在不同实现层各司其职。卡片与容器hero-photo-band全宽黑 band全出血汽车摄影占满大部分画面h1 用{typography.display-xl}左对齐叠在照片上下方常有{typography.body-md}小副标题垂直内边距{spacing.xxl}64px无卡片边框——照片即 band。feature-photo-card用于MORE FROM BMW M MAGAZINE等编辑区块的三列网格。背景{colors.surface-card}0px 圆角内边距{spacing.lg}24px上半为 16:9 照片卡片内全出血下方依次是{typography.label-uppercase}分类标签、{typography.title-lg}标题、短正文描述。model-card用于MORE NEW M MODELS三列网格。背景{colors.canvas}无卡片表面纯照片压在黑上0px 圆角顶部 16:10 车型主图下方为{typography.display-md}车型名、{typography.body-sm}短规格行、text-linkEXPLORE THIS MODEL。magazine-article-card杂志总览页的偏文字卡片变体。背景{colors.canvas} 发丝线边框0px 圆角顶部小缩略图、{typography.label-uppercase}分类标签、{typography.title-lg}标题、正文摘要。spec-cell车型详情页技术规格单元格发动机规格、重量、极速、0-100 时间。背景{colors.surface-soft}#0d0d0d0px 圆角内边距{spacing.lg}24px上方{typography.display-sm}数值下方{typography.label-uppercase}标签。motorsport-photo-card赛车团队/赛车运动区使用的无边照片卡。无卡片表面——仅全出血照片 左下角小号白字叠加图注。摄影即品牌。chatbot-launcher首页右侧卡片式入口BMW M CHATBOT。背景{colors.surface-card}0px 圆角内边距{spacing.lg}24px含 h3 标题、短提示语与启动button-primary。category-tab/category-tab-active杂志与话题页的分类选择器ALL · MAGAZINE · MODELS · LIFESTYLE · MOTORSPORT。纯文字{typography.label-uppercase}标签激活态文字从{colors.body}变{colors.on-dark}并加 2px 白色下划线无背景填充、无圆角。输入与表单text-input暗底标准文本输入。背景{colors.surface-card}文字{colors.on-dark}类型{typography.body-md}0px 圆角内边距 12px×16px高 48px1px 发丝线边框聚焦时边框增粗为白色。cookie-consent-card首页右侧 Cookie 横幅卡。背景{colors.canvas} 1px 发丝线0px 圆角内边距{spacing.lg}24px正文{typography.body-sm}底部竖排两按钮主描边按钮 text-link。签名组件m-stripe-divider承载 M 三色{colors.m-blue-light}→{colors.m-blue-dark}→{colors.m-red}的 4px 横向条纹。用作赛车镀铬上的分隔、品牌身份区块之间、分类 tab 的 hover 指示。是全系统最具辨识度的非排版元素。cta-band-photo页脚前Drive an MCTA band承载赛车弯道全出血摄影居中{typography.display-md}标题 下方button-primary-outline垂直内边距 80px。CTA 靠全出血摄影继承页面编辑级重力而非镀铬。页脚footer—— 已分析营销页面的黑色页脚{colors.canvas}背景、{colors.body}文字桌面端 4 列链接BMW M Models / BMW M Lifestyle / Owners / Company垂直内边距 64px底行承载{typography.caption}的 BMW 企业免责声明与语言选择器。黑色页脚行为仅对编辑/营销页确认不适用于未解析的账户或结算流程。6. 布局原则4px 网格与 1440px 容器间距系统基础单位4pxToken 阶梯{spacing.xxs}4px ·{spacing.xs}8px ·{spacing.sm}12px ·{spacing.md}16px ·{spacing.lg}24px ·{spacing.xl}40px ·{spacing.xxl}64px ·{spacing.section}96px区块纵向留白主编辑 band 之间{spacing.section}96pxHero 摄影 bandhero h1 副标题组合四周{spacing.xxl}64px卡片内边距内容卡/车型卡{spacing.lg}24pxspec-cell 表{spacing.xl}40px排水沟gutter三列网格卡片间{spacing.lg}24px页脚列内{spacing.md}16px。归一化实现的间距 token 略有差异--space-1到--space-1248px 封顶并额外提供响应式区块纵向间距--section-y-desktop: 104px、--section-y-tablet: 76px、--section-y-phone: 52px由 components.html 的媒体查询按1023px与639px断点切换——这为 DESIGN.md 的 96px 节拍提供了可落地的三档自适应版本。网格与容器营销页最大内容宽度约1440px居中——比典型 SaaS 更宽给摄影留呼吸空间归一化实现--container-max: 1220px居中且margin-inline: auto编辑正文单 12 列网格摄影 band 全出血不受最大宽度限制卡片网格桌面 3 列 → 平板 2 列 → 移动 1 列页脚桌面 4 列 → 平板 2 列 → 移动 1 列。留白哲学BMW M 信任摄影完成视觉工作摄影周围的留白是克制的——车填满画面文案以紧贴对齐的列落在照片下方或侧边。出现留白处正文区块之间、CTA 周围一律统一为{spacing.section}96px。系统应避免装饰性氛围背景与装饰渐变当照片裁切会导致白字对比度不足时允许功能性对比 scrim。7. 层级与纵深无投影深度来自摄影层级处理用途Flat无阴影无边框正文区块、顶部导航、页脚、照片 bandSoft hairline1px{colors.hairline}边框区块分隔、卡片轮廓、表格行Card surface{colors.surface-card}叠在 canvas 上——无阴影特性照片卡、杂志卡、聊天机器人启动器Photographic depth全出血摄影、无边裁切Hero band、赛车运动特性——深度靠主体而非镀铬系统不使用投影也不做分层镀铬。深度完全来自摄影主体 镜头 光线以及黑画布与略高一阶的{colors.surface-card}之间的对比。装饰性深度M 条纹分隔m-stripe-divider4px 高横向分隔条承载 M 三色。用于赛车镀铬、车型详情页头、品牌身份时刻。这是系统唯一的真正「装饰」元素——克制使用以标记重要性碳纤维表面技术规格页使用{colors.carbon-gray}#2b2b2b单元格叠加细微纹理。这是单页处理不是全系统模式摄影深度全出血的车就是深度。摄影中的光线赛道灯、落日轮廓光完成了 SaaS 系统中投影承担的高度工作。归一化实现保留了对应的 elevation 阶梯 token--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)发丝线级、--elev-raised: 0 22px 56px rgba(17, 24, 39, 0.12)面板级可在 tokens.css 中查看。8. Dos and DontsDo每个页面都以全出血汽车摄影锚定——车是品牌电压镀铬退让展示标题用{typography.display-xl}或{typography.display-lg}的 UPPERCASE句首大写的展示字读起来不像这个品牌排版保持纪律Light 展示字、regular 正文、更重的字重只给短标签、按钮、卡片标题或观察到的 M 专属强调M 三色条纹只用于品牌身份时刻——字标点缀、赛车镀铬、车型徽章绝不做按钮填充或表面默认 0px 圆角全圆几何仅保留给圆形图标按钮全大写标签统一 1.5px 字距——「机械加工」感不可妥协主编辑 band 之间用{spacing.section}96px保持网格对齐的纵向节奏。Dont不要在 M 三色{colors.m-blue-light}/{colors.m-blue-dark}/{colors.m-red}与已记录的 electric-blue 强调色之外引入品牌色不要让正文用 Light 而牺牲可读性——正文通常保持 regular 400Light 只留给大号展示与次级编辑时刻不要用圆角按钮——矩形轮廓就是品牌圆角读起来像消费科技而非赛车运动不要在 hero 字后放装饰渐变背景——若裁切导致对比度失败加功能性黑 scrim、重排裁切、或把文字移入实心黑面板不要连续两个 band 用同一种表面模式——节奏应为「照片 band → 规格表 → 照片 band → 杂志网格 → 照片 band」连续两个纯文字 band 会读起来像企业官网不要把 M 条纹当按钮填充——条纹是分隔/点缀绝不是动作表面按钮标签的字距不要低于 1.5px——正是字距让它们有「机械加工」感。9. 响应式行为断点名称宽度关键变化Mobile 768px汉堡导航hero h1 从 80→48px演示网格 1 列照片卡全宽堆叠页脚 4 列→1Tablet768–1024px顶栏保持横向但收紧卡片网格 2 列规格表 2 列Desktop1024–1440px完整顶栏卡片网格 3 列规格表 4 列Wide 1440px与桌面相同但呼吸感更强内容最大 1440px触控目标button-primary尽量保持 48×48px 最小尺寸绝不低于 44×44px 指针目标button-icon与carousel-arrow恰好 48×48px——稳超 44×44px 下限text-input高 48px分类 tab 为纯文字标签至少 12px 垂直内边距与足够横向间距形成 44px 最小有效点击区。摄影上文字与焦点摄影上的白字正文对比度至少4.5:1大号展示文字与图标描边至少3:1首选裁切纪律把文字放在暗赛道、阴影、座舱或黑色车身区域避免放在天空、车灯、白漆、混凝土或反光高光上裁切不够时使用功能性黑 scrimrgba(0,0,0,0.45)~rgba(0,0,0,0.70)垫在文字区后左→右渐变 scrim 仅可作为无障碍层不作装饰scrim 仍不达标时把文案移入{colors.canvas}实心面板最小内边距 24px黑底或照片背景上的焦点可见性2px 白描边 2px{colors.electric-blue}偏移环未解析的浅色表面则反转为 2px electric-blue 描边 可见偏移。折叠策略顶栏 768px 折叠为汉堡菜单展开为全屏黑色遮罩顶部带 M 三色条纹摄影在所有断点保持全出血——绝不收进带边距的容器卡片网格减少列数而非缩放卡片摄影保持原生宽高比规格表从 4 列 → 2 列 → 1 列折叠规格数值无论列数多少都保持{typography.display-sm}M 条纹分隔在所有断点保持 4px 高。图片行为Hero 摄影响应式裁切——桌面更宽的裁切移动端竖向裁切生活方式与赛车摄影保持原生宽高比系统从不 letterbox 或 pillarboxM 字标 三色徽标随视口宽度等比缩放。10. Agent Prompt Guide给编码 Agent 的使用准则这份指南同样服务于在 OpenDesign 工作流中调用该设计系统的 Agent 与 LLM一次只聚焦一个组件引用其组件名hero-photo-band、spec-cell新组件默认 0px 圆角只有圆形图标按钮可用全圆几何变体-active、-disabled作为组件名旁的独立散文条目存在处处使用{token.refs}绝不内联 hex永不记录 hover 态只记录 Default 与 Active/Pressed展示标题默认 UPPERCASE Light/建筑感正文保持句首大写 regular700 只用于短强调与 UI 标签M 三色仅限品牌身份——绝不扩展为「主操作」的系统 token白字叠照片每次都需要对比度策略先裁切、再 scrim、必要时实心面板对强调没把握时更大的摄影优先于更大的字号。已知缺口诚实边界色彩频率分析器把白字计数 955记为最高频 token黑画布是从截图推断的——body 背景采样未将其列为顶部调色板条目但页面无疑为黑底白字精确的 M 三色断点取自 BMW 公开品牌指南截图中条纹是小元素此分辨率下的像素采样无法可靠区分 #0066b1 与 #1c69d4。文档断点以 BMW Design Works 发布的品牌规范为准BMW Type Next Latin 字重证据不完整BMW 家族系统记录 Light300展示与 regular400正文/UIBMW M 更重的标签用法应视为观察到的强调而非对 BMW 家族排版的全局替换动画与过渡时长轮播过渡、hover 揭示、配置器交互不在范围内除text-input默认态外的表单校验态未提取——错误/成功输入变体需要配置器或订单流程确认配置器表面带颜色/轮毂/内饰选择器的车辆定制页不在已分析 URL 集内其色板网格、对比面板、价格摘要卡未记录于此Cookie 同意遮罩遮挡了截图中的部分首页 hero次级 hero 处理不同车型轮播可能有未捕获的变体。11. 与包内实现文件的校验闭环DESIGN.md 不是孤立文档它与包内其余文件构成可审计的校验闭环tokens.css 是 token 的唯一事实源design-tokens.json 记录 56 个 token 全部有tokens.css行级背书如--accent指向tokens.css:17评分 100 / excellentcomponents.manifest.json 统计了 48 个选择器、26 个类、19 个元素并按组列出 token 引用按钮组引用--accent/--accent-on/--elev-ring/--radius-md等 12 个 token输入组引用--border/--radius-sm/--space-*卡片组引用--elev-raised/--radius-lg/--surface——这与 DESIGN.md 的组件语义一一对应system/tokens.default.json 提供 Tailwind 接入所需的默认映射colorPrimary: #0066b1、borderRadius: 8preview/ 的 colors / typography / spacing 三页可做视觉抽查USAGE.md 同时给出约束保留 schema token 名称以保证跨品牌切换可靠用--accent承担主操作/链接/焦点优先复用components.manifest.json的组件组不在tokens.css的:root块之外写裸 hexdesign-tokens.json与tailwind-v4.css是派生产物应由报告与 token 样式表再生成而非手工编辑。12. 落地建议如何基于本包产出 BMW M 风格界面建底把 tokens.css 的:root块整体复制进首屏 artifact 的style组件 CSS 只引用 token不写裸值定画布按 DESIGN.md 的暗场语义覆写表面 tokencanvas #000、surface-card #1a1a1a、hairline #3c3c3c保持 token 命名不变以维持跨品牌切换契约排组件对照 components.manifest.json 的组件组buttons / inputs / cards / badges / links / typography / layout逐组实现需要精确选择器时参考 components.html验对比度每处白字叠照片按「先裁切 → 再 scrim → 最后实心面板」的顺序处理正文 4.5:1、大号展示 3:1查反模式逐条对照第 8 节 Dos and Donts重点检查 0px 圆角、1.5px 字距、96px 节拍、M 条纹仅作身份标记抽检预览用 preview/ 页面做颜色、字体、间距三方面的视觉快检再决定是否进入 craft/ 中的 color 与 accessibility-baseline 基线复核manifest 的craft.suggested正是这两项。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
OpenDesign 设计系统实战：BMW M 汽车运动子品牌的黑场视觉规范与组件实现指南
OpenDesign 设计系统实战BMW M 汽车运动子品牌的黑场视觉规范与组件实现指南【免费下载链接】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/bmw-m/DESIGN.md 为核心系统拆解 BMW M 这一「汽车运动性能子品牌」的设计系统包从近纯黑画布、M 三色条纹、BMW Type Next 拉丁字体的排版纪律到零圆角工业按钮、全出血汽车摄影、96px 节拍间距等组件与布局规则。读完本文你将掌握如何用{token.refs}引用体系落地一套完整的暗色汽车运动风格界面并了解仓库内 tokens.css、components.html、design-tokens.json 与 components.manifest.json 等实现文件如何与设计规范一一对应、互相校验。1. 包结构与阅读路径在设计系统 2.0 的包约定见 manifest.json中bmw-m是一个od-design-system-project/v1规范下的 bundled 包属于 Automotive汽车分类。包内文件及其职责如下文件职责DESIGN.md视觉意图、约束与反模式本文主体USAGE.md包的使用契约与阅读顺序tokens.css结构化 token 绑定首个 artifact 的style起点design-tokens.json56 个 token 的契约化 JSON 输出tailwind-v4.cssTailwind v4 适配层components.html组件参考夹具reference fixturecomponents.manifest.json组件清单与 token 引用统计source/evidence.md审计证据说明preview/colors / typography / spacing 三页视觉预览system/index.html、kit.html、kit.dark.html、tokens.default.json 等系统级产出USAGE.md 给出的推荐阅读顺序是先读 USAGE.md 理解包契约 → 再读 DESIGN.md 掌握视觉意图与反模式 → 把tokens.css粘贴进第一个 artifact 的style块 → 用components.manifest.json做组件清单速查需要精确选择器时打开components.html→ 需要视觉抽查时看preview/页面。值得注意source/evidence.md 明确声明该包源自 OpenDesign 精选的 bundled fixture并不主张对上游官网做过重新抓取因此设计文档中的量化结论应视为基于已分析页面集的观察证据。2. 视觉主题与氛围摄影即品牌电压BMW M 的分析对象是官方编辑与营销页面其核心氛围一句话概括近纯黑画布{colors.canvas}— #000承载白色 BMW Type Next Latin 大标题品牌能量全部来自全出血full-bleed汽车摄影UI 镀铬件保持极简。关键特征包括近纯黑画布 白字贯穿所有已分析的编辑与营销页面配置器、账户、结算、订单管理等流程未解析可能引入浅色表面展示级标题默认使用 UPPERCASE 的 BMW Type Next Latin Light更重的粗体大写仅保留给标签、按钮、卡片标题和观察到的 M 专属强调M 三色条纹{colors.m-blue-light}#0066b1 →{colors.m-blue-dark}#1c69d4 →{colors.m-red}#e22718只作为 4px 品牌条、M 字标点缀和赛车镀铬出现绝不做按钮或填充摄影铺满整个 band车辆永远是视觉主体UI 镀铬退让为叠加在摄影上的小号白色标签按钮扁平、0px 圆角、全大写加字距标签——「工业精密的矩形轮廓」本身就是品牌全系统圆角基本为零少数例外是圆形图标按钮如轮播箭头与已确认的小号 toggle 药丸间距慷慨且对齐网格{spacing.section}96px分隔主要 band{spacing.xxl}64px用于 hero 摄影 band 内部{spacing.xl}40px用于内容卡片内部。从源码结构看tokens.css 与 components.html 提供的是归一化后的浅色参考实现--bg: #f7f8fa、--surface: #ffffff而 DESIGN.md 描述的是目标黑场视觉规范二者是「意图规范」与「可复用夹具」的分工关系在落地暗色 BMW M 界面时应以 DESIGN.md 的颜色与排版语义为准同时复用 tokens.css 的 token 命名骨架。3. 色彩体系与角色分工品牌与强调色Token色值角色{colors.primary}#ffffff主类型与 CTA 颜色h1/h2/h3 展示字、暗底正文、主按钮文字按钮本体透明或画布色白字描边即按钮{colors.m-blue-light}#0066b1M 三色条纹第一段M 徽章点缀与赛车镀铬{colors.m-blue-dark}#1c69d4三色条纹中段BMW 传承蓝被复用为 M 条纹中带{colors.m-red}#e22718第三段标志性 M-Power 红用于条纹与赛车节奏标注{colors.electric-blue}#0653b6独立电动车强调色用于 M xDrive 电动车型页面比传承蓝更冷、更数码表面色Token色值角色{colors.canvas}#000000默认页面地板真黑{colors.surface-soft}#0d0d0d与黑几乎无差的表面用于规格表单元格与页脚相邻条{colors.surface-card}#1a1a1a卡片、次级按钮、图标按钮背景{colors.surface-elevated}#262626再亮一档用于暗色 band 内的嵌套卡片{colors.carbon-gray}#2b2b2b碳纤维质感表面用于技术规格卡发丝线与边框{colors.hairline}#3c3c3c暗底上的 1px 分隔色用于正文分区、表格行、卡片轮廓{colors.hairline-strong}#262626与surface-elevated同值边框更像「升一阶的表面」而非墨线。文字色{colors.on-dark}#ffffff暗画布上的全部标题与主文字{colors.body}#bbbbbb默认正文比纯白略冷正文段落与次级元数据{colors.body-strong}#e6e6e6强调正文 / 导语段{colors.muted}#7e7e7e页脚链接、面包屑、图注。语义色{colors.warning}#f4b400极少用于技术警告标注{colors.success}#0fa336订单确认态营销面少见。对照归一化实现tokens.css 的--accent: #0066b1与--meta: #0066b1正好对应 M Blue Light--danger: #e4002b接近 M Red 的强调应用--success: #16a34a承担语义成功色而 design-tokens.json 的 token 契约报告显示 56 个 token 全部具备tokens.css源码行级背书sourceBackedTokens: 56评分 100等级 excellent--accent-hover与--accent-active使用color-mix(in oklab, var(--accent), black 8%/14%)派生无需手工维护深浅变体。4. 字体规则克制对比而非硬性 700/300 二分字体家族与回退BMW Type Next Latin 是 BMW 的授权展示 正文字体。回退链建议对齐既有 BMW 设计系统展示优先BMWTypeNextLatin Light正文/UI 用BMWTypeNextLatin最后回退到Helvetica, Arial, Hiragino Kaku Gothic ProN, Hiragino Sans, Meiryo, sans-serif覆盖日文环境。归一化实现中 tokens.css 提供了--font-display与--font-bodyBMWTypeNext, Helvetica Neue, Arial, sans-serif及等宽--font-mono。字重基线展示Light300用于大号 h1/h2 编辑头条除非抓取的 M 页面明显用了更重的静态字重正文/UIregular400用于段落、描述性文案与常驻导航强调700 用于按钮、分类标签、卡片标题900 仅在明确观察到导航强调时使用。核心原则是对比与克制而不是硬性的 700/300 二分大号展示用 Light、阅读文字用 regular、更重的字重只给短 UI 标签或 M 专属强调避免「中粗字重糊成一片」。层级表完整 token 规格Token字号字重行高字距用途{typography.display-xl}80px300 Light1.00Hero h1THE ULTIMATE、MORE BMW M.{typography.display-lg}56px300 Light1.050章节头MORE FROM BMW M MAGAZINE.{typography.display-md}40px300/4001.10子章节头、车型名{typography.display-sm}32px4001.150CTA band 头、分类页标题{typography.title-lg}24px7001.30三列网格的卡片标题{typography.title-md}20px4001.40卡片副标题、导语段{typography.title-sm}18px4001.40规格标注、引言段{typography.label-uppercase}14px7001.31.5px分类 tab、VIEW MORE 行内标签{typography.body-md}16px4001.50默认正文{typography.body-sm}14px4001.50页脚正文、Cookie 同意、小字{typography.caption}12px4001.40.5px图注、图片来源行{typography.button}14px7001.01.5px全部按钮标签大写、加字距{typography.nav-link}14px4001.40.5px顶部导航菜单项排版原则与字体替代系统的气质是「轻量的建筑感展示字 清爽的常规正文」重字重只服务于短标签与动作镀铬。字距是非平凡的按钮标签与分类标签的 1.5px tracking 让文字有「机械加工」而非「打字」的质感展示标题保持 0 字距让 BMW Type 自身的字高在放大后自然处理间距。h1/h2 的 UPPERCASE 是默认语态——句首大写只出现在正文与引言段很少出现在标题上全大写是品牌语态信号而非风格选择。若 BMW Type Next Latin 不可用Inter可变字体300/400/700 是最接近的开源替代展示字距保持 0除非所选回退字体在大字号下显得松散Saira Condensed可作为短赛车标签的压缩感备选。归一化实现里 components.html 将标题设为letter-spacing: var(--tracking-display)-0.025em并规定 h1/h2/h3 用font-family: var(--font-display)、line-height: var(--leading-tight)1.02h1上限 820px 宽、--text-4xl78px、字重 700。5. 组件样式清单顶部导航top-nav—— 每页顶部固定的黑色导航栏高 64px{colors.canvas}背景。左侧为 BMW M 徽标M 三色 BMW 圆标 M 字标中间横向主菜单Models、Topics、Magazine、Configurator、Fastlane右侧为语言选择器、搜索图标、账户图标。菜单项用{typography.nav-link}渲染句首大写标签。按钮体系组件规格button-primary标志性主 CTA背景{colors.canvas}或摄影上透明文字{colors.on-dark}白1px 白色描边0px 圆角内边距 16px×32px高 48px类型{typography.button}14px / 700 / 1.5px tracking。矩形轮廓 大写加字距标签即品牌按钮button-primary-outline与主按钮同形仅透明背景 白描边用于叠在摄影上、填充按钮会与图片冲突的场景button-on-light未解析浅色上下文配置器、账户、结算、订单弹窗的暂定模式黑底白字与暗底默认反转。落地前需对照具体流程确认button-icon圆形图标按钮轮播控制、分享、收藏48×48px{colors.surface-card}背景白色图标居中全圆角——系统内唯一的非矩形按钮carousel-arrow照片轮播中 48×48 圆形箭头形状同button-icon带 chevron 字形text-link行内大写加字距链接VIEW ALL MODELS、READ MORE{typography.label-uppercase}暗底白字无下划线多数链接旁带 → 箭头字形归一化夹具的.btn基类components.html给出可参考实现最小高度 44px、--radius-md圆角、700 字重--text-sm、transition使用--motion-fast130ms--ease-standard.btn-primary填充--accent、文字--accent-onhover 用--accent-hover并上移 1px.btn-secondary白底、--elev-ring1px 描边hover 描边与文字转向--accent:focus-visible使用--focus-ring0 0 0 4px rgba(0, 102, 177, 0.24)——这与 DESIGN.md「2px 白描边 2px electric-blue 偏移环」的暗底焦点策略在不同实现层各司其职。卡片与容器hero-photo-band全宽黑 band全出血汽车摄影占满大部分画面h1 用{typography.display-xl}左对齐叠在照片上下方常有{typography.body-md}小副标题垂直内边距{spacing.xxl}64px无卡片边框——照片即 band。feature-photo-card用于MORE FROM BMW M MAGAZINE等编辑区块的三列网格。背景{colors.surface-card}0px 圆角内边距{spacing.lg}24px上半为 16:9 照片卡片内全出血下方依次是{typography.label-uppercase}分类标签、{typography.title-lg}标题、短正文描述。model-card用于MORE NEW M MODELS三列网格。背景{colors.canvas}无卡片表面纯照片压在黑上0px 圆角顶部 16:10 车型主图下方为{typography.display-md}车型名、{typography.body-sm}短规格行、text-linkEXPLORE THIS MODEL。magazine-article-card杂志总览页的偏文字卡片变体。背景{colors.canvas} 发丝线边框0px 圆角顶部小缩略图、{typography.label-uppercase}分类标签、{typography.title-lg}标题、正文摘要。spec-cell车型详情页技术规格单元格发动机规格、重量、极速、0-100 时间。背景{colors.surface-soft}#0d0d0d0px 圆角内边距{spacing.lg}24px上方{typography.display-sm}数值下方{typography.label-uppercase}标签。motorsport-photo-card赛车团队/赛车运动区使用的无边照片卡。无卡片表面——仅全出血照片 左下角小号白字叠加图注。摄影即品牌。chatbot-launcher首页右侧卡片式入口BMW M CHATBOT。背景{colors.surface-card}0px 圆角内边距{spacing.lg}24px含 h3 标题、短提示语与启动button-primary。category-tab/category-tab-active杂志与话题页的分类选择器ALL · MAGAZINE · MODELS · LIFESTYLE · MOTORSPORT。纯文字{typography.label-uppercase}标签激活态文字从{colors.body}变{colors.on-dark}并加 2px 白色下划线无背景填充、无圆角。输入与表单text-input暗底标准文本输入。背景{colors.surface-card}文字{colors.on-dark}类型{typography.body-md}0px 圆角内边距 12px×16px高 48px1px 发丝线边框聚焦时边框增粗为白色。cookie-consent-card首页右侧 Cookie 横幅卡。背景{colors.canvas} 1px 发丝线0px 圆角内边距{spacing.lg}24px正文{typography.body-sm}底部竖排两按钮主描边按钮 text-link。签名组件m-stripe-divider承载 M 三色{colors.m-blue-light}→{colors.m-blue-dark}→{colors.m-red}的 4px 横向条纹。用作赛车镀铬上的分隔、品牌身份区块之间、分类 tab 的 hover 指示。是全系统最具辨识度的非排版元素。cta-band-photo页脚前Drive an MCTA band承载赛车弯道全出血摄影居中{typography.display-md}标题 下方button-primary-outline垂直内边距 80px。CTA 靠全出血摄影继承页面编辑级重力而非镀铬。页脚footer—— 已分析营销页面的黑色页脚{colors.canvas}背景、{colors.body}文字桌面端 4 列链接BMW M Models / BMW M Lifestyle / Owners / Company垂直内边距 64px底行承载{typography.caption}的 BMW 企业免责声明与语言选择器。黑色页脚行为仅对编辑/营销页确认不适用于未解析的账户或结算流程。6. 布局原则4px 网格与 1440px 容器间距系统基础单位4pxToken 阶梯{spacing.xxs}4px ·{spacing.xs}8px ·{spacing.sm}12px ·{spacing.md}16px ·{spacing.lg}24px ·{spacing.xl}40px ·{spacing.xxl}64px ·{spacing.section}96px区块纵向留白主编辑 band 之间{spacing.section}96pxHero 摄影 bandhero h1 副标题组合四周{spacing.xxl}64px卡片内边距内容卡/车型卡{spacing.lg}24pxspec-cell 表{spacing.xl}40px排水沟gutter三列网格卡片间{spacing.lg}24px页脚列内{spacing.md}16px。归一化实现的间距 token 略有差异--space-1到--space-1248px 封顶并额外提供响应式区块纵向间距--section-y-desktop: 104px、--section-y-tablet: 76px、--section-y-phone: 52px由 components.html 的媒体查询按1023px与639px断点切换——这为 DESIGN.md 的 96px 节拍提供了可落地的三档自适应版本。网格与容器营销页最大内容宽度约1440px居中——比典型 SaaS 更宽给摄影留呼吸空间归一化实现--container-max: 1220px居中且margin-inline: auto编辑正文单 12 列网格摄影 band 全出血不受最大宽度限制卡片网格桌面 3 列 → 平板 2 列 → 移动 1 列页脚桌面 4 列 → 平板 2 列 → 移动 1 列。留白哲学BMW M 信任摄影完成视觉工作摄影周围的留白是克制的——车填满画面文案以紧贴对齐的列落在照片下方或侧边。出现留白处正文区块之间、CTA 周围一律统一为{spacing.section}96px。系统应避免装饰性氛围背景与装饰渐变当照片裁切会导致白字对比度不足时允许功能性对比 scrim。7. 层级与纵深无投影深度来自摄影层级处理用途Flat无阴影无边框正文区块、顶部导航、页脚、照片 bandSoft hairline1px{colors.hairline}边框区块分隔、卡片轮廓、表格行Card surface{colors.surface-card}叠在 canvas 上——无阴影特性照片卡、杂志卡、聊天机器人启动器Photographic depth全出血摄影、无边裁切Hero band、赛车运动特性——深度靠主体而非镀铬系统不使用投影也不做分层镀铬。深度完全来自摄影主体 镜头 光线以及黑画布与略高一阶的{colors.surface-card}之间的对比。装饰性深度M 条纹分隔m-stripe-divider4px 高横向分隔条承载 M 三色。用于赛车镀铬、车型详情页头、品牌身份时刻。这是系统唯一的真正「装饰」元素——克制使用以标记重要性碳纤维表面技术规格页使用{colors.carbon-gray}#2b2b2b单元格叠加细微纹理。这是单页处理不是全系统模式摄影深度全出血的车就是深度。摄影中的光线赛道灯、落日轮廓光完成了 SaaS 系统中投影承担的高度工作。归一化实现保留了对应的 elevation 阶梯 token--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)发丝线级、--elev-raised: 0 22px 56px rgba(17, 24, 39, 0.12)面板级可在 tokens.css 中查看。8. Dos and DontsDo每个页面都以全出血汽车摄影锚定——车是品牌电压镀铬退让展示标题用{typography.display-xl}或{typography.display-lg}的 UPPERCASE句首大写的展示字读起来不像这个品牌排版保持纪律Light 展示字、regular 正文、更重的字重只给短标签、按钮、卡片标题或观察到的 M 专属强调M 三色条纹只用于品牌身份时刻——字标点缀、赛车镀铬、车型徽章绝不做按钮填充或表面默认 0px 圆角全圆几何仅保留给圆形图标按钮全大写标签统一 1.5px 字距——「机械加工」感不可妥协主编辑 band 之间用{spacing.section}96px保持网格对齐的纵向节奏。Dont不要在 M 三色{colors.m-blue-light}/{colors.m-blue-dark}/{colors.m-red}与已记录的 electric-blue 强调色之外引入品牌色不要让正文用 Light 而牺牲可读性——正文通常保持 regular 400Light 只留给大号展示与次级编辑时刻不要用圆角按钮——矩形轮廓就是品牌圆角读起来像消费科技而非赛车运动不要在 hero 字后放装饰渐变背景——若裁切导致对比度失败加功能性黑 scrim、重排裁切、或把文字移入实心黑面板不要连续两个 band 用同一种表面模式——节奏应为「照片 band → 规格表 → 照片 band → 杂志网格 → 照片 band」连续两个纯文字 band 会读起来像企业官网不要把 M 条纹当按钮填充——条纹是分隔/点缀绝不是动作表面按钮标签的字距不要低于 1.5px——正是字距让它们有「机械加工」感。9. 响应式行为断点名称宽度关键变化Mobile 768px汉堡导航hero h1 从 80→48px演示网格 1 列照片卡全宽堆叠页脚 4 列→1Tablet768–1024px顶栏保持横向但收紧卡片网格 2 列规格表 2 列Desktop1024–1440px完整顶栏卡片网格 3 列规格表 4 列Wide 1440px与桌面相同但呼吸感更强内容最大 1440px触控目标button-primary尽量保持 48×48px 最小尺寸绝不低于 44×44px 指针目标button-icon与carousel-arrow恰好 48×48px——稳超 44×44px 下限text-input高 48px分类 tab 为纯文字标签至少 12px 垂直内边距与足够横向间距形成 44px 最小有效点击区。摄影上文字与焦点摄影上的白字正文对比度至少4.5:1大号展示文字与图标描边至少3:1首选裁切纪律把文字放在暗赛道、阴影、座舱或黑色车身区域避免放在天空、车灯、白漆、混凝土或反光高光上裁切不够时使用功能性黑 scrimrgba(0,0,0,0.45)~rgba(0,0,0,0.70)垫在文字区后左→右渐变 scrim 仅可作为无障碍层不作装饰scrim 仍不达标时把文案移入{colors.canvas}实心面板最小内边距 24px黑底或照片背景上的焦点可见性2px 白描边 2px{colors.electric-blue}偏移环未解析的浅色表面则反转为 2px electric-blue 描边 可见偏移。折叠策略顶栏 768px 折叠为汉堡菜单展开为全屏黑色遮罩顶部带 M 三色条纹摄影在所有断点保持全出血——绝不收进带边距的容器卡片网格减少列数而非缩放卡片摄影保持原生宽高比规格表从 4 列 → 2 列 → 1 列折叠规格数值无论列数多少都保持{typography.display-sm}M 条纹分隔在所有断点保持 4px 高。图片行为Hero 摄影响应式裁切——桌面更宽的裁切移动端竖向裁切生活方式与赛车摄影保持原生宽高比系统从不 letterbox 或 pillarboxM 字标 三色徽标随视口宽度等比缩放。10. Agent Prompt Guide给编码 Agent 的使用准则这份指南同样服务于在 OpenDesign 工作流中调用该设计系统的 Agent 与 LLM一次只聚焦一个组件引用其组件名hero-photo-band、spec-cell新组件默认 0px 圆角只有圆形图标按钮可用全圆几何变体-active、-disabled作为组件名旁的独立散文条目存在处处使用{token.refs}绝不内联 hex永不记录 hover 态只记录 Default 与 Active/Pressed展示标题默认 UPPERCASE Light/建筑感正文保持句首大写 regular700 只用于短强调与 UI 标签M 三色仅限品牌身份——绝不扩展为「主操作」的系统 token白字叠照片每次都需要对比度策略先裁切、再 scrim、必要时实心面板对强调没把握时更大的摄影优先于更大的字号。已知缺口诚实边界色彩频率分析器把白字计数 955记为最高频 token黑画布是从截图推断的——body 背景采样未将其列为顶部调色板条目但页面无疑为黑底白字精确的 M 三色断点取自 BMW 公开品牌指南截图中条纹是小元素此分辨率下的像素采样无法可靠区分 #0066b1 与 #1c69d4。文档断点以 BMW Design Works 发布的品牌规范为准BMW Type Next Latin 字重证据不完整BMW 家族系统记录 Light300展示与 regular400正文/UIBMW M 更重的标签用法应视为观察到的强调而非对 BMW 家族排版的全局替换动画与过渡时长轮播过渡、hover 揭示、配置器交互不在范围内除text-input默认态外的表单校验态未提取——错误/成功输入变体需要配置器或订单流程确认配置器表面带颜色/轮毂/内饰选择器的车辆定制页不在已分析 URL 集内其色板网格、对比面板、价格摘要卡未记录于此Cookie 同意遮罩遮挡了截图中的部分首页 hero次级 hero 处理不同车型轮播可能有未捕获的变体。11. 与包内实现文件的校验闭环DESIGN.md 不是孤立文档它与包内其余文件构成可审计的校验闭环tokens.css 是 token 的唯一事实源design-tokens.json 记录 56 个 token 全部有tokens.css行级背书如--accent指向tokens.css:17评分 100 / excellentcomponents.manifest.json 统计了 48 个选择器、26 个类、19 个元素并按组列出 token 引用按钮组引用--accent/--accent-on/--elev-ring/--radius-md等 12 个 token输入组引用--border/--radius-sm/--space-*卡片组引用--elev-raised/--radius-lg/--surface——这与 DESIGN.md 的组件语义一一对应system/tokens.default.json 提供 Tailwind 接入所需的默认映射colorPrimary: #0066b1、borderRadius: 8preview/ 的 colors / typography / spacing 三页可做视觉抽查USAGE.md 同时给出约束保留 schema token 名称以保证跨品牌切换可靠用--accent承担主操作/链接/焦点优先复用components.manifest.json的组件组不在tokens.css的:root块之外写裸 hexdesign-tokens.json与tailwind-v4.css是派生产物应由报告与 token 样式表再生成而非手工编辑。12. 落地建议如何基于本包产出 BMW M 风格界面建底把 tokens.css 的:root块整体复制进首屏 artifact 的style组件 CSS 只引用 token不写裸值定画布按 DESIGN.md 的暗场语义覆写表面 tokencanvas #000、surface-card #1a1a1a、hairline #3c3c3c保持 token 命名不变以维持跨品牌切换契约排组件对照 components.manifest.json 的组件组buttons / inputs / cards / badges / links / typography / layout逐组实现需要精确选择器时参考 components.html验对比度每处白字叠照片按「先裁切 → 再 scrim → 最后实心面板」的顺序处理正文 4.5:1、大号展示 3:1查反模式逐条对照第 8 节 Dos and Donts重点检查 0px 圆角、1.5px 字距、96px 节拍、M 条纹仅作身份标记抽检预览用 preview/ 页面做颜色、字体、间距三方面的视觉快检再决定是否进入 craft/ 中的 color 与 accessibility-baseline 基线复核manifest 的craft.suggested正是这两项。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
