OpenDesign 设计系统证据溯源与 TOKEN_SCHEMA 契约以 Miro 打包包为例的深度解析【免费下载链接】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/miro/source/evidence.md这份设计系统“证据文档”展开系统讲解 OpenDesign 项目中 Design System 2.0 打包包bundled fixture的来源界定Source Scope、**包内文件清单Included Fixture Files**与 **Token 契约Token Contract**三层机制。读完本文你将理解一个设计系统包如 Miro是如何由DESIGN.md、tokens.css、components.html三个源头文件驱动、如何通过source/token-contract.report.json把每个 token 绑定回其声明行、以及为何design-tokens.json与tailwind-v4.css必须作为派生产物被重新生成而非手工编辑——这套机制正是 OpenDesign 保证跨品牌设计系统可切换、可审计、可再生的底层基础设施。一、Source Evidence 是什么设计系统的“证据链”在 OpenDesign 的设计系统体系中每个品牌包如 design-systems/miro/都附带一份source/evidence.md它回答一个关键问题这套设计系统的视觉结论从何而来、依据是什么。以 Miro 为例source/evidence.md 开篇即明确两点该 Design System 2.0 backfill回填包源自 OpenDesign 仓库内已精选的 bundled fixture即仓库内已经提交的 DESIGN.md、tokens.css、components.html 三份文件它不声称对原始上游品牌仓库或网站进行了全新抓取fresh crawl。这一界定非常关键它把“证据来源”锁定在仓库自身避免下游使用者误以为包内数据来自对 Miro 官网的实时采集从而保证了结论的可复现性与可审计性。同样的约定也体现在 manifest.json 中source: { type: bundled, origin: OpenDesign curated bundled fixture }以及 USAGE.md 的约束条款Avoid claiming original upstream source evidence; this package is based on the curated bundled fixture.也就是说无论是对人类审阅者还是对 Agent证据文档首先是一道“边界声明”这套设计的权威来源是仓库内已提交的 fixture而不是外部站点。二、Included Fixture Files三个源头文件的分工evidence.md 明确列出本包依赖的三个 fixture 文件它们是整个设计系统包的“事实底座”文件相对路径职责设计意图文档design-systems/miro/DESIGN.md记录视觉主题、色彩角色、排版规则、组件样式、布局与响应式断点、Agent 提示词模板结构化 Token 样式表design-systems/miro/tokens.css声明全部 CSS 自定义属性56 个 token是 token 契约的“源声明”参考组件design-systems/miro/components.html提供组件级参考实现供精确选择器与状态核对2.1 DESIGN.md视觉意图的“人读”层DESIGN.md 以“视觉协作、明亮黄色点缀、无限画布美学”为定位沉淀了 Miro 风格的完整视觉规范。它包含以下核心资产视觉主题与氛围白色画布 近黑文字#1c1c1e粉彩点缀色板coral / rose / teal / orange / yellow / moss 的明暗配对Blue 450#5b76fe作为主交互色成功绿#00b473字体系统展示字体 Roobert PRO Medium含blwf, cv03, cv04, cv09, cv11OpenType 字符变体56px 时字距 -1.68px正文 Noto Sansliga 0, ss01, ss04, ss05完整排版层级表从 Display Hero56px / 行高 1.15 / 字距 -1.68px到 Micro Uppercase10.5px / 全大写共 11 级角色每一级都给出字号、字重、行高与字距的精确取值组件样式描边按钮透明底、1px solid #c7cad5、8px 圆角、7px/12px 内边距、白色圆形按钮、卡片12px–24px 圆角、粉彩背景、输入框白底、1px solid #e9eaef、8px 圆角、16px 内边距布局与深度1–24px 基准间距、8px按钮到 40–50px大容器的圆角阶梯、环形阴影边框rgb(224,226,232) 0px 0px 0px 1px、极简的深度体系响应式断点425 / 576 / 768 / 896 / 1024 / 1200 / 1280 / 1366 / 1700 / 1920px 共 10 档Agent Prompt Guide提供“快速取色参考”Text#1c1c1e、Background#ffffff、Interactive#5b76fe、Success#00b473、Border#c7cad5以及可直接复制的组件提示词示例如 Hero 的完整参数组合。2.2 tokens.csstoken 契约的“机器读”层tokens.css 是全部 56 个 token 的单一权威声明源。它把 DESIGN.md 的视觉结论翻译成结构化的 CSS 自定义属性覆盖颜色--bg#fff7c2、--surface#ffffff、--surface-warm#fff3a3、--fg#050038、--fg-2、--muted、--meta#f7c600、--border、--border-soft、--accent#ffd02f及其派生态--accent-on、--accent-hover、--accent-active以及语义色--success/--warn/--danger字体--font-display/--font-bodyFormular, Inter, Arial, sans-serif、--font-monoIBM Plex Mono, ...字号与行距--text-xs12px到--text-4xl76px共 8 档--leading-body1.5、--leading-tight1.02、--tracking-display-0.025em间距与节律--space-14px到--space-1248px共 9 档--section-y-desktop/tablet/phone104/72/52px圆角与高度--radius-sm/md/lg/pill10/18/28/9999px--elev-flat、--elev-ring0 0 0 1px var(--border)、--elev-raised、--focus-ring动效与布局--motion-fast150ms、--motion-base230ms、--ease-standardcubic-bezier(0.22, 1, 0.36, 1)、--container-max1220px及桌面/平板/手机三档容器留白。值得注意的是其中--accent-hover与--accent-active使用了现代 CSS 的color-mix(in oklab, ...)函数从--accent派生体现了 token 体系的动态派生能力。2.3 components.html 与 components.manifest.json组件级清单components.html 是组件参考 fixture与之配套的 components.manifest.json 则提供紧凑的组件清单。从该 manifest 的 fixture 统计可以确认该文件包含 1 个style块、48 个选择器、26 个类、19 个元素并完整列出declared与referenced两组 token 名称供组件与 token 之间做交叉核对。USAGE.md 建议需要精确选择器或组件状态时再打开components.html日常审阅使用 manifest 即可。三、Token Contract从声明行到派生产物的契约链evidence.md 的核心段落给出了 Token 契约的定义source/token-contract.report.jsonmaps every TOKEN_SCHEMA binding back to the committedtokens.cssdeclaration line.design-tokens.jsonandtailwind-v4.cssare derived outputs and should be regenerated from the report and token stylesheet rather than edited by hand.这句话定义了整条证据链的数据流方向tokens.css源声明56 行声明 │ 被映射 ▼ source/token-contract.report.json契约报告每个 token → tokens.css 行号 │ 被消费 ▼ design-tokens.json ── tailwind-v4.css派生输出禁止手改3.1 token-contract.report.json审计报告source/token-contract.report.json 是这条证据链的“中间审计件”。它的summary揭示了 Miro 包的契约健康度{ totalTokens: 56, declaredTokens: 56, sourceBackedTokens: 56, sourceBackedA1: 26, fallbackTokens: 26, aliasTokens: 0, layerCounts: { A1-identity: 8, B-slot: 4, A2: 26, A1-structure: 18 }, score: 100, grade: excellent, recommendRebuild: false }报告中每一个 token 条目都带有layer、value、confidence、reason与sources字段例如{ name: --bg, layer: A1-identity, value: #fff7c2, confidence: high, reason: Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill., sources: [tokens.css:8], sourceName: --bg }其中sources精确指向 tokens.css 的声明行号如tokens.css:8实现了“每个 TOKEN_SCHEMA 绑定都能回溯到源声明行”的可审计要求。与报告内容一致的还有一个中间产物 source/tokens.source.json同样以tokens.css:行号的形式记录 56 个 token 的来源。3.2 TOKEN_SCHEMA四层 Token 体系“TOKEN_SCHEMA”这一契约的权威定义位于 packages/contracts/src/design-systems/token-schema.ts并由 design-systems/_schema/tokens.schema.ts 重导出供仓库内 guard 脚本使用。该文件把每个 token 精确划分为四层决定了“谁来定值、品牌缺省时会发生什么”层级语义缺失时行为A1-identity品牌本体如--bg、--fg、--accent、字体栈无任何替代token 即品牌A1-structure结构性决策字号阶梯、布局网格、章节节奏跨品牌无通用默认值每个品牌必须自行撰写A2最终 tokens.css 中必须出现但存在合理默认值_schema/defaults.css派生脚本derive script可将默认值内联补齐B-slot可选槽位为跨品牌一致性而存在可经var()别名到同名兄弟 token组件引用永远可解析文件中还特别解释了为何 A2 被设计为“带默认值的要求项”而非“可选项”由于 Agent 生成的产物通常是把某个品牌的:root块直接粘贴进单个style不存在来自全局默认样式表的运行时级联。一旦粘贴的 tokens.css 缺少某个var()目标例如--motion-fasttransition: var(--motion-fast)会被解析为空而整条规则被丢弃产生损坏的产物。因此运行时契约是“每个 tokens.css 必须声明全部 A1 A2 B-slot token”A2 默认值仅存在于_schema/defaults.css供派生脚本内联而design-system: A2 defaults parityguard 检查会强制该文件与 token-schema 之间不产生漂移。从 Miro 报告看其 56 个 token 的层级分布为A1-identity 8 个、A1-structure 18 个、A2 26 个、B-slot 4 个全部sourceBacked56/5626 个 A2 使用了 fallback 值无 alias token——即 B-slot 层--surface-warm、--fg-2、--meta、--border-soft均为品牌独立定义而非别名。3.3 派生产物为何“只能生成、不可手改”design-tokens.json 与 tailwind-v4.css 在 evidence.md 中被明确标记为派生输出derived outputs。以design-tokens.json为例其source字段记录了生成依据source: { tokensCss: tokens.css, tokenContractReport: source/token-contract.report.json }这说明它是由「契约报告 token 样式表」两道输入派生而来契约报告提供 token 名称、层级、来源行号与置信度tokens.css提供最终值。手工同时维护tokens.css、design-tokens.json、tailwind-v4.css三份文件必然导致漂移正确的做法是以tokens.css为源、以报告为映射重新生成派生文件。这与 USAGE.md 中“避免脱离tokens.css独立重定义 Tailwind 或 design-token 值”的约束互为印证。四、证据链的消费方式Agent 与审阅者如何使用证据体系最终服务于两类使用者生成产物的 Agent与审阅/维护者。USAGE.md 给出了明确的读取顺序先读 USAGE.md 理解包契约读DESIGN.md获取视觉意图、约束与反模式把tokens.css粘贴进第一个产物的style块再编写组件 CSS用components.manifest.json获取紧凑组件清单需要精确选择器或状态时打开components.html需要视觉校验时查看preview/目录下的 preview/colors.html、preview/typography.html、preview/spacing.html 三个预览页。而对维护者而言source/目录下的 evidence.md、token-contract.report.json、tokens.source.json 三份文件构成了完整的审计证据面想验证任何一个 token 的取值依据沿着报告中的sources行号即可定位到 tokens.css 的原始声明。五、边界与约束证据体系的“Do / Dont”为保证跨品牌一致性与证据可信度evidence.md 及其配套文档设定了明确的纪律Do保留 schema token 名称原样保证跨品牌切换可靠用--accent承载主操作、链接与焦点态优先复用components.manifest.json中的组件组将source/文件视为 backfill 的审计证据。Dont在复制的:roottoken 块之外使用裸十六进制色值脱离tokens.css独立重定义 Tailwind / design-token 值声称拥有原始上游源证据新增components.html与DESIGN.md中不存在的组件配方。Miro 的 manifest.json 还展示了包级元数据的完整性schemaVersion: od-design-system-project/v1、craft.suggested推荐应用 color 与 accessibility-baseline 两条 craft 规范、preview.pages三页预览的 role 与 title以及sourceFilesevidence / tokens.source / report 三件套的路径映射。这套元数据让包可以被工具链自动发现与校验。六、小结一条可审计、可再生的设计系统流水线从source/evidence.md出发可以完整勾勒 OpenDesign 设计系统包的数据流水线来源界定evidence.md 声明本包基于 curated bundled fixture不声称上游抓取源头三件套DESIGN.md视觉意图、tokens.csstoken 源声明、components.html组件参考共同构成事实底座契约映射source/token-contract.report.json按 TOKEN_SCHEMA 的四层体系A1-identity / A1-structure / A2 / B-slot把全部 56 个 token 逐一定位到tokens.css声明行并给出置信度与 100/100 的契约评分派生再生design-tokens.json与tailwind-v4.css由「报告 tokens.css」派生禁止手工编辑从机制上杜绝多源漂移。这套“证据先行、契约驱动、派生再生”的体系正是 OpenDesign 能在数十个品牌设计系统之间保持可切换、可审计、可再生的关键基础设施。若你想验证或复用这套机制可直接查看仓库中的 design-systems/miro/ 完整包含 preview/ 预览页与 source/ 证据目录并对照 packages/contracts/src/design-systems/token-schema.ts 与 design-systems/_schema/defaults.css 理解 A2 默认值与 guard 校验的配套逻辑。【免费下载链接】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），仅供参考 
长河君 · 2026/9/20 22:48:03 · 阅读 1.2k OpenDesign 设计系统证据溯源与 TOKEN_SCHEMA 契约：以 Miro 打包包为例的深度解析
OpenDesign 设计系统证据溯源与 TOKEN_SCHEMA 契约以 Miro 打包包为例的深度解析【免费下载链接】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/miro/source/evidence.md这份设计系统“证据文档”展开系统讲解 OpenDesign 项目中 Design System 2.0 打包包bundled fixture的来源界定Source Scope、**包内文件清单Included Fixture Files**与 **Token 契约Token Contract**三层机制。读完本文你将理解一个设计系统包如 Miro是如何由DESIGN.md、tokens.css、components.html三个源头文件驱动、如何通过source/token-contract.report.json把每个 token 绑定回其声明行、以及为何design-tokens.json与tailwind-v4.css必须作为派生产物被重新生成而非手工编辑——这套机制正是 OpenDesign 保证跨品牌设计系统可切换、可审计、可再生的底层基础设施。一、Source Evidence 是什么设计系统的“证据链”在 OpenDesign 的设计系统体系中每个品牌包如 design-systems/miro/都附带一份source/evidence.md它回答一个关键问题这套设计系统的视觉结论从何而来、依据是什么。以 Miro 为例source/evidence.md 开篇即明确两点该 Design System 2.0 backfill回填包源自 OpenDesign 仓库内已精选的 bundled fixture即仓库内已经提交的 DESIGN.md、tokens.css、components.html 三份文件它不声称对原始上游品牌仓库或网站进行了全新抓取fresh crawl。这一界定非常关键它把“证据来源”锁定在仓库自身避免下游使用者误以为包内数据来自对 Miro 官网的实时采集从而保证了结论的可复现性与可审计性。同样的约定也体现在 manifest.json 中source: { type: bundled, origin: OpenDesign curated bundled fixture }以及 USAGE.md 的约束条款Avoid claiming original upstream source evidence; this package is based on the curated bundled fixture.也就是说无论是对人类审阅者还是对 Agent证据文档首先是一道“边界声明”这套设计的权威来源是仓库内已提交的 fixture而不是外部站点。二、Included Fixture Files三个源头文件的分工evidence.md 明确列出本包依赖的三个 fixture 文件它们是整个设计系统包的“事实底座”文件相对路径职责设计意图文档design-systems/miro/DESIGN.md记录视觉主题、色彩角色、排版规则、组件样式、布局与响应式断点、Agent 提示词模板结构化 Token 样式表design-systems/miro/tokens.css声明全部 CSS 自定义属性56 个 token是 token 契约的“源声明”参考组件design-systems/miro/components.html提供组件级参考实现供精确选择器与状态核对2.1 DESIGN.md视觉意图的“人读”层DESIGN.md 以“视觉协作、明亮黄色点缀、无限画布美学”为定位沉淀了 Miro 风格的完整视觉规范。它包含以下核心资产视觉主题与氛围白色画布 近黑文字#1c1c1e粉彩点缀色板coral / rose / teal / orange / yellow / moss 的明暗配对Blue 450#5b76fe作为主交互色成功绿#00b473字体系统展示字体 Roobert PRO Medium含blwf, cv03, cv04, cv09, cv11OpenType 字符变体56px 时字距 -1.68px正文 Noto Sansliga 0, ss01, ss04, ss05完整排版层级表从 Display Hero56px / 行高 1.15 / 字距 -1.68px到 Micro Uppercase10.5px / 全大写共 11 级角色每一级都给出字号、字重、行高与字距的精确取值组件样式描边按钮透明底、1px solid #c7cad5、8px 圆角、7px/12px 内边距、白色圆形按钮、卡片12px–24px 圆角、粉彩背景、输入框白底、1px solid #e9eaef、8px 圆角、16px 内边距布局与深度1–24px 基准间距、8px按钮到 40–50px大容器的圆角阶梯、环形阴影边框rgb(224,226,232) 0px 0px 0px 1px、极简的深度体系响应式断点425 / 576 / 768 / 896 / 1024 / 1200 / 1280 / 1366 / 1700 / 1920px 共 10 档Agent Prompt Guide提供“快速取色参考”Text#1c1c1e、Background#ffffff、Interactive#5b76fe、Success#00b473、Border#c7cad5以及可直接复制的组件提示词示例如 Hero 的完整参数组合。2.2 tokens.csstoken 契约的“机器读”层tokens.css 是全部 56 个 token 的单一权威声明源。它把 DESIGN.md 的视觉结论翻译成结构化的 CSS 自定义属性覆盖颜色--bg#fff7c2、--surface#ffffff、--surface-warm#fff3a3、--fg#050038、--fg-2、--muted、--meta#f7c600、--border、--border-soft、--accent#ffd02f及其派生态--accent-on、--accent-hover、--accent-active以及语义色--success/--warn/--danger字体--font-display/--font-bodyFormular, Inter, Arial, sans-serif、--font-monoIBM Plex Mono, ...字号与行距--text-xs12px到--text-4xl76px共 8 档--leading-body1.5、--leading-tight1.02、--tracking-display-0.025em间距与节律--space-14px到--space-1248px共 9 档--section-y-desktop/tablet/phone104/72/52px圆角与高度--radius-sm/md/lg/pill10/18/28/9999px--elev-flat、--elev-ring0 0 0 1px var(--border)、--elev-raised、--focus-ring动效与布局--motion-fast150ms、--motion-base230ms、--ease-standardcubic-bezier(0.22, 1, 0.36, 1)、--container-max1220px及桌面/平板/手机三档容器留白。值得注意的是其中--accent-hover与--accent-active使用了现代 CSS 的color-mix(in oklab, ...)函数从--accent派生体现了 token 体系的动态派生能力。2.3 components.html 与 components.manifest.json组件级清单components.html 是组件参考 fixture与之配套的 components.manifest.json 则提供紧凑的组件清单。从该 manifest 的 fixture 统计可以确认该文件包含 1 个style块、48 个选择器、26 个类、19 个元素并完整列出declared与referenced两组 token 名称供组件与 token 之间做交叉核对。USAGE.md 建议需要精确选择器或组件状态时再打开components.html日常审阅使用 manifest 即可。三、Token Contract从声明行到派生产物的契约链evidence.md 的核心段落给出了 Token 契约的定义source/token-contract.report.jsonmaps every TOKEN_SCHEMA binding back to the committedtokens.cssdeclaration line.design-tokens.jsonandtailwind-v4.cssare derived outputs and should be regenerated from the report and token stylesheet rather than edited by hand.这句话定义了整条证据链的数据流方向tokens.css源声明56 行声明 │ 被映射 ▼ source/token-contract.report.json契约报告每个 token → tokens.css 行号 │ 被消费 ▼ design-tokens.json ── tailwind-v4.css派生输出禁止手改3.1 token-contract.report.json审计报告source/token-contract.report.json 是这条证据链的“中间审计件”。它的summary揭示了 Miro 包的契约健康度{ totalTokens: 56, declaredTokens: 56, sourceBackedTokens: 56, sourceBackedA1: 26, fallbackTokens: 26, aliasTokens: 0, layerCounts: { A1-identity: 8, B-slot: 4, A2: 26, A1-structure: 18 }, score: 100, grade: excellent, recommendRebuild: false }报告中每一个 token 条目都带有layer、value、confidence、reason与sources字段例如{ name: --bg, layer: A1-identity, value: #fff7c2, confidence: high, reason: Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill., sources: [tokens.css:8], sourceName: --bg }其中sources精确指向 tokens.css 的声明行号如tokens.css:8实现了“每个 TOKEN_SCHEMA 绑定都能回溯到源声明行”的可审计要求。与报告内容一致的还有一个中间产物 source/tokens.source.json同样以tokens.css:行号的形式记录 56 个 token 的来源。3.2 TOKEN_SCHEMA四层 Token 体系“TOKEN_SCHEMA”这一契约的权威定义位于 packages/contracts/src/design-systems/token-schema.ts并由 design-systems/_schema/tokens.schema.ts 重导出供仓库内 guard 脚本使用。该文件把每个 token 精确划分为四层决定了“谁来定值、品牌缺省时会发生什么”层级语义缺失时行为A1-identity品牌本体如--bg、--fg、--accent、字体栈无任何替代token 即品牌A1-structure结构性决策字号阶梯、布局网格、章节节奏跨品牌无通用默认值每个品牌必须自行撰写A2最终 tokens.css 中必须出现但存在合理默认值_schema/defaults.css派生脚本derive script可将默认值内联补齐B-slot可选槽位为跨品牌一致性而存在可经var()别名到同名兄弟 token组件引用永远可解析文件中还特别解释了为何 A2 被设计为“带默认值的要求项”而非“可选项”由于 Agent 生成的产物通常是把某个品牌的:root块直接粘贴进单个style不存在来自全局默认样式表的运行时级联。一旦粘贴的 tokens.css 缺少某个var()目标例如--motion-fasttransition: var(--motion-fast)会被解析为空而整条规则被丢弃产生损坏的产物。因此运行时契约是“每个 tokens.css 必须声明全部 A1 A2 B-slot token”A2 默认值仅存在于_schema/defaults.css供派生脚本内联而design-system: A2 defaults parityguard 检查会强制该文件与 token-schema 之间不产生漂移。从 Miro 报告看其 56 个 token 的层级分布为A1-identity 8 个、A1-structure 18 个、A2 26 个、B-slot 4 个全部sourceBacked56/5626 个 A2 使用了 fallback 值无 alias token——即 B-slot 层--surface-warm、--fg-2、--meta、--border-soft均为品牌独立定义而非别名。3.3 派生产物为何“只能生成、不可手改”design-tokens.json 与 tailwind-v4.css 在 evidence.md 中被明确标记为派生输出derived outputs。以design-tokens.json为例其source字段记录了生成依据source: { tokensCss: tokens.css, tokenContractReport: source/token-contract.report.json }这说明它是由「契约报告 token 样式表」两道输入派生而来契约报告提供 token 名称、层级、来源行号与置信度tokens.css提供最终值。手工同时维护tokens.css、design-tokens.json、tailwind-v4.css三份文件必然导致漂移正确的做法是以tokens.css为源、以报告为映射重新生成派生文件。这与 USAGE.md 中“避免脱离tokens.css独立重定义 Tailwind 或 design-token 值”的约束互为印证。四、证据链的消费方式Agent 与审阅者如何使用证据体系最终服务于两类使用者生成产物的 Agent与审阅/维护者。USAGE.md 给出了明确的读取顺序先读 USAGE.md 理解包契约读DESIGN.md获取视觉意图、约束与反模式把tokens.css粘贴进第一个产物的style块再编写组件 CSS用components.manifest.json获取紧凑组件清单需要精确选择器或状态时打开components.html需要视觉校验时查看preview/目录下的 preview/colors.html、preview/typography.html、preview/spacing.html 三个预览页。而对维护者而言source/目录下的 evidence.md、token-contract.report.json、tokens.source.json 三份文件构成了完整的审计证据面想验证任何一个 token 的取值依据沿着报告中的sources行号即可定位到 tokens.css 的原始声明。五、边界与约束证据体系的“Do / Dont”为保证跨品牌一致性与证据可信度evidence.md 及其配套文档设定了明确的纪律Do保留 schema token 名称原样保证跨品牌切换可靠用--accent承载主操作、链接与焦点态优先复用components.manifest.json中的组件组将source/文件视为 backfill 的审计证据。Dont在复制的:roottoken 块之外使用裸十六进制色值脱离tokens.css独立重定义 Tailwind / design-token 值声称拥有原始上游源证据新增components.html与DESIGN.md中不存在的组件配方。Miro 的 manifest.json 还展示了包级元数据的完整性schemaVersion: od-design-system-project/v1、craft.suggested推荐应用 color 与 accessibility-baseline 两条 craft 规范、preview.pages三页预览的 role 与 title以及sourceFilesevidence / tokens.source / report 三件套的路径映射。这套元数据让包可以被工具链自动发现与校验。六、小结一条可审计、可再生的设计系统流水线从source/evidence.md出发可以完整勾勒 OpenDesign 设计系统包的数据流水线来源界定evidence.md 声明本包基于 curated bundled fixture不声称上游抓取源头三件套DESIGN.md视觉意图、tokens.csstoken 源声明、components.html组件参考共同构成事实底座契约映射source/token-contract.report.json按 TOKEN_SCHEMA 的四层体系A1-identity / A1-structure / A2 / B-slot把全部 56 个 token 逐一定位到tokens.css声明行并给出置信度与 100/100 的契约评分派生再生design-tokens.json与tailwind-v4.css由「报告 tokens.css」派生禁止手工编辑从机制上杜绝多源漂移。这套“证据先行、契约驱动、派生再生”的体系正是 OpenDesign 能在数十个品牌设计系统之间保持可切换、可审计、可再生的关键基础设施。若你想验证或复用这套机制可直接查看仓库中的 design-systems/miro/ 完整包含 preview/ 预览页与 source/ 证据目录并对照 packages/contracts/src/design-systems/token-schema.ts 与 design-systems/_schema/defaults.css 理解 A2 默认值与 guard 校验的配套逻辑。【免费下载链接】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），仅供参考