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.