prototype

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

Updated Aug 11, 2026
One-click install
npx skills add https://github.com/Debindenny/travelplanner-community- --skill prototype-debindenny
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/Debindenny/travelplanner-community-/tree/main/travel-planner/.agents/skills/prototype
Command: npx skills add https://github.com/Debindenny/travelplanner-community- --skill prototype-debindenny

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 a described 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 fully working variants of one UI piece, each exploring a distinct axis such as layout, density, personality, motion, or interaction model. - Fixed Picker Harness: Renders variants full-size in realistic context behind a verbatim-specified dark pill picker with keyboard shortcuts (1-N, arrows, R to replay) and URL-persisted selection. - Isolated Prototype Surface: Keeps all exploration out of production code via an isolated route or a single self-contained HTML file, then integrates only the chosen variant and cleans up. - Use Case: Describe "a hold-to-delete button" and receive three working directions (Quiet, Editorial, Playful) in a browser harness, flip through them with arrow keys, then run "keep Editorial" to integrate the winner into your codebase. ## Quick Start Ask the AI to prototype three different versions of your pricing card so you can flip through them and pick a winner.

Frequently Asked Questions about prototype

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

FAQPage Schema
How do I prototype multiple UI design variants quickly?▼

Describe one UI piece, such as a toast or pricing card, and the Skill builds 3-5 fully working variants, each exploring a different axis like layout, density, or motion. They render behind a floating picker you flip through with number keys, arrows, and R to replay animations.

How do I compare UI design directions in a real browser?▼

Each variant renders full-size in realistic surrounding context, not as thumbnails, inside an isolated route or a single self-contained HTML file. Switching between variants is instant, and your selection persists across reloads via a URL parameter.

Does prototyping variants affect my production code?▼

No. All exploration lives in an isolated prototype surface such as a /prototypes/<slug> route or standalone HTML file, and nothing imports from it into production code. Only the variant you explicitly keep gets integrated, after which the prototype surface is deleted.

Can I run another round of variants after seeing the first set?▼

Yes. Use the riff invocation with a variant name to keep the harness and generate a fresh set diverging around that direction. This lets you iterate toward a direction without rebuilding the picker or losing context.

When should I not use a variant picker for UI design?▼

Avoid it when reviewing or fixing existing UI, since this Skill only builds new divergent versions of a described piece. It also narrows multi-component requests to a single highest-leverage piece per run, so full-page redesigns need multiple runs.