OpenDesign Brutalism 设计系统包实战指南Design System 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-designBrutalism 是 OpenDesign 仓库design-systems/下以 Bold Expressive 为分类的 Design System 2.0 包面向 OpenDesign 的 agent 与 reviewer审核者提供一整套可复制、可审计的设计资产从tokens.css的 56 个结构化 token到components.manifest.json的组件清单与components.html的参考实现再到source/目录下的审计证据链。阅读本文后你将掌握该包的文件契约、正确接入顺序、token 分层原理、组件复用规则以及该做与不该做的完整使用边界能够直接在 OpenDesign 产物artifact中落地 Brutalism 风格界面。一、包定位与文件契约Brutalism 包的元数据定义在 manifest.json采用od-design-system-project/v1schema关键字段如下字段值说明idbrutalism品牌/包标识categoryBold Expressive视觉风格分类source.typebundled来源类型为打包内置source.originOpenDesign curated bundled fixture基于 OpenDesign 精选的内置 fixture 派生importModenormalized导入模式为规范化craft.suggestedcolor、accessibility-baseline建议配套阅读的 craft 规范files字段给出了包内核心文件的映射关系这是理解整个包结构的契约总表design→DESIGN.md视觉意图、约束与反模式tokens→tokens.css可直接粘贴的 CSS 变量token文件designTokens→design-tokens.jsonTOKEN_SCHEMA 契约的机器可读导出tailwind→tailwind-v4.css面向 Tailwind v4 的派生主题映射components→components.html组件参考实现 fixtureusage→USAGE.md本文所解析的使用指南componentsManifest→components.manifest.json紧凑的组件清单preview.dir→preview/颜色、排版、间距三个预览页sourceFiles→source/evidence.md、source/tokens.source.json、source/token-contract.report.json审计证据链。一句话总结包的结构逻辑USAGE.md 教你怎么用DESIGN.md 告诉你长什么样tokens.css 给你可直接粘贴的变量components.html 是组件事实依据source/ 是这些内容的来源审计记录。二、建议阅读顺序五个步骤正确接入USAGE.md 明确给出了包的使用顺序这是 agent 与 reviewer 都必须遵守的接入流程先读USAGE.md即本文理解包的契约约定再读 DESIGN.md掌握视觉意图、约束与反模式anti-patterns将 tokens.css 全文粘贴到第一个 artifact 的style块最前面再开始编写组件 CSS使用 components.manifest.json 作为紧凑的组件清单当需要精确选择器或状态细节时打开 components.html 查阅需要视觉校验时打开preview/目录下的预览页。这一顺序的核心思想是先契约、后意图、再实现、再组件、最后视觉校验token 是全局基础必须在任何组件样式之前就位组件清单用于快速盘点而 components.html 提供精确的选择器与状态定义避免 agent 凭想象发明控件。三、设计要点风格身份与色板意图USAGE.md 的 Design Highlights 与 DESIGN.md 共同定义了该包的风格身份视觉风格Visual stylebold——粗犷、高对比、不加修饰色板立场Color stanceprimary、secondary、neutral、success、warning、danger 六类角色齐全设计意图Design intent让输出在保持本风格家族可辨识度的同时兼顾可用性与可读性Primary#DD614C来自 style foundations 的 token。DESIGN.md 进一步展开了完整的语义色板Primary#DD614C、Secondary#DAA144、Success#16A34A、Warning#D97706、Danger#DC2626、Surface#FFFFFF、Text#111827、Neutral#FFFFFF由 surface token 派生以兼容官方格式。排版上采用 desktop-first 的表现型字阶expressive scale主字体与展示字体均为 Darker Grotesque等宽字体为 JetBrains Mono字重覆盖 100–900间距刻度为 4/8/12/16/24/32动效强调以 Primary 作为交互信号默认使用 150–250ms 的短促过渡与稳定缓动并显式覆盖 hover、focus-visible、active、disabled、loading 各状态。需要说明的是从源码结构看DESIGN.md/USAGE.md 记录的是风格家族层面的语义色板意图来自 style foundations而包内实际打包的 tokens.css 中--accent实现值为#ffef5a亮黄色、--border为#000000与 components.html 中的实际渲染一致。两者分别对应风格描述层与实现绑定层接入时以 tokens.css 的实际绑定为准详见第五节。四、Token 体系深挖56 个变量的分层与派生tokens.css 是该包的核心资产定义了 56 个 CSS 自定义属性覆盖颜色、字体、字号、行高、间距、圆角、阴影、动效、容器九大类。以下是完整绑定可直接复制进 artifact 的:root块:root { --bg: #f5f1e8; /* 页面底色米白 */ --surface: #ffffff; /* 表面/卡片色 */ --surface-warm: #ffef5a; /* 暖色强调表面 */ --fg: #000000; /* 前景文字纯黑 */ --fg-2: #222222; --muted: #555555; --meta: #000000; --border: #000000; /* 硬黑描边 */ --border-soft: #000000; --accent: #ffef5a; /* 强调色亮黄 */ --accent-on: #000000; /* 强调色上的文字 */ --accent-hover: color-mix(in oklab, var(--accent), black 8%); --accent-active: color-mix(in oklab, var(--accent), black 14%); --success: #00b050; --warn: #ff8c00; --danger: #ff2b2b; --font-display: Arial Black, Impact, sans-serif; --font-body: Arial, Helvetica, sans-serif; --font-mono: Courier New, ui-monospace, monospace; --text-xs: 12px; --text-sm: 14px; --text-base: 17px; --text-lg: 20px; --text-xl: 28px; --text-2xl: 42px; --text-3xl: 64px; --text-4xl: 88px; --leading-body: 1.35; --leading-tight: 0.98; --tracking-display: 0; --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: 88px; /* 桌面端区块纵向留白 */ --section-y-tablet: 64px; --section-y-phone: 44px; --radius-sm: 0px; /* 直角粗野主义标志 */ --radius-md: 0px; --radius-lg: 0px; --radius-pill: 9999px; --elev-flat: none; --elev-ring: 0 0 0 1px var(--border); --elev-raised: 8px 8px 0 #000000; /* 硬阴影无模糊 */ --focus-ring: 0 0 0 4px #000000, 0 0 0 8px #ffef5a; /* 双层焦点环 */ --motion-fast: 90ms; --motion-base: 140ms; --ease-standard: steps(2, end); /* 阶梯缓动去平滑 */ --container-max: 1160px; --container-gutter-desktop: 36px; --container-gutter-tablet: 24px; --container-gutter-phone: 16px; }这些 token 正是粗野主义风格的可量化实现圆角全部为0px直角、阴影用8px 8px 0 #000000的硬偏移无模糊投影、缓动采用steps(2, end)阶梯函数、焦点环为黑黄双层描边——每一处都在刻意对抗平滑、圆润的现代 UI 默认值。4.1 TOKEN_SCHEMA 契约与分层design-tokens.json 与 source/token-contract.report.json 按TOKEN_SCHEMA契约导出同一份数据。其 summary 显示56 个 token 全部被声明、全部有源码支撑sourceBacked 56/56契约评分为100 分grade: excellentrecommendRebuild: false——即当前 token 体系与来源完全对齐无需重建。token 被划分为四个层级layerCounts层级数量含义A1-identity8品牌身份色/字体/基础结构如--bg、--fg、--border、--font-displayB-slot4语义槽位如--surface-warm、--fg-2、--meta、--border-softA226派生/功能 token如--accent-hover、--success、间距、圆角、动效A1-structure18结构类基础 token字号、行高、区块留白、容器宽度每个 token 条目都带有confidence: high、sources如tokens.css:7指向声明行号与reason即每个变量都能回溯到 tokens.css 的具体声明行这正是 Design System 2.0 契约可审计的核心体现。同时报告还暴露了unusedDeclared已声明未引用的 token--accent-active、--danger、--elev-flat、--motion-base、--space-1、--space-12、--warn——它们在当前 components.html 中未被使用属于为后续扩展预留的完整 token 集。4.2 Tailwind v4 派生映射tailwind-v4.css 是 tokens.css 的派生输出文件头部明确写着 Derived from tokens.css. Keep tokens.css as the source of truth.。它通过import tailwindcss与import ./tokens.css引入基础并在theme块中将每个 token 重新映射为 Tailwind 主题变量例如--color-accent: var(--accent)、--font-display: var(--font-display)、--shadow-raised: var(--elev-raised)、--ease-standard: var(--ease-standard)。这意味着同一套 token 既可用于手写 CSS也可无缝接入 Tailwind v4 的 utility class 体系。依据 source/evidence.md 的说明design-tokens.json与tailwind-v4.css均属派生产物应基于报告与 tokens.css 重新生成而非手工编辑。五、组件清单48 个选择器与 9 个组件分组components.manifest.json 是从 components.html 提取的紧凑组件清单fixture 统计如下1 个 style 块、48 个选择器、26 个 class、19 个元素。清单按语义将组件分为 9 个分组分组 id标签是否存在关键选择器/类buttonsButtons and calls to action✅.btn、.btn-primary、.btn-primary:hover、.btn-secondary、.btn:focus-visibleinputsForm fields and controls✅.field、input、input:focus、labelcardsCards and panels✅.card-row、.panel、.panel-head、.tilebadgesBadges, chips, and status labels✅.statuslinksLinks and inline actions✅atypographyTypography scale and text utilities✅.eyebrow、.lead、h1–h3layoutLayout primitives✅.container、section、.metric-gridkeyboardKeyboard hints❌—iconsIcon slots❌—每个分组都标注了tokenReferences该组件消费了哪些 token例如 buttons 组引用--accent、--accent-on、--border、--ease-standard、--elev-ring、--fg、--font-body、--motion-fast、--radius-md、--space-5、--surface、--text-sm共 12 个 tokencards 组消费--border、--elev-raised、--radius-lg、--surface。这为组件与 token 之间的依赖关系提供了机器可读的证据。5.1 components.html 中的参考实现要点在 components.html 中可以看到各核心组件的具体实现模式按钮.btn统一最小高度 44px、圆角取var(--radius-md)即 0、过渡使用--motion-fast--ease-standard.btn-primary背景var(--accent)、文字var(--accent-on)hover 时背景变为var(--accent-hover)并上移 1px.btn-secondary白底黑字、box-shadow: var(--elev-ring)描边hover 时边框与文字转为 accent 色.btn:focus-visible使用box-shadow: var(--focus-ring)双层焦点环面板.panel使用color-mix(in oklab, var(--surface), transparent 4%)背景、1px 黑边、--elev-raised硬阴影状态标签.status采用等宽字体大写 8px 圆点.status::before使用--success绿色指标网格.metric-grid三列布局.metric strong用 display 字体 --text-2xl展示大数字表单.field网格化布局input最小高度 46px、1px 黑边、--radius-sm直角input:focus与按钮共用--focus-ring排版h1使用--text-4xl88px且字重 760.eyebrow使用等宽字体 0.12em 字距 大写.lead最大宽度 640px响应式容器与区块留白分别在1023px/639px断点切换 tablet/phone 变量hero、lower、metric-grid、card-row 在860px以下坍缩为单列。从 components.html 的正文文案可以提炼出风格语义Heavy borders, bold contrast, and unapologetic rectangular UI components重描边、强对比、毫不妥协的直角 UI以及 Focus, hover, and status states share the same brand signal焦点、悬停与状态共用同一品牌信号。六、Do / Avoid使用契约的红线USAGE.md 以应做与避免两组清单界定了包的使用边界这是 agent 与 reviewer 必须遵守的契约应做Do原样保留 schema token 名称以保证跨品牌切换cross-brand switching的可靠性——token 名是机器契约的一部分改名即破坏契约用--accent承担主操作、链接、焦点状态以及页面上唯一清晰的焦点元素——accent 是焦点信号不要让它泛滥优先复用components.manifest.json中的组件分组而不是凭空发明新控件把source/下的文件当作打包 fixture 回填bundled fixture backfill的审计证据。避免Avoid不要在复制的:roottoken 块之外使用裸 hex 值——颜色必须走 token保证风格一致与可切换不要脱离tokens.css单独重新定义 Tailwind 或 design-token 值——tokens.css 是唯一事实来源source of truthtailwind-v4.css与design-tokens.json都是它的派生输出不要声称拥有原始上游源码的证据——依据 source/evidence.md本包基于 OpenDesign 精选的内置 fixture 派生并未对上游品牌仓库或官网做全新爬取不要添加components.html或DESIGN.md中不存在的组件配方——新增配方会破坏清单与实际实现的一致性。6.1 反模式清单来自 DESIGN.mdDESIGN.md 的 Anti-patterns 章节进一步补充了四条设计红线与 USAGE.md 的 Avoid 相互印证已有 token 能解决问题时不引入调色板之外的色值不用同一字号/字重平铺所有文本避免压平层级flatten hierarchy不添加降低可读性或可访问性的装饰效果不在同一界面混用无关的视觉隐喻。结合 manifest.json 的craft.suggested字段接入该包时建议同步参考仓库 craft/color.md 与 craft/accessibility-baseline.md 两份规范以保证色板与可访问性基线达标。七、视觉校验preview 预览页与 system 资产preview/目录提供三个独立预览页用于接入后的视觉抽检preview/colors.html以网格色卡形式展示--bg、--surface、--fg、--muted、--border、--accent、--success、--warn、--danger九个颜色角色的实际渲染preview/typography.html排版预览preview/spacing.html间距刻度预览。它们都通过link relstylesheet href../tokens.css /直接引用 token 文件因此预览结果与最终产物保证一致。此外system/目录index.html、kit.html、kit.dark.html、tokens.default.json提供了完整系统资产的参考渲染source/tokens.source.json保存了 token 的原始来源快照共同构成从来源到渲染的完整链路。八、实战检查清单将上述契约浓缩为接入 Brutalism 包时的最终自查项✅tokens.css已整体粘贴到首个 artifact 的style块最前且未修改任何变量名✅ 组件样式全部引用 token 变量style块内无裸 hex✅ 主操作按钮、链接与焦点状态统一走--accent全页仅一个焦点信号✅ 组件优先从components.manifest.json的 9 个分组中复用未添加清单外的配方✅ Tailwind 场景下仅通过tailwind-v4.css的theme映射消费 token未独立重定义✅ 文案语气与视觉风格一致简洁、自信、面向产品UI 标签保持字面直白✅ 动效使用--motion-fast/--ease-standard90ms steps 缓动等短促有目的的过渡hover/focus-visible/active/disabled/loading 状态齐全。按照本文的阅读顺序与契约约束接入即可让 OpenDesign 产出的界面稳定保持在 Brutalism 风格家族的可辨识范围内同时不牺牲可用性与可读性——这正是该 Design System 2.0 包的设计初衷。【免费下载链接】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），仅供参考