brandkit

技能：品牌套件

步骤 0：套件在这里吗？ 此技能会读取套件中的文件。请检查一次： ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING 仅当出现 KIT_MISSING 时，才表示只安装了技能文件夹，这是 npx skills add 的行为。请明确说明这一点，指引用户使用 npx ux-ui-agent-skills init 或安装插件，然后停止。不要猜测无法打开的文件 内容。

在绘制任何页面之前，先搭建基础体系（所有内容都从中渲染的一套令牌系统）。把这一步做好，每个页面都能从一个地方保持一致并支持主题化。

步骤

1. 简报推断（必做）：确定行业、受众、一个情绪形容词和动效深度（${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md → 简报推断）。从 ${CLAUDE_SKILL_DIR}/../../../taste/aesthetic-systems.md 中选择一个作为基调的原型。
2. 基础值：使用 OKLCH 生成品牌色阶（11 个色阶，色度一致）和中性色阶；根据 ${CLAUDE_SKILL_DIR}/../../../.claude/rules/tokens-and-color.md → 颜色生成，验证 500 色阶在白色背景上的对比度 ≥ 4.5:1（文本），600 色阶 ≥ 3:1（UI）。
3. 语义层：将角色映射到基础值（action.primary/-hover/destructive、text.{primary,secondary,on-action,link}、surface.{page,card,raised}、border.{default,strong}、feedback.{success,warning,error,info}），并设计深色模式覆盖值（而非简单反转）。
4. 比例：Major Third 字体比例 + 复合文本样式、4px 间距比例、圆角层级、海拔，以及符合 ${CLAUDE_SKILL_DIR}/../../../tokens/motion.json 风格的时长/缓动曲线。
5. 输出：生成 DTCG ${CLAUDE_SKILL_DIR}/../../../tokens/*.json（三层）+ 单个 theme.css（唯一共享来源，包含 [data-theme="dark"] 覆盖值）。也可选用令牌构建流水线（token-build 技能）支持其他平台。

验证（完成标准）

• python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_tokens.py：JSON 有效，所有别名都能解析。
• python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_contrast.py：所需的文本/操作/边框组合在浅色和深色模式下均符合 WCAG AA；border.strong ≥ 3:1。
• python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_theme_refs.py：每个组件中的 var(--…) 都能在主题中解析。
• 一个主题，不按页面定义调色板；destructive 使用 danger 令牌（而非 primary）；不使用硬编码值。

输出是经过验证的令牌基础体系：可测量的部分有据可证（运行 npm run verify）。品牌“感觉”仍建议由人工对照 ${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md 进行审查。