To get AI to give you several UI designs instead of one, ask for directions, not a design. Say how many you want (three or four is enough to compare), keep the real content and your design system fixed, and give each option a different job: a different layout, hierarchy, navigation or density. Then compare them side by side, pick one or combine the best parts ("the header from variation 1 with the layout from variation 3"), fix the details directly, and only then have your coding agent build it.
Any chatbot can follow that prompt. Claude Design, v0 and Magic Patterns also give you options to review. In Subframe, the agent generates 1–4 variations as real pages on a canvas, combines them when you ask, and the page you pick goes to your codebase as React and Tailwind, through your coding agent or Subframe's own agent (macOS desktop app). Working in Claude Code? With the Subframe plugin, you can ask for up to four variations without leaving it, then open them in Subframe.
Making images, not screens? Use your image tool's own variation settings; this guide is about UI.
The steps:
Ask a model for "a dashboard" and it returns the most likely one. Ask for "a few variations" and you often get the same layout in new colors. Of 18 AI answers we read to this question (ChatGPT, Gemini and Google AI Overviews, September 22 to October 8, 2026), 10 warned that variations come back as near-clones or color swaps.
The deeper problem: most people can't describe the screen they want, but they recognize it when they see it. In our customer calls, a founder-engineer at an early-stage startup said, "I'm not even sure directionally what I want." An independent builder said, "I'll know it when I see it." Rewording the prompt asks you to describe the answer in advance. Reviewing options only asks you to react.
Prompting alone is fine for small decisions, like choosing between three fonts. A whole screen needs the options side by side as real screens. (For the wider loop, see how to make your product look good without a designer.)
Options are only comparable if they differ where you're deciding. Pin down:
"Give me 4 variations" invites four near-identical screens. Give each option its own angle instead. Copy this and fill in the brackets:
Design the [screen] for [product]. Its one job: [job].
Use this content exactly: [paste real content].
Follow our design system: [file or doc].
Give me 4 directions that differ in layout and hierarchy, not color:
1. Table-first: dense rows, filters in a left sidebar
2. Card grid: more whitespace, filters in a top bar
3. Split view: list on the left, detail on the right
4. Your boldest take that still does the job
Label each one with the trade-off it makes.Three or four gives real range and stays easy to compare at full size. MindStudio's guide to multi-variation prompting calls three to five "the practical sweet spot for most use cases."
In Subframe, send the prompt in Agent chat. For a new design, the agent generates 1–4 variations, each landing as a real page on a canvas. Attach a screenshot or mockup and it builds 1–4 variations that match its structure, using your Subframe components.
From Claude Code, install the Subframe plugin, which sets up the MCP server and agent skills in one step:
claude plugin marketplace add https://github.com/SubframeApp/subframe && claude plugin install subframe@subframeThen ask Claude Code for up to four variations without leaving your coding agent. It designs them as pages in your Subframe project, so you open them in Subframe to compare and edit.
Compare the options at the same size, with the same content, against the screen's job rather than taste. Check what breaks first: long rows of real data, empty and error states, mobile width. Keep one or two; delete the rest. In Subframe, each variation's tile in Agent chat jumps to its page on the canvas.
Most guides skip this step, yet it's what people ask for. As one founder we spoke with put it: "I kind of like an element from this. Can we wrap it into that?" Name each part and its source:
Use the header from variation 1 with the layout from variation 3,
but keep the filter bar from variation 2.In Subframe, send that as a follow-up in Agent chat, or combine by hand: drag an element from one page on the canvas to another.
Once the direction is right, change the exact element instead of regenerating the screen and losing what you liked. In Subframe, click any element on the canvas and edit it in the Inspector. For options on one element, select it, right-click or press / and choose Ask agent to edit.... Open-ended requests return up to three variations in a review tray, next to an Original card, with Keep and Discard. Simple edits, like "make the text bold", return one result.
The design you picked is the spec; hand over the design, not a description of it. From Subframe:
Components sync one way, from Subframe to your code; pages are exported, and your engineers or agent add the business logic.
Prompt a chatbot (ChatGPT or Claude). Free and instant, and good for thinking through directions in words. But the options come back in a chat thread, and you rebuild the one you pick.
Claude Code alone. Anthropic's docs suggest asking for an artifact with "four distinctly different layouts" in a grid, and some builders add a temporary toggle to the running app. It's the best fit for one decision in code you already have, but the options live on a separate page or in throwaway code, and each precise fix is another prompt.
Claude Design and /design. Claude Design's help page suggests asking Claude "to show you 2–3 options" when you're unsure of a direction. In Claude Code, /design drafts UI mockups as artboards on one canvas that you edit in the browser, and Claude Design hands a bundle to Claude Code to build. Choose it if you already live in Claude's apps; Mika Reyes's widely cited guide warns it "eats through my tokens fast". The difference: with Claude Design, Claude Code builds from a handoff bundle; Subframe generates the page's React and Tailwind code from the design itself, and your agent integrates that code.
v0 and Magic Patterns. Gemini's usual picks. The most-cited UI walkthrough asked each for several options in one prompt, in April 2025: v0 returned 3 options backed by code (the author wished they were "more distinct") and Magic Patterns returned 8. Magic Patterns says it helps teams "explore multiple directions". Choose either for a quick standalone prototype.
Figma Make. ChatGPT's usual pick when the question mentions Claude. Figma says Make prototypes live on the Figma canvas, so your team can compare directions side by side, built from your existing components. Choose it if your team already works in Figma.
Superdesign. A skill inside Claude Code or Cursor that, per its own guide, opens a canvas to explore "several polished directions at once" and hands the pick back as React and Tailwind. It's the closest alternative to the Subframe plugin route.
The most-cited guides on this question teach the same trick (say a number, name what varies, fix the brand, pick one), which is step 2 above. They share four gaps:
Ask for a number of directions and give each an angle: "4 layouts: table-first, card grid, split view and your boldest take." Keep the content and brand fixed.
Three or four: enough range, and few enough to compare at full size. Then ask for more versions of the one you like.
"Variations" doesn't say what to vary, so the model keeps its most likely layout and changes colors. Name the axis for each option (layout, hierarchy, navigation or density) and add "not color".
Generate three or four layouts side by side, pick or combine, then hand Claude the chosen design. In Claude Code, use an artifact, /design, or the Subframe plugin, which gives you up to four variations to open in Subframe and edit.
Yes. Name the part and its source: "the header from variation 1 with the layout from variation 3." Subframe's agent does this as a follow-up, and you can drag elements between pages on the canvas.
Yes. Start from a screenshot, a pasted URL or, in Subframe's macOS desktop app, a page captured from your running app. In Subframe, attach the screenshot or paste the capture into Agent chat with your prompt. From a screenshot, the agent builds 1–4 variations that match its structure, using your Subframe components.
Describe a screen, or paste a screenshot of yours, and get up to four variations side by side on a canvas. Combine the best parts, fix the details with design control for precise edits, then send the page to your codebase through Claude Code, Cursor, Codex or Subframe's own agent. Try Subframe free.
