Pick the best design from 4 AI-generated directions, in your browser
title: "Pick the best design from 4 AI-generated directions, in your browser" description: "The UI Variant Picker generates four visually distinct prototypes side-by-side in your browser — flip through them, pick the best one, ship it." publishedAt: "2026-04-09" author: name: "AI To Design" url: "https://ai-to-design.com" tags: [feature, release] coverImage: "/videos/demo-poster.jpg" coverAlt: "A browser preview showing four distinct UI component prototypes with a picker toolbar overlay." relatedSlugs: [interactive-design-system-creation, figma-design-system-support]
AI coding tools are great at generating one design. The problem is that the first idea is almost never the best one — and asking for "something different" means waiting through another full generation round without being able to compare options.
What changed
The new UI Variant Picker flips that around. One prompt produces four visually distinct design directions — not four colour tweaks of the same layout, but four fundamentally different approaches to the same component. They all render in your browser, on top of your real project, with a small floating toolbar at the bottom of the page that lets you flip between them in under a frame.
Each variant is fully self-contained. Styles are scoped so they don't leak between directions, and every variant is labelled with a real design-direction name — "Minimal", "Card Grid", "Glassmorphism" — not "A, B, C, D". When you see one you like, you pick it and the others disappear. The clean HTML of the chosen variant is what ends up in your file.
The picker itself ships as part of the ai.to.prototype product family: a lightweight widget served from our CDN plus a /prototype skill you install once. Because the skill follows the Agent Skills standard, it works in Claude Code, opencode, and any other tool that speaks the spec.
How to use it
Install the skill once, then type /prototype followed by whatever you want to prototype — /prototype testimonial section, /prototype pricing table, /prototype hero. Your AI tool generates the four variants directly into your project, wraps them in the picker DOM convention, and adds the picker script tag. You preview the page through your own dev server — no new tools, no copy-pasting between environments.
Flip through the options with the toolbar or the arrow keys. When you're happy, ask the skill to finalize: it strips the picker script and the three variants you didn't pick, leaving only the chosen design clean in the file.
The whole flow stays inside your editor and your browser. No account, no network calls from the picker itself, no context switch.
