prototype

Builds multiple divergent UI variants behind a visual picker for live comparison and selection.

Updated Aug 29, 2026
One-click install
npx skills add https://github.com/Seyamalam/pstu_final --skill prototype-seyamalam
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/Seyamalam/pstu_final/tree/main/.agents/skills/prototype
Command: npx skills add https://github.com/Seyamalam/pstu_final --skill prototype-seyamalam

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 picker so you can flip through them live and promote the winner. ## Core Features & Use Cases - Divergent Variant Generation: Creates 3-5 named variants that differ on a stated axis (layout, density, personality, motion, interaction model), each fully functional with realistic content and correct motion craft. - Fixed Picker Harness: Renders variants one at a time at full size behind a spec-locked floating picker with keyboard switching (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 picker, flip through them, then say "keep Quiet" to integrate it into the codebase. ## Quick Start Ask the assistant to prototype three variants of the pricing card so you can flip through them in a picker 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 quickly?▼

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

How to prototype UI variants without touching production code?▼

All variants live on an isolated surface — a dedicated route like /prototypes/<slug> or a single self-contained HTML file. Nothing imports from the prototype into production; only the variant you pick gets integrated.

Does the prototype picker work without a framework or dev server?▼

Yes. When no project exists, the Skill produces a single self-contained HTML file with inline CSS and JS that opens directly in a browser, including the full picker behavior and keyboard shortcuts.

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, refining the exploration instead of starting over.

What are the limitations of picker-based UI prototyping?▼

It explores one component per run, caps variants at five, and requires explicit invocation — it never triggers on its own. It does not review existing UI or choose component libraries; those are separate concerns.