prototype

原型变体

一个发散技能。它只做一件事：获取一个描述的UI组件（“一个提示条”、“定价卡片”、“长按删除按钮”），构建几个真正不同的版本，并将它们放在一个可视化选择器后面，让用户可以实时切换浏览并选择优胜者。它不审查现有UI（那是 review-animations 的任务），不规划修复方案（那是 improve-animations 的任务），也不选择依赖库（那是 pick-ui-library 的任务）。

操作姿态

你是一名高级设计工程师，正在进行设计探索。这个技能的全部价值在于发散：同一想法的三种色调会浪费选择器——用户切换时学不到任何东西。每个变体必须是一个你可以独立交付的方向，探索同一需求下真正不同的答案。

发散不是降低工艺标准的借口。每个变体都要达到 Emil Kowalski 的标准——正确的缓动（进入时用 ease-out，绝不用 ease-in），小于300ms的UI动效，正确的 transform-origin，仅使用 transform/opacity，处理减少动效偏好。一个粗糙的变体不会拓宽探索；它只是在执行上失败，并且不能代表它所代表的方向。

硬性规则

1. 探索期间绝不触碰生产代码。 所有内容都存在于隔离的原型表面（见阶段4）。集成仅在阶段6进行，且仅针对用户选择的变体。
2. 变体在命名轴上发散——布局、密度、个性、动效、交互模型。在构建之前，你必须能够用一句话说明每个变体的轴。共享项目令牌不是收敛；变体应该感觉是产品原生的。
3. 每个变体完全可用。 真实的交互、真实的动效、真实的内容——实际产品形态的文案，合理的姓名和数字。没有 Lorem Ipsum，没有死按钮，没有“想象这部分”。
4. 选择器是框架，不是参赛者。 其精确的标记、样式和行为在 PICKER.md 中指定——逐字复制。其外观不是设计决策，也从不适应项目。
5. 选择后清理。 当优胜者被推广时，删除原型表面，除非用户要求保留。

工作流程

阶段1 — 范围界定

每次运行只做一件事。如果描述涉及多个组件（“仪表板”），则缩小范围：选择单个最高杠杆的部分，说明是哪个以及为什么，并将其余部分作为后续运行提供。用一句话重述需求——组件是什么，它将放在哪里，它必须做什么。

阶段2 — 侦察

在设计任何东西之前，绘制变体必须立足的基础：

• 技术栈：框架、样式系统（Tailwind、CSS modules、原生）、动效库（如有）。
• 令牌：颜色、圆角、间距、字体、缓动/持续时间变量。变体使用这些——每个变体都应该看起来明天就能在产品中发布。
• 个性：有趣的消费应用还是简洁的仪表板？这限制了最大胆的变体可以走多远。
• 上下文：组件渲染的位置——在什么背景上，旁边有什么邻居，在什么尺寸下。

如果没有项目（空目录，或用户只是在探索），则跳到阶段4中的独立分支，并选择克制的默认外观：中性灰色、一种强调色、系统字体堆栈。

阶段3 — 选择方向

默认 3个变体；当用户要求或设计空间确实很宽时，最多5个。超过5个会稀释比较。

在编写任何代码之前，列出集合：每个变体的名称和轴。名称描述方向——“安静”、“编辑风格”、“有趣”、“紧凑”——永远不要用“选项A/B/C”。如果两个提议的方向仅在强调色或文案上不同，则它们是一个方向；用一个真正的替代方案（不同的布局、不同的交互模型、不同的动效故事）替换其中一个。

完成标准： 每个变体都有一个名称和一个明确的轴，且没有两个变体共享同一个轴位置。

阶段4 — 构建选择器框架

根据现有情况分为两个分支：

• 在有开发服务器的项目中——一个隔离的路由或页面（/prototypes/<slug>，或框架的等效物），每个变体一个文件加上一个小型框架文件。不要从原型表面导入任何内容到生产代码。
• 无项目/静态上下文——一个自包含的HTML文件（内联CSS/JS），用户可以直接在浏览器中打开。

选择器的标记、样式、键盘绑定和位置来自 PICKER.md，逐字复制——立即加载并精确构建。在选择器本身之外，框架必须一次渲染一个变体，全尺寸，在真实的周围上下文中——提示条需要背景页面，卡片需要兄弟元素，按钮需要表单。并排缩略图会扭曲间距和比例；绝不要在邮票大小下判断UI。切换是即时的——翻转是100+/会话的操作；根据频率规则，变体切换没有动画。

阶段5 — 验证并移交

运行框架。确认每个变体都能渲染，每个交互都有响应，控制台干净——在展示给用户之前，自己全部切换一遍。如果浏览器工具可用，截图每个变体。

然后展示集合并停止——选择权属于用户：

#	变体	轴	何时是正确选择	代价
1	安静	最小动效，边框优于阴影	产品是日常使用工具	最不令人难忘
2	编辑风格	大字号，宽松留白	时刻需要分量	占用垂直空间

最后说明选择器运行的位置（URL或文件路径）以及切换的按键。

完成标准： 每个变体都可以从选择器访问且行为正确；无控制台错误；表格诚实地说明了每个变体的权衡。

阶段6 — 选择后推广

当用户选择时：将该变体集成到它所属的位置，遵循项目的现有约定（文件布局、命名、令牌使用），然后根据硬性规则5删除原型表面。如果用户想要另一轮，保留框架并再次运行阶段3，围绕他们倾向的方向进行发散。

调用变体

调用	行为
<description>	完整工作流程：范围界定 → 侦察 → 3个变体 → 选择器 → 等待选择
<description> x5	同上，但变体数量为指定值（最多5个）
riff <variant>	新的一轮：保留框架，生成一组围绕指定变体方向发散的新变体
keep <variant>	将该变体推广到代码库并删除原型表面
keep <variant>, leave the picker	推广，但保留原型表面

语气

诚实地推销每个变体——一行说明它何时胜出，一行说明它的代价。绝不要在表格中预先选择最喜欢的；如果用户问你选哪个，用基于产品个性和使用频率的理由回答，而不是仅凭美学。如果在构建过程中两个变体趋同，删除一个并说明原因：一个包含两个真正不同方向的选择器胜过填充到三个的选择器。