ai.to.prototype
Generate multiple visually distinct UI prototypes and flip through them in the browser. One command, multiple design directions.
$ /prototype hero section --variants 6
Scanning project dependencies...
Detected: Next.js + Tailwind CSS
Generating 6 structurally distinct variants...
Done. Open prototype to compare.
Install
Use the cli or go to the Github Repo.
claude plugin marketplace add I2olanD/ai.to.prototypeclaude plugin install ai-to-prototype@ai-to-prototypeSee It In Action
Watch the plugin generate multiple design directions from a single prompt.
How It Works
Describe a component
Run /prototype in Claude Code with a component description. Add --variants to control how many options you get.
/prototype hero section --variants 6 --style "minimalist"Get multiple design directions
Each variant uses a fundamentally different layout approach — not just color swaps. All CSS is scoped and self-contained.
Flip through them in the browser
Open the generated HTML file. A toolbar appears at the bottom to switch between variants instantly.
Pick and refine
Tell Claude which variant you prefer. Refine it further or finalize it into clean, production-ready HTML/CSS with no dependencies.
Features
Matches your stack
Scans your project for Tailwind, shadcn, MUI, or plain CSS and generates variants in the same design language.
Structurally distinct
Each variant uses a different layout approach — centered stack, split layout, card grid, full-width hero.
Responsive by default
All variants are mobile-first and responsive. No extra work needed.
Production ready
Finalize strips all prototype tooling. The output is clean, semantic HTML you can ship.