AI 应用人工智能AI 技能设计系统媒体生成【免费下载链接】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点击查看免费下载导读本篇文章围绕 open-design 仓库中design-systems/openai/source/evidence.md展开剖析设计系统 2.0 回填backfill的**来源证据Source Evidence**与Token 契约Token Contract机制。你将理解为什么一个设计系统包需要独立的证据清单、token-contract.report.json如何把 56 个 schema token 一一映射回tokens.css的声明行、以及design-tokens.json与tailwind-v4.css为何被定义为派生输出而非手写产物。读完本文你可以直接在 open-design 的 design-systems 目录中按证据链审计任意品牌包并掌握bundled fixture 回填这一数据来源模式的落地方式。一、源证据文档的定位为回填包建立可审计的来源边界1.1 什么是 Design System 2.0 backfill在 open-design 仓库中design-systems/目录收录了大量品牌设计系统包openai、claude、stripe、vercel 等每个包由DESIGN.md视觉意图、tokens.css结构化 token 绑定、components.html组件夹具三件套构成。而source/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.这句话是整个证据机制的核心该 OpenAI 包派生自仓库内置的精选 fixturebundled fixture而不是对上游 OpenAI 品牌仓库或官网的重新爬取。这与manifest.json中的source字段完全一致——design-systems/openai/manifest.json 声明source: { type: bundled, origin: OpenDesign curated bundled fixture }。也就是说证据文档的任务不是证明我们爬到了什么而是诚实声明数据来自哪里、不来自哪里从而为后续所有审计动作提供边界。1.2 证据与 UI 规范文档的分工仓库遵循读序Read Order约定见 design-systems/openai/USAGE.md先读USAGE.md了解包契约再读DESIGN.md获取视觉意图、约束与反模式将tokens.css粘贴进第一个 artifact 的style块后再写组件 CSS用components.manifest.json获取组件清单需要精确选择器时查阅components.html用preview/页面做视觉 sanity check。source/evidence.md在这条链上扮演第 0 步它回答这套规范的可信度边界在哪里避免 Agent 或审阅者误把派生结果当作一手上游证据。二、Included Fixture Files证据清单与三件套evidence.md 列出了该回填包对应的三个 fixture 文件文件角色design-systems/openai/DESIGN.md视觉规范主体色彩角色、字体层级、组件样式、间距、动效、使用护栏design-systems/openai/tokens.css结构化 token 绑定全部 CSS 自定义属性的单一事实来源design-systems/openai/components.html组件夹具每个可见值均来自 tokens.css 的参考实现这三者共同构成fixture 三角。其中components.html还配套生成了一份机器可读清单 design-systems/openai/components.manifest.json其中记录了 41 个选择器、18 个类、24 个元素以及每个组件组buttons / inputs / cards / badges / links / icons / typography / layout引用的 token 列表。例如 buttons 组引用了--accent、--accent-on、--radius-sm、--space-2等 12 个 token——这正是 evidence.md 所说的每个绑定都可回溯到样式表的组件侧证据。三、Token Contract把每个 schema 绑定映射回声明行evidence.md 的核心段落只有一句话但信息密度极高source/token-contract.report.jsonmaps every TOKEN_SCHEMA binding back to the committedtokens.cssdeclaration line.3.1 报告的结构与总分design-systems/openai/source/token-contract.report.json 是一份 100 分的契约报告关键汇总字段如下{ schemaVersion: 1, contract: TOKEN_SCHEMA, sourceScope: open-design-bundled-fixture, summary: { 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 } }totalTokens 56declaredTokens 56sourceBackedTokens 56schema 要求的每个 token 都在tokens.css中有声明且都有来源行支撑因此score 100、grade excellent、recommendRebuild false。fallbackTokens 26恰好等于 A2 层 token 数——这 26 个 token 在 schema 中有跨品牌默认回退值见下文第四节的fallback机制。aliasTokens 0OpenAI 包没有使用 B-slot 的var()别名降级而是全部显式声明。3.2 逐 token 的证据行报告中每个 token 都携带sources数组直接指向tokens.css的声明行号。例如{ name: --accent, layer: A1-identity, value: #10a37f, confidence: high, reason: Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill., sources: [tokens.css:49], sourceName: --accent }这种token → 行号 → 原因的三段式记录使得审计可以按行核对--accent: #10a37f确实在 design-systems/openai/tokens.css 第 49 行。任何一次对tokens.css的改动都可以通过重新生成报告来暴露哪些绑定失去了来源行。四、TOKEN_SCHEMA 四层模型契约背后的源码依据evidence.md 提到的TOKEN_SCHEMA并非虚构概念其权威定义在 packages/contracts/src/design-systems/token-schema.ts。该文件把每个 token 划入四个层由谁决定值、品牌缺失时怎么办来区分层含义缺失时的行为OpenAI 包实例A1-identity必需token 即品牌无可替代的 fallback--bg、--fg、--accent、字体栈8 个A1-structure必需结构性决策字号阶、栅格、章节节奏每个品牌必须自拟--text-*、--container-*、--section-y-*18 个A2最终 tokens.css 中必需但存在合理 fallback派生脚本从_schema/defaults.css内联补齐--accent-hover、--radius-sm、--space-*等26 个B-slot可选槽位跨品牌一致性的扩展层通过var()别名到兄弟 token--surface-warm、--fg-2、--meta、--border-soft4 个C-extension品牌私有扩展需显式 allowlist跨品牌组件不得引用--space-1664px见BRAND_EXTENSIONS.openai这份分层与报告中的layerCounts完全对得上A1-identity 8 A1-structure 18 A2 26 B-slot 4 56。其中BRAND_EXTENSIONS.openai明确 allowlist 了--space-16对应 OpenAI DESIGN.md §5 间距刻度中的 64px 章节间隙而--space-16在 design-systems/openai/tokens.css 第 100 行也确实有声明。4.1 为什么 A2 是带 fallback 的必需而不是可选token-schema.ts 的注释给出了一个非常实际的工程理由artifact 由 Agent 把某个品牌的:root块粘贴进单个style生成运行时不存在全局默认样式表的级联。如果粘贴的 tokens.css 缺少某个var()目标transition: var(--motion-fast)会被解析成transition:空值并被浏览器丢弃直接产生坏产物。因此运行时契约是每个 tokens.css 必须声明全部 A1 A2 B-slot tokenfallback 只存在于派生脚本derive script的输入侧——即 design-systems/_schema/defaults.css它永远不会到达浏览器。4.2 OpenAI 包对 schema 默认值的选择性覆盖对比_schema/defaults.css与 OpenAI 的tokens.css可以看到品牌在 A2 层上的覆盖策略tokenschema 默认值defaults.cssOpenAI 实际值--accent-hovercolor-mix(in oklab, var(--accent), black 8%)#0a7a5e手工挑选的 Teal Deep--accent-activecolor-mix(in oklab, var(--accent), black 14%)同公式直接沿用--success#16a34a#10a37f与品牌 teal 合并--danger#dc2626#ef4146OpenAI 语义红--radius-md12px16px卡片圆角--motion-base200ms220ms--ease-standardcubic-bezier(0.2, 0, 0, 1)cubic-bezier(0.16, 1, 0.3, 1)smooth-out这正是报告里sourceBackedTokens 56的意义即便 A2 有全局默认OpenAI 包仍逐项声明了自有值报告据此记录每个 token 的来源行 高置信度而fallbackTokens 26仅表示schema 为这些 token 提供了可用的跨品牌回退不代表品牌用了回退值。defaults.css与token-schema.ts之间的字节级一致性由 guard 检查design-system: A2 defaults parity强制维护见 design-systems/_schema/defaults.css 头部注释修改时必须两者同步。五、派生输出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.5.1 什么是派生输出design-systems/openai/design-tokens.json把tokens.css的 56 个声明转成带typecolor / spacing / font-family 等与layer标注的结构化 JSON。其source字段明确记录tokensCss: tokens.css、tokenContractReport: source/token-contract.report.json摘要与契约报告完全一致score: 100、grade: excellent。design-systems/openai/tailwind-v4.css面向 Tailwind v4 的 token 桥接输出同样以 tokens.css 为事实来源。5.2 为什么禁止手改因为这两个文件是单向下游源头在tokens.csstoken-contract.report.json。手改派生文件会造成三处漂移——契约报告、结构化 JSON、Tailwind 桥接各自持有不同的值而审计机制guard 检查按契约报告核验。正确的变更流程是编辑design-systems/openai/tokens.css唯一事实源重新生成source/token-contract.report.json确认每个改动仍映射到声明行由生成脚本从报告 样式表重建design-tokens.json与tailwind-v4.css。仓库中负责生成系统级资产的脚本是 scripts/generate-design-system-system-assets.ts它会遍历各品牌包并校验/产出派生资产从源码结构看正是这条report → derived outputs管线的落地实现。六、从 evidence 到使用护栏回填包的完整工作流综合 design-systems/openai/USAGE.md 与 evidence.md一个基于 bundled fixture 的设计系统包其生产与消费闭环可以归纳为生产侧回填方从精选 fixture 提取DESIGN.md视觉意图、tokens.csstoken 绑定、components.html组件夹具生成components.manifest.json组件清单与source/token-contract.report.jsontoken 契约报告以报告为准重建design-tokens.json、tailwind-v4.css在source/evidence.md中如实声明来源边界bundled fixture非上游爬取。消费侧Agent / 审阅者引用 token 时严格使用 schema 名称--accent、--surface…保证跨品牌切换可靠Do 清单避免在:roottoken 块之外使用裸 hex 值不得脱离tokens.css另行定义 Tailwind / design-token 值不得声称拥有原始上游来源证据Avoid 清单。从实现细节看token-contract.report.json与components.manifest.json共同构成了双份机器可验证证据前者证明每个 token 绑定有声明行后者证明每个组件选择器引用的 token 都在声明集中undeclaredReferenced字段为空数组说明组件引用与 token 声明零缺口。七、实践建议如何基于 evidence 审计其他品牌包将 evidence.md 的方法论推广到 design-systems 下任意品牌包时可以按三步走查来源边界读source/evidence.md或manifest.json的source字段确认数据是bundled内置 fixture 回填还是其他类型据此调整对上游证据的期待值核契约报告打开source/token-contract.report.json检查summary.score、sourceBackedTokens、layerCounts是否与tokens.css实际声明一致必要时抽查若干sources行号验派生文件确认design-tokens.json、tailwind-v4.css的摘要与报告一致若不一致走改 tokens.css → 重新生成的路径而非手改派生文件。这一机制让设计系统包从一份好看的 CSS升级为可审计、可重放、可跨品牌切换的契约系统——这正是 evidence.md 虽然只有短短几行却值得作为每个回填包标配审计入口的原因。参考文件索引源证据design-systems/openai/source/evidence.mdToken 契约报告design-systems/openai/source/token-contract.report.jsonToken 绑定源design-systems/openai/tokens.css视觉规范design-systems/openai/DESIGN.md包使用指南design-systems/openai/USAGE.md组件夹具清单design-systems/openai/components.manifest.json包清单design-systems/openai/manifest.jsonSchema 契约定义packages/contracts/src/design-systems/token-schema.tsA2 回退默认值design-systems/_schema/defaults.css派生资产生成脚本scripts/generate-design-system-system-assets.ts赞分享AI 应用人工智能AI 技能设计系统媒体生成【免费下载链接】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点击查看免费下载相关推荐Open Design Fantasy 设计系统 2.0 回填源证据链与 Token 契约的可追溯性实践Open Design Fantasy 设计系统 2.0 回填源证据链与 Token 契约的可追溯性实践 本文围绕 design systems/fantasAI 应用人工智能AI 技能设计系统媒体生成Source Han Serif CN 思源宋体你的中文设计新伙伴Source Han Serif CN 思源宋体你的中文设计新伙伴 你是否曾经在设计中文项目时为寻找一款既专业又免版税的字体而烦恼或者你厌倦了在商业项目中AI 应用人工智能AI 技能设计系统媒体生成OpenDesign Airtable 设计系统 2.0 回填source/evidence.md 溯源契约与 Token 契约报告解读OpenDesign Airtable 设计系统 2.0 回填source/evidence.md 溯源契约与 Token 契约报告解读 导读 本文围绕 OpAI 应用人工智能AI 技能设计系统媒体生成上一篇TrollApps技术架构分析构建iOS生态下的分布式应用分发系统下一篇corefxlab未来路线图即将发布的5大重要特性创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考