prototype

Builds multiple divergent UI variants behind a keyboard-driven visual picker for live comparison.

Updated Aug 9, 2026
One-click install
npx skills add https://github.com/jwinar/carpet_gato --skill prototype-jwinar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/jwinar/carpet_gato/tree/main/.claude/skills/emil-kowalski-design/prototype
Command: npx skills add https://github.com/jwinar/carpet_gato --skill prototype-jwinar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing a UI direction from a single static mockup or verbal description is guesswork; this Skill builds several genuinely different working versions of one UI piece and renders them behind a floating picker so you can flip through them live and promote the winner. ## Core Features & Use Cases - Divergent Variant Generation: Creates 3-5 variants that each explore a named, distinct axis (layout, density, personality, motion, interaction model) rather than recolors of one idea. - Fixed Picker Harness: Renders variants full-size in realistic context behind a spec-frozen dark pill picker with number/arrow key switching, URL-persisted selection, and replay for entrance animations. - Isolated Prototype Surface: Works in an isolated route or standalone HTML file, never touching production code until you pick a winner to integrate. - Use Case: Ask for three directions for a hold-to-delete button; flip through Quiet, Editorial, and Playful implementations with real motion and copy, then promote the one that fits your product. ## Quick Start Ask the assistant to prototype three variants of your pricing card so you can flip through them and pick one.

Frequently Asked Questions about prototype

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I compare multiple UI design directions before committing to one?▼

Describe the UI piece and this Skill builds 3-5 genuinely different working variants behind a floating picker. Flip between them with number or arrow keys at full size, then promote the winner into your codebase.

How do I prototype UI variants without touching production code?▼

Variants live in an isolated route such as /prototypes/<slug> or a standalone HTML file, never imported by production code. Only after you pick a winner does the Skill integrate that variant following project conventions and delete the prototype surface.

Can I use this UI prototyping workflow in a project without a dev server?▼

Yes. Without a project it produces a single self-contained HTML file with inline CSS and JS that opens directly in a browser, using a restrained default look of neutral grays, one accent, and system fonts.

How many design variants should I generate for one component?▼

The default is 3 variants, up to 5 when the design space is genuinely wide. More than 5 dilutes the comparison, and each variant must diverge on a named axis like layout, density, or interaction model rather than color or copy.

What keyboard shortcuts switch between prototype variants?▼

Number keys 1 through N jump to a variant, left and right arrows cycle, and R replays entrance animations. Selection persists across reloads via a ?v= URL parameter, and keys are ignored while typing in form fields.