更新记录

安装

• Claude Code 插件市场：先运行 claude plugin marketplace add YuqingNicole/variant-design-skill，再运行 claude plugin install variant-design@variant-design。用这种方式安装时，更新检查会给出插件的更新命令。
• 子流程文件从 SKILL.md 改名为 skills/*/ROUTE.md，所以 Claude Code 插件、Codex 和 npx skills 都只会把入口注册为技能。
• DeepSeek Harness（dsh）会在 ~/.agents/skills/variant-design 或项目的 .agents/skills 里找到技能，也就是 npx skills add 使用的文件夹。

设计系统

• confirm-system 先备份上下文，再记录已确认的系统身份，不修改选中页面。明确执行 apply-system 时，把对齐后的代码、token 记录和应用状态存入同一快照；undo B 恢复此前状态。普通修改仍保留 token 锁，候选基准覆盖全部系统扩展。
• 对比度报告列出已检查配对和未验证项；生成系统用明确角色配对或底色注释，只有 --brand 文件沿用旧命名。组件 token 必须引用语义 token；产品代码引用其他组件 token 时会被报告。DTCG 新增可选的 --group-by layer，保留类型和跨层别名；有多个条件值时列为未导出，不再静默取其中一个。
• pick B 之后，技能从 B 提炼出完整的设计系统（variant-output/design-system.css，以及包含 B 用到的每个组件、每种状态的预览），然后等待 ds confirm。品牌文件已锁定时，只补品牌没规定的部分，并记入 designSystem.extensions。
• delivery-check 会读取这些扩展（重新定义品牌变量算错误），并对不在已确认系统刻度上的间距、字号、圆角给出警告，指出最接近的 token。从 B 提炼的系统只用来检查 B。
• ds confirm 会把系统导出为 DTCG 2025.10 设计令牌（scripts/ds-export.mjs → design-system.tokens.json），并列出 DTCG 表达不了的值，例如 clamp() 字号。
• 提炼出的系统附带 variant-output/DESIGN.md：写给 agent 和人的使用规则（哪个文字 token 用在哪种背景上、各级标题用哪一级字号、组件有哪些状态），段落顺序沿用 Google 的 DESIGN.md 草案。
• scripts/ds-check.mjs 检查系统自身的文字/背景色和 on-色组合是否达到 4.5:1：草稿在展示前修好，delivery-check 会报告已确认系统中不合格的组合。
• 设计系统现在由几条针对产品的决策和落实这些决策的 token 组成，不再是填满的模板（references/design-system/system-decisions.md）。技能写下三到五条决策；丢掉选中方向里的生成套路（眉标、口号式标题、装饰数字、处处套卡片、默认字体）；只写产品用得到的 token，并注明每个用在哪里。预览用产品自己的画面展示系统，不再是色板网格。
• 分层：产品代码用语义 token；复用且状态多的组件有组件 token；只有被共用时才写基础值；模式（移除确认、空状态）写进 DESIGN.md。ds-check.mjs --used-by 列出没被用到的 token；产品代码直接用基础值时 delivery-check 会警告；ds-export 把每个 token 的用途说明导出为 DTCG 的 $description。
• 按钮遵循一份规范，参照 Material 3、Apple HIG、Radix、Primer、Atlassian、Polaris 和 Geist 的公开文档制定（references/ux/component-specs.md → Button）：品牌是衬线体时，按钮文字也用界面无衬线字体；内边距和圆角随高度按比例取值；每个视图只有一个实心主按钮；悬停和按下状态用 color-mix 推导，焦点是单层 2px 的环；危险按钮在确认框之前都只是红字。预览里放真实按钮，不放一排假的悬停状态。
• 生成的方向避开生成套路（references/workflow/quality-baseline.md → Generator habits）：已有页面保持原来的作用、标题和文案，产品页上不放口号和宣传卡片；三个方向先在结构上不同，再谈风格，只换配色不算一个方向。quality-gate 把眉标、补零的装饰数字、界面里的方向名列为 review 项，要求删掉或说明理由；它们不会让 --strict 失败。

品牌锁定

• 品牌由项目自己的文件规定时（例如 app/globals.css），技能直接登记这个文件，不再把副本锁定在 variant-output/ 里。

技能现在可以在已有项目里从检查一路做到接入，并且每一步都保护用户自己的改动。

结合项目的流程

• 生成前先只读检查项目（scripts/project-profile.mjs），任务说明和检查结果绑定，并记录运行时的观察（scripts/design-task.mjs）。
• 任务说明里记录设计参考及其复用条款。Variant Design 方向库的方向卡可以转成这种记录（scripts/direction-card.mjs）。
• 展示 A/B/C 之前做交付检查（scripts/delivery-check.mjs）：三个已登记的方向取舍各不相同，共享同一份任务约定，推荐不等于选定，设计系统锁定没有被破坏。

安全修改和接入

• 候选版本带内容基准；过期的候选版本和区域外的改动会被拒绝（variant-history.mjs prepare / apply）。
• 一次请求就是一次撤回，即使它分了几次 apply。
• variant-integrate.mjs 在接入方向前备份每个目标文件；文件之后被改过，就拒绝回滚。
• 产物验证绑定版本，记录哪些检查针对哪个版本运行过。

预览

• React 预览用项目自己的 Vite 挂载；react-preview.mjs --static 生成不需要服务器就能打开的预览，供沙箱里的 Agent 使用。
• 修复静态预览的一个问题：打包代码里含有 $&、$$ 或 $` 时内容会被破坏。

技能文字

• 按阶段加载。入口只有路由表和共用规则；生成流程开头是一张加载表。变体动作、区域修改、历史、预览、导出和接入分成不同文件，用到那一步才读。code-output.md 不再每次都强制加载交互模式库。
• 参考文件按用途分组：workflow/、sources/、domains/、design-system/、ux/、tasks/。
• 质量检查跳过生成的预览包（_static/、_preview/），所以可以用严格模式扫描整个 variant-output/。
• 从领域参考里删掉了转录的第三方“社区示例”。
• 只有根目录的 SKILL.md 声明技能，Codex 和 npx skills 不再把子流程注册成无法使用的独立技能。
• 组件交接说明和网页界面检查。

安装

• npx skills add YuqingNicole/variant-design-skill -a claude-code -a codex 安装完整技能。

给贡献者

升级：Git 克隆安装运行 git -C <install path> pull --ff-only，或者运行 npx skills update variant-design。对没有 .git 的安装，更新检查现在会给出 npx skills 命令。升级不会改动 variant-output/ 里的项目文件；上下文结构仍是 v2。

• evals/run.mjs 在示例项目上用 Claude Code 和 Codex 运行当前工作区的技能，并自动评分。
• scripts/skill-links.test.mjs 检查技能提到的每个文件都存在，每个参考文件都能从入口找到。