skills.rest
AlexW00
AlexW00COMMUNITY
Explore all skills by this author →
Website𝕏@AlexWeichartGitHub

prototype

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

70|4|Updated Jul 22, 2025
Search Tags:#html#frontend#interaction design#design exploration#design variants#ui prototyping#component picker
One-click install
npx skills add https://github.com/AlexW00/Zettel --skill prototype-alexw00
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/AlexW00/Zettel/tree/main/.agents/skills/prototype
Command: npx skills add https://github.com/AlexW00/Zettel --skill prototype-alexw00

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing a UI direction from a single static mockup is guesswork. This Skill builds several genuinely different working versions of one 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 variants that each explore a distinct axis (layout, density, personality, motion, interaction model) rather than recolors of one idea. - Fixed picker harness: Ships a verbatim-specified floating dark pill with keyboard shortcuts (1-N, arrows, R to replay), URL-persisted selection, and instant variant switching. - Isolated prototype surface: Builds variants on an isolated route or a single self-contained HTML file, never touching production code until you pick a winner. - Use Case: Describe "a hold-to-delete button" and get three fully working variants — Quiet, Editorial, Playful — rendered in realistic page context, then promote the one you pick into your codebase. ## Quick Start Ask the assistant to prototype three variants 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 compare multiple UI design variants in a browser?▼

Describe one UI piece and the skill builds 3-5 divergent working variants behind a floating picker. Flip between them with number keys 1-N or arrow keys, press R to replay animations, and the selection persists via a URL parameter.

How do I prototype a UI component without touching production code?▼

The skill builds everything on an isolated surface — a separate route like /prototypes/<slug> in a project with a dev server, or a single self-contained HTML file otherwise. Production code is only modified when you promote a chosen variant.

Can I use this with Tailwind, CSS modules, or a motion library?▼

Yes. During recon the skill maps your framework, styling system, tokens, and motion library, then builds variants using those conventions so each one looks like it could ship in your product. Without a project it falls back to a restrained default look.

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

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

What happens to the prototype files after I pick a winner?▼

When you select a variant, it is integrated into your codebase following existing conventions, and the prototype surface is deleted. You can keep the harness by asking to leave the picker, or run another round diverging around the chosen direction.

Related Skills

Explore More Design & Creative Skills→
80portisfound80portisfound

claude-design

Generates self-contained HTML design artifacts such as landing pages, prototypes, and slide decks.

Community
Advanced
QoreDBQoreDB
137

ui-component-architect

Generate animated React UI components with Tailwind, Shadcn, and Framer Motion.

Official
Intermediate
Festo-WampambaFesto-Wampamba

review-animations

Reviews animation and motion code for craft regressions.

Community
Advanced
brolagbrolag
11

parallel-verification

Explore multiple reasoning paths in parallel to verify high-stakes solutions.

Community
Advanced