OpenDesign Bento 设计系统使用指南Agent 与评审者的设计系统 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-designOpenDesign 仓库以「设计系统包Design System Package」的形式为编码 Agent 提供可复用的视觉风格资产。design-systems/bento/下的 Bento 包即是其中之一它的核心价值在于让 Agent 在生成页面时能够遵循一套与现代 Bento 风格一致的设计令牌Design Tokens与组件规范同时保证输出可被人类评审者核验。本文以该包的使用文档design-systems/bento/USAGE.md为主体结合包内的令牌、组件清单与源码级证据完整讲解 Bento 包的契约结构、令牌体系、组件清单、正确使用姿势与必须避开的反模式帮助读者在 OpenDesign 工作流中直接、合规地消费这个设计系统包。一、Bento 包是什么一个「包契约」而非单纯的样式文件Bento 包在 design-systems/bento/manifest.json 中被定义为od-design-system-project/v1规范下的标准设计系统项目类别为Layout Structure布局与结构其定位是Bundled OpenDesign package for Bento, derived from curated DESIGN.md, tokens.css, and components.html fixtures.也就是说Bento 包并非对某个外部品牌仓库的实时爬取结果而是基于 OpenDesign 官方整理的bundled fixture随包打包的基准文件生成的。这一点在包的元数据source.type: bundled、source.origin: OpenDesign curated bundled fixture以及 design-systems/bento/source/evidence.md 中都有明确声明This Design System 2.0 backfill is derived from the curated OpenDesign bundled fixture. It does not claim a fresh crawl of the original upstream brand repository or website.理解这一点非常重要使用 Bento 包时不应声称其样式来自某个外部原始品牌站点它代表的是 OpenDesign 内部整理并长期维护的风格基准。从 manifest 可以看出包内各文件的分工files字段字段文件职责designDESIGN.md视觉意图、约束与反模式tokenstokens.css设计令牌的权威样式源designTokensdesign-tokens.json令牌的结构化 JSON 派生产物tailwindtailwind-v4.cssTailwind v4 主题绑定派生产物componentscomponents.html组件参考 fixture精确选择器与状态componentsManifestcomponents.manifest.json紧凑的组件清单usageUSAGE.md包使用指南本文主体preview.dirpreview/颜色/排版/间距的视觉预览页二、推荐阅读顺序消费 Bento 包的五个步骤design-systems/bento/USAGE.md 给出了明确的阅读顺序这是 Agent 与评审者消费本包的标准流程先读 USAGE.md本文理解包契约的整体约定再读 design-systems/bento/DESIGN.md掌握视觉意图、约束与反模式将 design-systems/bento/tokens.css 的内容粘贴到首个 artifact 的style块中之后再编写组件 CSS——令牌先行避免组件样式各自为政使用 design-systems/bento/components.manifest.json 获取紧凑的组件清单当需要精确的选择器或状态细节时打开 design-systems/bento/components.html需要视觉核验时检查preview/目录下的预览页面preview/colors.html、preview/typography.html、preview/spacing.html。这套顺序的本质是「先契约、后意图、再令牌、次清单、终预览」的层层递进保证 Agent 在动笔写任何 CSS 之前风格地基已经就位。三、设计要点Bento 的视觉基调Bento 包的设计定位总结在 design-systems/bento/DESIGN.md 中并在 USAGE.md 的 Design Highlights 中浓缩为三条Visual style视觉风格modern, clean现代、清爽Color stance色彩立场primary, neutral, success, warning, danger主色、中性、成功、警告、危险五类语义色Design intent设计意图保持输出对该风格家族可辨识的同时兼顾可用性与可读性。DESIGN.md 对视觉主题的描述更为形象模块化网格布局 卡片式块card-like blocks 清晰层级 柔和间距 微妙的视觉对比目标是构建「organized, scannable interfaces组织有序、可快速扫读的界面」。在 design-systems/bento/components.html 的 meta description 中这一风格被进一步描述为「modular bento interface with friendly tiles, soft borders, and balanced product density友好瓦片、柔和边框、均衡的产品密度」。3.1 色彩语义DESIGN.md 声明值DESIGN.md 给出的是风格层面style foundations的语义色供理解意图使用语义色值用法建议Primary#FAD4C0CTA 强调Attention 焦点Secondary#80A1C1次级强调Success / Warning / Danger#16A34A/#D97706/#DC2626状态语义色Surface#FFF5E6大面积背景与卡片Text#111827正文文字保证可读性Neutral#FFF5E6由 surface token 派生用于官方格式兼容DESIGN.md 同时给出了三条色彩使用建议Primary 用于 CTA 强调Surface 用于大面积背景与卡片正文一律使用 Text 色以保证可读性。3.2 实际令牌以 tokens.css 为准需要特别区分的是DESIGN.md 中的色值是风格层面的描述而 design-systems/bento/tokens.css 中的:root令牌块才是实际编码时直接引用的权威值importMode: normalizedmanifest 中已声明。tokens.css 实际落地为浅色系 Bento 风格如--bg: #f5f8ff、--accent: #2563eb两者并不冲突——DESIGN.md 描述家族风格意图tokens.css 提供该包实际分发的令牌绑定。USAGE.md 的规则明确要求禁止在复制的:root令牌块之外使用裸十六进制色值所有颜色都必须走令牌。四、令牌体系深度解析56 个结构化令牌design-systems/bento/tokens.css 是 Bento 包的令牌权威源共声明 56 个 CSS 自定义属性分为四大类4.1 颜色令牌Color身份层identity--bg: #f5f8ff、--surface: #ffffff、--fg: #101828、--muted: #667085、--border: #d7e0ef、--accent: #2563eb槽位层slot--surface-warm: #eaf1ff、--fg-2: #344054、--meta: #2563eb、--border-soft: #edf2f8派生层A2--accent-on: #ffffff、--success: #16a34a、--warn: #f59e0b、--danger: #ef4444。值得注意的现代 CSS 技巧--accent-hover与--accent-active使用color-mix(in oklab, var(--accent), black 8%/14%)在OKLab 色彩空间中由主色动态派生避免了手写两套 hover/active 色值也让派生色与主色在感知上保持一致。4.2 字体与排版令牌Typography字体族--font-display: Inter, system-ui, sans-serif、--font-body: Inter, ...、--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。4.3 间距与栅格令牌Spacing Grid间距阶梯--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: 1180pxgutter 分三档36px / 24px / 16pxdesktop/tablet/phone。4.4 圆角、投影与动效令牌Radius / Elevation / Motion圆角--radius-sm: 10px、--radius-md: 16px、--radius-lg: 24px、--radius-pill: 9999px投影--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)细描边、--elev-raised: 0 20px 52px rgba(16, 24, 40, 0.11)悬浮卡片、--focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.22)焦点环动效--motion-fast: 150ms、--motion-base: 240ms、--ease-standard: cubic-bezier(0.2, 0, 0, 1)。4.5 令牌分层与契约审计token-contract.report.jsondesign-systems/bento/source/token-contract.report.json 记录了每个令牌的分层归属layer与契约背书confidence: high。56 个令牌全部分布在四个层A1-identity8 个品牌身份层如--bg、--surface、--fg、--muted、--accent、字体族等A1-structure18 个结构层如字号阶梯、行高、section 节奏、容器宽度等B-slot4 个槽位层如--surface-warm、--fg-2、--meta、--border-softA226 个派生层如 hover/active 派生色、状态色、间距、圆角、投影、动效等。该报告给每个令牌都标注了sources精确到tokens.css的行号如tokens.css:7并给出汇总评分score: 100 / grade: excellent、recommendRebuild: false。这说明包的令牌契约完整、无需重建。依据 design-systems/bento/source/evidence.mddesign-tokens.json与tailwind-v4.css均为派生产物应基于报告与 tokens.css 重新生成而不是手工编辑——这是保证跨品牌切换可靠性的关键纪律。4.6 派生产物一design-tokens.jsondesign-systems/bento/design-tokens.json 是令牌的结构化 JSON 视图format: od-design-tokens/v1把 CSS 变量映射为带类型的令牌对象如--bg的type: color、--text-sm的type: dimension、--elev-raised的type: shadow、--motion-fast的type: duration、--ease-standard的type: cubicBezier并记录每个令牌的 layer、confidence 与 sources 行号。这份 JSON 适合被工具链读取是「机器可读的令牌契约」。4.7 派生产物二tailwind-v4.cssdesign-systems/bento/tailwind-v4.css 展示了如何把 tokens.css 桥接到 Tailwind CSS v4 的theme指令/* Derived from tokens.css. Keep tokens.css as the source of truth. */ import tailwindcss; import ./tokens.css; theme { --color-bg: var(--bg); --color-accent: var(--accent); --color-success: var(--success); --font-display: var(--font-display); --text-2xl: var(--text-2xl); --spacing-4: var(--space-4); --radius-md: var(--radius-md); --shadow-raised: var(--elev-raised); --duration-fast: var(--motion-fast); --ease-standard: var(--ease-standard); /* ... */ }文件头注释明确写着Keep tokens.css as the source of truth——tokens.css 是唯一权威源Tailwind 主题只是它的映射层。这与 USAGE.md 中「不要脱离 tokens.css 单独重定义 Tailwind 或设计令牌值」的规则完全一致使用theme做桥接、而非重造。五、组件清单components.manifest.json 与 components.html5.1 清单统计manifest 提取的事实design-systems/bento/components.manifest.json 是对 design-systems/bento/components.html 的自动提取结果记录了 fixture 的规模与令牌引用关系fixture 规模1 个style块、48 个选择器、26 个类名、19 个元素类型令牌健康度declared已声明与referenced被引用各 56/55 项undeclaredReferenced: []不存在未声明却被引用的令牌——引用面完全闭合unusedDeclared列出了声明但未被组件引用的令牌如--accent-active、--danger、--elev-flat、--motion-base、--space-1、--space-12、--warn这些令牌为组件外使用预留选择器覆盖.btn、.btn-primary、.btn-secondary、.field、input:focus、.panel、.tile、.metric、.status、.eyebrow、.lead、.hero、.container、.stack、.card-row、.mini-card等组件组groups清单将组件归为 9 个组其中 7 组存在、2 组keyboard、icons不存在。5.2 八个组件组的令牌依赖清单为每个组件组记录了完整的tokenReferences这相当于「组件 ↔ 令牌」的依赖图谱组件组状态关键选择器/类引用的核心令牌buttons存在.btn、.btn-primary、.btn-secondary、:hover、:focus-visible--accent、--accent-on、--border、--elev-ring、--radius-md、--space-5、--motion-fast、--ease-standardinputs存在.field、input、input:focus、label--border、--radius-sm、--space-2/4/5、--surfacecards存在.card-row、.panel、.panel-head、.tile--border、--elev-raised、--radius-lg、--surfacebadges存在.status无选择器条目—组件独立令牌引用为空links存在元素a—keyboard不存在——icons不存在——typography存在.eyebrow、.lead、h1、h2、h3--fg-2、--text-4xl、--text-xl、--text-lglayout存在.container、section、main、.metric-grid--container-gutter-phone/tablet、--section-y-desktop此外清单还统计了literals组件样式中有 3 处颜色表达式、24 处像素值、4 处硬编码字体族——这些是评审时值得留意的「未走令牌」痕迹。5.3 参考 fixture 的实战要点components.htmldesign-systems/bento/components.html 是完整的可运行参考页其关键实现要点可以直接复用到自己的 artifact 中按钮主按钮用background: var(--accent)color: var(--accent-on)hover 用var(--accent-hover)并translateY(-1px)次按钮用var(--surface)var(--elev-ring)描边两者共享min-height: 44px的触达尺寸与transition150ms --ease-standard并通过.btn:focus-visible { box-shadow: var(--focus-ring) }提供键盘焦点反馈输入框.field使用 grid 布局管理 label 与 input 的间距input:focus时border-color: var(--accent)var(--focus-ring)卡片与面板.panel使用color-mix(in oklab, var(--surface), transparent 4%)的半透明表面 --elev-raised悬浮投影 --radius-lg内部.metric-grid三列均分、.card-row两列均分状态徽章.status用等宽字体 大写 字距配合.status::before的 8px 圆点--radius-pill--success表示在线状态响应式断点max-width: 1023px时容器 gutter 降为 tablet 档、section 纵向节奏降为 tablet 档max-width: 860px时 hero/lower/metric-grid/card-row 全部坍缩为单列max-width: 639px时进入 phone 档。六、预览页与系统页视觉核验途径包的preview/目录提供三个自包含的视觉预览页供快速核验令牌效果colorspreview/colors.html、typographypreview/typography.html、spacingpreview/spacing.html。manifest 的preview.pages字段为每页标注了 rolecolors/typography/spacing与 title机器可读。此外system/目录包含系统级展示页system/index.html、system/kit.html、system/kit.dark.html以及 system/tokens.default.json用于查看整套系统的组件套件形态。其中kit.dark.html的存在表明该包也维护了深色套件的展示形态。七、使用纪律Do 与 Avoid包契约的红线design-systems/bento/USAGE.md 用最精炼的方式划定了 Agent 与评审者的行为边界这是本包契约的执行层面核心7.1 应当做Do完整保留 schema 令牌名称跨品牌切换的可靠性建立在令牌名一致之上——品牌 A 与品牌 B 的包都叫--accent、--surface切换时只需换令牌块组件代码零改动用--accent表达主操作主操作、链接、焦点状态以及页面中唯一清晰的焦点元素都应落在--accent上先复用组件组再发明新控件遇到新需求时优先在 design-systems/bento/components.manifest.json 的组件组中寻找可复用的组而不是凭空造新控件把source/目录当作审计证据source/evidence.md、source/token-contract.report.json、source/tokens.source.json是随包回填fixture backfill的审计依据评审时以此核验令牌来源。7.2 应当避免Avoid避免在复制的:root令牌块之外使用裸十六进制值一切颜色走令牌防止风格漂移避免脱离 tokens.css 独立重定义 Tailwind 或设计令牌值Tailwind 主题只能做映射参考 design-systems/bento/tailwind-v4.css 的theme桥接模式不能另起炉灶避免声称存在原始上游来源证据本包基于随包整理的 bundled fixture不是对上游品牌仓库/官网的新爬取design-systems/bento/source/evidence.md 有明确声明避免添加 components.html 或 DESIGN.md 中不存在的组件配方新增组件必须先有对应的参考 fixture 或设计文档支撑否则会破坏包的可审计性。八、反模式清单DESIGN.md 的十条红线design-systems/bento/DESIGN.md 在章节 28 分别给出色彩、排版、间距栅格、布局构成、组件、动效交互、语气品牌的具体约束并在末尾列出四条反模式Anti-patterns不要在有现成令牌可解决问题时引入调色板之外的色彩不要用相同字号/字重铺满所有文本而压平层级不要添加降低可读性或可访问性的装饰性效果不要在同一个界面混用互不相关的视觉隐喻。这四条与 USAGE.md 的 Avoid 相互呼应前者管「视觉意图层」后者管「工程执行层」两层共同保证 Bento 风格的输出既统一又可维护。九、在 OpenDesign 工作流中如何落地综合上述内容Agent 在 OpenDesign 中消费 Bento 包的推荐落地流程为初始化令牌将 design-systems/bento/tokens.css 的:root块完整粘贴进 artifact 首个style块复用组件对照 design-systems/bento/components.manifest.json 的组件组buttons/inputs/cards/badges/links/typography/layout挑选已有配方需要精确选择器或状态时参考 design-systems/bento/components.html遵守层级纪律主操作走--accent正文走--fg次要信息走--muted/--fg-2背景走--surface/--bg反馈走--success/--warn/--danger保证交互可达焦点环用--focus-ring动效用--motion-fast150ms--ease-standardhover/active 派生色用--accent-hover/--accent-active视觉核验需要时打开preview/三页或system/kit.html做人工对比接受评审约束不得引入裸色值、不得绕过 tokens.css 重定义主题、不得添加无 fixture 支撑的新组件、不得声称上游原始来源。遵循上述流程Agent 产出的页面即可稳定保持 Bento 风格家族的可辨识度同时满足 OpenDesign 评审者对令牌契约、组件复用与来源可审计的全部要求。【免费下载链接】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 Bento 设计系统使用指南：Agent 与评审者的设计系统 2.0 包契约
OpenDesign Bento 设计系统使用指南Agent 与评审者的设计系统 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-designOpenDesign 仓库以「设计系统包Design System Package」的形式为编码 Agent 提供可复用的视觉风格资产。design-systems/bento/下的 Bento 包即是其中之一它的核心价值在于让 Agent 在生成页面时能够遵循一套与现代 Bento 风格一致的设计令牌Design Tokens与组件规范同时保证输出可被人类评审者核验。本文以该包的使用文档design-systems/bento/USAGE.md为主体结合包内的令牌、组件清单与源码级证据完整讲解 Bento 包的契约结构、令牌体系、组件清单、正确使用姿势与必须避开的反模式帮助读者在 OpenDesign 工作流中直接、合规地消费这个设计系统包。一、Bento 包是什么一个「包契约」而非单纯的样式文件Bento 包在 design-systems/bento/manifest.json 中被定义为od-design-system-project/v1规范下的标准设计系统项目类别为Layout Structure布局与结构其定位是Bundled OpenDesign package for Bento, derived from curated DESIGN.md, tokens.css, and components.html fixtures.也就是说Bento 包并非对某个外部品牌仓库的实时爬取结果而是基于 OpenDesign 官方整理的bundled fixture随包打包的基准文件生成的。这一点在包的元数据source.type: bundled、source.origin: OpenDesign curated bundled fixture以及 design-systems/bento/source/evidence.md 中都有明确声明This Design System 2.0 backfill is derived from the curated OpenDesign bundled fixture. It does not claim a fresh crawl of the original upstream brand repository or website.理解这一点非常重要使用 Bento 包时不应声称其样式来自某个外部原始品牌站点它代表的是 OpenDesign 内部整理并长期维护的风格基准。从 manifest 可以看出包内各文件的分工files字段字段文件职责designDESIGN.md视觉意图、约束与反模式tokenstokens.css设计令牌的权威样式源designTokensdesign-tokens.json令牌的结构化 JSON 派生产物tailwindtailwind-v4.cssTailwind v4 主题绑定派生产物componentscomponents.html组件参考 fixture精确选择器与状态componentsManifestcomponents.manifest.json紧凑的组件清单usageUSAGE.md包使用指南本文主体preview.dirpreview/颜色/排版/间距的视觉预览页二、推荐阅读顺序消费 Bento 包的五个步骤design-systems/bento/USAGE.md 给出了明确的阅读顺序这是 Agent 与评审者消费本包的标准流程先读 USAGE.md本文理解包契约的整体约定再读 design-systems/bento/DESIGN.md掌握视觉意图、约束与反模式将 design-systems/bento/tokens.css 的内容粘贴到首个 artifact 的style块中之后再编写组件 CSS——令牌先行避免组件样式各自为政使用 design-systems/bento/components.manifest.json 获取紧凑的组件清单当需要精确的选择器或状态细节时打开 design-systems/bento/components.html需要视觉核验时检查preview/目录下的预览页面preview/colors.html、preview/typography.html、preview/spacing.html。这套顺序的本质是「先契约、后意图、再令牌、次清单、终预览」的层层递进保证 Agent 在动笔写任何 CSS 之前风格地基已经就位。三、设计要点Bento 的视觉基调Bento 包的设计定位总结在 design-systems/bento/DESIGN.md 中并在 USAGE.md 的 Design Highlights 中浓缩为三条Visual style视觉风格modern, clean现代、清爽Color stance色彩立场primary, neutral, success, warning, danger主色、中性、成功、警告、危险五类语义色Design intent设计意图保持输出对该风格家族可辨识的同时兼顾可用性与可读性。DESIGN.md 对视觉主题的描述更为形象模块化网格布局 卡片式块card-like blocks 清晰层级 柔和间距 微妙的视觉对比目标是构建「organized, scannable interfaces组织有序、可快速扫读的界面」。在 design-systems/bento/components.html 的 meta description 中这一风格被进一步描述为「modular bento interface with friendly tiles, soft borders, and balanced product density友好瓦片、柔和边框、均衡的产品密度」。3.1 色彩语义DESIGN.md 声明值DESIGN.md 给出的是风格层面style foundations的语义色供理解意图使用语义色值用法建议Primary#FAD4C0CTA 强调Attention 焦点Secondary#80A1C1次级强调Success / Warning / Danger#16A34A/#D97706/#DC2626状态语义色Surface#FFF5E6大面积背景与卡片Text#111827正文文字保证可读性Neutral#FFF5E6由 surface token 派生用于官方格式兼容DESIGN.md 同时给出了三条色彩使用建议Primary 用于 CTA 强调Surface 用于大面积背景与卡片正文一律使用 Text 色以保证可读性。3.2 实际令牌以 tokens.css 为准需要特别区分的是DESIGN.md 中的色值是风格层面的描述而 design-systems/bento/tokens.css 中的:root令牌块才是实际编码时直接引用的权威值importMode: normalizedmanifest 中已声明。tokens.css 实际落地为浅色系 Bento 风格如--bg: #f5f8ff、--accent: #2563eb两者并不冲突——DESIGN.md 描述家族风格意图tokens.css 提供该包实际分发的令牌绑定。USAGE.md 的规则明确要求禁止在复制的:root令牌块之外使用裸十六进制色值所有颜色都必须走令牌。四、令牌体系深度解析56 个结构化令牌design-systems/bento/tokens.css 是 Bento 包的令牌权威源共声明 56 个 CSS 自定义属性分为四大类4.1 颜色令牌Color身份层identity--bg: #f5f8ff、--surface: #ffffff、--fg: #101828、--muted: #667085、--border: #d7e0ef、--accent: #2563eb槽位层slot--surface-warm: #eaf1ff、--fg-2: #344054、--meta: #2563eb、--border-soft: #edf2f8派生层A2--accent-on: #ffffff、--success: #16a34a、--warn: #f59e0b、--danger: #ef4444。值得注意的现代 CSS 技巧--accent-hover与--accent-active使用color-mix(in oklab, var(--accent), black 8%/14%)在OKLab 色彩空间中由主色动态派生避免了手写两套 hover/active 色值也让派生色与主色在感知上保持一致。4.2 字体与排版令牌Typography字体族--font-display: Inter, system-ui, sans-serif、--font-body: Inter, ...、--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。4.3 间距与栅格令牌Spacing Grid间距阶梯--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: 1180pxgutter 分三档36px / 24px / 16pxdesktop/tablet/phone。4.4 圆角、投影与动效令牌Radius / Elevation / Motion圆角--radius-sm: 10px、--radius-md: 16px、--radius-lg: 24px、--radius-pill: 9999px投影--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)细描边、--elev-raised: 0 20px 52px rgba(16, 24, 40, 0.11)悬浮卡片、--focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.22)焦点环动效--motion-fast: 150ms、--motion-base: 240ms、--ease-standard: cubic-bezier(0.2, 0, 0, 1)。4.5 令牌分层与契约审计token-contract.report.jsondesign-systems/bento/source/token-contract.report.json 记录了每个令牌的分层归属layer与契约背书confidence: high。56 个令牌全部分布在四个层A1-identity8 个品牌身份层如--bg、--surface、--fg、--muted、--accent、字体族等A1-structure18 个结构层如字号阶梯、行高、section 节奏、容器宽度等B-slot4 个槽位层如--surface-warm、--fg-2、--meta、--border-softA226 个派生层如 hover/active 派生色、状态色、间距、圆角、投影、动效等。该报告给每个令牌都标注了sources精确到tokens.css的行号如tokens.css:7并给出汇总评分score: 100 / grade: excellent、recommendRebuild: false。这说明包的令牌契约完整、无需重建。依据 design-systems/bento/source/evidence.mddesign-tokens.json与tailwind-v4.css均为派生产物应基于报告与 tokens.css 重新生成而不是手工编辑——这是保证跨品牌切换可靠性的关键纪律。4.6 派生产物一design-tokens.jsondesign-systems/bento/design-tokens.json 是令牌的结构化 JSON 视图format: od-design-tokens/v1把 CSS 变量映射为带类型的令牌对象如--bg的type: color、--text-sm的type: dimension、--elev-raised的type: shadow、--motion-fast的type: duration、--ease-standard的type: cubicBezier并记录每个令牌的 layer、confidence 与 sources 行号。这份 JSON 适合被工具链读取是「机器可读的令牌契约」。4.7 派生产物二tailwind-v4.cssdesign-systems/bento/tailwind-v4.css 展示了如何把 tokens.css 桥接到 Tailwind CSS v4 的theme指令/* Derived from tokens.css. Keep tokens.css as the source of truth. */ import tailwindcss; import ./tokens.css; theme { --color-bg: var(--bg); --color-accent: var(--accent); --color-success: var(--success); --font-display: var(--font-display); --text-2xl: var(--text-2xl); --spacing-4: var(--space-4); --radius-md: var(--radius-md); --shadow-raised: var(--elev-raised); --duration-fast: var(--motion-fast); --ease-standard: var(--ease-standard); /* ... */ }文件头注释明确写着Keep tokens.css as the source of truth——tokens.css 是唯一权威源Tailwind 主题只是它的映射层。这与 USAGE.md 中「不要脱离 tokens.css 单独重定义 Tailwind 或设计令牌值」的规则完全一致使用theme做桥接、而非重造。五、组件清单components.manifest.json 与 components.html5.1 清单统计manifest 提取的事实design-systems/bento/components.manifest.json 是对 design-systems/bento/components.html 的自动提取结果记录了 fixture 的规模与令牌引用关系fixture 规模1 个style块、48 个选择器、26 个类名、19 个元素类型令牌健康度declared已声明与referenced被引用各 56/55 项undeclaredReferenced: []不存在未声明却被引用的令牌——引用面完全闭合unusedDeclared列出了声明但未被组件引用的令牌如--accent-active、--danger、--elev-flat、--motion-base、--space-1、--space-12、--warn这些令牌为组件外使用预留选择器覆盖.btn、.btn-primary、.btn-secondary、.field、input:focus、.panel、.tile、.metric、.status、.eyebrow、.lead、.hero、.container、.stack、.card-row、.mini-card等组件组groups清单将组件归为 9 个组其中 7 组存在、2 组keyboard、icons不存在。5.2 八个组件组的令牌依赖清单为每个组件组记录了完整的tokenReferences这相当于「组件 ↔ 令牌」的依赖图谱组件组状态关键选择器/类引用的核心令牌buttons存在.btn、.btn-primary、.btn-secondary、:hover、:focus-visible--accent、--accent-on、--border、--elev-ring、--radius-md、--space-5、--motion-fast、--ease-standardinputs存在.field、input、input:focus、label--border、--radius-sm、--space-2/4/5、--surfacecards存在.card-row、.panel、.panel-head、.tile--border、--elev-raised、--radius-lg、--surfacebadges存在.status无选择器条目—组件独立令牌引用为空links存在元素a—keyboard不存在——icons不存在——typography存在.eyebrow、.lead、h1、h2、h3--fg-2、--text-4xl、--text-xl、--text-lglayout存在.container、section、main、.metric-grid--container-gutter-phone/tablet、--section-y-desktop此外清单还统计了literals组件样式中有 3 处颜色表达式、24 处像素值、4 处硬编码字体族——这些是评审时值得留意的「未走令牌」痕迹。5.3 参考 fixture 的实战要点components.htmldesign-systems/bento/components.html 是完整的可运行参考页其关键实现要点可以直接复用到自己的 artifact 中按钮主按钮用background: var(--accent)color: var(--accent-on)hover 用var(--accent-hover)并translateY(-1px)次按钮用var(--surface)var(--elev-ring)描边两者共享min-height: 44px的触达尺寸与transition150ms --ease-standard并通过.btn:focus-visible { box-shadow: var(--focus-ring) }提供键盘焦点反馈输入框.field使用 grid 布局管理 label 与 input 的间距input:focus时border-color: var(--accent)var(--focus-ring)卡片与面板.panel使用color-mix(in oklab, var(--surface), transparent 4%)的半透明表面 --elev-raised悬浮投影 --radius-lg内部.metric-grid三列均分、.card-row两列均分状态徽章.status用等宽字体 大写 字距配合.status::before的 8px 圆点--radius-pill--success表示在线状态响应式断点max-width: 1023px时容器 gutter 降为 tablet 档、section 纵向节奏降为 tablet 档max-width: 860px时 hero/lower/metric-grid/card-row 全部坍缩为单列max-width: 639px时进入 phone 档。六、预览页与系统页视觉核验途径包的preview/目录提供三个自包含的视觉预览页供快速核验令牌效果colorspreview/colors.html、typographypreview/typography.html、spacingpreview/spacing.html。manifest 的preview.pages字段为每页标注了 rolecolors/typography/spacing与 title机器可读。此外system/目录包含系统级展示页system/index.html、system/kit.html、system/kit.dark.html以及 system/tokens.default.json用于查看整套系统的组件套件形态。其中kit.dark.html的存在表明该包也维护了深色套件的展示形态。七、使用纪律Do 与 Avoid包契约的红线design-systems/bento/USAGE.md 用最精炼的方式划定了 Agent 与评审者的行为边界这是本包契约的执行层面核心7.1 应当做Do完整保留 schema 令牌名称跨品牌切换的可靠性建立在令牌名一致之上——品牌 A 与品牌 B 的包都叫--accent、--surface切换时只需换令牌块组件代码零改动用--accent表达主操作主操作、链接、焦点状态以及页面中唯一清晰的焦点元素都应落在--accent上先复用组件组再发明新控件遇到新需求时优先在 design-systems/bento/components.manifest.json 的组件组中寻找可复用的组而不是凭空造新控件把source/目录当作审计证据source/evidence.md、source/token-contract.report.json、source/tokens.source.json是随包回填fixture backfill的审计依据评审时以此核验令牌来源。7.2 应当避免Avoid避免在复制的:root令牌块之外使用裸十六进制值一切颜色走令牌防止风格漂移避免脱离 tokens.css 独立重定义 Tailwind 或设计令牌值Tailwind 主题只能做映射参考 design-systems/bento/tailwind-v4.css 的theme桥接模式不能另起炉灶避免声称存在原始上游来源证据本包基于随包整理的 bundled fixture不是对上游品牌仓库/官网的新爬取design-systems/bento/source/evidence.md 有明确声明避免添加 components.html 或 DESIGN.md 中不存在的组件配方新增组件必须先有对应的参考 fixture 或设计文档支撑否则会破坏包的可审计性。八、反模式清单DESIGN.md 的十条红线design-systems/bento/DESIGN.md 在章节 28 分别给出色彩、排版、间距栅格、布局构成、组件、动效交互、语气品牌的具体约束并在末尾列出四条反模式Anti-patterns不要在有现成令牌可解决问题时引入调色板之外的色彩不要用相同字号/字重铺满所有文本而压平层级不要添加降低可读性或可访问性的装饰性效果不要在同一个界面混用互不相关的视觉隐喻。这四条与 USAGE.md 的 Avoid 相互呼应前者管「视觉意图层」后者管「工程执行层」两层共同保证 Bento 风格的输出既统一又可维护。九、在 OpenDesign 工作流中如何落地综合上述内容Agent 在 OpenDesign 中消费 Bento 包的推荐落地流程为初始化令牌将 design-systems/bento/tokens.css 的:root块完整粘贴进 artifact 首个style块复用组件对照 design-systems/bento/components.manifest.json 的组件组buttons/inputs/cards/badges/links/typography/layout挑选已有配方需要精确选择器或状态时参考 design-systems/bento/components.html遵守层级纪律主操作走--accent正文走--fg次要信息走--muted/--fg-2背景走--surface/--bg反馈走--success/--warn/--danger保证交互可达焦点环用--focus-ring动效用--motion-fast150ms--ease-standardhover/active 派生色用--accent-hover/--accent-active视觉核验需要时打开preview/三页或system/kit.html做人工对比接受评审约束不得引入裸色值、不得绕过 tokens.css 重定义主题、不得添加无 fixture 支撑的新组件、不得声称上游原始来源。遵循上述流程Agent 产出的页面即可稳定保持 Bento 风格家族的可辨识度同时满足 OpenDesign 评审者对令牌契约、组件复用与来源可审计的全部要求。【免费下载链接】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），仅供参考
