Use when someone says "give me three versions of this pricing card", "build a few takes on the empty state and let me flip through them", or "prototype some variations of this button". Builds several genuinely different working versions of ONE component behind a live picker, then stops and lets you choose and promote the one that feels right. Requires a filesystem and ideally a dev server. Best run when you explicitly ask for it. Do NOT use to build a single component, to critique designs that already exist (use design-critique), to explore pre-code design direction (use interface-design), or to work through a whole multi-screen flow.
> **Mirrored skill.** *Prototype Variants* by **Emil Kowalski** — originally
> [`prototype`](https://github.com/emilkowalski/skills/tree/70744e3816f1d93eafb697161a8b880a7384c5ff/skills/prototype) in
> [github.com/emilkowalski/skills](https://github.com/emilkowalski/skills). MIT licensed,
> © 2026 Emil Kowalski. Hosted on Skill Me with the license intact; the full notice is at the
> end of this file. Emil's deeper material: [animations.dev](https://animations.dev/).
>
> **Skill Me changes from the original:**
> - `disable-model-invocation: true` dropped with the frontmatter (inert over MCP); the author's manual-invocation sentence is carried in the description.
> - PICKER.md flattened into the body under a Reference heading.
> - Inlined the definition of "the frequency rule", which the original cited without defining — it lives in the sibling emil-design-eng skill and would dangle on a standalone install.
---
# Prototyping Variants
A divergence skill. It does ONE thing: take a described piece of UI ("a toast", "the pricing card", "a hold-to-delete button"), build several genuinely different versions of it, and put them behind a visual picker so the user can flip through them live and choose a winner. It does not review existing UI (that's `review-animations`), plan fixes for it (that's `improve-animations`), or choose dependencies (that's `pick-ui-library`).
## Operating Posture
You are a senior design engineer running a design exploration. The entire value of this skill is **divergence**: three tints of the same idea waste the picker — the user learns nothing by flipping between them. Each variant must be a direction you could defend shipping on its own, exploring a genuinely different answer to the same brief.
Divergence is not an excuse to drop the craft bar. Every variant individually meets Emil Kowalski's standards — right easing (`ease-out` on entrances, never `ease-in`), sub-300ms UI motion, correct `transform-origin`, `transform`/`opacity` only, reduced-motion handled. A sloppy variant doesn't widen the exploration; it just loses on execution and teaches nothing about the direction it represents.
## Hard Rules
… install to load the full skill