OpenDesign 设计系统溯源与 Token 契约Clay 包 source evidence 机制深度解析【免费下载链接】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/clay/source/evidence.md为核心骨架剖析 OpenDesign 仓库中设计系统包的来源证据source evidence与Token 契约token contract机制一个设计系统包如何声明其出处、如何通过token-contract.report.json将每个语义 token 回溯到tokens.css的具体声明行以及为什么design-tokens.json、tailwind-v4.css等派生文件必须从报告与样式表再生成而非手工编辑。读完本文你将掌握 OpenDesign Design System 2.0 包的完整证据链结构、四层 Token 架构A1/A2/B-slot以及包的校验与再生成工作流。1. 背景什么是 Design System 2.0 backfill 与 source evidenceOpenDesign 仓库在design-systems/目录下维护着一套可移植的设计系统包目录每个子目录slug是一个自包含的设计系统包。根据 design-systems/README.md当前捆绑目录包含151 个包每个捆绑包都具备相同的最小机器可读结构design-systems/slug/ ├── manifest.json ├── DESIGN.md └── tokens.css其中manifest.json负责稳定的发现元数据、出处provenance与声明的包内路径DESIGN.md是面向 Agent 的规范设计文本tokens.css是规范化的编译语义 Token 样式表。在这个体系里source/目录承载的是导入证据importer evidence。design-systems/clay/source/evidence.md正是 Clay 包这一证据目录的说明文档它在文件中明确划定了本包的证据边界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.这句话是理解整个 evidence 机制的关键Clay 包是一个backfill回填产物其内容源自 OpenDesign 仓库自带的精选捆绑 fixture而不是对上游品牌官网/仓库的全新爬取。这与manifest.json中的source字段相互印证{ schemaVersion: od-design-system-project/v1, id: clay, name: Clay, category: Design Creative, description: Bundled OpenDesign package for Clay, derived from curated DESIGN.md, tokens.css, and components.html fixtures., source: { type: bundled, origin: OpenDesign curated bundled fixture }, importMode: normalized }出处声明source.type: bundled直接决定了后续所有证据文件的组织方式与可信度标注方式。2. 包内文件清单evidence.md 声明的三个核心 fixtureevidence.md在 Included Fixture Files 一节列出了 Clay 包的三个核心来源文件它们构成了包的事实基础文件仓库相对路径作用设计规范design-systems/clay/DESIGN.md面向 Agent 的完整视觉设计散文氛围、色彩、排版、组件、布局、Dos Donts、响应式、Prompt 指南Token 样式表design-systems/clay/tokens.css规范化编译的语义 Token 样式表:root中声明 56 个 token组件 fixturedesign-systems/clay/components.html独立运行的组件参考实现单个style块 示例 DOMmanifest.json通过files与sourceFiles字段把这三类文件与派生文件统一登记{ files: { design: DESIGN.md, tokens: tokens.css, designTokens: design-tokens.json, tailwind: tailwind-v4.css, components: components.html }, sourceFiles: { evidence: source/evidence.md, tokens: source/tokens.source.json, report: source/token-contract.report.json } }这种声明路径 实际文件的双重登记是后续 Guard 校验scripts/check-design-system-manifests.ts验证每个声明的路径必须安全、相对且存在的基础。3. Token 契约token-contract.report.json 与证据回溯evidence.md的 Token Contract 一节是全文的技术核心原文如下source/token-contract.report.jsonmaps every TOKEN_SCHEMA binding back to the committedtokens.cssdeclaration line.也就是说design-systems/clay/source/token-contract.report.json 是一份审计报告它把TOKEN_SCHEMA共享 Token 契约中的每一个绑定都映射回提交到仓库的tokens.css中的具体声明行。以--bg为例报告中的记录是{ name: --bg, layer: A1-identity, value: #f7eee6, confidence: high, reason: Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill., sources: [tokens.css:7], sourceName: --bg }这里sources: [tokens.css:7]就是证据回溯的落地形式——报告精确到行号指向 design-systems/clay/tokens.css 中的--bg: #f7eee6;声明。reason字段则忠实记录了证据来源bundled fixture而非上游爬取体现了 evidence 机制的诚实性要求。3.1 契约报告的汇总指标报告的summary区块给出了 Clay 包的 Token 契约健康度总览{ 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 }解读这些指标56 个 token 全部有声明、全部有来源回溯sourceBackedTokens: 56因此综合评分 100、评级excellentrecommendRebuild为false——即当前包无需重建26 个 A1 token 全部有来源sourceBackedA1: 2626 个 A2 token 全部使用 schema 级 fallback 值fallbackTokens: 26没有任何别名 tokenaliasTokens: 0说明 B-slot 层是独立绑定值而非var(--sibling)别名折叠形式。3.2 四层 Token 架构A1-identity / A1-structure / A2 / B-slot要真正读懂契约报告需要理解 OpenDesign 的共享 Token 契约分层。根据 design-systems/_schema/AGENTS.md每个共享 token 回答两个问题谁决定值品牌作者还是 schema 作者与品牌省略时怎么办必填 / fallback / alias。由此得出四层层谁决定若省略示例A1-identity品牌Guard 失败--bg、--fg、--accent、--font-displayA1-structure品牌Guard 失败字号阶梯、--container-max、--section-y-*A2品牌带 fallbackGuard 失败当前严格必填--motion-fast、--success、--space-4、--font-monoB-slot品牌或 schema 建议的别名Guard 失败——品牌必须声明--fg-2、--surface-warm、--meta、--border-softClay 包在这四层的分布恰好是A1-identity 8 个、A1-structure 18 个、A2 26 个、B-slot 4 个合计 56。对照 design-systems/clay/tokens.cssA1-identity8--bg、--surface、--fg、--muted、--border、--accent、--font-display、--font-bodyA1-structure18--text-xs到--text-4xl的字号阶梯、--leading-body、--leading-tight、--tracking-display、--section-y-*、--container-max、--container-gutter-*A226语义色--accent-on、--success、--warn、--danger、--accent-hover/--accent-active用color-mix(in oklab, var(--accent), black 8%/14%)派生、间距--space-*、圆角--radius-*、投影--elev-*、--focus-ring、动效--motion-*、--ease-standard、--font-monoB-slot4--surface-warm、--fg-2、--meta、--border-soft。值得注意的细节是B-slot 的 schema 建议默认是别名形式如--fg-2: var(--fg)但 Clay 选择为每个槽位绑定独立值如--fg-2: #5a4b43、--surface-warm: #ead6c7这属于更丰富的绑定形式同样满足design-system: B-slot required tokensGuard。这正是aliasTokens: 0的原因。3.3 为什么 A2 必须全部声明_schema/AGENTS.md特别解释了A2 当前为何严格必填概念上 A2 是可选 fallback但产物由 Agent 把单个品牌的:root块粘贴进一个style生成没有随品牌一起加载的全局样式表。若品牌漏掉--motion-fast产物中transition: var(--motion-fast)就会静默失效。因此在未来的派生脚本落地、把defaults.css值内联进每个品牌的tokens.css之前唯一安全的契约就是每个品牌必须声明每个 A2 token由design-system: A2 required tokensGuard 强制执行。4. 派生输出design-tokens.json 与 tailwind-v4.css 的再生成原则evidence.md对派生文件给出了明确的操作约束design-tokens.jsonandtailwind-v4.cssare derived outputs and should be regenerated from the report and token stylesheet rather than edited by hand.即 design-systems/clay/design-tokens.json 与 design-systems/clay/tailwind-v4.css 是派生缓存而不是并列的事实源。它们必须从source/token-contract.report.jsontokens.css再生成不得手工编辑。这与 design-systems/README.md 中Derived files are caches rather than competing sources of truth的原则一致components.manifest.json← 由components.htmltokens.css派生design-tokens.json← 由 token-contract 报告派生且必须与tokens.css一致tailwind-v4.css← 由tokens.css派生不得独立重定义源值。对照实际文件design-tokens.json的头部也声明了这条链路{ schemaVersion: 1, format: od-design-tokens/v1, contract: TOKEN_SCHEMA, source: { tokensCss: tokens.css, tokenContractReport: source/token-contract.report.json } }其 56 个 token 条目与报告、tokens.css逐行对应例如--bg→#f7eee6→tokens.css:7并额外补充了type字段color / dimension 等。任何手工改动这三者之一导致的不一致都会被包质量 Guard 中的派生文件一致性derived-file parity检查捕获。5. 证据链的实践意义从 DESIGN.md 到组件 fixtureevidence 机制的价值在于包内每一层知识都有可回溯的出处。以 Clay 包为例从证据文件可以逐层还原其完整设计系统5.1 设计规范层DESIGN.mddesign-systems/clay/DESIGN.md 描述了 Clay 的视觉身份暖奶油色画布#faf9f7配燕麦色边框#dad4c8、以 Matcha/Slushie/Lemon/Ube/Pomegranate/Blueberry/Dragonfruit 命名的果汁吧式色板、Roobert 几何无衬线字体5 组 OpenType 特性集ss01/ss03/ss10/ss11/ss12、以及标志性的悬停微动画rotateZ(-8deg)translateY(-80%) 硬偏移投影rgb(0,0,0) -7px 7px。注意这份规范属于品牌参考性质与包内实际 token 化的tokens.css属于同一体系的两个层次——前者描述设计意图与约束后者提供可被组件引用的语义变量。5.2 组件实现层components.htmldesign-systems/clay/components.html 是独立可运行的参考 fixture一个style块内定义了 48 个选择器、26 个类、19 个元素据 design-systems/clay/components.manifest.json 统计。关键实现全部通过var(--token)引用而非硬编码例如.btnmin-height: 44px、border-radius: var(--radius-md)、过渡使用var(--motion-fast) var(--ease-standard).btn-primarybackground: var(--accent); color: var(--accent-on)hover 时background: var(--accent-hover)并translateY(-1px).panelbackground: color-mix(in oklab, var(--surface), transparent 4%)、box-shadow: var(--elev-raised)input:focusbox-shadow: var(--focus-ring); border-color: var(--accent).status::before8px 圆点 var(--radius-pill)var(--success)。components.manifest.json进一步把 48 个选择器归组为 buttons / inputs / cards / badges / links / typography / layout 等组件组并记录每组的 token 引用清单例如 buttons 组引用--accent、--elev-ring、--motion-fast、--radius-md等 12 个 token。该清单还暴露了 7 个已声明未使用token--accent-active、--danger、--elev-flat、--motion-base、--space-1、--space-12、--warn这些是审计时可继续深挖的线索。5.3 使用层USAGE.mddesign-systems/clay/USAGE.md 定义了 Agent 与审查者的读取顺序契约先读 USAGE.md 理解包契约 → 读 DESIGN.md 获取视觉意图与反模式 → 把tokens.css粘贴进首个 artifact 的style块再写组件 CSS → 用components.manifest.json做紧凑组件盘点需要精确选择器或状态时打开components.html→ 需要视觉抽检时查看preview/页面。它还强调保留 schema token 名称原样以保证跨品牌切换可靠避免在:roottoken 块之外使用裸十六进制值并不要声称存在未经验证的原始上游证据——这正是 evidence 精神的延伸。6. Guard 校验证据与派生如何被机器强制执行从源码结构看evidence 与派生文件的约束由多个 Guard 脚本与 schema 共同落地scripts/check-design-system-manifests.ts校验所有manifest.json的形状、声明的路径安全且存在design-system: A2 required tokens与design-system: B-slot required tokensGuard强制每个品牌的:root声明全部共享 token见 design-systems/_schema/AGENTS.md派生文件一致性 Guard验证提交的components.manifest.json与从components.htmltokens.css的新鲜派生一致、design-tokens.json与报告一致、tailwind-v4.css与tokens.css一致README 中的 derived-file parity 检查design-system: A2 defaults parityGuard校验defaults.css与 schema 中 A2 的fallback字段逐字节一致。运行方式为在仓库根目录执行pnpm guard与pnpm typecheck。需要说明的是未来计划中的scripts/derive-tokens-css.ts自动从 DESIGN.md 派生 A1、为 A2 填充 defaults.css当前并不存在属于 schema 文档中留待实现的未来工作当前所有 56 个 token 依然由人工声明的tokens.css承担契约报告中的recommendRebuild: false即表明现有提交状态是自洽的。7. 总结一份证据文件如何支撑整条设计系统链路回到design-systems/clay/source/evidence.md本身这份不足二十行的文档实际上划定了整条生产链路的边界与规则边界声明本包是 curated bundled fixture 的 backfill不是上游爬取——所有后续证据标注都以此为基准来源清单DESIGN.md意图、tokens.css变量、components.html实现三份 fixture 构成包的输入面契约映射token-contract.report.json把 56 个 TOKEN_SCHEMA 绑定逐行映射回tokens.css声明形成报告 → 样式表 → 行号的可审计证据链派生纪律design-tokens.json与tailwind-v4.css只能由报告与 token 样式表再生成禁止手工编辑从而保证 151 个捆绑包以及未来新增包在跨品牌切换、Agent 提示组合时拥有统一且可验证的 Token 语义。对于希望在 OpenDesign 中新增或维护设计系统包的开发者这条证据链给出了明确的作业顺序保持文件夹 slug 与manifest.id一致 → 写齐DESIGN.md至少七个实质性 H2→ 在tokens.css绑定完整共享契约 → 需要组件/预览/证据时补充 rich 文件 → 最后运行pnpm guard与pnpm typecheck让机器验证证据与派生的一致性。源头可溯、派生可重建、差异可被 Guard 拦截——这就是 Design System 2.0 source evidence 机制的完整闭环。【免费下载链接】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 设计系统溯源与 Token 契约：Clay 包 source evidence 机制深度解析
OpenDesign 设计系统溯源与 Token 契约Clay 包 source evidence 机制深度解析【免费下载链接】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/clay/source/evidence.md为核心骨架剖析 OpenDesign 仓库中设计系统包的来源证据source evidence与Token 契约token contract机制一个设计系统包如何声明其出处、如何通过token-contract.report.json将每个语义 token 回溯到tokens.css的具体声明行以及为什么design-tokens.json、tailwind-v4.css等派生文件必须从报告与样式表再生成而非手工编辑。读完本文你将掌握 OpenDesign Design System 2.0 包的完整证据链结构、四层 Token 架构A1/A2/B-slot以及包的校验与再生成工作流。1. 背景什么是 Design System 2.0 backfill 与 source evidenceOpenDesign 仓库在design-systems/目录下维护着一套可移植的设计系统包目录每个子目录slug是一个自包含的设计系统包。根据 design-systems/README.md当前捆绑目录包含151 个包每个捆绑包都具备相同的最小机器可读结构design-systems/slug/ ├── manifest.json ├── DESIGN.md └── tokens.css其中manifest.json负责稳定的发现元数据、出处provenance与声明的包内路径DESIGN.md是面向 Agent 的规范设计文本tokens.css是规范化的编译语义 Token 样式表。在这个体系里source/目录承载的是导入证据importer evidence。design-systems/clay/source/evidence.md正是 Clay 包这一证据目录的说明文档它在文件中明确划定了本包的证据边界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.这句话是理解整个 evidence 机制的关键Clay 包是一个backfill回填产物其内容源自 OpenDesign 仓库自带的精选捆绑 fixture而不是对上游品牌官网/仓库的全新爬取。这与manifest.json中的source字段相互印证{ schemaVersion: od-design-system-project/v1, id: clay, name: Clay, category: Design Creative, description: Bundled OpenDesign package for Clay, derived from curated DESIGN.md, tokens.css, and components.html fixtures., source: { type: bundled, origin: OpenDesign curated bundled fixture }, importMode: normalized }出处声明source.type: bundled直接决定了后续所有证据文件的组织方式与可信度标注方式。2. 包内文件清单evidence.md 声明的三个核心 fixtureevidence.md在 Included Fixture Files 一节列出了 Clay 包的三个核心来源文件它们构成了包的事实基础文件仓库相对路径作用设计规范design-systems/clay/DESIGN.md面向 Agent 的完整视觉设计散文氛围、色彩、排版、组件、布局、Dos Donts、响应式、Prompt 指南Token 样式表design-systems/clay/tokens.css规范化编译的语义 Token 样式表:root中声明 56 个 token组件 fixturedesign-systems/clay/components.html独立运行的组件参考实现单个style块 示例 DOMmanifest.json通过files与sourceFiles字段把这三类文件与派生文件统一登记{ files: { design: DESIGN.md, tokens: tokens.css, designTokens: design-tokens.json, tailwind: tailwind-v4.css, components: components.html }, sourceFiles: { evidence: source/evidence.md, tokens: source/tokens.source.json, report: source/token-contract.report.json } }这种声明路径 实际文件的双重登记是后续 Guard 校验scripts/check-design-system-manifests.ts验证每个声明的路径必须安全、相对且存在的基础。3. Token 契约token-contract.report.json 与证据回溯evidence.md的 Token Contract 一节是全文的技术核心原文如下source/token-contract.report.jsonmaps every TOKEN_SCHEMA binding back to the committedtokens.cssdeclaration line.也就是说design-systems/clay/source/token-contract.report.json 是一份审计报告它把TOKEN_SCHEMA共享 Token 契约中的每一个绑定都映射回提交到仓库的tokens.css中的具体声明行。以--bg为例报告中的记录是{ name: --bg, layer: A1-identity, value: #f7eee6, confidence: high, reason: Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill., sources: [tokens.css:7], sourceName: --bg }这里sources: [tokens.css:7]就是证据回溯的落地形式——报告精确到行号指向 design-systems/clay/tokens.css 中的--bg: #f7eee6;声明。reason字段则忠实记录了证据来源bundled fixture而非上游爬取体现了 evidence 机制的诚实性要求。3.1 契约报告的汇总指标报告的summary区块给出了 Clay 包的 Token 契约健康度总览{ 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 }解读这些指标56 个 token 全部有声明、全部有来源回溯sourceBackedTokens: 56因此综合评分 100、评级excellentrecommendRebuild为false——即当前包无需重建26 个 A1 token 全部有来源sourceBackedA1: 2626 个 A2 token 全部使用 schema 级 fallback 值fallbackTokens: 26没有任何别名 tokenaliasTokens: 0说明 B-slot 层是独立绑定值而非var(--sibling)别名折叠形式。3.2 四层 Token 架构A1-identity / A1-structure / A2 / B-slot要真正读懂契约报告需要理解 OpenDesign 的共享 Token 契约分层。根据 design-systems/_schema/AGENTS.md每个共享 token 回答两个问题谁决定值品牌作者还是 schema 作者与品牌省略时怎么办必填 / fallback / alias。由此得出四层层谁决定若省略示例A1-identity品牌Guard 失败--bg、--fg、--accent、--font-displayA1-structure品牌Guard 失败字号阶梯、--container-max、--section-y-*A2品牌带 fallbackGuard 失败当前严格必填--motion-fast、--success、--space-4、--font-monoB-slot品牌或 schema 建议的别名Guard 失败——品牌必须声明--fg-2、--surface-warm、--meta、--border-softClay 包在这四层的分布恰好是A1-identity 8 个、A1-structure 18 个、A2 26 个、B-slot 4 个合计 56。对照 design-systems/clay/tokens.cssA1-identity8--bg、--surface、--fg、--muted、--border、--accent、--font-display、--font-bodyA1-structure18--text-xs到--text-4xl的字号阶梯、--leading-body、--leading-tight、--tracking-display、--section-y-*、--container-max、--container-gutter-*A226语义色--accent-on、--success、--warn、--danger、--accent-hover/--accent-active用color-mix(in oklab, var(--accent), black 8%/14%)派生、间距--space-*、圆角--radius-*、投影--elev-*、--focus-ring、动效--motion-*、--ease-standard、--font-monoB-slot4--surface-warm、--fg-2、--meta、--border-soft。值得注意的细节是B-slot 的 schema 建议默认是别名形式如--fg-2: var(--fg)但 Clay 选择为每个槽位绑定独立值如--fg-2: #5a4b43、--surface-warm: #ead6c7这属于更丰富的绑定形式同样满足design-system: B-slot required tokensGuard。这正是aliasTokens: 0的原因。3.3 为什么 A2 必须全部声明_schema/AGENTS.md特别解释了A2 当前为何严格必填概念上 A2 是可选 fallback但产物由 Agent 把单个品牌的:root块粘贴进一个style生成没有随品牌一起加载的全局样式表。若品牌漏掉--motion-fast产物中transition: var(--motion-fast)就会静默失效。因此在未来的派生脚本落地、把defaults.css值内联进每个品牌的tokens.css之前唯一安全的契约就是每个品牌必须声明每个 A2 token由design-system: A2 required tokensGuard 强制执行。4. 派生输出design-tokens.json 与 tailwind-v4.css 的再生成原则evidence.md对派生文件给出了明确的操作约束design-tokens.jsonandtailwind-v4.cssare derived outputs and should be regenerated from the report and token stylesheet rather than edited by hand.即 design-systems/clay/design-tokens.json 与 design-systems/clay/tailwind-v4.css 是派生缓存而不是并列的事实源。它们必须从source/token-contract.report.jsontokens.css再生成不得手工编辑。这与 design-systems/README.md 中Derived files are caches rather than competing sources of truth的原则一致components.manifest.json← 由components.htmltokens.css派生design-tokens.json← 由 token-contract 报告派生且必须与tokens.css一致tailwind-v4.css← 由tokens.css派生不得独立重定义源值。对照实际文件design-tokens.json的头部也声明了这条链路{ schemaVersion: 1, format: od-design-tokens/v1, contract: TOKEN_SCHEMA, source: { tokensCss: tokens.css, tokenContractReport: source/token-contract.report.json } }其 56 个 token 条目与报告、tokens.css逐行对应例如--bg→#f7eee6→tokens.css:7并额外补充了type字段color / dimension 等。任何手工改动这三者之一导致的不一致都会被包质量 Guard 中的派生文件一致性derived-file parity检查捕获。5. 证据链的实践意义从 DESIGN.md 到组件 fixtureevidence 机制的价值在于包内每一层知识都有可回溯的出处。以 Clay 包为例从证据文件可以逐层还原其完整设计系统5.1 设计规范层DESIGN.mddesign-systems/clay/DESIGN.md 描述了 Clay 的视觉身份暖奶油色画布#faf9f7配燕麦色边框#dad4c8、以 Matcha/Slushie/Lemon/Ube/Pomegranate/Blueberry/Dragonfruit 命名的果汁吧式色板、Roobert 几何无衬线字体5 组 OpenType 特性集ss01/ss03/ss10/ss11/ss12、以及标志性的悬停微动画rotateZ(-8deg)translateY(-80%) 硬偏移投影rgb(0,0,0) -7px 7px。注意这份规范属于品牌参考性质与包内实际 token 化的tokens.css属于同一体系的两个层次——前者描述设计意图与约束后者提供可被组件引用的语义变量。5.2 组件实现层components.htmldesign-systems/clay/components.html 是独立可运行的参考 fixture一个style块内定义了 48 个选择器、26 个类、19 个元素据 design-systems/clay/components.manifest.json 统计。关键实现全部通过var(--token)引用而非硬编码例如.btnmin-height: 44px、border-radius: var(--radius-md)、过渡使用var(--motion-fast) var(--ease-standard).btn-primarybackground: var(--accent); color: var(--accent-on)hover 时background: var(--accent-hover)并translateY(-1px).panelbackground: color-mix(in oklab, var(--surface), transparent 4%)、box-shadow: var(--elev-raised)input:focusbox-shadow: var(--focus-ring); border-color: var(--accent).status::before8px 圆点 var(--radius-pill)var(--success)。components.manifest.json进一步把 48 个选择器归组为 buttons / inputs / cards / badges / links / typography / layout 等组件组并记录每组的 token 引用清单例如 buttons 组引用--accent、--elev-ring、--motion-fast、--radius-md等 12 个 token。该清单还暴露了 7 个已声明未使用token--accent-active、--danger、--elev-flat、--motion-base、--space-1、--space-12、--warn这些是审计时可继续深挖的线索。5.3 使用层USAGE.mddesign-systems/clay/USAGE.md 定义了 Agent 与审查者的读取顺序契约先读 USAGE.md 理解包契约 → 读 DESIGN.md 获取视觉意图与反模式 → 把tokens.css粘贴进首个 artifact 的style块再写组件 CSS → 用components.manifest.json做紧凑组件盘点需要精确选择器或状态时打开components.html→ 需要视觉抽检时查看preview/页面。它还强调保留 schema token 名称原样以保证跨品牌切换可靠避免在:roottoken 块之外使用裸十六进制值并不要声称存在未经验证的原始上游证据——这正是 evidence 精神的延伸。6. Guard 校验证据与派生如何被机器强制执行从源码结构看evidence 与派生文件的约束由多个 Guard 脚本与 schema 共同落地scripts/check-design-system-manifests.ts校验所有manifest.json的形状、声明的路径安全且存在design-system: A2 required tokens与design-system: B-slot required tokensGuard强制每个品牌的:root声明全部共享 token见 design-systems/_schema/AGENTS.md派生文件一致性 Guard验证提交的components.manifest.json与从components.htmltokens.css的新鲜派生一致、design-tokens.json与报告一致、tailwind-v4.css与tokens.css一致README 中的 derived-file parity 检查design-system: A2 defaults parityGuard校验defaults.css与 schema 中 A2 的fallback字段逐字节一致。运行方式为在仓库根目录执行pnpm guard与pnpm typecheck。需要说明的是未来计划中的scripts/derive-tokens-css.ts自动从 DESIGN.md 派生 A1、为 A2 填充 defaults.css当前并不存在属于 schema 文档中留待实现的未来工作当前所有 56 个 token 依然由人工声明的tokens.css承担契约报告中的recommendRebuild: false即表明现有提交状态是自洽的。7. 总结一份证据文件如何支撑整条设计系统链路回到design-systems/clay/source/evidence.md本身这份不足二十行的文档实际上划定了整条生产链路的边界与规则边界声明本包是 curated bundled fixture 的 backfill不是上游爬取——所有后续证据标注都以此为基准来源清单DESIGN.md意图、tokens.css变量、components.html实现三份 fixture 构成包的输入面契约映射token-contract.report.json把 56 个 TOKEN_SCHEMA 绑定逐行映射回tokens.css声明形成报告 → 样式表 → 行号的可审计证据链派生纪律design-tokens.json与tailwind-v4.css只能由报告与 token 样式表再生成禁止手工编辑从而保证 151 个捆绑包以及未来新增包在跨品牌切换、Agent 提示组合时拥有统一且可验证的 Token 语义。对于希望在 OpenDesign 中新增或维护设计系统包的开发者这条证据链给出了明确的作业顺序保持文件夹 slug 与manifest.id一致 → 写齐DESIGN.md至少七个实质性 H2→ 在tokens.css绑定完整共享契约 → 需要组件/预览/证据时补充 rich 文件 → 最后运行pnpm guard与pnpm typecheck让机器验证证据与派生的一致性。源头可溯、派生可重建、差异可被 Guard 拦截——这就是 Design System 2.0 source evidence 机制的完整闭环。【免费下载链接】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），仅供参考