OpenDesign Bugatti 设计系统 BackfillSource Evidence 与 Token Contract 的来源审计机制【免费下载链接】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/bugatti/source/evidence.md 这一来源证据文档展开剖析 Design System 2.0 包在由 curated bundled fixture 回填backfill模式下如何建立可审计的 Token 溯源链。读完本文你将掌握token-contract 报告如何把每个 Token 绑定回 tokens.css 的声明行、A1/B-slot/A2 四层 Token 分层模型、派生产物design-tokens.json、tailwind-v4.css的再生成纪律以及在 Agent 与 Reviewer 工作流中如何用source/目录完成来源合规校验。1. 从上游抓取到 Bundled FixtureBackfill 模式的溯源边界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.这句话定义了整个包的可信度上限Bugatti 包不是对上游品牌官网/仓库的重新爬取fresh crawl而是基于 OpenDesign 预置的精编 fixture 回填而成。这个声明的实际含义是包内所有视觉结论色彩、字号、圆角等均以仓库内已提交的 fixture 文件为证据而不是以外部网站为准任何声称原始上游来源证据的说法都不被允许——USAGE.md 的 Avoid 清单明确写道Avoid claiming original upstream source evidence; this package is based on the curated bundled fixturemanifest.json中的source字段将来源类型标记为type: bundled、origin: OpenDesign curated bundled fixture与证据声明一一对应。这一声明确权机制的价值在于设计系统被 Agent 消费时消费方可以快速判断 Token 值究竟来自品牌一手资料还是来自仓库内部回填从而决定信任等级。2. 包内证据链三大 Fixture 文件与配套产物evidence.md列出的 Included Fixture Files 是整条证据链的起点Fixture 文件职责备注DESIGN.md视觉意图、约束与反模式Dos and Donts记录 Bugatti.com 的影院黑画布、288px Bugatti Display、三字体体系、单色禁欲调色板等分析结论tokens.cssToken 绑定源source of truth:root块内声明全部 56 个 CSS 变量components.html参考组件 fixture配套 components.manifest.json 提供紧凑组件清单围绕三大 fixture仓库还生成了一批配套产物source/tokens.source.json最小化的原始 Token 注册表name / value / layer / source 声明行是 backfill 的直接输入source/token-contract.report.jsonToken 合约审计报告把每个TOKEN_SCHEMA绑定映射回tokens.css的具体声明行design-tokens.json 与 tailwind-v4.css派生产物必须从报告与 Token 样式表再生成不允许手改详见第 5 节preview/ 下的colors.html、typography.html、spacing.html视觉抽查页用于人工 sanity checkmanifest.json包级发现层通过files与sourceFiles字段把以上文件统一编目。一个值得注意的仓库事实DESIGN.md对上游站点的分析是纯#000000影院黑、只有黑/白/#999999三色而 tokens.css 头部注释描述为 hyper-luxury automotive calm with deep blue, chrome edges, and gallery spacing实际声明的--bg: #07111f、--accent: #1b4d8f是深蓝调色板。这种分析文档与回填 Token之间的色值差异正是 evidence 机制存在的原因消费方必须清楚 Token 值来自 curated fixture 而非品牌一手数据不能把回填值当作上游事实。3. Token Contract每个 Token 如何绑定回声明行evidence.md的核心段落只有一段但信息密度极高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.打开 token-contract.report.json其顶层结构为{ schemaVersion: 1, contract: TOKEN_SCHEMA, generatedAt: 2026-06-06T00:00:00.000Z, sourceScope: open-design-bundled-fixture, summary: { ... }, tokens: [ ... 56 条记录 ... ] }summary块给出了整份合约的体检指标token-contract.report.json指标值含义totalTokens56合约覆盖的 Token 总数declaredTokens56tokens.css 中实际声明的 Token 数sourceBackedTokens56有源码背书的 Token 数100%sourceBackedA126属于 A1 层且由源码背书的 Token 数fallbackTokens26使用回退值fallback的 Token 数aliasTokens0别名 Token 数layerCountsA1-identity: 8 / B-slot: 4 / A2: 26 / A1-structure: 18四层分布score / grade100 / excellent合约健康分与评级recommendRebuildfalse是否建议重建派生产物每条 Token 记录都是五元组以--bg为例{ name: --bg, layer: A1-identity, value: #07111f, 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:8]行级溯源指针指明该 Token 的声明来自tokens.css第 8 行。这是maps every TOKEN_SCHEMA binding back to the committed tokens.css declaration line的具体实现——审计时可直接打开 tokens.css 核对该行confidencehigh表明该值可信度来自bundled fixture 内已提交声明这一事实而非外部爬取reason统一措辞Bundled tokens.css declares X; no upstream recrawl was performed for this backfill把证据边界写进每条记录防止未来有人误读为上游来源layerToken 所属的架构分层详见第 4 节。4. 四层 Token 分层模型A1-identity / B-slot / A2 / A1-structureToken 的layer字段并非随意标注而是遵循 design-systems/_schema/AGENTS.md 定义的 Design System 2.0 四层模型层含义缺失时的守卫行为Bugatti 示例A1-identity品牌身份 Token品牌必须亲自声明guard 失败品牌不声明即不通过--bg、--fg、--accent、--font-displayB-slot品牌或 schema 建议的插槽 Token可用var(--sibling)折叠别名也可独立取值guard 失败——品牌必须声明--surface-warm、--fg-2、--meta、--border-softA2通用实现 Token语义色、间距、圆角、动效等无品牌主张时可回退到 schema 默认允许 fallback--space-*、--radius-*、--motion-*、--ease-standardA1-structure结构 Token字号阶梯、行高、容器宽度等guard 失败--text-*、--leading-*、--container-maxBugatti 包的 layerCountsA1-identity 8 / B-slot 4 / A2 26 / A1-structure 18正好反映其特性身份与结构层合计 26 个全部有源码背书sourceBackedA1 26而 A2 层 26 个 Token 走 fallback 机制补全——这与summary中 fallbackTokens 26 完全对得上。Schema 中还定义了C → B-slot → A2 的晋升路径当 ≥2 个品牌声明了同名 C-extension Token 时先晋升为 B-slot带aliasTo: var(--sibling)建议别名当 B-slot 开始被多个品牌独立绑定不再依赖别名折叠时再晋升为 A2 并携带 fallback。这意味着token-contract.report.json中的layer字段会随 schema 演进而重算派生产物也因此必须再生成而非手改。5. 派生产物与再生成纪律design-tokens.json 与 tailwind-v4.cssevidence.md对两个派生产物给出了硬性纪律只能由报告 Token 样式表再生成禁止手工编辑。design-tokens.json格式为od-design-tokens/v1source字段明确记录tokensCss: tokens.css与tokenContractReport: source/token-contract.report.json。相比tokens.css它把每个 Token 增加了机器可读的type分类color如--bg、fontFamily如--font-display、dimension如--text-4xl、number如--leading-body、shadow如--elev-raised、duration如--motion-base、cubicBezier如--ease-standard并保留layer、confidence、sources等溯源字段tailwind-v4.css文件头写明 Derived from tokens.css. Keep tokens.css as the source of truth.通过theme块把每个 CSS 变量桥接到 Tailwind v4 的主题命名空间--color-*颜色、--font-*字体含--font-sans别名到--font-body、--text-*字号、--spacing-*间距、--radius-*圆角、--shadow-*阴影含--shadow-focus-ring到--focus-ring、--duration-*时长、--ease-*缓动、--container-max与--spacing-container-*容器。以两个典型映射为例theme { --color-bg: var(--bg); /* tokens.css:8 的 --bg */ --spacing-section-desktop: var(--section-y-desktop); /* tokens.css:46 */ }由于这些文件是派生产物再生成流程的输入是source/tokens.source.json原始注册表与source/token-contract.report.json审计报告而审计报告又反向锚定tokens.css的行号——三者构成闭环改 Token 只能改tokens.css改完重跑报告与派生产物生成器。summary.recommendRebuild字段当前为 false正是该流程的状态信号为 false 表示派生产物与源码一致无需重建。6. 在 Agent 与 Reviewer 工作流中的应用USAGE.md 给出了消费该包的标准读序先读USAGE.md理解包合约再读DESIGN.md获取视觉意图、约束与反模式把tokens.css粘贴进第一个 artifact 的style块再写组件 CSS用components.manifest.json做紧凑组件盘点需要精确选择器或状态时打开components.html需要视觉 sanity check 时查看preview/页面。在来源审计场景下Reviewer 应按以下清单核验核对summary指标确认score、grade、recommendRebuild状态若sourceBackedTokens totalTokens说明存在无源码背书的 Token抽查sources行号随机取若干 Token打开 tokens.css 对应行确认值与声明一致如--accent应对应tokens.css:17的#1b4d8f比对components.manifest.json的 token 引用该清单提供declared56、referenced组件实际引用、unusedDeclared声明但未引用如--accent-active、--danger、--elev-flat、--motion-base、--space-1、--space-12、--warn三类视图可判断 Token 是否被组件真实消费遵守 evidence 边界任何汇报中不得把回填 Token 描述为上游品牌一手数据引用证据时必须回到source/目录的 report 与 tokens.source.json不做手工改派生产物需要调整色值或字号时只改tokens.css随后再生成design-tokens.json与tailwind-v4.css保持 tokens.css 为 source of truth 的单向依赖。7. 小结evidence.md虽短却是整个 Design System 2.0 可信度体系的入口它界定了 backfill 模式的证据边界bundled fixture 而非 fresh crawl点名了三大 fixture 文件DESIGN.md / tokens.css / components.html并定义了 Token 合约的审计机制——token-contract.report.json负责把每个TOKEN_SCHEMA绑定映射回tokens.css的声明行design-tokens.json与tailwind-v4.css作为派生产物必须从报告与 Token 样式表再生成。结合_schema/AGENTS.md的四层分层模型与components.manifest.json的引用视图这套机制让设计系统包既能被 Agent 直接消费也能被 Reviewer 逐行审计是可追溯的机器可读设计资产这一理念在 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），仅供参考