prototype
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
- Never touch production code during exploration. Everything lives in an isolated prototype surface (see Phase 4). Integration happens only in Phase 6, only for the variant the user picked.
- Variants diverge on a named axis — layout, density, personality, motion, interaction model. Before building, you must be able to state each variant's axis in a phrase. Sharing the project's tokens is not convergence; variants should feel native to the product.
- Every variant fully works. Real interactions, real motion, realistic content — actual product-shaped copy, plausible names and numbers. No lorem ipsum, no dead buttons, no "imagine this part".
- The picker is chrome, not a contestant. Its exact markup, styles, and behavior are specified in PICKER.md — copy them verbatim. Its look is not a design decision and never adapts to the project.
- Clean up after the choice. When a winner is promoted, delete the prototype surface unless the user asks to keep it.