OpenDesign 设计系统包使用指南Sanity 风格包的读取顺序、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 中的 Agent 与人工审查者reviewers系统讲解 Design System 2.0 包以 Sanity 风格包为实例的完整使用契约如何按正确顺序读取包内文档、如何将 Token 与组件清单落地到实际 artifact、以及哪些是必须遵守的规范、哪些是必须规避的反模式。读完本文你将掌握从「读文档」到「写组件样式」再到「审计 Token 契约」的完整工作流并能用包内源码文件验证每一步的依据。1. 什么是 Design System 2.0 包在 OpenDesign 仓库的design-systems/目录下每个子目录如sanity/、stripe/、vercel/、airbnb/等都是一个标准化的设计系统包。以 design-systems/sanity/manifest.json 为例其schemaVersion为od-design-system-project/v1声明了包的元信息id/name包标识与展示名本包为sanitycategory业务归类Sanity 属于 Backend Data定位为 Headless CMS 风格files核心文件映射包括DESIGN.md视觉意图、tokens.cssToken 源、design-tokens.json结构化 Token 契约、tailwind-v4.cssTailwind 桥接、components.html参考组件usage本使用指南USAGE.mdcomponentsManifest组件清单components.manifest.jsonpreview可视化预览页preview/colors.html、preview/typography.html、preview/spacing.htmlsourceFiles审计证据source/evidence.md、source/tokens.source.json、source/token-contract.report.json。仓库中还有配套的校验脚本例如 scripts/check-design-system-manifests.ts 会解析每个包的manifest.json与TOKEN_SCHEMA并调用 packages/contracts/src/design-systems/components-manifest.ts 等模块校验清单与派生 Token 输出确保包结构始终可用。2. 包内文件读取顺序Read OrderUSAGE.md给出了明确的阅读顺序这是理解包契约的关键路径先读本文件USAGE.md理解包的使用契约与边界再读 design-systems/sanity/DESIGN.md获取视觉意图、约束条件与反模式清单把tokens.css粘贴进第一个 artifact 的style块在编写任何组件 CSS 之前先建立 Token 基座用components.manifest.json获取组件清单当需要精确选择器或状态时打开components.html查看真实实现需要视觉抽查时打开preview/下的预览页colors / typography / spacing做最终确认。这个顺序的本质是「先契约、后意图、再令牌、后组件、终预览」——保证 Agent 在不看完整页面截图的情况下也能按确定性的顺序产出风格一致的代码。3. Sanity 包的设计要点Design HighlightsUSAGE.md用四条高度概括了 Sanity 包的设计核心而 DESIGN.md 将其展开为一套完整的视觉语言近黑画布#0b0b0b是默认自然态它不是一种「暗色模式」而是系统的首要身份。Sanity 被描述为「nocturnal command center」夜间指挥中心面向终端用户深色是产品气质而非切换项。纯无彩色灰阶中性色从#0b0b0b→#212121→#353535→#797979→#b9b9b9→#ededed→#ffffff无冷暖倾向保持纯中性纪律。鲜艳强调色点缀霓虹绿display-p3 广色域绿sRGB 回退#19d600、电光蓝#0052ef、珊瑚红#f36458三种强调色在深色场域中像控制室里的信号灯。药丸形主按钮与微圆角对比主 CTA 使用99999px全药丸圆角次级操作用 3–6px 的圆角矩形形成「主 CTA 靠形状、次级操作靠克制」的层次。补充要点来自 DESIGN.mdwaldenburgNormal显示字体在 112px hero 字号下使用-4.48px负字距配合 IBM Plex Mono 作为代码与技术标签的「双声部」所有交互元素 hover 统一变为电光蓝#0052ef构成一致的「激活」信号。注意以上是 DESIGN.md 描述的品牌参考视觉。实际包内落地的tokens.css是一个「干净内容工作室」的归一化变体见下文第 4 节Agent 应以包内 Token 为准。4. Token 契约tokens.css 与派生产物4.1 tokens.css 是唯一事实源USAGE.md明确要求保留 schema token 名称不变以保证跨品牌切换cross-brand switching可靠避免在复制的:rootToken 块之外使用裸十六进制色值不得脱离tokens.css独立重定义 Tailwind 或设计 Token 值。完整的 Token 表见 design-systems/sanity/tokens.css共 56 个 Token按职能可分为类别示例 Token值说明背景与表面--bg#f8f8f7页面底色近白--surface#ffffff卡片/面板表面--surface-warm#fff1ef暖色表面红色意图的晕染前景与文字--fg#171717主文本--fg-2#3f3f46次级文本--muted#71717a弱化文本/占位强调与语义色--accent#f03e2f品牌红主 CTA/焦点--accent-on#ffffff强调色上的文字--accent-hover/--accent-activecolor-mix(in oklab, var(--accent), black 8%/14%)悬停/按下态OKLab 动态混色--meta#f03e2f眉题/状态色与 accent 同源--success/--warn/--danger#16a34a/#f59e0b/#dc2626状态语义色边框--border#e4e4e7标准边框--border-soft#f1f1f2柔和分隔线字体--font-display/--font-bodyInter, system-ui, sans-serif展示/正文--font-monoRoboto Mono, ui-monospace, Menlo, monospace代码/技术标签字号--text-xs…--text-4xl12px → 64px8 级字号阶梯行高/字距--leading-body/--leading-tight1.55/1.08正文宽松、标题紧凑--tracking-display-0.02em标题负字距间距--space-1…--space-124px → 48px8px 为基准的间距刻度区块纵距--section-y-desktop/tablet/phone96/68/48px响应式区块间距圆角--radius-sm/md/lg/pill6/10/16/9999px输入→卡片→药丸阴影/层级--elev-flat/ring/raisednone / ring / 柔和投影色彩化层级--focus-ring0 0 0 4px rgba(240, 62, 47, 0.24)品牌红焦点环动效--motion-fast/base、--ease-standard140/210ms、cubic-bezier(0.2,0,0,1)交互过渡容器--container-max 三档 gutter1180px / 32/24/16px内容宽度与边距一个值得注意的实现细节--accent-hover与--accent-active使用color-mix(in oklab, …)在 OKLab 色彩空间内动态压暗品牌红而不是手写死两个近似色。这保证了 hover/pressed 状态在任意主题下都保持一致的色相是「单一事实源」思想的体现。4.2 派生产物与契约审计tokens.css并非孤立的 CSS 文件它还驱动了三类派生产物结构化 Token 契约design-systems/sanity/design-tokens.jsonformat: od-design-tokens/v1为每个 Token 记录名称、值、类型、所属层A1-identity/A1-structure/A2/B-slot、置信度与来源行号如tokens.css:8。当前包契约评分score: 100、grade: excellent56 个 Token 全部有源可查其中 26 个是A2层回退 Token、无别名 Token且recommendRebuild: false——即包当前无需重建。Tailwind v4 桥接design-systems/sanity/tailwind-v4.css文件头注释明确「Derived from tokens.css. Keep tokens.css as the source of truth.」——它通过theme { --color-bg: var(--bg); … }把每个 CSS 变量映射为 Tailwind 主题键--color-*、--font-*、--text-*、--spacing-*、--radius-*、--shadow-*、--duration-*等让 Tailwind 工具类与设计 Token 同源。契约报告design-systems/sanity/source/token-contract.report.json把每个TOKEN_SCHEMA绑定映射回tokens.css的声明行是审计证据的一部分。依据 design-systems/sanity/source/evidence.mddesign-tokens.json与tailwind-v4.css均为派生输出应通过报告与 Token 样式表重新生成而不应手工编辑。4.3 审计证据source/ 目录USAGE.md的 Do 清单特别提醒把source/文件视为 bundled fixture 回填的审计证据。也就是说本包基于 OpenDesign 策展的 bundled fixture 构建并未宣称对上游品牌仓库或官网做过全新抓取——因此在引用来源时只能说「基于 OpenDesign 打包的 fixture」不能声称拥有原始上游证据。5. 组件清单components.manifest.json 与 components.htmlUSAGE.md的读序建议用 design-systems/sanity/components.manifest.json 获取紧凑的组件清单当精确选择器或状态重要时打开 design-systems/sanity/components.html 查看真实实现。清单由脚本从components.html中提取生成对应脚本见 scripts/extract-components-manifest.ts 与 packages/contracts/src/design-systems/components-manifest.ts。当前 Sanity 包的统计为fixture 元数据styleBlockCount: 1、selectorCount: 48、classCount: 26、elementCount: 19Token 覆盖审计declared56 个、referenced49 个、unusedDeclared7 个如--danger、--warn、--elev-flat、--space-1、--space-12、--motion-base、--accent-activeundeclaredReferenced为空——说明组件样式没有引用任何未声明的变量契约是闭合的。组件分组groups是复用的首要来源USAGE.md要求「先复用清单中的组件组再发明新控件」分组 id说明关键选择器引用的 Tokenbuttons按钮与 CTA.btn、.btn-primary、.btn-primary:hover、.btn-secondary、.btn-secondary:hover、.btn:focus-visible--accent、--accent-on、--border、--elev-ring、--radius-md、--space-5、--text-sm等inputs表单字段与控件.field、input、input:focus、label--border、--radius-sm、--space-2/4/5、--surfacecards卡片与面板.card-row、.panel、.panel-head、.tile--border、--elev-raised、--radius-lg、--space-3/5、--surfacebadges徽章/状态标签.status、.status::before—links链接与内联动作a—typography排版刻度与文本工具.eyebrow、.lead、h1/h2/h3--fg-2、--text-4xl/xl/lglayout布局原语.container、section--container-gutter-*、--section-y-desktopkeyboard、icons键盘提示、图标槽—present: false—在components.html中可以直接看到这些分组的真实用法.btn采用min-height: 44px满足触控目标、border-radius: var(--radius-md)与 140ms 标准缓动过渡.btn-primary:hover使用var(--accent-hover)并上移 1px.btn:focus-visible使用var(--focus-ring)品牌红焦点环.status用等宽字体大写字母 前置绿色圆点表达「在线」状态.metric-grid与.card-row在max-width: 860px以下折叠为单列。6. 落地实操如何把 Sanity 包用到 artifact 中按USAGE.md的读序标准落地流程如下粘贴 Token把 design-systems/sanity/tokens.css 的整个:root块复制到首个 artifact 的style顶部之后再写任何组件 CSS复用组件组对照components.manifest.json的 groups 与components.html的实现优先复用.btn、.panel、.field等既有模式按 DESIGN.md 的迭代指南打磨DESIGN.md 提供了 7 步迭代顺序——从近白#f8f8f7底 深色文字起步 → 用--border/--border-soft建立分隔 → 用--accent作为唯一焦点 → 用 8px 基准间距 → 用等宽字体大写眉题收尾视觉抽查打开preview/colors.html、preview/typography.html、preview/spacing.html三个预览页manifest.json 的preview.pages中登记核对 Token 渲染效果。可直接复制的示例源自 components.html 的真实用法主 CTA 与次级按钮a classbtn btn-primary href#Primary studio action/a a classbtn btn-secondary href#Secondary action/a表单字段div classfield label forsanity-inputReference input/label input idsanity-input valueSanity system token / /div状态徽章与指标面板span classstatusonline/span div classmetricstrong98%/strongspanSignal quality/span/div7. Do 清单必须遵守的规范综合USAGE.md的 Do 与 DESIGN.md 的 Dos保留 schema token 名称不变跨品牌切换cross-brand switching才可靠——这是 Token 契约的第一原则--accent只用于主操作、链接、焦点态以及页面上唯一清晰的焦点元素不滥用先复用components.manifest.json中的组件组再考虑发明新控件把source/视为审计证据引用时说明基于 curated bundled fixture不声称原始上游证据保持中性色纯无彩无冷暖偏差电光蓝#0052ef是全局统一的 hover/active 信号显示级标题48px 以上使用-0.02em级负字距层级靠表面颜色深→浅而非阴影表达区块纵向间距保持充足。8. Avoid 清单必须规避的反模式避免在复制的:rootToken 块之外使用裸十六进制色值——颜色只应来自 Token 引用避免脱离tokens.css独立重定义 Tailwind 或设计 Token 值——tailwind-v4.css只是桥接层不是第二个事实源避免声称拥有原始上游源码证据——本包基于 OpenDesign 策展的 bundled fixture见 source/evidence.md避免新增components.html或DESIGN.md中不存在的组件配方——清单之外的控件属于越界发明补充反模式来自 DESIGN.md不要在中性色里掺入冷暖色调不要用投影表达层级深色界面要求色彩化深度不要在 12px 与 99999px 之间使用圆角系统从大卡片 12px 直接跳到药丸不要在同一个元素里混用珊瑚红 CTA 与电光蓝交互色字体重量不超过 600且仅用于 11px 大写标签标题行高必须保持在 1.00–1.24 区间。9. 与仓库工具的配合校验与生成整个 Design System 2.0 体系是可机器校验的这与USAGE.md强调的「契约」一脉相承scripts/check-design-system-manifests.ts 校验每个包的 manifest 与 TOKEN_SCHEMA 绑定scripts/check-components-manifest-extraction.ts 与 scripts/check-components-fixtures.ts 校验组件清单与 fixture 的一致性scripts/check-tokens-fixture-sync.ts 保证 Token 契约与 fixture 同步scripts/check-design-system-flag-parity.ts、scripts/check-design-system-package-quality.ts 负责质量与开关对齐。因此审查者拿到一个 Sanity 风格的 artifact 时可以按「Token 是否全部来自:root块 → 组件是否命中清单分组 → 是否引入未声明变量 → 是否越界发明配方」四步快速判断合规性——这正是USAGE.md作为「package 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/21 2:18:55 · 阅读 1.2k OpenDesign 设计系统包使用指南：Sanity 风格包的读取顺序、Token 契约与实现规范
OpenDesign 设计系统包使用指南Sanity 风格包的读取顺序、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 中的 Agent 与人工审查者reviewers系统讲解 Design System 2.0 包以 Sanity 风格包为实例的完整使用契约如何按正确顺序读取包内文档、如何将 Token 与组件清单落地到实际 artifact、以及哪些是必须遵守的规范、哪些是必须规避的反模式。读完本文你将掌握从「读文档」到「写组件样式」再到「审计 Token 契约」的完整工作流并能用包内源码文件验证每一步的依据。1. 什么是 Design System 2.0 包在 OpenDesign 仓库的design-systems/目录下每个子目录如sanity/、stripe/、vercel/、airbnb/等都是一个标准化的设计系统包。以 design-systems/sanity/manifest.json 为例其schemaVersion为od-design-system-project/v1声明了包的元信息id/name包标识与展示名本包为sanitycategory业务归类Sanity 属于 Backend Data定位为 Headless CMS 风格files核心文件映射包括DESIGN.md视觉意图、tokens.cssToken 源、design-tokens.json结构化 Token 契约、tailwind-v4.cssTailwind 桥接、components.html参考组件usage本使用指南USAGE.mdcomponentsManifest组件清单components.manifest.jsonpreview可视化预览页preview/colors.html、preview/typography.html、preview/spacing.htmlsourceFiles审计证据source/evidence.md、source/tokens.source.json、source/token-contract.report.json。仓库中还有配套的校验脚本例如 scripts/check-design-system-manifests.ts 会解析每个包的manifest.json与TOKEN_SCHEMA并调用 packages/contracts/src/design-systems/components-manifest.ts 等模块校验清单与派生 Token 输出确保包结构始终可用。2. 包内文件读取顺序Read OrderUSAGE.md给出了明确的阅读顺序这是理解包契约的关键路径先读本文件USAGE.md理解包的使用契约与边界再读 design-systems/sanity/DESIGN.md获取视觉意图、约束条件与反模式清单把tokens.css粘贴进第一个 artifact 的style块在编写任何组件 CSS 之前先建立 Token 基座用components.manifest.json获取组件清单当需要精确选择器或状态时打开components.html查看真实实现需要视觉抽查时打开preview/下的预览页colors / typography / spacing做最终确认。这个顺序的本质是「先契约、后意图、再令牌、后组件、终预览」——保证 Agent 在不看完整页面截图的情况下也能按确定性的顺序产出风格一致的代码。3. Sanity 包的设计要点Design HighlightsUSAGE.md用四条高度概括了 Sanity 包的设计核心而 DESIGN.md 将其展开为一套完整的视觉语言近黑画布#0b0b0b是默认自然态它不是一种「暗色模式」而是系统的首要身份。Sanity 被描述为「nocturnal command center」夜间指挥中心面向终端用户深色是产品气质而非切换项。纯无彩色灰阶中性色从#0b0b0b→#212121→#353535→#797979→#b9b9b9→#ededed→#ffffff无冷暖倾向保持纯中性纪律。鲜艳强调色点缀霓虹绿display-p3 广色域绿sRGB 回退#19d600、电光蓝#0052ef、珊瑚红#f36458三种强调色在深色场域中像控制室里的信号灯。药丸形主按钮与微圆角对比主 CTA 使用99999px全药丸圆角次级操作用 3–6px 的圆角矩形形成「主 CTA 靠形状、次级操作靠克制」的层次。补充要点来自 DESIGN.mdwaldenburgNormal显示字体在 112px hero 字号下使用-4.48px负字距配合 IBM Plex Mono 作为代码与技术标签的「双声部」所有交互元素 hover 统一变为电光蓝#0052ef构成一致的「激活」信号。注意以上是 DESIGN.md 描述的品牌参考视觉。实际包内落地的tokens.css是一个「干净内容工作室」的归一化变体见下文第 4 节Agent 应以包内 Token 为准。4. Token 契约tokens.css 与派生产物4.1 tokens.css 是唯一事实源USAGE.md明确要求保留 schema token 名称不变以保证跨品牌切换cross-brand switching可靠避免在复制的:rootToken 块之外使用裸十六进制色值不得脱离tokens.css独立重定义 Tailwind 或设计 Token 值。完整的 Token 表见 design-systems/sanity/tokens.css共 56 个 Token按职能可分为类别示例 Token值说明背景与表面--bg#f8f8f7页面底色近白--surface#ffffff卡片/面板表面--surface-warm#fff1ef暖色表面红色意图的晕染前景与文字--fg#171717主文本--fg-2#3f3f46次级文本--muted#71717a弱化文本/占位强调与语义色--accent#f03e2f品牌红主 CTA/焦点--accent-on#ffffff强调色上的文字--accent-hover/--accent-activecolor-mix(in oklab, var(--accent), black 8%/14%)悬停/按下态OKLab 动态混色--meta#f03e2f眉题/状态色与 accent 同源--success/--warn/--danger#16a34a/#f59e0b/#dc2626状态语义色边框--border#e4e4e7标准边框--border-soft#f1f1f2柔和分隔线字体--font-display/--font-bodyInter, system-ui, sans-serif展示/正文--font-monoRoboto Mono, ui-monospace, Menlo, monospace代码/技术标签字号--text-xs…--text-4xl12px → 64px8 级字号阶梯行高/字距--leading-body/--leading-tight1.55/1.08正文宽松、标题紧凑--tracking-display-0.02em标题负字距间距--space-1…--space-124px → 48px8px 为基准的间距刻度区块纵距--section-y-desktop/tablet/phone96/68/48px响应式区块间距圆角--radius-sm/md/lg/pill6/10/16/9999px输入→卡片→药丸阴影/层级--elev-flat/ring/raisednone / ring / 柔和投影色彩化层级--focus-ring0 0 0 4px rgba(240, 62, 47, 0.24)品牌红焦点环动效--motion-fast/base、--ease-standard140/210ms、cubic-bezier(0.2,0,0,1)交互过渡容器--container-max 三档 gutter1180px / 32/24/16px内容宽度与边距一个值得注意的实现细节--accent-hover与--accent-active使用color-mix(in oklab, …)在 OKLab 色彩空间内动态压暗品牌红而不是手写死两个近似色。这保证了 hover/pressed 状态在任意主题下都保持一致的色相是「单一事实源」思想的体现。4.2 派生产物与契约审计tokens.css并非孤立的 CSS 文件它还驱动了三类派生产物结构化 Token 契约design-systems/sanity/design-tokens.jsonformat: od-design-tokens/v1为每个 Token 记录名称、值、类型、所属层A1-identity/A1-structure/A2/B-slot、置信度与来源行号如tokens.css:8。当前包契约评分score: 100、grade: excellent56 个 Token 全部有源可查其中 26 个是A2层回退 Token、无别名 Token且recommendRebuild: false——即包当前无需重建。Tailwind v4 桥接design-systems/sanity/tailwind-v4.css文件头注释明确「Derived from tokens.css. Keep tokens.css as the source of truth.」——它通过theme { --color-bg: var(--bg); … }把每个 CSS 变量映射为 Tailwind 主题键--color-*、--font-*、--text-*、--spacing-*、--radius-*、--shadow-*、--duration-*等让 Tailwind 工具类与设计 Token 同源。契约报告design-systems/sanity/source/token-contract.report.json把每个TOKEN_SCHEMA绑定映射回tokens.css的声明行是审计证据的一部分。依据 design-systems/sanity/source/evidence.mddesign-tokens.json与tailwind-v4.css均为派生输出应通过报告与 Token 样式表重新生成而不应手工编辑。4.3 审计证据source/ 目录USAGE.md的 Do 清单特别提醒把source/文件视为 bundled fixture 回填的审计证据。也就是说本包基于 OpenDesign 策展的 bundled fixture 构建并未宣称对上游品牌仓库或官网做过全新抓取——因此在引用来源时只能说「基于 OpenDesign 打包的 fixture」不能声称拥有原始上游证据。5. 组件清单components.manifest.json 与 components.htmlUSAGE.md的读序建议用 design-systems/sanity/components.manifest.json 获取紧凑的组件清单当精确选择器或状态重要时打开 design-systems/sanity/components.html 查看真实实现。清单由脚本从components.html中提取生成对应脚本见 scripts/extract-components-manifest.ts 与 packages/contracts/src/design-systems/components-manifest.ts。当前 Sanity 包的统计为fixture 元数据styleBlockCount: 1、selectorCount: 48、classCount: 26、elementCount: 19Token 覆盖审计declared56 个、referenced49 个、unusedDeclared7 个如--danger、--warn、--elev-flat、--space-1、--space-12、--motion-base、--accent-activeundeclaredReferenced为空——说明组件样式没有引用任何未声明的变量契约是闭合的。组件分组groups是复用的首要来源USAGE.md要求「先复用清单中的组件组再发明新控件」分组 id说明关键选择器引用的 Tokenbuttons按钮与 CTA.btn、.btn-primary、.btn-primary:hover、.btn-secondary、.btn-secondary:hover、.btn:focus-visible--accent、--accent-on、--border、--elev-ring、--radius-md、--space-5、--text-sm等inputs表单字段与控件.field、input、input:focus、label--border、--radius-sm、--space-2/4/5、--surfacecards卡片与面板.card-row、.panel、.panel-head、.tile--border、--elev-raised、--radius-lg、--space-3/5、--surfacebadges徽章/状态标签.status、.status::before—links链接与内联动作a—typography排版刻度与文本工具.eyebrow、.lead、h1/h2/h3--fg-2、--text-4xl/xl/lglayout布局原语.container、section--container-gutter-*、--section-y-desktopkeyboard、icons键盘提示、图标槽—present: false—在components.html中可以直接看到这些分组的真实用法.btn采用min-height: 44px满足触控目标、border-radius: var(--radius-md)与 140ms 标准缓动过渡.btn-primary:hover使用var(--accent-hover)并上移 1px.btn:focus-visible使用var(--focus-ring)品牌红焦点环.status用等宽字体大写字母 前置绿色圆点表达「在线」状态.metric-grid与.card-row在max-width: 860px以下折叠为单列。6. 落地实操如何把 Sanity 包用到 artifact 中按USAGE.md的读序标准落地流程如下粘贴 Token把 design-systems/sanity/tokens.css 的整个:root块复制到首个 artifact 的style顶部之后再写任何组件 CSS复用组件组对照components.manifest.json的 groups 与components.html的实现优先复用.btn、.panel、.field等既有模式按 DESIGN.md 的迭代指南打磨DESIGN.md 提供了 7 步迭代顺序——从近白#f8f8f7底 深色文字起步 → 用--border/--border-soft建立分隔 → 用--accent作为唯一焦点 → 用 8px 基准间距 → 用等宽字体大写眉题收尾视觉抽查打开preview/colors.html、preview/typography.html、preview/spacing.html三个预览页manifest.json 的preview.pages中登记核对 Token 渲染效果。可直接复制的示例源自 components.html 的真实用法主 CTA 与次级按钮a classbtn btn-primary href#Primary studio action/a a classbtn btn-secondary href#Secondary action/a表单字段div classfield label forsanity-inputReference input/label input idsanity-input valueSanity system token / /div状态徽章与指标面板span classstatusonline/span div classmetricstrong98%/strongspanSignal quality/span/div7. Do 清单必须遵守的规范综合USAGE.md的 Do 与 DESIGN.md 的 Dos保留 schema token 名称不变跨品牌切换cross-brand switching才可靠——这是 Token 契约的第一原则--accent只用于主操作、链接、焦点态以及页面上唯一清晰的焦点元素不滥用先复用components.manifest.json中的组件组再考虑发明新控件把source/视为审计证据引用时说明基于 curated bundled fixture不声称原始上游证据保持中性色纯无彩无冷暖偏差电光蓝#0052ef是全局统一的 hover/active 信号显示级标题48px 以上使用-0.02em级负字距层级靠表面颜色深→浅而非阴影表达区块纵向间距保持充足。8. Avoid 清单必须规避的反模式避免在复制的:rootToken 块之外使用裸十六进制色值——颜色只应来自 Token 引用避免脱离tokens.css独立重定义 Tailwind 或设计 Token 值——tailwind-v4.css只是桥接层不是第二个事实源避免声称拥有原始上游源码证据——本包基于 OpenDesign 策展的 bundled fixture见 source/evidence.md避免新增components.html或DESIGN.md中不存在的组件配方——清单之外的控件属于越界发明补充反模式来自 DESIGN.md不要在中性色里掺入冷暖色调不要用投影表达层级深色界面要求色彩化深度不要在 12px 与 99999px 之间使用圆角系统从大卡片 12px 直接跳到药丸不要在同一个元素里混用珊瑚红 CTA 与电光蓝交互色字体重量不超过 600且仅用于 11px 大写标签标题行高必须保持在 1.00–1.24 区间。9. 与仓库工具的配合校验与生成整个 Design System 2.0 体系是可机器校验的这与USAGE.md强调的「契约」一脉相承scripts/check-design-system-manifests.ts 校验每个包的 manifest 与 TOKEN_SCHEMA 绑定scripts/check-components-manifest-extraction.ts 与 scripts/check-components-fixtures.ts 校验组件清单与 fixture 的一致性scripts/check-tokens-fixture-sync.ts 保证 Token 契约与 fixture 同步scripts/check-design-system-flag-parity.ts、scripts/check-design-system-package-quality.ts 负责质量与开关对齐。因此审查者拿到一个 Sanity 风格的 artifact 时可以按「Token 是否全部来自:root块 → 组件是否命中清单分组 → 是否引入未声明变量 → 是否越界发明配方」四步快速判断合规性——这正是USAGE.md作为「package 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考