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 仓库中 PlayStation 设计系统包 的 source/evidence.md 为线索讲解 Design System 2.0 回填backfill机制中来源证据 Token 契约的落地方式。读完本文你将掌握PlayStation 设计系统包的完整文件结构与读取顺序、TOKEN_SCHEMA四层 Token 架构的含义、token-contract.report.json如何把每个 Token 精确映射回tokens.css声明行以及为什么design-tokens.json与tailwind-v4.css属于只可再生、不可手改的派生产物。一、evidence.md 的定位一份来源范围声明source/evidence.md是整个 PlayStation 设计系统包的审计入口。它只有两段核心声明Source Scope来源范围该 Design System 2.0 回填内容衍生自 OpenDesign 精选的内置 fixturebundled fixture并未对上游品牌仓库或官网进行全新抓取It does not claim a fresh crawl of the original upstream brand repository or website。Included Fixture Files包含的 fixture 文件列出包内三个核心源文件。这一声明同时被包的 manifest.json 以结构化字段固化其source字段为{ type: bundled, origin: OpenDesign curated bundled fixture }并在sourceFiles字段中索引了evidence、tokens、report三个证据文件sourceFiles: { evidence: source/evidence.md, tokens: source/tokens.source.json, report: source/token-contract.report.json }而 source/tokens.source.json 与 evidence.md 遥相呼应其sourceScope同样是open-design-bundled-fixturebrandId为playstationfiles列表与 evidence.md 的 Included Fixture Files 完全一致。这意味着证据声明不仅在 prose 中也在 JSON 中机器可读。二、包结构总览manifest 定义的文件契约依据 design-systems/_schema/manifest.schema.ts其 schemaVersion 常量od-design-system-project/v1与 manifest.json 一致一个设计系统包的发现层discovery layer由manifest.json描述。PlayStation 包的files契约如下manifest 键指向文件作用designDESIGN.md供 Agent 阅读的品牌视觉散文含色彩、字体、组件、响应式与提示词指南tokenstokens.css规范化编译后的 Token 样式表designTokensdesign-tokens.json由 TOKEN_SCHEMA 契约派生的 JSONtailwindtailwind-v4.css由 TOKEN_SCHEMA 契约派生的 Tailwind v4themecomponentscomponents.html组件参考 fixtureusageUSAGE.mdAgent 读取顺序指南componentsManifestcomponents.manifest.json可重建的组件清单缓存preview.dirpreview颜色/排版/间距三页可视化预览其中 preview 目录包含 colors.html、typography.html、spacing.html 三页供人工或拉取通道做视觉校验。三、Token 契约report 文件的结构与评分evidence.md 指出source/token-contract.report.json把每一个 TOKEN_SCHEMA 绑定映射回已提交的tokens.css声明行。查看 token-contract.report.json 的顶层摘要{ 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: 2, layerCounts: { A1-identity: 8, B-slot: 4, A2: 26, A1-structure: 18 }, score: 100, grade: excellent, recommendRebuild: false } }这套报告字段是对设计系统证据完整性的量化56 个契约 Token 全部在tokens.css中有声明declaredTokens: 56、全部有来源支撑sourceBackedTokens: 56因此综合评分 100、等级 excellent、无需重建。report 的tokens数组为每个 Token 提供五元组证据记录例如{ name: --bg, layer: A1-identity, value: #000000, confidence: high, reason: Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill., sources: [tokens.css:27], sourceName: --bg }注意reason字段与 evidence.md 的口径完全一致——凡是来源都标注 Bundled tokens.css declares ...; no upstream recrawl避免把内置 fixture 误当作上游一手证据。这正是证据边界工程化的体现。四、TOKEN_SCHEMA 四层架构A1 / A2 / B-slot 的含义report 中layerCounts的四个分层并非 PlayStation 私有而是来自契约定义 packages/contracts/src/design-systems/token-schema.ts 的TokenLayer联合类型export type TokenLayer A1-identity | A1-structure | A2 | B-slot;A1-identity必选层Token 即品牌本身无法用 fallback 替代如--bg、--surface、--accent、--font-display。PlayStation 包中该层有 8 个。A1-structure必选结构层18 个承载字号、行高、版式与布局节奏如--text-4xl、--section-y-desktop、--container-max。A2通用派生层26 个是 A1 的补充与默认值来源。B-slot可选槽位4 个专为跨品牌一致性而设——当 ≥2 个品牌需要同一语义时才提升为 B-slot。PlayStation 包中--surface-warm、--fg-2、--meta、--border-soft均为 B-slot且其中--fg-2、--meta直接用var(--fg)、var(--muted)做别名report 的aliasTokens: 2即指这两个。用layerCounts核对8 4 26 18 56与totalTokens完全闭合。五、tokens.css品牌决策在 Token 层的编码evidence.md 指向的 tokens.css 是整个契约的物理载体其头部注释明确说明该文件把品牌决策编码进 Token 层。与 DESIGN.md 对照可验证几条核心规则三表面通道three-surface channel--bg: #000000Console Blackmasthead/hero 画布→--surface: #ffffffPaper White编辑性面板→--surface-warm: #f5f7faIce Mist渐变终点。青色永不休止规则--accent: #0070ccPlayStation Blue不可动摇的锚点与--accent-hover: #1eaedbPlayStation Cyan被刻意分开放置——cyan 只存在于 hover/focus 层从不出现在静止背景。180ms 交互窗口--motion-fast: 180ms、--motion-base: 200ms、--ease-standard: cubic-bezier(0.2, 0, 0, 1)共同构成power-on开机式 hover 手感。半径系统收缩到 schema 主干DESIGN.md 描述的是十一档半径2/3/6/12/13/19/20/24/36/48/999pxtokens.css 只承载 6/12/24/999 四档3px 的输入框半径由组件层覆盖--radius-sm实现——注释明确写了 Inputs override --radius-sm with their own 3px at component layer。阴影阶梯只留两档--elev-flat: none与--elev-raised: rgba(0, 0, 0, 0.08) 0 5px 9px 0呼应 DESIGN.md whisper-or-shout要么耳语要么呐喊的 0.06/0.08/0.16/0.8 四档阴影哲学中间档被刻意剔除。report 中每个sources引用的行号与 tokens.css 一一对应如--bg在tokens.css:27、--focus-ring在tokens.css:131读者可自行核验。六、派生产物design-tokens.json 与 tailwind-v4.css 的再生原则evidence.md 第三段给出了最重要的工程约束design-tokens.json和tailwind-v4.css是派生输出应当从 report 与 token 样式表重新生成而不是手工编辑。该原则在 packages/contracts/src/design-systems/derived-token-outputs.ts 中有对应实现支撑——其输出契约同样声明contract: TOKEN_SCHEMA。也就是说PlayStation 包内两个派生文件design-tokens.json 与 tailwind-v4.css的正确维护方式是先改tokens.css或源 Token 数据再跑生成器刷新 report 与派生文件保证三处永不漂移。这与 report 中recommendRebuild: false的语义一致——当前状态下契约与源已对齐无需重建。同样地components.manifest.json 也是从components.htmltokens.css派生的可重建缓存source.componentsHtml与source.tokensCss字段标明了其输入不应手工维护。七、证据边界为什么不回填一手抓取是刻意的evidence.md 反复出现的措辞——derived from the curated OpenDesign bundled fixture、no upstream recrawl was performed——构成整包的使用红线。USAGE.md 的 Avoid 一节把它翻译成三条纪律避免在复制的:rootToken 块之外使用裸 hex 值避免脱离tokens.css独立重定义 Tailwind 或 design-token 值避免宣称拥有上游一手来源证据——本包基于精选内置 fixture。这套边界防止了两类事故一是 Agent 误把 fixture 当作官方文档引用二是派生文件与源文件之间出现手工漂移。在 manifest.schema.ts 中DesignSystemProjectSource联合类型明确区分了bundled/local/github/shadcn四种来源bundled类型只允许type与origin两个键——从 schema 层面就限制了内置包假装有上游 URL的可能。八、实践如何按契约读取并使用 PlayStation 包USAGE.md 给出推荐的读取顺序与 evidence.md 的证据路径相互配合先读 USAGE.md 理解包契约再读 DESIGN.md 获取视觉意图、约束与反模式其中第 9 节 Agent Prompt Guide 提供了可直接投喂给生成 Agent 的 CTA/英雄区/封面瓦片/商店按钮等 5 条示例提示词以及 8 步迭代审计清单把 tokens.css 粘贴进首个 artifact 的style块再写组件 CSS用 components.manifest.json 做组件清单速查需要精确选择器或状态时打开 components.html该文件含 63 个选择器、28 个类、1 个style块并在 hover 规则中落实了 cyan 填充 transform: scale(1.2)的品牌交互签名需要视觉校验时打开 preview 三页涉及来源审计时回到 source/evidence.md 与 source/token-contract.report.json 核对每个 Token 的出处。小结PlayStation 设计系统包的source/evidence.md看似简短实则是 Design System 2.0 回填机制的诚信开关它用 proseevidence.md JSONtoken-contract.report.json / tokens.source.json schemamanifest.schema.ts / token-schema.ts三层结构把哪些 Token 来自哪里、哪些文件可手改、哪些文件只能再生固化成了机器可校验的契约。对使用该包的 Agent 而言遵循 evidence.md 定义的边界就是保证跨品牌切换可靠、派生产物不漂移、来源声明不失真的前提。赞分享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 设计系统回填包的来源证据与 Token 契约机制 —— 以 HashiCorp 包为例OpenDesign 设计系统回填包的来源证据与 Token 契约机制 —— 以 HashiCorp 包为例 本文围绕 OpenDesign 仓库中 desigAI 应用人工智能AI 技能设计系统媒体生成OBS Studio屏幕标注插件打造专业直播教学体验的终极方案OBS Studio屏幕标注插件打造专业直播教学体验的终极方案 想要在直播教学或产品演示时实时标注屏幕内容吗OBS Studio作为全球最受欢迎的开源直播软AI 应用人工智能AI 技能设计系统媒体生成OpenDesign 设计系统 2.0 的 Token 契约与来源证据机制解析以 Dashboard 品牌包为例OpenDesign 设计系统 2.0 的 Token 契约与来源证据机制解析以 Dashboard 品牌包为例 本文以 design systems/dasAI 应用人工智能AI 技能设计系统媒体生成上一篇Windows安卓子系统终极指南WSABuilds完整安装与配置教程下一篇LiteLLM Terraform Provider 之 litellm_project用 IaC 管理团队下的项目预算与模型权限创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考