OpenDesign Dashboard 设计系统包实战指南从契约读取到 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本指南以 OpenDesign 仓库中design-systems/dashboard的 USAGE.md 为核心骨架面向使用该包的 OpenDesign Agent 与代码评审者系统讲解 Dashboard云平台风格仪表盘设计系统包的消费顺序、视觉意图、56 个设计 Token 的完整契约、组件清单与禁用项。读完本文你将掌握如何把该包接入 Artifact 生成流程并理解其背后的 Design System 2.0 契约体系。包结构与文件地图design-systems/dashboard是一个标准的 OpenDesign Design System Project 包遵循_schema/AGENTS.md定义的 v1 项目契约。完整文件布局如下design-systems/dashboard/ ├── USAGE.md # Agent 使用指南本文主体 ├── DESIGN.md # 视觉意图、约束与反模式 ├── tokens.css # 权威 Token 声明56 个 CSS 自定义属性 ├── design-tokens.json # 由 tokens.css 契约报告派生的 JSON 输出 ├── tailwind-v4.css # Tailwind v4 theme 派生文件 ├── components.html # 独立组件参考夹具48 个选择器、26 个类 ├── components.manifest.json # 组件清单缓存 ├── manifest.json # 机器可读的项目入口od-design-system-project/v1 ├── preview/ # colors / typography / spacing 静态预览页 └── source/ # 导入证据evidence.md、tokens.source.json、token-contract.report.json该包的类型是bundledmanifest.json中明确其来源为 OpenDesign 官方策划的打包夹具curated bundled fixture而非对上游品牌仓库的实时抓取。包内各文件职责清晰DESIGN.md是设计散文canonical design prosetokens.css是编译后的权威 Tokencomponents.html是组件夹具source/目录则充当打包回填fixture backfill的审计证据。阅读顺序如何正确消费这个包USAGE.md 规定了一套固定的读取顺序这是 Agent 与评审者理解包契约的最短路径先读本指南USAGE.md建立包契约的整体认知再读DESIGN.md理解视觉意图、约束与反模式anti-patterns把tokens.css粘贴到第一个 Artifact 的style块中且必须放在编写任何组件 CSS 之前用components.manifest.json获取紧凑的组件清单当需要精确选择器或状态细节时打开components.html需要视觉核验时检查preview/目录下的预览页colors.html、typography.html、spacing.html。这套顺序的核心逻辑在于先契约、后实现Token 是一切组件样式的底座先粘贴:rootToken 块后续所有组件 CSS 才有可引用的变量这也是为什么步骤 3 被特意强调为编写组件 CSS 之前的硬性前提。设计特点与视觉意图根据 DESIGN.mdDashboard 包归属于Professional Corporate类别核心定位是深色云平台美学Heroku/Vercel/GitHub 风格启发、模块化网格、玻璃质感面板、面向生产力仪表盘的强数据层级。视觉风格现代、干净、云平台审美深色主题、微妙渐变、柔和阴影、类玻璃面板、圆角组件色彩立场primary、neutral、success、warning、danger 五类语义色设计意图让输出对该风格家族保持高辨识度同时不牺牲可用性与可读性主色锚点Primary 为#0C5CAB来源于风格基础的 Token。需要特别留意的是DESIGN.md中的主色#0C5CAB属于风格家族锚点色而tokens.css中实际绑定的--accent值为#0ea5e9sky-500 系亮蓝。二者并存是有意为之——前者表达品牌家族意图后者是打包夹具中组件实际消费的插槽值。在使用时以tokens.css的:root块为准。Token 契约56 个 CSS 自定义属性全解析tokens.css是包的权威 Token 来源共声明 56 个变量全部位于:root中按用途可分为六组1. 色彩 TokenColorToken值语义--bg#f4f7fb页面背景浅冷灰蓝--surface#ffffff卡片/面板表面--surface-warm#eef6ff暖色表面插槽--fg#111827主前景文字近黑--fg-2#334155次级文字--muted#64748b弱化文字--meta#0ea5e9元信息强调色--border#d8e2ee常规边框--border-soft#edf3f8柔和边框--accent#0ea5e9品牌强调色主行动--accent-on#04131d强调色之上的文字色--accent-hovercolor-mix(in oklab, var(--accent), black 8%)悬停态--accent-activecolor-mix(in oklab, var(--accent), black 14%)按下态--success#10b981成功语义--warn#f59e0b警告语义--danger#ef4444危险语义值得注意的实现细节--accent-hover与--accent-active使用 CSS 原生color-mix(in oklab, ...)从基准色推导而非硬编码第二个 hex 值——这让整套强调色系可以在未来跨品牌切换时保持同一推导逻辑。2. 字体 TokenFont--font-display、--font-bodyInter, system-ui, sans-serif--font-monoIBM Plex Mono, ui-monospace, Menlo, monospace即显示字体与正文字体统一采用 Inter 系等宽字体采用 IBM Plex Mono 系。DESIGN.md中记录的 9 档字重100–900说明该包支持完整的 Inter 字重梯度。3. 字号与行高Type Scale--text-xs: 11px、--text-sm: 13px、--text-base: 15px、--text-lg: 17px、--text-xl: 22px、--text-2xl: 30px、--text-3xl: 42px、--text-4xl: 56px行高--leading-body: 1.48、--leading-tight: 1.1标题字距--tracking-display: -0.015em。4. 间距与区块节奏Spacing Section8pt 基准网格--space-1: 4px至--space-12: 48px含 4/8/12/16/20/24/32/48区块纵向节奏按断点分层--section-y-desktop: 84px、--section-y-tablet: 60px、--section-y-phone: 42px。5. 圆角与阴影Radius Elevation圆角四档--radius-sm: 8px、--radius-md: 12px、--radius-lg: 18px、--radius-pill: 9999px阴影三档--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)细描边、--elev-raised: 0 18px 46px rgba(15, 23, 42, 0.10)柔和浮起焦点环--focus-ring: 0 0 0 4px rgba(14, 165, 233, 0.22)。6. 动效与容器Motion Container动效--motion-fast: 120ms、--motion-base: 200ms、--ease-standard: cubic-bezier(0.2, 0, 0, 1)容器--container-max: 1280px三档内边距--container-gutter-desktop: 36px、--container-gutter-tablet: 24px、--container-gutter-phone: 16px。动效时长与缓动曲线直接呼应DESIGN.md的交互章节——150–250ms 的短促过渡 稳定缓动120ms 用于快速反馈hover200ms 用于常规状态切换。分层契约A1 / A2 / B-slot 与 56 个 Token 的来源design-tokens.json与 token-contract.report.json 记录了每个 Token 的分层归属。根据_schema/AGENTS.md定义的 Design System 2.0 四层模型Dashboard 包的 56 个 Token 分布如下层数量含义Dashboard 示例A1-identity8品牌身份层缺失即守卫失败--bg、--surface、--fg、--accent、--font-display等A1-structure18结构层缺失即守卫失败字号刻度、--container-max、--section-y-*、行高A226品牌可带默认值的插槽当前契约要求必须显式声明--success、--warn、--danger、--space-*、--radius-*、--motion-*B-slot4语义插槽品牌可别名到兄弟 Token 或绑定独立值--fg-2、--meta、--surface-warm、--border-soft契约报告给出的质量评分为100excellent56 个声明 Token 全部有tokens.css源码背书sourceBackedTokens56不存在未声明的引用undeclaredReferenced 为空且不需要重建recommendRebuildfalse。报告的sources字段把每个 Token 精确映射回tokens.css的行号如--bg→tokens.css:7这就是每个契约绑定都可审计的机制。关于 A2 与 B-slot 为何强制声明_schema/AGENTS.md给出了清晰的工程理由Artifact 由 Agent 将某个品牌的:root块粘贴进单一style生成不存在随品牌一起加载的全局样式表因此任何缺失的 Token 都会让var(--xxx)静默解析为空、组件样式无声损坏。直到未来的 derive 脚本scripts/derive-tokens-css.ts目前尚不存在落地之前每个品牌必须声明每个共享 Token是唯一安全的契约。组件清单与夹具components.manifest.json是可由components.htmltokens.css重建的缓存记录了夹具的统计信息与组件分组夹具规模1 个style块、48 个选择器、26 个类、19 个元素覆盖html/body、h1–h3、section/main、input/label、a、p/span/strong等基础元素组件分组presenttrue 的组Buttons.btn、.btn-primary、.btn-secondary及 hover/focus-visible 状态引用--accent、--accent-on、--elev-ring、--motion-fast、--radius-md等Inputs.field、input:focus、label引用--border、--radius-sm、--space-*Cards/Panels.card-row、.panel、.panel-head、.tile引用--elev-raised、--radius-lg、--surfaceBadges/Status.status状态标签Links内联aTypography.eyebrow、.lead、h1–h3Layout.container、.metric-grid、section引用--container-gutter-*、--section-y-desktop。未启用的组keyboard键盘提示与 icons图标插槽为 presentfalse即该夹具不含这两类组件。该清单还包含组件级的 Token 引用矩阵每个分组列出了它实际消费的 Token 名以及字面量审计夹具中仅 3 处颜色字面量、24 处像素值、4 处硬编码字体族——其余全部走 Token这正是components.html作为参考夹具的契约纯度体现。与 Tailwind v4 的集成方式tailwind-v4.css是派生文件文件头明确标注Derived from tokens.css. Keep tokens.css as the source of truth从 tokens.css 派生以 tokens.css 为唯一真源。其结构为import tailwindcss; import ./tokens.css; theme { --color-bg: var(--bg); --color-accent: var(--accent); --color-success: var(--success); --font-sans: var(--font-body); --text-xl: var(--text-xl); --spacing-4: var(--space-4); --radius-md: var(--radius-md); --shadow-raised: var(--elev-raised); --duration-base: var(--motion-base); --ease-standard: var(--ease-standard); /* ... */ }它将 56 个 CSS 变量逐一映射为 Tailwind v4 的theme命名空间--color-*、--font-*、--text-*、--spacing-*、--radius-*、--shadow-*、--duration-*、--ease-*从而让bg-accent、text-muted、rounded-lg、shadow-raised等 Tailwind 工具类直接可用。_schema/AGENTS.md强调这类派生文件不得独立于tokens.css重新定义源值防止双源漂移。使用规范Do 与 AvoidUSAGE.md 给出了 Agent 使用该包时的行为约束应当做Do严格保留 schema Token 名称这是跨品牌切换保持可靠性的前提用--accent表达主行动、链接、焦点态并保持页面内有一个清晰的视觉焦点元素优先复用components.manifest.json中的组件分组而非发明新的控件把source/目录文件视为打包夹具回填的审计证据。避免做Avoid避免在拷贝的:rootToken 块之外使用裸 hex 值应始终引用 Token避免独立于tokens.css重新定义 Tailwind 或设计 Token 值防止派生文件与真源漂移不要声称存在原始上游源码证据——本包基于官方策划的打包夹具见 source/evidence.md不要添加components.html或DESIGN.md中不存在的组件配方。这些约束的工程动机与上文的分层契约一脉相承Token 名称是跨品牌契约的公开接口组件配方是夹具覆盖范围的边界source/是证据链。遵守 Do/Avoid产出物才能通过仓库的 design-system 守卫校验如design-system: A2 required tokens、B-slot required tokens 等。视觉风格落地要点结合 DESIGN.md 的组成章节落地该包时还需把握以下设计决策色彩策略CTA 强调用 Primary#0C5CAB家族锚点 /--accent插槽大面积背景与卡片用--surface正文保持--fg的高对比可读性排版层级刻度为 12/14/16/20/24/32对应 Token 的 11–56px 细刻度标题承载风格个性正文优化扫描性与对比度间距网格8pt 基准线区块间保持垂直节奏一致列与模块对齐到可预测的网格杜绝随意偏移布局组合清晰的headline → support text → primary action层级先用留白区分关注点再考虑边框与阴影动效与交互强调--accent作为交互信号150–250ms 短促过渡Token 为 120/200mshover、focus-visible、active、disabled、loading 状态必须显式存在反模式红线不引入 Token 之外的调色板外颜色、不用同一字号字重扁平化层级、不加损害可读性与可达性的装饰效果、不在同一界面混搭无关视觉隐喻。manifest.json中还声明了本包的 craft 建议绑定color与accessibility-baseline对应仓库 craft/color.md 与 craft/accessibility-baseline.md提示使用本包时优先以这两份 craft 规范约束产出。总结Dashboard 设计系统包是 OpenDesign Design System 2.0 体系中打包夹具 严格契约模式的典型样本USAGE.md定义消费顺序与行为边界tokens.css提供 56 个可审计 Tokencomponents.manifest.json提供组件复用清单source/提供证据链manifest.json则把这一切挂接到仓库的 manifest 守卫与运行时目录发现机制见 design-systems/_schema/AGENTS.md。对 Agent 而言正确的接入姿势是先读 USAGE.md 建立契约认知再读 DESIGN.md 把握视觉意图粘贴tokens.css的:root块然后仅从组件清单中取材、严格引用 Token、不越界添加配方——这样产出的仪表盘 Artifact 才能既具备云平台风格家族辨识度又通过仓库的契约守卫。【免费下载链接】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 Dashboard 设计系统包实战指南：从契约读取到 Token 落地
OpenDesign Dashboard 设计系统包实战指南从契约读取到 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本指南以 OpenDesign 仓库中design-systems/dashboard的 USAGE.md 为核心骨架面向使用该包的 OpenDesign Agent 与代码评审者系统讲解 Dashboard云平台风格仪表盘设计系统包的消费顺序、视觉意图、56 个设计 Token 的完整契约、组件清单与禁用项。读完本文你将掌握如何把该包接入 Artifact 生成流程并理解其背后的 Design System 2.0 契约体系。包结构与文件地图design-systems/dashboard是一个标准的 OpenDesign Design System Project 包遵循_schema/AGENTS.md定义的 v1 项目契约。完整文件布局如下design-systems/dashboard/ ├── USAGE.md # Agent 使用指南本文主体 ├── DESIGN.md # 视觉意图、约束与反模式 ├── tokens.css # 权威 Token 声明56 个 CSS 自定义属性 ├── design-tokens.json # 由 tokens.css 契约报告派生的 JSON 输出 ├── tailwind-v4.css # Tailwind v4 theme 派生文件 ├── components.html # 独立组件参考夹具48 个选择器、26 个类 ├── components.manifest.json # 组件清单缓存 ├── manifest.json # 机器可读的项目入口od-design-system-project/v1 ├── preview/ # colors / typography / spacing 静态预览页 └── source/ # 导入证据evidence.md、tokens.source.json、token-contract.report.json该包的类型是bundledmanifest.json中明确其来源为 OpenDesign 官方策划的打包夹具curated bundled fixture而非对上游品牌仓库的实时抓取。包内各文件职责清晰DESIGN.md是设计散文canonical design prosetokens.css是编译后的权威 Tokencomponents.html是组件夹具source/目录则充当打包回填fixture backfill的审计证据。阅读顺序如何正确消费这个包USAGE.md 规定了一套固定的读取顺序这是 Agent 与评审者理解包契约的最短路径先读本指南USAGE.md建立包契约的整体认知再读DESIGN.md理解视觉意图、约束与反模式anti-patterns把tokens.css粘贴到第一个 Artifact 的style块中且必须放在编写任何组件 CSS 之前用components.manifest.json获取紧凑的组件清单当需要精确选择器或状态细节时打开components.html需要视觉核验时检查preview/目录下的预览页colors.html、typography.html、spacing.html。这套顺序的核心逻辑在于先契约、后实现Token 是一切组件样式的底座先粘贴:rootToken 块后续所有组件 CSS 才有可引用的变量这也是为什么步骤 3 被特意强调为编写组件 CSS 之前的硬性前提。设计特点与视觉意图根据 DESIGN.mdDashboard 包归属于Professional Corporate类别核心定位是深色云平台美学Heroku/Vercel/GitHub 风格启发、模块化网格、玻璃质感面板、面向生产力仪表盘的强数据层级。视觉风格现代、干净、云平台审美深色主题、微妙渐变、柔和阴影、类玻璃面板、圆角组件色彩立场primary、neutral、success、warning、danger 五类语义色设计意图让输出对该风格家族保持高辨识度同时不牺牲可用性与可读性主色锚点Primary 为#0C5CAB来源于风格基础的 Token。需要特别留意的是DESIGN.md中的主色#0C5CAB属于风格家族锚点色而tokens.css中实际绑定的--accent值为#0ea5e9sky-500 系亮蓝。二者并存是有意为之——前者表达品牌家族意图后者是打包夹具中组件实际消费的插槽值。在使用时以tokens.css的:root块为准。Token 契约56 个 CSS 自定义属性全解析tokens.css是包的权威 Token 来源共声明 56 个变量全部位于:root中按用途可分为六组1. 色彩 TokenColorToken值语义--bg#f4f7fb页面背景浅冷灰蓝--surface#ffffff卡片/面板表面--surface-warm#eef6ff暖色表面插槽--fg#111827主前景文字近黑--fg-2#334155次级文字--muted#64748b弱化文字--meta#0ea5e9元信息强调色--border#d8e2ee常规边框--border-soft#edf3f8柔和边框--accent#0ea5e9品牌强调色主行动--accent-on#04131d强调色之上的文字色--accent-hovercolor-mix(in oklab, var(--accent), black 8%)悬停态--accent-activecolor-mix(in oklab, var(--accent), black 14%)按下态--success#10b981成功语义--warn#f59e0b警告语义--danger#ef4444危险语义值得注意的实现细节--accent-hover与--accent-active使用 CSS 原生color-mix(in oklab, ...)从基准色推导而非硬编码第二个 hex 值——这让整套强调色系可以在未来跨品牌切换时保持同一推导逻辑。2. 字体 TokenFont--font-display、--font-bodyInter, system-ui, sans-serif--font-monoIBM Plex Mono, ui-monospace, Menlo, monospace即显示字体与正文字体统一采用 Inter 系等宽字体采用 IBM Plex Mono 系。DESIGN.md中记录的 9 档字重100–900说明该包支持完整的 Inter 字重梯度。3. 字号与行高Type Scale--text-xs: 11px、--text-sm: 13px、--text-base: 15px、--text-lg: 17px、--text-xl: 22px、--text-2xl: 30px、--text-3xl: 42px、--text-4xl: 56px行高--leading-body: 1.48、--leading-tight: 1.1标题字距--tracking-display: -0.015em。4. 间距与区块节奏Spacing Section8pt 基准网格--space-1: 4px至--space-12: 48px含 4/8/12/16/20/24/32/48区块纵向节奏按断点分层--section-y-desktop: 84px、--section-y-tablet: 60px、--section-y-phone: 42px。5. 圆角与阴影Radius Elevation圆角四档--radius-sm: 8px、--radius-md: 12px、--radius-lg: 18px、--radius-pill: 9999px阴影三档--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)细描边、--elev-raised: 0 18px 46px rgba(15, 23, 42, 0.10)柔和浮起焦点环--focus-ring: 0 0 0 4px rgba(14, 165, 233, 0.22)。6. 动效与容器Motion Container动效--motion-fast: 120ms、--motion-base: 200ms、--ease-standard: cubic-bezier(0.2, 0, 0, 1)容器--container-max: 1280px三档内边距--container-gutter-desktop: 36px、--container-gutter-tablet: 24px、--container-gutter-phone: 16px。动效时长与缓动曲线直接呼应DESIGN.md的交互章节——150–250ms 的短促过渡 稳定缓动120ms 用于快速反馈hover200ms 用于常规状态切换。分层契约A1 / A2 / B-slot 与 56 个 Token 的来源design-tokens.json与 token-contract.report.json 记录了每个 Token 的分层归属。根据_schema/AGENTS.md定义的 Design System 2.0 四层模型Dashboard 包的 56 个 Token 分布如下层数量含义Dashboard 示例A1-identity8品牌身份层缺失即守卫失败--bg、--surface、--fg、--accent、--font-display等A1-structure18结构层缺失即守卫失败字号刻度、--container-max、--section-y-*、行高A226品牌可带默认值的插槽当前契约要求必须显式声明--success、--warn、--danger、--space-*、--radius-*、--motion-*B-slot4语义插槽品牌可别名到兄弟 Token 或绑定独立值--fg-2、--meta、--surface-warm、--border-soft契约报告给出的质量评分为100excellent56 个声明 Token 全部有tokens.css源码背书sourceBackedTokens56不存在未声明的引用undeclaredReferenced 为空且不需要重建recommendRebuildfalse。报告的sources字段把每个 Token 精确映射回tokens.css的行号如--bg→tokens.css:7这就是每个契约绑定都可审计的机制。关于 A2 与 B-slot 为何强制声明_schema/AGENTS.md给出了清晰的工程理由Artifact 由 Agent 将某个品牌的:root块粘贴进单一style生成不存在随品牌一起加载的全局样式表因此任何缺失的 Token 都会让var(--xxx)静默解析为空、组件样式无声损坏。直到未来的 derive 脚本scripts/derive-tokens-css.ts目前尚不存在落地之前每个品牌必须声明每个共享 Token是唯一安全的契约。组件清单与夹具components.manifest.json是可由components.htmltokens.css重建的缓存记录了夹具的统计信息与组件分组夹具规模1 个style块、48 个选择器、26 个类、19 个元素覆盖html/body、h1–h3、section/main、input/label、a、p/span/strong等基础元素组件分组presenttrue 的组Buttons.btn、.btn-primary、.btn-secondary及 hover/focus-visible 状态引用--accent、--accent-on、--elev-ring、--motion-fast、--radius-md等Inputs.field、input:focus、label引用--border、--radius-sm、--space-*Cards/Panels.card-row、.panel、.panel-head、.tile引用--elev-raised、--radius-lg、--surfaceBadges/Status.status状态标签Links内联aTypography.eyebrow、.lead、h1–h3Layout.container、.metric-grid、section引用--container-gutter-*、--section-y-desktop。未启用的组keyboard键盘提示与 icons图标插槽为 presentfalse即该夹具不含这两类组件。该清单还包含组件级的 Token 引用矩阵每个分组列出了它实际消费的 Token 名以及字面量审计夹具中仅 3 处颜色字面量、24 处像素值、4 处硬编码字体族——其余全部走 Token这正是components.html作为参考夹具的契约纯度体现。与 Tailwind v4 的集成方式tailwind-v4.css是派生文件文件头明确标注Derived from tokens.css. Keep tokens.css as the source of truth从 tokens.css 派生以 tokens.css 为唯一真源。其结构为import tailwindcss; import ./tokens.css; theme { --color-bg: var(--bg); --color-accent: var(--accent); --color-success: var(--success); --font-sans: var(--font-body); --text-xl: var(--text-xl); --spacing-4: var(--space-4); --radius-md: var(--radius-md); --shadow-raised: var(--elev-raised); --duration-base: var(--motion-base); --ease-standard: var(--ease-standard); /* ... */ }它将 56 个 CSS 变量逐一映射为 Tailwind v4 的theme命名空间--color-*、--font-*、--text-*、--spacing-*、--radius-*、--shadow-*、--duration-*、--ease-*从而让bg-accent、text-muted、rounded-lg、shadow-raised等 Tailwind 工具类直接可用。_schema/AGENTS.md强调这类派生文件不得独立于tokens.css重新定义源值防止双源漂移。使用规范Do 与 AvoidUSAGE.md 给出了 Agent 使用该包时的行为约束应当做Do严格保留 schema Token 名称这是跨品牌切换保持可靠性的前提用--accent表达主行动、链接、焦点态并保持页面内有一个清晰的视觉焦点元素优先复用components.manifest.json中的组件分组而非发明新的控件把source/目录文件视为打包夹具回填的审计证据。避免做Avoid避免在拷贝的:rootToken 块之外使用裸 hex 值应始终引用 Token避免独立于tokens.css重新定义 Tailwind 或设计 Token 值防止派生文件与真源漂移不要声称存在原始上游源码证据——本包基于官方策划的打包夹具见 source/evidence.md不要添加components.html或DESIGN.md中不存在的组件配方。这些约束的工程动机与上文的分层契约一脉相承Token 名称是跨品牌契约的公开接口组件配方是夹具覆盖范围的边界source/是证据链。遵守 Do/Avoid产出物才能通过仓库的 design-system 守卫校验如design-system: A2 required tokens、B-slot required tokens 等。视觉风格落地要点结合 DESIGN.md 的组成章节落地该包时还需把握以下设计决策色彩策略CTA 强调用 Primary#0C5CAB家族锚点 /--accent插槽大面积背景与卡片用--surface正文保持--fg的高对比可读性排版层级刻度为 12/14/16/20/24/32对应 Token 的 11–56px 细刻度标题承载风格个性正文优化扫描性与对比度间距网格8pt 基准线区块间保持垂直节奏一致列与模块对齐到可预测的网格杜绝随意偏移布局组合清晰的headline → support text → primary action层级先用留白区分关注点再考虑边框与阴影动效与交互强调--accent作为交互信号150–250ms 短促过渡Token 为 120/200mshover、focus-visible、active、disabled、loading 状态必须显式存在反模式红线不引入 Token 之外的调色板外颜色、不用同一字号字重扁平化层级、不加损害可读性与可达性的装饰效果、不在同一界面混搭无关视觉隐喻。manifest.json中还声明了本包的 craft 建议绑定color与accessibility-baseline对应仓库 craft/color.md 与 craft/accessibility-baseline.md提示使用本包时优先以这两份 craft 规范约束产出。总结Dashboard 设计系统包是 OpenDesign Design System 2.0 体系中打包夹具 严格契约模式的典型样本USAGE.md定义消费顺序与行为边界tokens.css提供 56 个可审计 Tokencomponents.manifest.json提供组件复用清单source/提供证据链manifest.json则把这一切挂接到仓库的 manifest 守卫与运行时目录发现机制见 design-systems/_schema/AGENTS.md。对 Agent 而言正确的接入姿势是先读 USAGE.md 建立契约认知再读 DESIGN.md 把握视觉意图粘贴tokens.css的:root块然后仅从组件清单中取材、严格引用 Token、不越界添加配方——这样产出的仪表盘 Artifact 才能既具备云平台风格家族辨识度又通过仓库的契约守卫。【免费下载链接】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），仅供参考