# Design Prototype Divergence

> 原型发散——把同一件 UI 件建成 3–5 个**真正不同**的版本，放在可视化选择器后让用户实时翻选并晋升胜出者。偏探索/发散，进 design-workflow 模式2（吸睛/探索）最顺。当用户说「给我几个方向看看」「这个组件有几种做法」「发散一下」时触发。

- Skill: `yang20040317-svg/design-prototype-divergence` (Agent Skill)
- Install (CLI): `npx skillmds@latest add yang20040317-svg/design-prototype-divergence`
- Raw SKILL.md: https://api.skillmd.com/api/skills/yang20040317-svg/design-prototype-divergence/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Productivity
- Author: yang20040317-svg (https://skillmd.com/u/yang20040317-svg)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/yang20040317-svg/design-prototype-divergence

---


# 原型发散（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 — 建选择器外壳

两分支，看存在什么：
- **有 dev server 的项目**——隔离路由/页（`/prototypes/<slug>` 或框架等价物），每变体一文件 + 一个小外壳文件。生产代码绝不 import 原型面。
- **无项目 / 静态上下文**——单个自包含 HTML 文件（内联 CSS/JS），用户浏览器直开。

外壳须渲染**一次一个变体、全尺寸、在拟真周边上下文**里——toast 后要有页、卡要有兄弟、按钮要有表单。并排缩略图会扭曲间距与比例；绝不在邮票大小判断 UI。切换**瞬时**——翻面是 100+/session 动作，按频率规则变体切换无动画。

### Phase 5 — 验证与交付

跑外壳。确认每个变体渲染、每个交互响应、console 干净——交付前自己把所有翻一遍。若有浏览器工具，每个变体截一张。

然后呈现集合并**停——选择属于用户**：

| # | Variant | Axis | When it's the right choice | Its cost |
| --- | --- | --- | --- | --- |
| 1 | Quiet | 极小动效、边框胜阴影 | 产品是每日工具 | 最不记得住 |
| 2 | Editorial | 大字、慷慨留白 | 此刻值得分量 | 吃垂直空间 |

收尾给选择器在哪跑（URL 或文件路径）与翻页键。

**完成判据**：每个变体可从选择器抵达且行为正确；无 console 错；表格诚实写出每变体权衡。

### Phase 6 — 选后晋升

用户选定：按项目既有约定（文件布局、命名、token 用法）把该变体集成到该在的位置，然后按硬规则 5 删原型面。若用户要再来一轮，保留外壳、跑 Phase 3，围绕他靠拢的方向再发散。

## 调用变体

| 调用 | 行为 |
| --- | --- |
| `<description>` | 完整流程：范围 → recon → 3 变体 → 选择器 → 等选 |
| `<description> x5` | 同上，那么多变体（封顶 5） |
| `riff <variant>` | 新轮：留外壳，围绕命名变体方向生成新集 |
| `keep <variant>` | 晋升该变体进代码库并删原型面 |
| `keep <variant>, leave the picker` | 晋升但保留原型面 |

## 语气

诚实卖每个变体——一行它何时赢、一行它代价。表中绝不预选宠儿；若用户问你选哪，答因产品性格与使用频率，非纯审美。若建时两变体趋同，砍一个明说：两个真不同方向的选择器胜过一个凑成三个。