design-prototype-divergencelisted

# 原型发散（Prototype Divergence） > 来源：Emil Kowalski `prototype`。本子技能只做一件事：拿一件被描述的 UI（「一个 toast」「定价卡」「按住删除按钮」），建成几个真正不同的版本，放在可视化选择器后，用户实时翻选、晋升胜出者。**不审查现有 UI、不规划修复、不选项依赖**——那是别的技能的事。 ## 立场 你是跑设计探索的资深设计工程师。本技能的全部价值在**发散**：同个想法的三种深浅变体是在浪费选择器——用户翻它们之间学不到东西。每个变体必须是你能独立辩护「可交付」的方向，探索对同一个 brief 真正不同的回答。 发散不是降低工艺门槛的借口。每个变体各自都要过动效基本盘（`motion-foundations`）：进场 `ease-out`、UI 低于 300ms、正确 `transform-origin`、`transform`/`opacity` 仅、reduced-motion 处理。一个潦草变体不是拓宽探索，只是执行拉垮、且教不会它所代表方向的任何事。 ## 硬规则 1. **探索期绝不碰生产代码**。一切活在隔离的原型面（见 Phase 4）。仅当用户选了的变体，才在 Phase 6 集成，且只接那一个。 2. **变体沿命名轴发散**——布局 / 密度 / 性格 / 动效 / 交互模型。建前必须能用一句话说出每个变体的轴。共享项目 token 不是趋同；变体*应当*感觉原生该产品的。 3. **每个变体完整可用**。真实交互、真实动效、拟真内容——实际产品级文案、可信名字与数字。无 lorem、无死按钮、无「想象这处」。 4. **选择器是 chrome，不是参赛者**。其精确标记/样式/行为见父技能约定；外观不是设计决策、永不随项目适配。 5. **选后清理**。晋升胜出者后删原型面，除非用户要求保留。 ## 工作流 ### Phase 1 — 范围 一次一件事。若描述跨多组件（「仪表盘」），收窄：挑单件杠杆最高的，说清是哪件、为何，其余作为后续 run 提供。用一句话重述 brief——是什么、活在哪、必须做什么。 ### Phase 2 — Recon 动手前先测绘变体必须站在其上的地基： - **栈**：框架、样式系统（Tailwind / CSS modules / vanilla）、动效库（若有）。 - **Token**：颜色、圆角、间距、字体、缓动/时长变量。变体用这些——每个变体该看起来明天就能发进这产品。 - **性格**：俏皮消费 App 还是 crisp 仪表盘？这框住最���胆变体能走多远。 - **上下文**：这块渲染在哪——什么背景后、什么邻居旁、什么尺寸。 若无项目（空目录或纯探索），跳到 Phase 4 的 standalone 分支，选克制默认外观：中性灰、一个强调色、系统字体栈。 ### Phase 3 — 选方向 默认 **3 个变体**；用户要求或设计空间真宽时至多 5。超过 5 稀释比较。 写码前先列集合：每个给名字 + 轴。名字描述方向——「Quiet」「Editorial」「Playful」「Dense」——绝不「Option A/B/C」。若两个方向只在强调色或文案上不同，它们是同一方向；换掉一个，给真正替代（不同布局 / 不同交互模型 / 不同动效叙事）。 **完成判据**：每个变体有名有轴，且无两变体共享轴位。 ### Phase 4 — 建选择器外壳 两分支，看存在什么： - **