OpenDesign Bold 设计系统 2.0 包使用指南从 token 契约到组件落地的完整实践【免费下载链接】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-designBold 是 OpenDesign 设计系统库design-systems/中一个典型的 Bold Expressive 风格包面向编码 Agent 与人工评审者提供一套可复制、可校验、可跨品牌切换的视觉实现契约。本指南以design-systems/bold/USAGE.md为骨架结合包内tokens.css、components.html、components.manifest.json、design-tokens.json等真实产物系统讲解该包的阅读顺序、设计意图、token 分层机制、组件清单与禁用红线帮助你在一份 HTML artifact 中正确落地高对比、超大标题、直给行动的 Bold 视觉语言。1. 包的定位与文件契约Bold 包在manifest.json中声明了schemaVersion: od-design-system-project/v1属于bundled内置打包来源——它基于 OpenDesign 官方整理的 curated bundled fixture 生成而非对上游品牌站点的新鲜抓取这一点在 source/evidence.md 中有明确声明。包内核心文件及其角色如下文件角色USAGE.md使用契约先读它理解包的行为边界DESIGN.md视觉意图风格、色彩立场、反模式tokens.csstoken 唯一事实源source of truthdesign-tokens.json结构化 token 导出OD 设计 token schema v1tailwind-v4.cssTailwind v4 桥接层派生自 tokens.csscomponents.html参考组件 fixture含完整 CSS 与 DOMcomponents.manifest.json组件清单分组、选择器、token 引用关系manifest.json包元数据与文件映射preview/色彩、排版、间距的可视化预览页source/审计证据token 契约报告与来源声明system/运行时导出含 kit.html 与 tokens.default.json从文件组织可以看出这是一个**人类可读 机器可校验**双轨设计的包人类评审看DESIGN.md与components.htmlAgent 消费tokens.css与components.manifest.json而source/token-contract.report.json则负责把每个 token 绑定回tokens.css的具体声明行形成可审计的契约闭环。2. 官方推荐的阅读顺序Read OrderUSAGE.md 明确规定了使用顺序Agent 与评审者都应遵守先读本文件USAGE.md理解包的使用契约再读 DESIGN.md掌握视觉意图、约束与反模式把tokens.css粘贴进第一个 artifact 的style块然后才开始写组件 CSS用components.manifest.json获取紧凑的组件清单当需要精确选择器或状态细节时打开 components.html需要做视觉 sanity check 时查看preview/下的页面colors.html、typography.html、spacing.html。这套顺序的本质是先契约、后意图、再 token、再组件、最后视觉验证。尤其第 3 步先粘贴 tokens.css 再写组件 CSS保证了所有组件样式都建立在同一套 token 之上而不是各自发明魔法数字。3. 设计要点Design HighlightsUSAGE.md 用四个维度概括了 Bold 包的风格身份Visual style视觉风格boldColor stance色彩立场primary, secondary——强调色与次级色两档分明Design intent设计意图保持输出对该风格家族的强识别度同时不牺牲可用性与可读性Primary#0077BC——来自 style foundations 的 tokenDESIGN.md 进一步将其归纳为一句核心命题Strong visual presence with heavyweight typography, high-contrast colors, and commanding layouts.厚重的排版、高对比配色、有统治力的版式布局。在写任何组件之前先让这段意图约束你的每个 CSS 决策。4. 色彩体系文档意图 vs 实际 token 绑定DESIGN.md 记录了风格家族的色彩立场语义值说明Primary#0077BC来自 style foundations 的 tokenCTA 强调首选Secondary#009866来自 style foundations 的 tokenSuccess#16A34A来自 style foundations 的 tokenWarning#D97706来自 style foundations 的 tokenDanger#DC2626来自 style foundations 的 tokenSurface#111111大面积背景与卡片Text#111827正文文字保证易读性Neutral#111111由 surface token 派生兼容官方格式使用建议CTA 强调用 Primary#0077BC大面积背景和卡片用 Surface#111111正文保持在 Text#111827上保证清晰度。需要特别指出的是tokens.css才是实际构建时的事实源。它在:root中把运行期 token 绑定为 Bold 特有的硬黑美学——--accent: #111111、--fg: #111111、--bg: #ffffff、--surface: #f7f7f7。这一点在 tailwind-v4.css 首行注释 Derived from tokens.css. Keep tokens.css as the source of truth. 与 source/evidence.md 中均有印证。换言之DESIGN.md 描述的是风格家族的设计意图tokens.css是落到实现的具体绑定Agent 在写代码时以tokens.css为准。5. Token 分层架构A1-identity / B-slot / A2 / A1-structureBold 包采用 OpenDesign 的 TOKEN_SCHEMA 契约design-tokens.json 把 56 个 token 划分为四个层级A1-identity8 个品牌身份层--bg、--surface、--fg、--muted、--border、--accent、--font-display、--font-bodyB-slot4 个语义插槽层--surface-warm、--fg-2、--meta、--border-softA226 个派生/功能层如--accent-hover、--success、--warn、--danger、字体 mono、间距、圆角、投影、动效等A1-structure18 个结构层字号--text-xs到--text-4xl、行高、字距、section 纵向间距、容器宽度与 guttersource/token-contract.report.json 给出了契约体检结果totalTokens 56、declaredTokens 56、sourceBackedTokens 56评分 100、评级 excellent、recommendRebuild: false。也就是说每个声明的 token 都能在tokens.css中找到对应声明行不存在孤儿 token 或悬空引用undeclaredReferenced: []。5.1 完整 token 清单来自 tokens.css色彩与表面A1-identity / B-slot / A2--bg: #ffffff; /* 页面背景 */ --surface: #f7f7f7; /* 卡片/面板表面 */ --surface-warm: #eeeeee; /* 暖色表面mini-card 背景 */ --fg: #111111; /* 主前景 */ --fg-2: #3a3a3a; /* 次级前景lead 文本 */ --muted: #707070; /* 弱化文本 */ --meta: #111111; /* 元信息eyebrow/status */ --border: #d9d9d9; /* 主边框 */ --border-soft: #eeeeee; /* 细分隔线 */ --accent: #111111; /* 强调色主行动、链接、焦点 */ --accent-on: #ffffff; /* 强调色上的前景 */ --accent-hover: color-mix(in oklab, var(--accent), black 8%); --accent-active: color-mix(in oklab, var(--accent), black 14%); --success: #168a46; --warn: #b7791f; --danger: #c53030;注意--accent-hover与--accent-active使用原生color-mix(in oklab, ...)计算而不是硬编码新色值——这正是 USAGE.md 避免在 token 块外使用裸 hex 的底气所在。字体与排版A1-identity / A2 / A1-structure--font-display: Arial Black, Impact, sans-serif; /* 标题字族 */ --font-body: Inter, system-ui, sans-serif; /* 正文字族 */ --font-mono: SF Mono, ui-monospace, Menlo, monospace; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 24px; --text-2xl: 36px; --text-3xl: 54px; --text-4xl: 76px; /* desktop-first 夸张字号阶梯 */ --leading-body: 1.52; --leading-tight: 1.06; /* 标题行高 */ --tracking-display: -0.025em; /* 标题字距 */间距与栅格A2 / A1-structure--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --section-y-desktop: 96px; --section-y-tablet: 68px; --section-y-phone: 48px; --container-max: 1180px; --container-gutter-desktop: 36px; --container-gutter-tablet: 24px; --container-gutter-phone: 16px;圆角、投影与动效A2--radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 9999px; --elev-flat: none; --elev-ring: 0 0 0 1px var(--border); --elev-raised: 0 16px 40px rgba(0, 0, 0, 0.10); --focus-ring: 0 0 0 3px rgba(17, 17, 17, 0.18); --motion-fast: 150ms; --motion-base: 240ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1);值得一提的实现细节Bold 的层级感主要靠--elev-ring1px 描边与--elev-raised大而柔的投影两个 token 表达配合--border/--border-soft的细分隔线体系而不是滥用多重阴影。6. 排版desktop-first 的夸张字号阶梯DESIGN.md 的排版章节定义Scale字号阶梯desktop-first expressive scaleFamilies字族primaryArchivo BlackdisplayArchivo BlackmonoJetBrains MonoWeights字重100–900 全档原则标题承载风格个性正文保证可扫读性与对比度落到components.html的实现中标题统一走--font-display--leading-tight--tracking-display且 H1 使用夸张的--text-4xl76px 760 字重.eyebrow眉题使用等宽字体--font-mono、12px、700 字重、0.12em 字距并大写.lead导语则用--fg-2--text-lg18px约束在 640px 行宽内。这套组合保证了标题夸张、正文克制的 Bold 气质同时通过 max-width 与对比度守住可读性底线。7. Tailwind v4 集成方式如果 artifact 走 Tailwind v4 管线tailwind-v4.css 提供了桥接层它先import tailwindcss再import ./tokens.css随后在theme块中把 CSS 变量映射为 Tailwind 的 design tokenimport tailwindcss; import ./tokens.css; theme { --color-bg: var(--bg); --color-accent: var(--accent); --color-accent-on: var(--accent-on); --font-display: var(--font-display); --text-4xl: var(--text-4xl); --spacing-section-desktop: var(--section-y-desktop); --shadow-raised: var(--elev-raised); --duration-fast: var(--motion-fast); ... }映射关系覆盖颜色--color-*、字体--font-*、字号--text-*、间距--spacing-*、圆角--radius-*、阴影--shadow-*、动效时长--duration-*与容器--container-max。文件头部明确声明tokens.css 是唯一事实源tailwind-v4.css与design-tokens.json都是派生产物不应手工编辑而应通过 token 契约报告再生成。8. 组件清单与 token 引用关系components.manifest.json 对参考 fixture 做了机械化盘点1 个 style 块、48 个选择器、26 个 class、19 个元素。8 个标准组件分组中 6 个存在buttons、inputs、cards、badges、links、typography、layoutkeyboard 与 icons 明确标记为present: false——即Bold 包不提供键盘提示与图标插槽不要自行发明这两类组件。各分组及其 token 依赖分组关键类/选择器引用的 tokenbuttons.btn.btn-primary.btn-secondary:hover:focus-visible--accent--accent-on--border--ease-standard--elev-ring--fg--font-body--motion-fast--radius-md--space-5--surface--text-sminputs.fieldinputinput:focuslabel--border--fg--radius-sm--space-2/4/5--surfacecards.card-row.panel.panel-head.tile--border--elev-raised--radius-lg--surfacebadges.status含::before状态圆点—颜色直接取--success等linksa—typography.eyebrow.leadh1h2h3--fg-2--text-4xl--text-lg--text-xllayout.containersection.metric-grid--container-gutter-phone/tablet--section-y-desktopUSAGE.md 的要求是在发明新控件之前先复用components.manifest.json中的组件分组。这保证了同一风格家族内跨 artifact 的组件一致性也让评审者能快速核对这个按钮类在参考 fixture 中是否存在。8.1 按钮与行动号召参考实现中见 components.html按钮基线是min-height: 44px、--radius-md、700 字重小字号主按钮.btn-primary使用--accent背景 --accent-on前景hover 切换--accent-hover并上移 1px次按钮.btn-secondary用--surface背景 --elev-ring描边hover 时边框与文字变为--accent。焦点态统一走--focus-ring外发光。--accent只用于主行动、链接、焦点态以及一个明确的视觉焦点元素——这是 USAGE.md 的硬性约束。8.2 输入控件.field是 label input 的纵向栅格gap 用--space-2label 700 字重、--fg-2input 高度 46px、--radius-sm、--surface背景:focus时边框切到--accent并套上--focus-ring。DESIGN.md 强调输入控件必须有强 focus-visible 状态、清晰 label 与可预期的错误提示。8.3 卡片与面板.panel使用color-mix微调 surface 透明度 --border--radius-lg--elev-raised.mini-card与.tile用--surface-warm/--surface区分层级。--elev-ring描边与--elev-raised投影是 B 级卡片的主要层级手段。注意参考 fixture 中 metric 数字用--font-display--text-2xl呈现与全局数字也带展示气质的 Bold 风格一致。9. 布局与构成栅格、留白与移动端降级DESIGN.md 的布局原则是优先清晰的内容块与一致的内边距层级一目了然大标题 → 支撑文本 → 主行动先用留白切分信息再考虑边框和阴影。参考实现给出的可复制配方.containermax-width: var(--container-max)1180px 横向居中 gutter 自适应桌面 36px / 平板 24px / 手机 16px断点 1023px 与 639pxsection纵向间距走--section-y-desktop/tablet/phone96/68/48px三档断点.herogrid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr)的双栏叙事≤860px收成单栏.metric-grid三列、.card-row两列、.lower三列窄屏全部折叠为单列并切换分隔线方向。这套响应式降级全部基于 token 变量没有一处裸 px 断点魔法值。10. 动效与交互DESIGN.md 的动效规范用克制的过渡强调 Primary#0077BC作为交互信号默认短促而有目的的过渡150–250ms配合稳定缓动hover、focus-visible、active、disabled、loading 状态必须显式存在。tokens.css提供了对应原语--motion-fast: 150ms、--motion-base: 240ms、--ease-standard: cubic-bezier(0.2, 0, 0, 1)。参考组件中按钮的 transition 列表覆盖 background-color、border-color、color、transform、box-shadow 五项统一var(--motion-fast) var(--ease-standard)——一个变量换全套动效一致。11. 语气与品牌Voice Brand语气与视觉风格一致简洁、自信、面向具体产品微文案行动导向杜绝空泛填充语标题保留风格个性但 UI 标签保持字面、清晰。落地示例参考 fixture 的 hero 文案 High-contrast campaign system、eyebrow Bold design system、副文案 Large type, confident blocks, and direct action patterns——标题张扬、辅助文案精确说明正是 Voice 规范的样板。12. 反模式Anti-patternsDESIGN.md 列出四条红线任何 artifact 都不应触碰不引入调色板之外的色值——已有 token 能解决的问题不要新造颜色不用同一字号/字重压平层级——正文与标题必须拉开差异不添加损害可读性或可达性的装饰效果不在同一界面混用互不相关的视觉隐喻。13. Do 与 AvoidAgent 与评审者的操作红线USAGE.md 给出的操作准则Do应该做原样保留 schema token 名称保证跨品牌切换cross-brand switching始终可靠——token 名即契约改名即破坏使用--accent表达主行动、链接、焦点态以及唯一一个清晰的焦点元素发明新控件之前先复用components.manifest.json中的组件分组把source/文件视为 bundled fixture backfill 的审计证据。Avoid禁止做在复制的:roottoken 块之外使用裸 hex 值脱离tokens.css自行重定义 Tailwind 或 design-token 值声称拥有原始上游来源证据——本包基于 curated bundled fixturesource/evidence.md 明确说明未对上游品牌仓库/站点做新鲜抓取添加components.html或DESIGN.md中不存在的新组件配方。14. 审计证据与再生成机制source/目录是整个包的证据链source/evidence.md声明包的来源范围bundled fixture非上游抓取并列出三个输入文件DESIGN.md、tokens.css、components.htmlsource/token-contract.report.json把每个 TOKEN_SCHEMA 绑定映射回tokens.css的声明行如tokens.css:7并给出 100 分/excellent 的契约体检source/tokens.source.json原始 token 数据。派生产物design-tokens.json与tailwind-v4.css明确标注应从报告与 token 样式表再生成而非手工编辑。system/目录则提供运行时形态其中 system/tokens.default.json 暴露了宿主集成所需的最小映射colorPrimary: #111111、colorPrimaryBg: #eeeeee、fontSize: 16、borderRadius: 8kit.html/kit.dark.html/index.html可作为整包预览入口。这套声明 → 契约 → 报告 → 派生产物的流水线正是 OpenDesign 设计系统 2.0 包可被 Agent 可靠消费的关键任何 token 变更都能被机械化校验任何缺失绑定都会在报告中暴露。15. 落地检查清单把 Bold 用到一个新 artifact 时按以下清单自检第一个style块已粘贴完整:roottoken 块来自tokens.css且未在块外出现裸 hex--accent只用于主行动、链接、焦点态和唯一焦点元素组件类名均可在components.manifest.json的分组中找到标题使用--font-display--leading-tight--tracking-display正文保持在--font-body--leading-bodyhover / focus-visible / active / disabled / loading 状态显式定义过渡时长取自--motion-fast/--motion-base响应式断点复用--section-y-*与--container-gutter-*三档变量未出现 DESIGN.md 反模式中的四种行为。总结Bold 包是 OpenDesign 设计系统 2.0 中强视觉、硬对比风格的模板级实现它以 USAGE.md 为契约入口以tokens.css的 56 个分层 token 为唯一事实源以components.manifest.json的 6 个组件分组为复用边界并通过 token 契约报告把每个声明绑定到具体行号。对 Agent 而言正确顺序是贴 token → 查 manifest → 写组件 → 对 preview 验证对评审者而言检查重点是无裸 hex、token 名原样、组件不越界、反模式零触碰。遵循本指南即可在任意 OpenDesign artifact 中稳定复现 Bold 风格家族的识别度同时保住可读性与可达性底线。【免费下载链接】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），仅供参考