Stop refining the first layout you see. Use one clear request to explore five working directions, choose the one that serves the visitor best, and test it before it reaches your site.
For: founders, marketers, designers, and builders using Claude Code to design a substantial page or feature.
You will finish with: a comparison gallery, a reasoned recommendation, a selected direction, and a practical browser-check list.
Why compare before polishing?
An AI-generated page can look finished while its most important decision is still wrong. Perhaps the call to action is clear but the proof arrives too late. Perhaps a chooser helps one audience and slows another. Adjusting colors and spacing will not fix an information-order problem.
Five directions make that decision visible. They are not five colorways of one template. Each should offer a different route to the same visitor outcome while keeping facts, brand rules, and accessibility constant. You can then choose based on what the page must accomplish, not on which screenshot feels newest.
This approach was inspired by Brain's open-source design-versions skill, which draws on the public Dive Club conversation with Meaghan Choi. The workflow here is an independent, brand-aware adaptation, not an official Anthropic method.
The workflow in 5 decisions
1. Give Claude one clear job
You do not need a long design brief. State what the page is, who it helps, and what a visitor should be able to do. Include constraints that cannot move, such as an existing brand or a section that must stay near the top.
For example, you could ask Claude Code to:
Explore five substantially different ways to redesign the Free Guides entry section so a new visitor can choose a useful guide quickly. Keep the Prompt Library easy to reach and stay within the existing visual language. Build working previews outside the production route, explain the tradeoffs, and wait for my selection before integrating anything.Claude should first read the existing page, components, and brand rules. For a different project, it should read that project's design sources. If there is no defined brand, it should state a visual baseline instead of inventing a different identity for every option.
If you are starting from a normal Claude Code session, use this fuller brief. Replace the bracketed fields and paste it from the root of your project:
I want to improve [PAGE OR FEATURE] for [VISITOR] so they can [ONE USEFUL OUTCOME].
Keep [NON-NEGOTIABLE CONTENT, BRAND RULES, AND NEARBY SECTIONS].
First inspect the existing page, shared components, design rules, and real copy. State any small assumptions briefly. Ask me only if a missing decision would change the core goal.
Plan 5 genuinely different directions for the same outcome. Vary information order, navigation, interaction, density, or focal point, not only colors. Keep facts, brand identity, and accessibility consistent. Name each direction and explain its main tradeoff.
Build 5 responsive working previews outside the production route, plus a comparison page that opens each one. Use real copy and assets where available. Mark anything nonfunctional or illustrative. Do not deploy or alter the live page.
Recommend one direction with 3 reasons connected to the visitor's outcome. Name one useful element from the runner-up. Then stop and let me choose a direction or a precise combination.
After I choose, refine only that direction. If a browser is available, test it at phone and desktop widths, try the visible controls and keyboard navigation, fix what fails, and check again. Report what you actually verified and what remains untested. Ask before integrating or publishing.This is a project brief, not a guarantee that Claude has browser access. If browser tools are unavailable, perform the visual and interaction review yourself before adopting a preview.
Prefer a reusable Claude Code skill?
Download the NEXAIUM Design Versions skill. The ZIP contains only SKILL.md, its direction menu, and source attribution. It does not contain NEXAIUM website code or a website-building skill.
Unzip the nexaium-design-versions folder into your project's .claude/skills/ directory. In Claude Code, type /nexaium-design-versions and describe the page or feature you want to improve. The skill reads your own project's design rules, builds five separate previews, recommends one, and waits for your choice before integration. You can also use the full brief above without installing anything. See the official Claude Code skills documentation for installation and invocation details.
2. Explore real alternatives
Claude plans five directions before building. Here is an illustrative plan, not a claim that these pages have already been built:
| Direction | First thing the visitor sees | Main interaction | Best question to test |
|---|---|---|---|
| Outcome first | A useful result and one recommended guide | Open the recommended guide | Does the page reduce uncertainty quickly? |
| Choose your path | A few reversible goal choices | Pick a goal, then browse freely | Does choice help without trapping people? |
| Demonstration first | A short example from a guide | Inspect the example or open the guide | Is the value clearer when shown? |
| Editorial route | A calm sequence of topics | Jump to a section | Does this help a visitor who wants context? |
| Compact catalogue | More guides visible at once | Scan or filter | Can returning visitors find one item faster? |
These concepts differ in information order, navigation, density, and focal point. They can all use the same NEXAIUM colors and typography. A brand does not have to change for the UX to change meaningfully.
3. Build working previews
For a substantial request, ask Claude to create five responsive previews outside the live page. A comparison view should let you open each at full size. Use real project copy and assets where available, not fake product claims or anonymous filler. A preview is a decision tool, not a published page.
Look beyond the hero. Check whether the primary action, supporting proof, navigation, and mobile reading order actually differ. If two options solve the task in essentially the same way, replace one before deciding.
4. Ask for a recommendation, then decide yourself
Claude recommends one version with three reasons tied to the visitor's job. It also identifies one element worth borrowing from the runner-up. You can accept the recommendation, pick a different version, or make a precise combination such as “Use version 2, but keep the introductory example from version 4.”
Only the selected version moves into refinement. This keeps the decision understandable and avoids spending time perfecting four pages you will not use.
5. Test the choice in a browser
Open the chosen preview at phone and desktop widths. Click its visible controls, use the keyboard, zoom the text, check long headings, and watch for missing assets or sideways scrolling. If a form is part of the concept, use test data. Fix observed problems and check again. A successful code build is not a substitute for this visual and interaction check.
For NEXAIUM pages, integration and publication are separate gates. The chosen concept must still fit the real site, pass relevant tests, and meet the site's page-performance review before anyone publishes it. A design preview never deploys on its own.
A 60-second review before choosing
Ask these questions of the five previews:
- Can a first-time visitor tell what to do without reading every section?
- Does each version preserve the same real facts and brand identity?
- Are the options genuinely different in structure, not merely decoration?
- Is the main action visible and usable on a phone?
- Can the visitor still browse freely if they do not want the suggested path?
Choose the direction that answers the page's main job best. Keep the other four as evidence of what you considered, then spend your effort on testing and refining the winner.
What this method cannot decide for you
Five polished previews do not prove which page will perform best with real visitors. They help you make a more informed design choice. If a high-stakes conversion decision remains uncertain, test it with real users or a measured experiment after the page is ready. The human owner still decides what is accurate, appropriate for the brand, and worth publishing.
Next action: give Claude Code one real page problem and compare the five directions before asking for polish.