尧图网站建设  的阅读顺序、Token 契约与组件清单实战)
OpenDesign 设计系统 2.0 包使用指南Meta (Store) 的阅读顺序、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/meta/USAGE.md这份“包级使用契约”为主线面向在 OpenDesign 中消费、审查或二次开发设计系统包的 Agent 与开发者。读完你将掌握一个 Design System 2.0 包内各文件的职责与正确阅读顺序、Meta (Store) 品牌视觉要点的落地方式、tokens.css中 Token 层级契约A1/A2/B-slot/C-extension为何必须原样保留 schema 命名以及如何用components.manifest.json与source/审计证据驱动可靠的前端还原与跨品牌切换。一、包契约是什么Design System 2.0 包的最小结构USAGE.md开宗明义这是一份Design System 2.0 package guide服务对象是 OpenDesign 的 Agent 与审查者reviewers。它的作用不是重复描述视觉规范而是定义“这个包怎么被消费”——先读什么、粘贴什么、查什么、何时需要目测校验。在 OpenDesign 仓库中一个完整的 2.0 包位于 design-systems/meta/其发现层由 manifest.json 声明schemaVersion: od-design-system-project/v1id: meta类别E-Commerce Retail。包内文件职责如下文件角色说明USAGE.md使用路由先读此文件理解包契约与阅读顺序DESIGN.md视觉意图视觉主题、色彩、字体、组件样式、Do/Dont、响应式、Agent 提示词tokens.cssToken 契约结构化 Token 绑定复制进产物style的:root块design-tokens.json派生产物由tokens.css 契约报告生成的 Design Tokens JSONtailwind-v4.css派生产物Tailwind v4theme映射从tokens.css派生components.html组件 fixture可直接复制引用的参考组件与精确选择器components.manifest.json组件清单组件分组、选择器、Token 引用关系的可机读缓存preview/视觉预览colors / typography / spacing 三张静态预览页source/审计证据evidence.md、tokens.source.json、token-contract.report.json从 manifest.schema.ts 的契约定义可以看出usage、componentsManifest、preview、sourceFiles都是可选索引字段供 picker / daemon / importer 在“不猜测文件夹内容”的前提下稳定发现包结构而files.design固定为DESIGN.md、files.tokens固定为tokens.css保证 DESIGN.md-only 的传统包与带 manifest 的新包共用同一读取路径。二、阅读顺序五步走完一个包USAGE.md给出的阅读顺序本身就是一份“包消费 SOP”每一步都有明确的产出物先读USAGE.md本身——理解包契约即本文档。读DESIGN.md——获取视觉意图、约束与反模式anti-patterns。例如 Meta (Store) 的 DESIGN.md 明确写出“不要用 Facebook Blue#1877F2作为主 CTA 色”“不要给暗色区域的卡片加投影”等硬约束。在写组件 CSS 之前把tokens.css粘贴进第一个产物style块。这是关键时序Token 必须先于组件 CSS 就位组件才能用var(--token)而不是裸色值。用components.manifest.json做紧凑的组件盘点当需要精确选择器或状态hover/active/focus时打开components.html。清单是索引fixture 是原文。需要视觉 sanity check 时检查preview/页面——preview/colors.html、preview/typography.html、preview/spacing.html三页分别对应颜色、字体、间距三组 Token 的渲染效果。这套顺序的合理性在于契约怎么用→ 意图做成什么样→ Token用什么值→ 组件怎么复用→ 预览看起来对不对每一层都建立在上一层之上。三、Design HighlightsMeta (Store) 的四个视觉支柱USAGE.md用四条要点概括品牌特征对应 DESIGN.md 中的完整规范摄影优先的零售设计——产品是视觉主角UI 是配角。Design 文档里反复强调“让摄影主导每个区块图片是每个 section 的视觉英雄”大量留白把产品图框成画廊展品。二元表面策略——信息区用纯白沉浸式产品区用深黑。对应tokens.css中--bg: #ffffff浏览/信息与组件级暗色覆盖#1C1E21 / #181A1B / #000000Quest 等沉浸区明暗交替形成“walkthrough”零售节奏。饱和蓝色的胶囊形 CTA——--accent: #0064E0Meta Blue100px 全圆角10px 22px内边距。这是全站唯一的“行动色”链接、焦点态、单个视觉焦点元素都归它管。Optimistic VF 字体——Dalton Maag 为 Meta 定制的可变字体开启 OpenTypess01/ss02特性获得 Meta 特色字形回退链为 Montserrat → Helvetica → Arial → Noto Sans。在 tokens.css 头部注释中这四条被逐一翻译成“品牌化 schema 决策”--bg绑定纯白、--surface绑定暖灰#F7F8FA、--surface-warm独立绑定亚麻色#F2F0E6——三个真正不同的表面层级而不是把第三级别名到 surface避免压平一个有意义的品牌层级前景色绑定四档Dark Charcoal#1C2B33标题→ Slate Gray#5D6C7B正文→ Secondary Text#65676B说明→ CTA Disabled#8595A4弱化/禁用--accent用 Meta Blue#0064E0而非 Facebook Blue#1877F2hover/active 绑定手工调校的#0143B5 / #004BB9而不是用color-mix()简单压暗--radius-pill绑定字面量100px而非 schema 默认的9999px哨兵值因为 Meta 的胶囊半径就是 100px该值会参与真实的内边距与描边几何计算。四、Token 契约为什么“schema token 命名”必须一字不差USAGE.md的 Do 清单第一条是“精确保留 schema token 名称保证跨品牌切换可靠”。要理解这条约束的底层逻辑需要看 OpenDesign 的 Token 分层契约——定义在 token-schema.ts并在 tokens.schema.ts 中兼容再导出层级含义缺失时的行为A1-identity必需。Token 即品牌本身--bg、--fg、--accent、字体栈无回退可替代校验失败A1-structure必需。结构性决策字号阶梯、布局网格、区块节奏各品牌自行编写校验失败A2最终tokens.css中必需但_schema/defaults.css提供合理回退derive 脚本会内联可回退但运行时仍要求声明B-slot可选 schema 槽位。品牌无更丰富层级时可aliasTo别名到兄弟 token如--fg-2→var(--fg)引用它的组件总能解析C-extension品牌专属扩展必须显式列入BRAND_EXTENSIONS白名单跨品牌通用组件不得引用未列入即被守卫拒绝为什么 A2 是“带回退的必需”而不是“可选”token-schema.ts 的注释给出了原因产物是由 Agent 把某个品牌的:root块粘贴进单个style生成的不存在运行时全局默认样式表的级联。如果粘贴的tokens.css缺了某个var()目标transition: var(--motion-fast)会变成空值、整条规则被丢弃产出“坏产物”。因此运行时契约是“每个tokens.css必须声明全部 A1 A2 B-slot token”。Meta 包的合规状态可由 design-tokens.json 的 summary 验证totalTokens: 56sourceBackedTokens: 56层级分布A1-identity: 8 / B-slot: 4 / A2: 26 / A1-structure: 18score: 100、grade: excellent、recommendRebuild: false——即所有 schema 绑定都有tokens.css中的声明行作为证据无回退兜底无别名折叠。“保留命名”的实际收益当 Agent 在多个品牌间切换时只要 token 名一致--accent、--radius-pill、--section-y-desktop这些槽位就能在不同品牌间无缝替换而若某个品牌把--surface-warm直接别名为var(--surface)跨品牌组件对该槽位的引用依然能解析B-slot 设计保证但视觉层级会被压平。五、Do 清单四条正向操作规范USAGE.md的 Do 清单是给 Agent 的“正确姿势”逐条展开如下1. 精确保留 schema token 名称。如第四节所述这是跨品牌切换可靠性的根基。粘贴tokens.css的:root块时不要改名、不要合并同类项、不要顺手“优化”掉看似冗余的层级——每个槽位都对应 schema 中一个被守卫检查追踪的绑定。2. 用--accent表达主操作、链接、焦点态以及一个清晰的视觉焦点元素。对应 DESIGN.md 的“Meta Blue 只用于可操作元素”且token-schema.ts中--accent的注释写明“每屏可见使用 ≤2 处lint 强制”——accent 是稀缺资源不能到处乱涂。3. 优先复用components.manifest.json中的组件分组而不是发明新控件。该清单是components.htmltokens.css的可重建缓存统计显示 Meta fixture 包含 1 个 style 块、55 个选择器、31 个类、25 个元素并归为 9 个组件分组。下表是各组的选择器与 Token 依赖摘自 components.manifest.json分组关键选择器引用的 Token 示例buttons按钮/CTA.btn、.btn-primary、:hover、:active、.btn-secondary、.btn:focus-visible--accent、--accent-active、--accent-on、--radius-pill、--motion-fast、--text-sminputs表单控件.field、.field input、::placeholder、:focus-visible、.field label、.field-help--accent、--focus-ring、--muted、--text-smcards卡片/面板.card、.card-feature、.card:hover--elev-raisedbadges徽章/状态标签.badge、.badge-dot、.badge-muted、.badge-success--muted、--radius-pill、--surface、--text-xslinks链接/行内动作a、a:hover--accent、--ease-standard、--motion-fastkeyboard键盘提示kbd--font-mono、--border-soft、--radius-smicons图标槽位.iconsvg无 Token 依赖typography字体阶梯.eyebrow、.lead、.body-muted、.body-sm、h1/h2/h3--text-xs~--text-4xl、--tracking-display、--fg-2、--mutedlayout布局原语.container、.row-between、.stack-3/4/6/8、section--container-max、--container-gutter-*、--space-4、--space-8值得注意的清单卫生数据undeclaredReferenced: []组件引用的每个 token 都有声明零悬空引用unusedDeclared: [--danger, --elev-flat, --meta, --space-1, --warn]少量声明但未被当前 fixture 引用的 token属正常储备供未来组件使用。这条“先复用、后发明”的约束配合“新增 recipe 必须能在components.html或DESIGN.md中找到依据”能有效防止 Agent 输出与品牌无关的野组件。4. 把source/文件当作“捆绑 fixture 回填”的审计证据。source/evidence.md 明确声明本包派生自 OpenDesign 精选捆绑 fixture并未对上游品牌仓库或网站做新一轮爬取。source/token-contract.report.json把每个 TOKEN_SCHEMA 绑定映射回tokens.css的具体声明行如design-tokens.json中--bg的sources: [tokens.css:111]构成可追溯的证据链。六、Avoid 清单四条红线与它们的工程理由USAGE.md的 Avoid 清单定义了 Agent 的“行为禁区”每条都有实际工程后果1. 避免在复制的:rootToken 块之外使用裸十六进制色值。一旦组件 CSS 里出现#0064E0之类的字面量品牌切换时该组件不会跟随--accent变化跨品牌可靠性立刻被破坏同时裸色值也绕过了 lint 对--accent每屏使用次数的限制。2. 避免脱离tokens.css独立重定义 Tailwind 或 design-token 值。tailwind-v4.css 的文件头写明“Derived from tokens.css. Keep tokens.css as the source of truth”其theme块只是把--color-accent: var(--accent)、--text-4xl: var(--text-4xl)等 Token 桥接给 Tailwind 工具类design-tokens.json同样标注format: od-design-tokens/v1。按 evidence.md 的要求这两个派生产物应从契约报告与 token 样式表重新生成而不是手工编辑否则会与源文件漂移。3. 避免声称存在“上游原始来源证据”。这是一个事实边界问题本包基于精选捆绑 fixture 构建manifest 中source.type: bundled、origin: OpenDesign curated bundled fixture并未爬取 Meta 官方站点。因此文章、审查与 Agent 提示中都不能把本包内容表述为“来自官方源码审计”只能表述为“基于 OpenDesign 捆绑 fixture 的策展回填”。4. 避免添加components.html或DESIGN.md中不存在的组件 recipe。这保证了“组件清单可审计”任何新 recipe 都必须能在 fixture 或设计文档中找到出处防止品牌系统被无关样式污染。七、落地校验从契约到可运行产物的三条路径把契约落到实处OpenDesign 提供了三类可验证的产物路径CSS 路径复制 tokens.css 的:root块进产物style这正是USAGE.md阅读顺序第 3 步再按 components.html 中的精确选择器组装组件。components.html内嵌的:root与tokens.css完全一致两者均含 56 个 Token 声明。Design Tokens 路径需要 JSON 形态的 token 时读 design-tokens.json每个 token 含name / value / type / layer / confidence / reason / sources字段sources直接指向tokens.css的行号可用作引用与审计。Tailwind v4 路径Tailwind 项目可在 tailwind-v4.css 基础上import tailwindcss与import ./tokens.css随后直接使用bg-accent、text-fg-2、rounded-pill、text-4xl等语义化工具类。运行时行为由守卫与 lint 兜底Token 的 A2 回退值镜像在 defaults.css供 derive 脚本内联与人工核对而tokens.css头部注释标注的 lint 强制点在 lint-artifact.tsA2 回退与 schema 的漂移则由仓库内design-system: A2 defaults parity守卫检查强制一致。审查者核对一个包是否健康可以依次检查manifest.json字段是否通过 v1 schema 校验、components.manifest.json的undeclaredReferenced是否为空、design-tokens.json的score/grade是否为满分/recommendRebuild是否为false。八、核对表审查或消费 Meta (Store) 包时的最终清单综合USAGE.md的全部 Do/Avoid可沉淀为一份可直接用于审查的 checklist阅读顺序是否合规USAGE → DESIGN → 粘贴tokens.css到首个style→ 查components.manifest.json/components.html→ 目测preview/Token 命名是否原样保留design-tokens.json应报告 56/56 source-backedgrade: excellent组件是否全部复用清单内分组未引入 fixture 之外的 recipe产物中是否出现:root块之外的裸十六进制色值、是否绕过--accent使用限制Tailwind/design-token 值是否均通过var()桥接自tokens.css而非独立定义文案与审查结论是否避免“上游原始来源”类表述仅以捆绑 fixture 为证据边界暗色沉浸区Quest/Ray-Ban/Portal 场景是否使用组件级表面覆盖而非表面 token胶囊 CTA 是否为--accent--radius-pill(100px)。按此清单执行即可在 OpenDesign 的 Agent 工作流中稳定复现 Meta (Store) 的“摄影优先、二元表面、Meta Blue 胶囊 CTA”零售体验同时保证产物可被跨品牌切换与机器审计持续消费。【免费下载链接】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 设计系统 2.0 包使用指南：Meta (Store) 的阅读顺序、Token 契约与组件清单实战
OpenDesign 设计系统 2.0 包使用指南Meta (Store) 的阅读顺序、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/meta/USAGE.md这份“包级使用契约”为主线面向在 OpenDesign 中消费、审查或二次开发设计系统包的 Agent 与开发者。读完你将掌握一个 Design System 2.0 包内各文件的职责与正确阅读顺序、Meta (Store) 品牌视觉要点的落地方式、tokens.css中 Token 层级契约A1/A2/B-slot/C-extension为何必须原样保留 schema 命名以及如何用components.manifest.json与source/审计证据驱动可靠的前端还原与跨品牌切换。一、包契约是什么Design System 2.0 包的最小结构USAGE.md开宗明义这是一份Design System 2.0 package guide服务对象是 OpenDesign 的 Agent 与审查者reviewers。它的作用不是重复描述视觉规范而是定义“这个包怎么被消费”——先读什么、粘贴什么、查什么、何时需要目测校验。在 OpenDesign 仓库中一个完整的 2.0 包位于 design-systems/meta/其发现层由 manifest.json 声明schemaVersion: od-design-system-project/v1id: meta类别E-Commerce Retail。包内文件职责如下文件角色说明USAGE.md使用路由先读此文件理解包契约与阅读顺序DESIGN.md视觉意图视觉主题、色彩、字体、组件样式、Do/Dont、响应式、Agent 提示词tokens.cssToken 契约结构化 Token 绑定复制进产物style的:root块design-tokens.json派生产物由tokens.css 契约报告生成的 Design Tokens JSONtailwind-v4.css派生产物Tailwind v4theme映射从tokens.css派生components.html组件 fixture可直接复制引用的参考组件与精确选择器components.manifest.json组件清单组件分组、选择器、Token 引用关系的可机读缓存preview/视觉预览colors / typography / spacing 三张静态预览页source/审计证据evidence.md、tokens.source.json、token-contract.report.json从 manifest.schema.ts 的契约定义可以看出usage、componentsManifest、preview、sourceFiles都是可选索引字段供 picker / daemon / importer 在“不猜测文件夹内容”的前提下稳定发现包结构而files.design固定为DESIGN.md、files.tokens固定为tokens.css保证 DESIGN.md-only 的传统包与带 manifest 的新包共用同一读取路径。二、阅读顺序五步走完一个包USAGE.md给出的阅读顺序本身就是一份“包消费 SOP”每一步都有明确的产出物先读USAGE.md本身——理解包契约即本文档。读DESIGN.md——获取视觉意图、约束与反模式anti-patterns。例如 Meta (Store) 的 DESIGN.md 明确写出“不要用 Facebook Blue#1877F2作为主 CTA 色”“不要给暗色区域的卡片加投影”等硬约束。在写组件 CSS 之前把tokens.css粘贴进第一个产物style块。这是关键时序Token 必须先于组件 CSS 就位组件才能用var(--token)而不是裸色值。用components.manifest.json做紧凑的组件盘点当需要精确选择器或状态hover/active/focus时打开components.html。清单是索引fixture 是原文。需要视觉 sanity check 时检查preview/页面——preview/colors.html、preview/typography.html、preview/spacing.html三页分别对应颜色、字体、间距三组 Token 的渲染效果。这套顺序的合理性在于契约怎么用→ 意图做成什么样→ Token用什么值→ 组件怎么复用→ 预览看起来对不对每一层都建立在上一层之上。三、Design HighlightsMeta (Store) 的四个视觉支柱USAGE.md用四条要点概括品牌特征对应 DESIGN.md 中的完整规范摄影优先的零售设计——产品是视觉主角UI 是配角。Design 文档里反复强调“让摄影主导每个区块图片是每个 section 的视觉英雄”大量留白把产品图框成画廊展品。二元表面策略——信息区用纯白沉浸式产品区用深黑。对应tokens.css中--bg: #ffffff浏览/信息与组件级暗色覆盖#1C1E21 / #181A1B / #000000Quest 等沉浸区明暗交替形成“walkthrough”零售节奏。饱和蓝色的胶囊形 CTA——--accent: #0064E0Meta Blue100px 全圆角10px 22px内边距。这是全站唯一的“行动色”链接、焦点态、单个视觉焦点元素都归它管。Optimistic VF 字体——Dalton Maag 为 Meta 定制的可变字体开启 OpenTypess01/ss02特性获得 Meta 特色字形回退链为 Montserrat → Helvetica → Arial → Noto Sans。在 tokens.css 头部注释中这四条被逐一翻译成“品牌化 schema 决策”--bg绑定纯白、--surface绑定暖灰#F7F8FA、--surface-warm独立绑定亚麻色#F2F0E6——三个真正不同的表面层级而不是把第三级别名到 surface避免压平一个有意义的品牌层级前景色绑定四档Dark Charcoal#1C2B33标题→ Slate Gray#5D6C7B正文→ Secondary Text#65676B说明→ CTA Disabled#8595A4弱化/禁用--accent用 Meta Blue#0064E0而非 Facebook Blue#1877F2hover/active 绑定手工调校的#0143B5 / #004BB9而不是用color-mix()简单压暗--radius-pill绑定字面量100px而非 schema 默认的9999px哨兵值因为 Meta 的胶囊半径就是 100px该值会参与真实的内边距与描边几何计算。四、Token 契约为什么“schema token 命名”必须一字不差USAGE.md的 Do 清单第一条是“精确保留 schema token 名称保证跨品牌切换可靠”。要理解这条约束的底层逻辑需要看 OpenDesign 的 Token 分层契约——定义在 token-schema.ts并在 tokens.schema.ts 中兼容再导出层级含义缺失时的行为A1-identity必需。Token 即品牌本身--bg、--fg、--accent、字体栈无回退可替代校验失败A1-structure必需。结构性决策字号阶梯、布局网格、区块节奏各品牌自行编写校验失败A2最终tokens.css中必需但_schema/defaults.css提供合理回退derive 脚本会内联可回退但运行时仍要求声明B-slot可选 schema 槽位。品牌无更丰富层级时可aliasTo别名到兄弟 token如--fg-2→var(--fg)引用它的组件总能解析C-extension品牌专属扩展必须显式列入BRAND_EXTENSIONS白名单跨品牌通用组件不得引用未列入即被守卫拒绝为什么 A2 是“带回退的必需”而不是“可选”token-schema.ts 的注释给出了原因产物是由 Agent 把某个品牌的:root块粘贴进单个style生成的不存在运行时全局默认样式表的级联。如果粘贴的tokens.css缺了某个var()目标transition: var(--motion-fast)会变成空值、整条规则被丢弃产出“坏产物”。因此运行时契约是“每个tokens.css必须声明全部 A1 A2 B-slot token”。Meta 包的合规状态可由 design-tokens.json 的 summary 验证totalTokens: 56sourceBackedTokens: 56层级分布A1-identity: 8 / B-slot: 4 / A2: 26 / A1-structure: 18score: 100、grade: excellent、recommendRebuild: false——即所有 schema 绑定都有tokens.css中的声明行作为证据无回退兜底无别名折叠。“保留命名”的实际收益当 Agent 在多个品牌间切换时只要 token 名一致--accent、--radius-pill、--section-y-desktop这些槽位就能在不同品牌间无缝替换而若某个品牌把--surface-warm直接别名为var(--surface)跨品牌组件对该槽位的引用依然能解析B-slot 设计保证但视觉层级会被压平。五、Do 清单四条正向操作规范USAGE.md的 Do 清单是给 Agent 的“正确姿势”逐条展开如下1. 精确保留 schema token 名称。如第四节所述这是跨品牌切换可靠性的根基。粘贴tokens.css的:root块时不要改名、不要合并同类项、不要顺手“优化”掉看似冗余的层级——每个槽位都对应 schema 中一个被守卫检查追踪的绑定。2. 用--accent表达主操作、链接、焦点态以及一个清晰的视觉焦点元素。对应 DESIGN.md 的“Meta Blue 只用于可操作元素”且token-schema.ts中--accent的注释写明“每屏可见使用 ≤2 处lint 强制”——accent 是稀缺资源不能到处乱涂。3. 优先复用components.manifest.json中的组件分组而不是发明新控件。该清单是components.htmltokens.css的可重建缓存统计显示 Meta fixture 包含 1 个 style 块、55 个选择器、31 个类、25 个元素并归为 9 个组件分组。下表是各组的选择器与 Token 依赖摘自 components.manifest.json分组关键选择器引用的 Token 示例buttons按钮/CTA.btn、.btn-primary、:hover、:active、.btn-secondary、.btn:focus-visible--accent、--accent-active、--accent-on、--radius-pill、--motion-fast、--text-sminputs表单控件.field、.field input、::placeholder、:focus-visible、.field label、.field-help--accent、--focus-ring、--muted、--text-smcards卡片/面板.card、.card-feature、.card:hover--elev-raisedbadges徽章/状态标签.badge、.badge-dot、.badge-muted、.badge-success--muted、--radius-pill、--surface、--text-xslinks链接/行内动作a、a:hover--accent、--ease-standard、--motion-fastkeyboard键盘提示kbd--font-mono、--border-soft、--radius-smicons图标槽位.iconsvg无 Token 依赖typography字体阶梯.eyebrow、.lead、.body-muted、.body-sm、h1/h2/h3--text-xs~--text-4xl、--tracking-display、--fg-2、--mutedlayout布局原语.container、.row-between、.stack-3/4/6/8、section--container-max、--container-gutter-*、--space-4、--space-8值得注意的清单卫生数据undeclaredReferenced: []组件引用的每个 token 都有声明零悬空引用unusedDeclared: [--danger, --elev-flat, --meta, --space-1, --warn]少量声明但未被当前 fixture 引用的 token属正常储备供未来组件使用。这条“先复用、后发明”的约束配合“新增 recipe 必须能在components.html或DESIGN.md中找到依据”能有效防止 Agent 输出与品牌无关的野组件。4. 把source/文件当作“捆绑 fixture 回填”的审计证据。source/evidence.md 明确声明本包派生自 OpenDesign 精选捆绑 fixture并未对上游品牌仓库或网站做新一轮爬取。source/token-contract.report.json把每个 TOKEN_SCHEMA 绑定映射回tokens.css的具体声明行如design-tokens.json中--bg的sources: [tokens.css:111]构成可追溯的证据链。六、Avoid 清单四条红线与它们的工程理由USAGE.md的 Avoid 清单定义了 Agent 的“行为禁区”每条都有实际工程后果1. 避免在复制的:rootToken 块之外使用裸十六进制色值。一旦组件 CSS 里出现#0064E0之类的字面量品牌切换时该组件不会跟随--accent变化跨品牌可靠性立刻被破坏同时裸色值也绕过了 lint 对--accent每屏使用次数的限制。2. 避免脱离tokens.css独立重定义 Tailwind 或 design-token 值。tailwind-v4.css 的文件头写明“Derived from tokens.css. Keep tokens.css as the source of truth”其theme块只是把--color-accent: var(--accent)、--text-4xl: var(--text-4xl)等 Token 桥接给 Tailwind 工具类design-tokens.json同样标注format: od-design-tokens/v1。按 evidence.md 的要求这两个派生产物应从契约报告与 token 样式表重新生成而不是手工编辑否则会与源文件漂移。3. 避免声称存在“上游原始来源证据”。这是一个事实边界问题本包基于精选捆绑 fixture 构建manifest 中source.type: bundled、origin: OpenDesign curated bundled fixture并未爬取 Meta 官方站点。因此文章、审查与 Agent 提示中都不能把本包内容表述为“来自官方源码审计”只能表述为“基于 OpenDesign 捆绑 fixture 的策展回填”。4. 避免添加components.html或DESIGN.md中不存在的组件 recipe。这保证了“组件清单可审计”任何新 recipe 都必须能在 fixture 或设计文档中找到出处防止品牌系统被无关样式污染。七、落地校验从契约到可运行产物的三条路径把契约落到实处OpenDesign 提供了三类可验证的产物路径CSS 路径复制 tokens.css 的:root块进产物style这正是USAGE.md阅读顺序第 3 步再按 components.html 中的精确选择器组装组件。components.html内嵌的:root与tokens.css完全一致两者均含 56 个 Token 声明。Design Tokens 路径需要 JSON 形态的 token 时读 design-tokens.json每个 token 含name / value / type / layer / confidence / reason / sources字段sources直接指向tokens.css的行号可用作引用与审计。Tailwind v4 路径Tailwind 项目可在 tailwind-v4.css 基础上import tailwindcss与import ./tokens.css随后直接使用bg-accent、text-fg-2、rounded-pill、text-4xl等语义化工具类。运行时行为由守卫与 lint 兜底Token 的 A2 回退值镜像在 defaults.css供 derive 脚本内联与人工核对而tokens.css头部注释标注的 lint 强制点在 lint-artifact.tsA2 回退与 schema 的漂移则由仓库内design-system: A2 defaults parity守卫检查强制一致。审查者核对一个包是否健康可以依次检查manifest.json字段是否通过 v1 schema 校验、components.manifest.json的undeclaredReferenced是否为空、design-tokens.json的score/grade是否为满分/recommendRebuild是否为false。八、核对表审查或消费 Meta (Store) 包时的最终清单综合USAGE.md的全部 Do/Avoid可沉淀为一份可直接用于审查的 checklist阅读顺序是否合规USAGE → DESIGN → 粘贴tokens.css到首个style→ 查components.manifest.json/components.html→ 目测preview/Token 命名是否原样保留design-tokens.json应报告 56/56 source-backedgrade: excellent组件是否全部复用清单内分组未引入 fixture 之外的 recipe产物中是否出现:root块之外的裸十六进制色值、是否绕过--accent使用限制Tailwind/design-token 值是否均通过var()桥接自tokens.css而非独立定义文案与审查结论是否避免“上游原始来源”类表述仅以捆绑 fixture 为证据边界暗色沉浸区Quest/Ray-Ban/Portal 场景是否使用组件级表面覆盖而非表面 token胶囊 CTA 是否为--accent--radius-pill(100px)。按此清单执行即可在 OpenDesign 的 Agent 工作流中稳定复现 Meta (Store) 的“摄影优先、二元表面、Meta Blue 胶囊 CTA”零售体验同时保证产物可被跨品牌切换与机器审计持续消费。【免费下载链接】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），仅供参考