OpenDesign 中的 Cohere 设计系统包使用指南：Design System 2.0 契约、Token 与组件落地

OpenDesign 中的 Cohere 设计系统包使用指南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-design本指南以 design-systems/cohere/USAGE.md 为骨架系统讲解 OpenDesign 仓库中「Cohere」设计系统包Design System 2.0的完整使用契约从文件阅读顺序、包内文件职责到tokens.css的 Token 绑定、components.manifest.json的组件清单以及面向 Agent 与代码评审者的 Do / Avoid 约束。读完本文你将掌握如何在 OpenDesign 中正确引用该品牌包生成符合 Cohere 视觉语言的 artifact并理解其背后的 schema 校验与契约机制。一、包定位与阅读顺序先读 USAGE再动手design-systems/cohere/USAGE.md是整个 Cohere 包面向「OpenDesign agents and reviewers」的入口文档。它不重复视觉细节而是约定一套固定的阅读与消费顺序保证任何 Agent 拿到该包时都能以同一套心智模型工作先读USAGE.md理解包契约package contract——即本指南所依据的文件。再读DESIGN.md获取视觉意图visual intent、约束constraints与反模式anti-patterns。该文件位于 design-systems/cohere/DESIGN.md正文以「Design System Inspired by Cohere」为题类别为 AI LLM完整描述了主题氛围、调色板、排版层级、组件样式、布局、响应式行为以及 Agent Prompt Guide。把tokens.css粘贴进第一个 artifact 的style块之后再写组件 CSS——Token 是唯一事实来源。使用 design-systems/cohere/components.manifest.json 作为紧凑型组件清单当需要精确选择器exact selectors或状态states时打开 design-systems/cohere/components.html。需要视觉抽查visual sanity check时翻阅 preview/ 下的静态预览页。从包清单 design-systems/cohere/manifest.json 可以看到该包遵循od-design-system-project/v1schemausage字段指向USAGE.mdimportMode为normalized并声明了craft建议项color、accessibility-baseline与三个 preview 页面preview/colors.html、preview/typography.html、preview/spacing.html。二、设计亮点Cohere 视觉签名的四个支柱USAGE.md用四条要点概括 Cohere 品牌包的视觉基因它们在DESIGN.md中有完整展开明亮白色画布 冷灰边框页面主体为 Pure White#ffffff边框使用 Border Cool#d9d9dd与 Lightest Gray#f2f2f2营造企业级清爽感。22px 签名圆角这是最独特的 Cohere card 圆润度。DESIGN.md强调THE Cohere radius所有主卡片、主图片与主容器都必须使用 22px而不是常见的 8–12px。双字体系统CohereTextdisplay 衬线体用于大标题与 Unica77正文无衬线体Swiss 几何风格形成权威感与工程清晰度并存的品牌人格。企业级色彩克制整体几乎只有黑、白、冷灰配合极少的紫蓝强调色Interaction Blue#1863dc只出现在 hover/focus 交互态。DESIGN.md还补充了深紫 hero 全宽色带、ghost/透明按钮 hover 变蓝、CohereMono 大写代码标签等特征。该品牌包的 source/evidence.md 明确说明此包基于 OpenDesign 策展的 bundled fixture 派生不主张来自上游品牌仓库或官网的全新爬取证据——USAGE.md的 Avoid 列表也要求不要声称原始上游源码证据。三、Token 契约tokens.css 是唯一事实来源USAGE.md的 Do 列表第一条就是「Preserve the schema token names exactly so cross-brand switching stays reliable」即精确保留 schema token 名称以保证跨品牌切换的可靠性。承载这一契约的是 design-systems/cohere/tokens.css其:root块按语义分区分组共 56 个 TokenSurface--bg: #ffffff、--surface: #fafafaSnow、--surface-warm: var(--surface)无暖色层调色板严格冷调。Foreground--fg: #000000Cohere Black、--fg-2: #212121Near Black、--muted: #93939fMuted Slate、--meta: var(--muted)。Border--border: #d9d9ddBorder Cool、--border-soft: #f2f2f2Lightest Gray。Accent--accent: #1863dcInteraction Blue仅用于 hover/focus从不作为 ambient 常驻色、--accent-on: #ffffff、--accent-hover: color-mix(in oklab, var(--accent), black 8%)、--accent-active: color-mix(in oklab, var(--accent), black 16%)。Semantic 状态色--success: #16a34a、--warn: #eab308、--danger: #ef4444——保留给状态而非装饰。Typography--font-displayCohereText → Space Grotesk → Inter → system-ui、--font-bodyUnica77 → Inter → Arial、--font-monoCohereMono → JetBrains Mono字号阶梯--text-xs: 12px到--text-4xl: 72px--leading-tight: 1.0、--tracking-display: -0.02em≈ 72px 时的 -1.44px 负字距。Spacing8px 基准单位--space-1: 4px至--space-12: 48px区块节奏--section-y-desktop: 60px/--section-y-tablet: 48px/--section-y-phone: 32px。Radius--radius-sm: 8px对话框、导航、--radius-md: 22px主签名圆角、--radius-lg: 22px大型容器同款、--radius-pill: 9999px按钮与状态标签。Elevation / Focus / Motion / Layout--elev-flat: none、--elev-ring1px 细描边、--elev-raised极轻 hover 阴影、--focus-ring: 0 0 0 2px var(--accent)、--motion-fast: 150ms、--motion-base: 200ms、--ease-standard: cubic-bezier(0.2, 0, 0, 1)、--container-max: 1440px及桌面/平板/手机三档 gutter32/24/16px。USAGE.md的 Avoid 列表要求不要使用复制的:rootToken 块之外的原始 hex 值也不要脱离tokens.css独立重定义 Tailwind 或 design-token 值。这正是 Token 契约的意义OpenDesign 用TOKEN_SCHEMA约束每个 Token 的名称、类型、层级与来源。Token 的机器可验证证据design-systems/cohere/design-tokens.json 是od-design-tokens/v1格式的派生产物其摘要显示56 个 Token 全部有源码支撑sourceBackedTokens: 56层级分布为 A1-identity8、A1-structure18、A226、B-slot4契约得分 100、评级 excellent。其中 B-slot 仅 4 个--surface-warm、--fg-2、--meta以及 alias其余为 A1/A2 原始定义。design-systems/cohere/source/token-contract.report.json 把每一个 TOKEN_SCHEMA 绑定映射回tokens.css的具体声明行例如--bg→tokens.css:21、--radius-md→tokens.css:98。按照 source/evidence.md 的说明design-tokens.json与tailwind-v4.css均为派生输出应由报告与 Token 样式表重新生成而不是手工编辑。Tailwind v4 桥接层若你在 artifact 中使用 Tailwind v4design-systems/cohere/tailwind-v4.css 提供了标准的桥接方式文件头明确标注 Derived from tokens.css. Keep tokens.css as the source of truth.随后import tailwindcss、import ./tokens.css并在theme块内把 Token 逐一映射为 Tailwind 命名空间--color-bg: var(--bg)、--color-accent: var(--accent)、--radius-md: var(--radius-md)、--shadow-focus-ring: var(--focus-ring)等。这样既能在 Tailwind 工具类中使用bg-bg、text-muted、rounded-md等又保证值仍由tokens.css单一来源驱动与 Avoid 约束一致。四、组件清单components.manifest.json 与 components.htmlUSAGE.md推荐优先使用components.manifest.json作为紧凑清单仅在需要精确选择器或状态时打开components.html。清单本身是一份可重建的缓存manifest.json 中的componentsManifest字段由components.html加tokens.css派生而来包含fixture 元数据1 个style块、48 个选择器、25 个 class、25 个元素。Token 使用审计declared56 个已声明 Token、referenced组件实际引用的 Token、unusedDeclared已声明但未在 fixture 中引用的如--danger、--warn、--elev-*、--radius-lg等、undeclaredReferenced空数组——说明组件没有引用任何未声明的 Token契约干净。组件分组groupsbuttons、inputs、cards、badges、links、keyboard、icons、typography、layout 共 9 组每组列出选择器、class、元素与所引用的 Token。例如 buttons 组引用--accent、--fg-2、--focus-ringbadges 组引用--muted、--radius-pill、--space-2、--text-xslayout 组引用--container-max、--container-gutter-*、--space-3、--space-6等。选择器与类名全集如.btn/.btn-primary/.btn-primary:hover/.btn-secondary/.btn:focus-visible、.card、.field、.badge、.eyebrow、.lead、.hero-grid、.features-grid、.stack-3/4/6等。对应地design-systems/cohere/components.html 是独立的组件 fixture 页面其style块内联了与tokens.css一致的:rootToken 定义再按 48 个选择器组织真实可用的组件样式。当需要确认某个状态如:focus-visible焦点环、hover 变蓝或精确选择器写法时直接查这个文件比猜更可靠。组合预览页需要视觉抽查时preview/ 提供三个独立静态页面colors.html颜色、typography.html排版、spacing.html间距对应 manifest.json 中 preview 数组声明的三个 role。它们是纯静态 HTML可直接在浏览器打开。五、排版与色彩实操DESIGN.md 的关键数值虽然USAGE.md不重复视觉细节但作为包契约的一部分引用DESIGN.md中的关键规格能让 Token 使用更准确DESIGN.md的 Agent Prompt Guide 一节也提供了可直接复用的 prompt 片段显示层级Hero 用 CohereText 72px / weight 400 / line-height 1.0 / letter-spacing -1.44pxDisplay Secondary 60px-1.2pxSection Heading 48pxSub-heading 32px-0.32pxFeature Title 24px。正文层级Body Large 18px、Body/Button 16pxline-height 1.5、Button Medium 14px weight 500、Caption 14px、Uppercase Label 14pxletter-spacing 0.28px、Small 12px、Code Micro 8px。按钮三态Ghost透明底、Cohere Black 文字hover 时文字转 Interaction Blue 且 opacity 0.8focus 为 2px 实线 Interaction Blue outline、Dark Solid深底白字 CTA、Outlined描边次级操作。深度与阴影哲学Cohere 几乎无阴影层级靠背景色对比白色卡片置于紫色 band 之上与冷灰边框传达--elev-raised也只是极轻的 6% 黑色阴影。间距与断点8px 基准单位卡片内边距约 24–32px区块间距 56–60px且不得低于 40px响应式断点从 425px 到 1440–2560px数据集中检测到 26 个断点属于颗粒度最细的一档。六、Do 与 AvoidAgent 与评审者的验收清单USAGE.md用 Do / Avoid 两段给出可直接照做的行为准则这是代码评审review时的主要依据Do应做精确保留 schema token 名称确保跨品牌切换cross-brand switching时映射稳定。使用--accent承担主操作、链接、焦点状态以及页面上唯一明确的焦点元素one clear focal element。优先复用 components.manifest.json 中的组件分组而不是自行发明新控件。把source/下的文件当作审计证据用于 bundled fixture 回填backfill的核验。Avoid应避免避免在复制的:rootToken 块之外使用原始 hex 值——一切颜色必须走 Token。避免独立于tokens.css重定义 Tailwind 或 design-token 值——单一事实来源不可破坏。避免声称原始上游源码证据——本包基于 OpenDesign 策展的 bundled fixturesource/evidence.md 对此有明确声明。避免添加components.html或DESIGN.md未覆盖的新组件配方——新增组件必须能追溯到现有 fixture 或设计文档。DESIGN.md的 Dos and Donts 进一步补充了视觉层面的红线主卡片圆角只用 22px、不引入暖色、不用重阴影、正文不用 700 字重、紫色只用于全宽 section 而不用作卡片表面色、区块间距不低于 40px、按钮默认即 ghost 态不加装饰。七、包契约的底层机制schema 与守护脚本Cohere 包之所以能被 Agent 与 LLM 可靠消费根因在于 OpenDesign 用 schema 与守护脚本把它钉死为标准形状。仓库 design-systems/_schema/AGENTS.md 说明每个 tokenized brand 必须满足TOKEN_SCHEMA契约规范运行时副本在 packages/contracts 下项目清单形状由manifest.schema.ts约束任何已存在的design-systems/brand/manifest.json都由 scripts/check-design-system-manifests.ts 校验。Cohere 包的manifest.json完全符合该约定schemaVersionod-design-system-project/v1固定文件名DESIGN.md/tokens.css/components.html/USAGE.md/components.manifest.json/source/等。从manifest.json的source字段type:bundledorigin: OpenDesign curated bundled fixture可以看出该包属于策展打包而非实时爬取这与 USAGE 中不得声称原始上游证据的约束互为印证。此外manifest 声明importMode: normalized说明导入时做了规范化处理craft.applies为空、craft.suggested建议color与accessibility-baseline两条 craft 规范供生成阶段的后续约束参考。八、多语言与其余配套文件除DESIGN.md英文版外该包还提供 15 种本地化设计说明DESIGN-zh.md、DESIGN-ja.md、DESIGN-ko.md、DESIGN-ar.md、DESIGN-de.md、DESIGN-es.md、DESIGN-fr.md、DESIGN-id.md、DESIGN-it.md、DESIGN-nl.md、DESIGN-pl.md、DESIGN-pt-br.md、DESIGN-ru.md、DESIGN-tr.md、DESIGN-uk.md、DESIGN-vi.md、DESIGN-zh-tw.md便于不同语言场景下的 Agent 与评审者阅读。source/目录内还包含tokens.source.json导入时的原始 Token 快照与token-contract.report.json、evidence.md共同构成可审计的溯源链。结语Cohere 是 OpenDesign Design System 2.0 体系中具有鲜明签名22px 圆角、双字体、冷调克制的色彩的品牌包。使用它的正确姿势是先读 USAGE.md 理解契约再读 DESIGN.md 把握视觉意图将 tokens.css 作为唯一 Token 来源以 components.manifest.json 与 components.html 为准复用组件并用 preview/ 做最终视觉核验。严格遵循 Do / Avoid 清单就能保证产物既符合 Cohere 品牌语言又满足 OpenDesign 的 schema 契约与跨品牌切换的稳定性要求。【免费下载链接】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），仅供参考