open-design 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本指南围绕 design-systems/bold/DESIGN.md 展开系统讲解 open-design 仓库中 Bold 设计系统包的视觉意图、语义令牌、组件契约与接入方式。读完本文你将掌握如何在 open-design 的 Design System 工作流中直接引用tokens.css构建高对比、重型排版风格的页面并理解该包从DESIGN.md到编译令牌、组件夹具与质量报告的完整技术链路。一、Bold 包是什么一个可直接注入 Agent 上下文的设计系统包在 open-design 仓库中design-systems/下的每个子目录都是一个可移植的设计系统包portable design-system package。从 Design System 界面或受支持的项目创建流程中选择某个包时open-design 会将其设计上下文组合进 Agent 的提示词prompt中从而约束生成产物的视觉风格。bold包属于Bold Expressive类别其设计目标是以粗重排版、高对比色彩与具有主导性的版式布局建立强烈的视觉存在感同时保持可用性与可读性。按仓库约定每个捆绑包都具备相同的最小机器可读结构见 design-systems/README.mddesign-systems/slug/ ├── manifest.json ├── DESIGN.md └── tokens.cssbold包在此基础上还提供了更丰富的文件声明于 manifest.jsondesign-systems/bold/ ├── DESIGN.md # Agent 的权威设计散文本指南主体 ├── USAGE.md # Agent 与审查者的读取顺序与使用守则 ├── manifest.json # 稳定发现元数据、来源与文件声明 ├── tokens.css # 编译后的语义令牌样式表事实源 ├── design-tokens.json # 派生的 Design Tokens JSON56 个令牌 ├── tailwind-v4.css # 派生的 Tailwind v4 映射 ├── components.html # 独立组件夹具 ├── components.manifest.json# 派生的组件/令牌索引 ├── preview/ # colors / typography / spacing 预览页 └── source/ # 导入证据、令牌契约报告其中DESIGN.md是 Agent 的风格决策文档tokens.css是编译后的语义令牌事实源。下文将逐节继承DESIGN.md的九个章节并补充令牌、组件与质量层面的实现细节。二、视觉主题与氛围定义风格家族的三个锚点DESIGN.md第一部分用三个维度锚定 Bold 的风格家族维度取值含义Visual stylebold粗重、强势的视觉语言Color stanceprimary, secondary主色与次色承担明确的功能角色Design intent保持输出对该风格家族的识别度同时保留可用性与可读性风格优先但不可牺牲可用性这一定位在components.html的元描述中得到了印证——夹具的 fixture 描述为bold campaign language with hard contrast, oversized type, and assertive actions高硬对比、超大字号、果断的行动指令。也就是说Bold 本质上是面向活动页、落地页、发布页这类需要宣言式视觉冲击的场景而非仪表盘式的低对比密度界面。从源码结构看该包由 open-design 仓库维护的 curated bundled fixture 派生见 manifest.json 中source.type: bundled因此不主张声称原始上游来源证据——这是USAGE.md明确提醒的事实边界。三、色彩系统从风格基础令牌到编译令牌的映射3.1 DESIGN.md 声明的风格基础色板DESIGN.md的色彩章节声明了一组来自风格基础style foundations的色板令牌语义值用途指引Primary#0077BCCTA 强调承担主要交互信号Secondary#009866次级强调Success#16A34A成功状态Warning#D97706警告状态Danger#DC2626危险状态Surface#111111大面积背景与卡片Text#111827正文保证可读性Neutral#111111由 surface 令牌派生用于官方格式兼容配套的使用原则是用 Primary#0077BC做 CTA 强调用 Surface#111111做大面积背景与卡片正文保持 Text#111827以保证易读性。3.2 tokens.css 中实际编译的语义令牌需要注意的是DESIGN.md声明的是风格基础色板而 tokens.css 是包内实际编译、运行时真正生效的语义令牌。两者之间存在可见的差异——例如编译后的--accent为#111111近黑--bg为#ffffff构成了黑白高对比的核心信号。这是bold包当前的实际状态以tokens.css为事实源USAGE.md与design-tokens.json均明确此约定。tokens.css的:root块完整定义了 56 个令牌按设计令牌契约分层为A1-identity8 个、B-slot4 个、A226 个、A1-structure18 个。核心颜色令牌如下:root { --bg: #ffffff; --surface: #f7f7f7; --surface-warm: #eeeeee; --fg: #111111; --fg-2: #3a3a3a; --muted: #707070; --meta: #111111; --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; }几个值得展开的实现细节hover/active 通过color-mix()派生--accent-hover、--accent-active不再硬编码色值而是基于--accent在 oklab 色彩空间混合 8%/14% 黑色保证整个强调色系只需维护一个源令牌即可自动生成状态色。功能色与 DESIGN.md 色板数值略有出入--success #168a46、--warn #b7791f、--danger #c53030是编译后的实际值与 DESIGN.md 中#16A34A / #D97706 / #DC2626不完全一致——这正是声明色板与编译令牌两份文档存在同步偏差的实例接入时应以tokens.css的取值作为运行基准。3.3 组件中的色板用法来自 components.htmlcomponents.html 中色板通过.swatch系列类直观呈现四块色板对应--accent近黑、--surface、--surface-warm、--fg。按钮体系的实现印证了色彩分工.btn-primary { background: var(--accent); color: var(--accent-on); } .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); } .btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border); box-shadow: var(--elev-ring); } .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }即主行动用高对比实色块黑底白字次行动用浅表面加描边hover 时以--accent作为统一交互信号。这正是DESIGN.mdPrimary 用于 CTA 强调、Secondary 保持中性原则的代码级落地。四、排版桌面优先的强力字阶DESIGN.md的排版章节给出三个关键决策Scale桌面优先的富有表现力的字阶desktop-first expressive scaleFamiliesprimaryArchivo BlackdisplayArchivo BlackmonoJetBrains MonoWeights100–900 全字重tokens.css将其编译为可运行的令牌--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; --leading-body: 1.52; --leading-tight: 1.06; --tracking-display: -0.025em;同样存在声明与编译的差异DESIGN.md声明 Archivo Black / JetBrains Mono而编译令牌使用 Arial Black / Impact 与 SF Mono 栈。从代码结构看编译栈选择的是无需外部字体加载即可稳定渲染的系统字体组合这保证了任意环境下 bold 风格都能成立黑体家族带来粗重字形Impact 强化标题冲击力。components.html展示了字阶的实际用法h1 { max-width: 840px; font-size: var(--text-4xl); font-weight: 760; } h2 { font-size: var(--text-3xl); font-weight: 700; } h3 { font-size: var(--text-xl); font-weight: 700; } .eyebrow { color: var(--meta); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .lead { max-width: 640px; color: var(--fg-2); font-size: var(--text-lg); }设计语言上遵循DESIGN.md的核心原则标题承载风格个性粗重 display 字体 收紧字距 紧凑行高 1.06正文优化扫描性与对比度1.52 行高。--tracking-display: -0.025em的负字距让大字标题更紧凑有力。五、间距与网格可预测的垂直节奏DESIGN.md规定间距刻度为4/8/12/16/24/32并要求各区块与组件间保持一致的垂直节奏列与模块对齐到可预测的网格避免随意偏移。tokens.css将其扩展为完整的间距阶梯并在结构层补充了分端口的区块纵向间距--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;components.html中section的纵向内边距与.container的横向内边距都直接消费这些令牌并通过媒体查询在桌面默认/平板≤1023px/手机≤639px三档切换实现响应式节奏的单一来源管理.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter-desktop); } section { padding-block: var(--section-y-desktop); } media (max-width: 1023px) { .container { padding-inline: var(--container-gutter-tablet); } section { padding-block: var(--section-y-tablet); } } media (max-width: 639px) { .container { padding-inline: var(--container-gutter-phone); } section { padding-block: var(--section-y-phone); } }六、布局与构成清晰的层次与克制的装饰DESIGN.md的布局章节提出三条构成原则倾向采用内容块清晰、内部内边距一致的布局保持明显的层级标题 → 支撑文字 → 主行动先用留白分隔关注点再考虑边框或阴影。components.html的 Hero 区即是这三条原则的样板grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr)的左文右卡双栏配以.stack * *的间距叠放、.actions的行动按钮组而h1的max-width: 840px、.lead的max-width: 640px都在用行长控制强化可读性。升起的面板.panel使用--elev-raised: 0 16px 40px rgba(0,0,0,0.10)这一柔和投影避免喧宾夺主——装饰服务于层级而非覆盖层级。七、组件体系清单驱动的可复用部件DESIGN.md的组件章节对三类部件给出约束Buttons主行动用#0077BC编译后为--accent体系次行动作保持中性Inputs强 focus-visible 状态、清晰标签、可预测的错误信息Cards/sections跨页面保持一致的圆角、间距与抬升策略。components.manifest.json 将这些约束结构化为组件分组groups清单共 48 个选择器、26 个类名、19 个元素覆盖buttons、inputs、cards、badges、links、typography、layout七组keyboard 与 icons 组标记为present: false。清单同时记录每个组实际引用的令牌例如buttons 组引用--accent / --accent-on / --border / --ease-standard / --elev-ring / --focus-ring / --radius-md / --space-5 / --surface / --text-sm / --motion-fast等 12 个令牌inputs 组引用--border / --radius-sm / --space-2 / --space-4 / --space-5 / --surfacecards 组引用--border / --elev-raised / --radius-lg / --surfacelayout 组引用--container-gutter-* / --section-y-desktop。该清单还承担令牌卫生审计declared56 个声明令牌与referenced组件实际引用对照列出 7 个已声明但未被组件引用的令牌--accent-active、--danger、--elev-flat、--motion-base、--space-1、--space-12、--warn而undeclaredReferenced为空——说明组件夹具没有使用任何未声明令牌契约闭合。7.1 表单控件的可访问性细节.field采用 grid 布局在标签与输入框之间建立--space-2的间距input最小高度 46px满足触控目标focus 时以--focus-ring: 0 0 0 3px rgba(17,17,17,0.18)配合border-color: var(--accent)给出强 focus 信号。这印证了DESIGN.mdstrong focus-visible states, clear labels, and predictable error messaging的要求。八、动效与交互短促、有目的、以强调色为信号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);components.html中的按钮过渡完整覆盖背景色、边框色、文字色、位移与阴影五个维度全部使用var(--motion-fast) var(--ease-standard)hover 时transform: translateY(-1px)提供轻微的物理反馈:focus-visible以--focus-ring保证键盘可达性。整套体系把短促、有目的落到具体的时长与缓动参数上。九、语音与品牌行动导向的微文案DESIGN.md的 Voice Brand 章节要求语调与视觉风格一致简洁、自信、面向产品微文案行动导向避免泛泛的填充语言在标题中保留风格身份同时让 UI 标签字面、清晰。components.html中 Hero 的文案High-contrast campaign system / Large type, confident blocks, and direct action patterns以及按钮文案Primary action / Secondary action正是这一语调的示范——标题保留宣言气质控件标签则直接了当。十、反模式清单质量守门员DESIGN.md明确列出四条不可逾越的反模式不引入调色板之外的色值——已有令牌能解决的问题就不要硬编码新颜色不用同一字号/字重扁平化层级——层级必须通过类型差异显式表达不添加降低可读性或可访问性的装饰效果不在同一界面混用无关的视觉隐喻。USAGE.md对此给出了配套的工程化禁令不在拷贝的:root令牌块之外使用裸十六进制色值不脱离tokens.css单独重定义 Tailwind 或 design-token 值不添加components.html或DESIGN.md中不存在的组件配方。十一、接入与使用Agent 与审查者的完整工作流USAGE.md 规定了标准读取顺序先读USAGE.md理解包契约再读DESIGN.md获取视觉意图、约束与反模式将tokens.css粘贴进第一个 artifact 的style块再编写组件 CSS用components.manifest.json做紧凑的组件清单需要精确选择器或状态时打开components.html需要视觉核验时查看preview/页面colors、typography、spacing。其中三条关键纪律保留 schema 令牌名完全一致以保证跨品牌切换的可靠性open-design 支持在不同设计系统包之间切换令牌名即切换契约--accent用于主行动、链接、focus 状态以及页面中唯一清晰的焦点元素将source/文件视为捆绑夹具回填的审计证据source/evidence.md、source/token-contract.report.json、source/tokens.source.json。11.1 Tailwind v4 映射令牌的框架化接入若项目使用 Tailwind v4可直接引入派生的 tailwind-v4.css。它以tokens.css为事实源在theme块中把语义令牌映射为 Tailwind 设计令牌--color-accent、--font-display、--text-4xl、--spacing-*、--radius-*、--shadow-*、--duration-*、--ease-standard等从而让bg-accent、text-4xl、shadow-raised这类 Tailwind 工具类直接落到 Bold 的语义令牌上。文件头注释明确Derived from tokens.css. Keep tokens.css as the source of truth即任何令牌调整都应改tokens.css而非映射层。11.2 令牌契约与质量报告design-tokens.json 是令牌契约的机器可读快照其 summary 显示该包共 56 个令牌、56 个均声明且均有来源支撑契约评分100 分 / excellent 级recommendRebuild: false。每个令牌条目都带layerA1-identity / B-slot / A2 / A1-structure、confidence: high与sources精确到tokens.css:行号例如--bg的sources为tokens.css:7。这套数据由source/token-contract.report.json生成与tokens.css强制一致见 design-systems/README.md 中派生产物是缓存而非竞争性事实源的说明。十二、在 open-design 中的定位与约束Bold 包遵循design-systems/目录的 v1 manifest 约定schemaVersion: od-design-system-project/v1文件夹 slug 与manifest.id均为bold类别Bold Expressive。运行期 open-design 会以 manifest 元数据优先于 Markdown H1 与 Category:约定后者作为旧版包的可读回退。包内声明的每个路径都必须安全、相对且真实存在——这些由包质量守卫package-quality guards在仓库 CI 中校验。最后重申DESIGN.md的一贯立场Bold 的目标不是为风格而风格而是在保持输出可识别的同时守住可用性与可读性底线。接入该包时请始终以 tokens.css 为运行基准以 USAGE.md 的读取顺序组织生成流程并用 components.manifest.json 约束组件复用边界——这正是 open-design 设计系统包从风格文档走向可执行契约的完整闭环。【免费下载链接】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），仅供参考