design-code

技能：设计代码

步骤 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. 根据请求确定目标框架和样式方法（或询问用户）。
2. 阅读 ${CLAUDE_SKILL_DIR}/../../../frameworks/adapter-protocol.md（通用契约：令牌解析、组件契约、样式、深色模式、动效和输出规则）。
3. 加载具体适配器：
   • 完整参考文档：${CLAUDE_SKILL_DIR}/../../../frameworks/react-tailwind.md、${CLAUDE_SKILL_DIR}/../../../frameworks/nextjs.md、${CLAUDE_SKILL_DIR}/../../../frameworks/swiftui.md。
   • 精简适配器：${CLAUDE_SKILL_DIR}/../../../frameworks/adapters/{vue,svelte,angular,solid,web-components-lit,react-native,flutter,jetpack-compose,vanilla-css,css-in-js}.md。
   • 目标框架没有对应文件？ 按照协议中的“编写新适配器”检查清单，即时生成适配器。
4. 从 ${CLAUDE_SKILL_DIR}/../../../components/* 获取组件规格，并从 ${CLAUDE_SKILL_DIR}/../../../accessibility/aria-patterns.md 获取 ARIA 模式。
5. 将所有值解析为令牌（${CLAUDE_SKILL_DIR}/../../../tokens/*.json）；如果有要求，应用美学方向（apply-aesthetic 技能）。

输出规则（强制）

使用令牌（绝不硬编码）· 为每个交互元素添加无障碍支持 · 处理所有适用的 8 种状态 · 在语义层支持深色模式 · 移动端优先 · 尊重减少动态效果的设置 · 提供完整文件，不留占位符（${CLAUDE_SKILL_DIR}/../../../workflows/redesign-audit.md → 输出完整性）。

验证（宣布完成前必须执行）

代码是风险最高的输出——每次都要自行检查：

1. 不得硬编码值——每个颜色/尺寸/圆角/阴影/时长/字体都必须追溯到令牌（CSS 变量/主题键/资源）。对输出运行 ${CLAUDE_SKILL_DIR}/../../../scripts/lint_hardcodes.py；原始十六进制颜色值/px/ms 和原始 Tailwind 调色板工具类（bg-gray-500、text-blue-600）都必须为零——使用语义工具类/令牌（bg-surface、text-primary）。运行 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_theme_refs.py，确保每个 var(--…) 都能解析到已定义的主题令牌（不得有游离令牌）。唯一允许的例外：将我们的令牌映射到第三方主题配置（MUI/Mantine）的 API 中。
2. 所有适用状态都必须存在——Default、Hover、Focus（-visible ring）、Active、Disabled、Loading（+aria-busy）、Error、Selected——或说明为何不适用。
3. 落实无障碍支持——根据 ${CLAUDE_SKILL_DIR}/../../../accessibility/aria-patterns.md 设置正确的角色/ARIA、键盘交互模型和焦点管理；目标尺寸 ≥24px；对任何新增颜色组合验证对比度（${CLAUDE_SKILL_DIR}/../../../scripts/contrast.py）。
4. 深色模式 + 减少动态效果 + 响应式——语义令牌应切换；动态效果必须有 prefers-reduced-motion 回退；布局应采用移动优先。
5. 完整性——提供完整文件，不得出现 // ...；如果要求 N 项，就交付 N 项。如果任何检查未通过，先修复再返回（不确定时运行 a11y-audit）。
6. 统一主题一致性——使用项目唯一的共享令牌主题（根 CSS 变量层）；绝不定义页面专属调色板或新颜色。在多个页面/屏幕中，相同的语义令牌必须驱动每个界面，确保整个产品视觉一致，并可从一个位置更换主题（.claude/rules/tokens-and-color.md → Single-Theme Consistency）。
7. 统一共享基础组件层——每种基础组件只构建一个可复用组件（通过 cva/等效方案实现 Button、Input、Modal、Badge）；绝不在多个文件中重复内联工具类组合，也不为每个屏幕手动用 div 实现模态框。覆盖层复用唯一的 Modal 基础组件：焦点陷阱、role="dialog"、aria-modal="true"、aria-labelledby、Escape、关闭时恢复焦点、背景遮罩（WCAG 2.4.3 + 2.1.2）。参见 ${CLAUDE_SKILL_DIR}/../../../examples/golden/Button.tsx + ${CLAUDE_SKILL_DIR}/../../../examples/golden/Modal.tsx。
8. 字体加载——绝不在 CSS 中使用 @import 加载 Web 字体（会阻塞渲染）。使用框架加载器（next/font），或使用 <link rel="preconnect"> + <link rel="preload"> 并设置 font-display: swap；条件允许时应自行托管。字体族必须来自令牌（--font-sans），绝不能写成字面值。
9. 按意图选择语义令牌 + 保持一致——令牌的含义必须与操作相符：破坏性操作（Delete/Remove）→ action.destructive（危险），绝不能使用 action.primary；次要操作 = 中性描边/透明背景和深色文字（绝不能使用有色填充 → 不得出现蓝底深色文字）。同一操作在所有地方都必须使用相同的变体（触发按钮和确认按钮必须一致——不能一个地方是红色，另一个地方是蓝色）。自动检查无法发现这个问题——必须自行检查。
10. 禁止使用 Emoji 作为图标——使用真正的图标集（默认使用 lucide），以 currentColor 内联 SVG 的形式呈现；绝不使用 Emoji，包括在用于切换标签的 JS 中（切换 <svg>，而非文本/Emoji 字符串）。请在心中运行 ${CLAUDE_SKILL_DIR}/../../../scripts/lint_taste.py（它会标记作为图标的 Emoji）。
11. 破坏性操作的确认体验——不可逆操作（删除账户/数据，或任何明确说明“无法撤销”的操作）必须根据 WCAG 3.3.4 / 3.3.6 设置真正的确认机制：确认对话框中的确认按钮必须重述操作（“Delete account”，而不是“Delete”/“OK”/“Yes”）；对于高风险操作，还需要输入文字确认步骤。参见 ${CLAUDE_SKILL_DIR}/../../../examples/sample-app/preview.html 和 ${CLAUDE_SKILL_DIR}/../../../content/voice-tone.md。
12. 审美预检——运行 ${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md 中的 12 项审美检查；对于任何渲染后的 HTML，还要运行 node ${CLAUDE_SKILL_DIR}/../../../scripts/taste_audit.mjs <file>（基于渲染结果检查：排版层级对比不足、重复模式单调、行宽过大、调色板过度扩张）。审美检查属于启发式检查——应将其结果视为重要信号，并结合实际截图进行审查；它无法像正确性那样通过自动方式证明。
13. 运行检查门禁，然后报告（必须执行）。 宣布完成前，运行 node ${CLAUDE_SKILL_DIR}/../../../scripts/verify_states.mjs <file> + --dark（检查每个元素的 default/hover/focus 状态），以及 node ${CLAUDE_SKILL_DIR}/../../../scripts/accuracy_report.mjs；报告实际输出。绝不要填写未经刚刚测量的对比度数值或“100%”（CLAUDE.md → Verification Protocol）。