Prototyping Variants 是一个发散型技能，只做一件事：接收一段被描述的 UI 片段（例如“一个 toast”“定价卡片”“长按删除按钮”），构建若干个真正不同的版本，并放在可视化选择器后面，让用户实时翻看并选出胜出者。它不审查现有 UI（那是 review-animations），不为现有 UI 规划修复（那是 improve-animations），也不选择依赖（那是 pick-ui-library）。
【用途】 该技能用于设计探索阶段，帮助用户在同一份需求下看到多个可独立成立的设计方向，而不是同一想法的三种色调。每个变体都必须是一个可以单独拿去上线的方向，探索对同一需求的不同答案。
【主要能力】
- 发散：默认生成 3 个变体，用户要求或设计空间足够宽时最多 5 个；超过 5 个会稀释比较。
- 每个变体沿一个命名轴发散，例如布局、密度、个性、动效、交互模型。构建前必须能用一句话说出每个变体的轴。
- 每个变体都完整可用：真实交互、真实动效、真实内容（真实产品文案、合理的名称和数字），不使用 lorem ipsum、没有死按钮、不写“想象这部分”。
- 选择器是外壳而非参赛者，其标记、样式和行为在 PICKER.md 中规定，需逐字复制，外观不随项目变化。
- 探索期间绝不触碰生产代码，所有内容放在隔离的原型界面中；集成只在用户选定后进行。
- 选定后清理：胜出变体被提升后，删除原型界面，除非用户要求保留。
【使用方式】 调用形式包括：
- <description>：完整流程：范围界定 → 侦察 → 3 个变体 → 选择器 → 等待选择。
- <description> x5：同上，但指定变体数量（上限 5）。
- riff <variant>：新一轮，保留选择器，围绕指定变体的方向生成新一组。
- keep <variant>：将该变体提升进代码库并删除原型界面。
- keep <variant>, leave the picker：提升但保留原型界面。
工作流程分六个阶段：
- 范围界定：每次只处理一个东西。如果描述跨多个组件，收窄到单个最高杠杆的片段，说明是哪个及原因，其余作为后续运行。用一句话重述需求。
- 侦察：设计前先摸清变体必须立足的地面，包括技术栈（框架、样式系统、动效库）、设计令牌（颜色、圆角、间距、字体、缓动/时长变量）、产品个性（活泼消费应用还是利落仪表盘）、上下文（渲染位置、背景、邻居、尺寸）。如果没有项目，跳到阶段 4 的独立分支，选择克制的默认外观：中性灰、一个强调色、系统字体栈。
- 选择方向：默认 3 个变体，最多 5 个。写代码前列出集合：每个变体的名称和轴。名称描述方向（如“Quiet”“Editorial”“Playful”“Dense”），不用“Option A/B/C”。如果两个方向只差强调色或文案，它们是一个方向，需替换为真正不同的替代（不同布局、不同交互模型、不同动效故事）。完成标准：每个变体都有名称和声明的轴，且没有两个变体共享同一轴位置。
- 构建选择器外壳：分两个分支。有开发服务器的项目：隔离路由或页面（/prototypes/<slug> 或框架等价物），每个变体一个文件加一个小外壳文件，生产代码不导入原型界面。无项目/静态上下文：单个自包含 HTML 文件（内联 CSS/JS），用户可直接在浏览器打开。选择器的标记、样式、键盘接线和放置来自 PICKER.md，逐字照做。外壳一次渲染一个变体，全尺寸，放在真实周围上下文中（toast 需要背后有页面，卡片需要兄弟元素，按钮需要表单）。并排缩略图会扭曲间距和比例，绝不在邮票大小下评判 UI。切换是即时的，变体切换不加动画。
- 验证与交付：运行外壳，确认每个变体渲染、每个交互响应、控制台干净，自己先翻一遍再给用户看。如可用浏览器工具，为每个变体截图。然后展示集合并停下，选择权属于用户。表格列出变体、轴、何时是正确选择、其代价。最后说明选择器运行位置（URL 或文件路径）和翻看按键。完成标准：每个变体都可从选择器到达且行为正确，无控制台错误，表格诚实列出每个变体的权衡。
- 选定后提升：用户选择后，按项目现有约定（文件布局、命名、令牌使用）将该变体集成到所属位置，然后按硬规则删除原型界面。如果用户想要新一轮，保留外壳并再次运行阶段 3，围绕他们倾向的方向发散。
【适用场景】 适合在设计探索阶段需要看到多个真正不同 UI 方向时使用，例如为某个组件寻找不同布局、密度、个性、动效或交互模型。
【限制】
- 只做发散，不审查现有 UI、不规划修复、不选择依赖。
- 每次只处理一个 UI 片段。
- 变体数量默认 3，最多 5。
- 探索期间不触碰生产代码。
- 选择器外观固定，不随项目调整。
- 选定后默认删除原型界面。
- 关于收费、价格、平台支持等具体信息，资料中暂未提供。