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点击查看免费下载本篇文章以 OpenDesign 仓库中 design-systems/shadcn/source/evidence.md 为线索深入剖析 Design System 2.0 打包体系的来源证据设计shadcn 包如何声明自身是从 OpenDesign 精选捆绑 fixturebundled fixture派生而非重新抓取上游token-contract.report.json如何把每一个TOKEN_SCHEMA绑定映射回 tokens.css 的具体声明行以及design-tokens.json、tailwind-v4.css为何必须由报告与样式表再生而不是手改。读完你将掌握设计系统包的目录契约、四层 token 分层A1-identity / A1-structure / A2 / B-slot、证据报告字段的判读方法以及 shadcn 风格 56 个 token 的完整取值与生成管线的验证逻辑。一、Source Scope这个包的证据边界在哪里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.这段话是整个包的溯源声明含义有两层来源是 OpenDesign 仓库内已捆绑的精选 fixture即 DESIGN.md、tokens.css、components.html 三个文件不声称重新爬取过 shadcn 上游品牌仓库或官网。因此文章或 Agent 在引用该包时不得把其中的 token 值表述为来自 shadcn 官方最新源码只能表述为来自 OpenDesign 捆绑的精选 fixture。这一声明与 manifest.json 中source: { type: bundled, origin: OpenDesign curated bundled fixture }完全一致也与 USAGE.md 的 Avoid 条款呼应Avoid claiming original upstream source evidence; this package is based on the curated bundled fixture.Avoid adding new component recipes that are not represented incomponents.htmlorDESIGN.md.这种自证边界的做法让包可以被审计任何人打开source/目录都能立刻判断哪些是仓库内证据、哪些不是。二、Included Fixture Files包的三个支柱文件evidence.md明确列出包内三个核心 fixture 文件文件角色design-systems/shadcn/DESIGN.md视觉意图、约束与反模式8 个章节视觉主题、颜色、排版、间距与栅格、布局构成、组件、动效交互、语气品牌、反模式design-systems/shadcn/tokens.css结构化 token 绑定:root块即最终可粘贴进产物的样式源design-systems/shadcn/components.html参考组件实现按钮、输入框、卡片、徽章、键盘提示、图标、排版、布局原语USAGE.md 给出了推荐阅读顺序先读USAGE.md理解包契约再读DESIGN.md获取视觉意图与反模式把tokens.css的:root块原样粘贴进产物第一个style再写组件 CSS用components.manifest.json做组件清单速查需要精确选择器或状态时打开components.html需要视觉抽查时查看preview/下的三个页面colors、spacing、typography。整套包的文件拓扑manifest.json中files字段DESIGN.md、tokens.css、design-tokens.json、tailwind-v4.css、components.html加上source/证据目录evidence.md、tokens.source.json、token-contract.report.json与preview/预览目录。三、Token Contract契约报告如何做到逐 token 可溯源evidence.md第三节是全文的技术核心source/token-contract.report.jsonmaps every TOKEN_SCHEMA binding back to the committedtokens.cssdeclaration line.3.1 报告的结构与总分打开 source/token-contract.report.jsonsummary字段给出了整个契约的健康度快照{ schemaVersion: 1, contract: TOKEN_SCHEMA, generatedAt: 2026-06-06T00:00:00.000Z, sourceScope: open-design-bundled-fixture, summary: { totalTokens: 56, declaredTokens: 56, sourceBackedTokens: 56, sourceBackedA1: 26, fallbackTokens: 26, aliasTokens: 4, layerCounts: { A1-identity: 8, B-slot: 4, A2: 26, A1-structure: 18 }, score: 100, grade: excellent, recommendRebuild: false } }判读要点totalTokens declaredTokens sourceBackedTokens 56schema 要求的 56 个 token 全部被tokens.css显式声明且每个都有来源行号无缺漏sourceBackedA1 26A1 层identity structure共 26 个 token 全部由源样式表支撑没有依赖跨品牌默认值兜底fallbackTokens 26A2 层 26 个 token 虽声明于源文件但其值的权威性来自 schema 默认值的对齐检查见第五节aliasTokens 4--surface-warm、--fg-2、--meta、--border-soft四个 B-slot 插槽通过var()别名折叠score 100, grade excellent, recommendRebuild false契约完整性满分无需重建。3.2 每个绑定的证据条目报告tokens数组里每个条目都自带证据链例如{ name: --accent, layer: A1-identity, value: #000000, confidence: high, reason: Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill., sources: [tokens.css:128], sourceName: --accent }layer标识该 token 所属分层见下节confidence: high表明值来自源声明而非猜测契约还支持medium / low / fallback / alias等级见 apps/daemon/src/design-systems/token-contract.ts 的DesignTokenEvidenceConfidence类型sources精确指向tokens.css的声明行号是maps every TOKEN_SCHEMA binding back to the committed tokens.css declaration line这句话的直接落地。3.3 四层 Token 分层TOKEN_SCHEMA分层规则定义在 design-systems/_schema/tokens.schema.ts转导出自 packages/contracts/src/design-systems/token-schema.ts层语义shadcn 中的成员A1-identity必填token 即品牌本身无跨品牌默认值可兜底--bg、--surface、--fg、--muted、--border、--accent、--font-display、--font-body共 8 个A1-structure必填结构性决策字号、容器、节节奏--text-*、--leading-*、--tracking-display、--section-y-*、--container-*共 18 个A2有 schema 默认值可回退的派生值--accent-on/hover/active、语义色、--font-mono、--space-*、--radius-*、--elev-*、--focus-ring、动效共 26 个B-slot品牌内通过var()别名解析的插槽--surface-warm、--fg-2、--meta、--border-soft共 4 个shadcn 的 B-slot 全部折叠为var()别名例如--surface-warm: var(--surface)、--meta: var(--muted)既保证指向完整 ramp 的共享组件能解析又把shadcn 只有一个前景层级、一个画布层级、一种边框粗细的单色基线语义表达清楚。四、shadcn 的九个品牌化 Token 决策design-systems/shadcn/tokens.css 文件头注释记录了 9 个为了贴合 shadcn 声音而弯曲 schema 惯例的决策这是理解整份样式表的钥匙--accent是纯黑#000000而非彩色色调。shadcn 的主操作按钮就是白底纯黑这本身就是 accent 时刻。由于纯黑无法继续变深--accent-hover/--accent-active改为向白色混合color-mix(in oklab, var(--accent), white 10%)与white 18%镜像bg-primary hover:bg-primary/90的上浮填充而非压深填充惯例。--fg是#111827Tailwind slate-900而非纯黑。纯黑正文压在纯白画布上显生硬微冷的 slate 底调是 shadcn 中性色系统的一部分--fg与--accent分离保留了正文 vs 决定性 CTA的语义分层。--fg-2、--meta、--surface-warm、--border-soft折叠为 schema 兄弟 token 的var()引用插槽名保留以便扩展主题如 Warm 风格独立重绑定。--focus-ring是 shadcn 签名式焦点环2px 画布色光晕offset外包 2px accent 环即ring-2 ring-offset-2用分层 box-shadow 表达在深色、玻璃、滚动容器内都不会被 offset 裁剪。--radius-md为 8px对应 shadcncomponents.json起步的--radius: 0.5rem--radius-sm降为 6px输入框/按钮比卡片收紧一档模拟内部calc(var(--radius) - 2px)公式整条尺度6/8/12/9999克制拒绝夸张胶囊卡。字号尺度封顶 48px--text-4xl在 DESIGN.md §3 记录的 12/14/16/20/24/32 基础上扩展 40/48 供营销 hero 使用--tracking-display保持温和的-0.02em不用 Vercel 式激进的-0.05em。--elev-raised是两层发丝阴影1px 3px ambient对应 Tailwindshadow-sm哲学——shadcn 卡片用低语式上浮而非大气模糊。区块节奏慷慨96/64/48px--container-max为 1280pxmax-w-7xl这是 shadcn 营销页的经典宽度手机端 gutter 收窄到 16px 但绝不贴边出血。--font-mono是 Fira Code与正文 Geist 区分让代码块与kbd带上明确的这是技术内容信号Geist 与 Fira Code 都通过 OS 回退栈引用字体未加载时产物仍可接受地渲染。完整 56 个 token 的取值颜色、字体栈、字号、间距、圆角、阴影、动效、容器可直接在 tokens.css 的:root块中读取例如:root { --bg: #ffffff; --surface: #ffffff; --fg: #111827; /* slate-900 — body text */ --muted: #64748b; /* slate-500 — captions */ --border: #e5e7eb; /* slate-200 — card edge */ --accent: #000000; /* DESIGN.md §2 Primary — CTA fill */ --accent-on: #ffffff; --accent-hover: color-mix(in oklab, var(--accent), white 10%); --accent-active: color-mix(in oklab, var(--accent), white 18%); --success: #16a34a; --warn: #d97706; --danger: #dc2626; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 9999px; --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); --motion-fast: 150ms; --motion-base: 200ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --container-max: 1280px; }其中语义色直接对应 DESIGN.md §2Tailwind green-600 / amber-600 / red-600且--warn故意用 amber-600 而不是 schema 默认黄色——这就是品牌决策弯曲 schema 惯例的又一个实例。五、派生输出为什么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 tailwind-v4.csstokens.css 的机械映射design-systems/shadcn/tailwind-v4.css 只有 63 行import ./tokens.css之后用一个theme {}块把每个 CSS 变量机械地映射为 Tailwind v4 的主题命名空间--color-*、--font-*、--text-*、--spacing-*、--radius-*、--shadow-*、--duration-*、--ease-standard、--container-max等。它首行注释写明 Derived from tokens.css. Keep tokens.css as the source of truth.——手改这里必然与源样式表漂移。5.2 design-tokens.json契约的 JSON 投影design-systems/shadcn/design-tokens.json 是同一契约面向工具的投影contract: TOKEN_SCHEMA56 个 token 每个带typecolor / typography / spacing / radius / elevation / motion / layout 等与sources行号。它的生成源头同样是 token-contract.report.json。5.3 生成管线与验证器这两份派生输出的产生与校验逻辑位于 daemon 的设计系统模块apps/daemon/src/design-systems/token-contract.ts 的buildDesignTokenContract()把TOKEN_SCHEMA逐一与源 token 绑定bindSchemaToken并调用validateDesignTokenOutputs()做自检validateDesignTokenOutputs()同文件第 171 行起会报告四类错误schema token 缺失、声明了非 schema token、var()引用了未声明 token、components.html引用了未声明 token同时用告警约束--accent在 fixture 中的可见使用次数不超过 2 次schema lint 目标派生输出的只读纪律在 design-systems/_schema/defaults.css 中同样有呼应A2 兜底值通过design-system: A2 defaults parityguard 与tokens.schema.ts的fallback字段双向对齐改一边必须同步另一边重建决策逻辑在 apps/daemon/src/design-systems/token-contract-rebuild.tsKEY_A1_TOKENS [--bg, --surface, --fg, --accent]是重建的关键判据集合WEAK_CONFIDENCE [low, fallback, alias]的绑定数量会触发needs-rebuild判定——shadcn 报告recommendRebuild: false正说明这些关键 token 全部为 high confidence 的源声明值。六、从证据到产物Agent 的使用纪律USAGE.md 对如何使用证据给出明确纪律可作为引用本包时的操作规范Do保留 schema token 名称原样保证跨品牌切换可靠用--accent表达主操作、链接、焦点态与唯一视觉焦点优先复用components.manifest.json里的组件组把source/文件当作捆绑 fixture backfill 的审计证据Avoid在复制的:roottoken 块之外写裸 hex 色值脱离tokens.css自行定义 Tailwind 或设计 token 值宣称拥有上游原始来源证据添加components.html与DESIGN.md未覆盖的新组件配方。组件侧的配套证据是 components.manifest.jsonfixture字段记录了参考实现规模1 个 style 块、68 个选择器、32 个类、26 个元素groups字段把组件划分为 9 组buttons、inputs、cards、badges、links、keyboard、icons、typography、layout每组都带tokenReferences——例如 buttons 组引用--accent-hover/--border/--fg/--focus-ring/--space-3/--surfaceinputs 组引用--radius-sm/--text-sm/--motion-fast/--ease-standard等。这使哪个组件消费了哪个 token同样可追踪。unusedDeclared列表如--danger、--elev-ring、--text-3xl则表明该 fixture 为最小参考面未用到的 token 是为 schema 完整性与扩展主题保留的插槽。七、小结证据纪律即工程质量从 source/evidence.md 这 17 行可以管窥 OpenDesign 设计系统 2.0 的整体工程哲学边界诚实bundled fixture 与上游爬取严格区分来源声明写进 manifest、写进每个 token 的reason逐 token 溯源56 个 token 的每个绑定都带layer、confidence与tokens.css行号报告满分的score: 100 / grade: excellent可被任何人复核派生只读design-tokens.json、tailwind-v4.css永远从tokens.css 契约报告再生杜绝手改漂移验证自动缺失声明、越界引用、别名环、accent 滥用都由 daemon 侧验证器与 guard 检查兜底。对想为自己的品牌接入 OpenDesign 设计系统体系的开发者这套证据 契约 派生三件套即是可直接照搬的模板一份声明边界的 evidence、一份逐行可溯源的 token-contract.report.json、以及只读再生的派生输出。相关实现可在 packages/contracts/src/design-systems/token-schema.ts、apps/daemon/src/design-systems/token-contract.ts 与 design-systems/_schema/defaults.css 中继续深入研读。赞分享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点击查看免费下载相关推荐OpenDesign Neon 设计系统回填证据链解析bundled fixture 溯源、TOKEN_SCHEMA 契约与 token-contract 审计报告OpenDesign Neon 设计系统回填证据链解析bundled fixture 溯源、TOKEN_SCHEMA 契约与 token contract 审AI 应用人工智能AI 技能设计系统媒体生成OpenDesign kami 设计系统的 Token 契约与源码溯源机制从 bundled fixture 到可审计的 TOKEN_SCHEMA 证据链OpenDesign kami 设计系统的 Token 契约与源码溯源机制从 bundled fixture 到可审计的 TOKEN_SCHEMA 证据链 本AI 应用人工智能AI 技能设计系统媒体生成OpenDesign 中 NVIDIA 设计系统包的来源证据与 Token 契约从 bundled fixture 到可审计的设计资产OpenDesign 中 NVIDIA 设计系统包的来源证据与 Token 契约从 bundled fixture 到可审计的设计资产 本篇技术指南聚焦 OpAI 应用人工智能AI 技能设计系统媒体生成创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考