Your website needs a fresh look
One command. Your own AI assistant redesigns your site several ways, from scratch: no preset themes. Try each live, keep one.
npx variantlyNever used a terminal? Start here
- Open your website's folder in your code editor (for example VS Code).
- Open a terminal: in VS Code, use the menu Terminal → New Terminal.
- Already have one running something like
npm run dev? Leave it running and open a second terminal with the + button at the top of the terminal panel. - Click into the new terminal, paste the command above, and press Enter.
Now showingNordic catalogue
A made-up shop, redesigned six ways by Claude Code. Drag the line or pick a number.
Watch a run
A live demo, narrated: one command, the wizard, variants being made, then picking one to keep.
Coming soonThe demo video is being recorded.
How it works
Paste one command
Run it in your site’s folder. A short wizard asks: how many designs, which pages, any extras.
Your AI designs
Your own assistant redesigns the site several ways, each in a separate copy. Your files stay untouched.
Keep one
Flick through in your browser, like the demo above. Compare, press Keep. Or run again.
Optional add-ons
Opt-in steps in the wizard. Skip any.
- Rewrite the copySharper headlines and buttons. Facts stay.
- Add motionPurposeful transitions. Reduced motion respected.
- Add delightPersonality in hovers, empty states, details.
- Polish for phonesChecks phone width, fixes what breaks.
- HardenAccessibility, focus, long text, errors.
Before you start
Four things. Missing one? Copy its prompt into your AI assistant.
- An AI coding assistant installedClaude Code, Codex or Copilot CLI, signed in. Cursor/Lovable only? Install Claude Code.Agent prompt
Help me install Claude Code on this computer and sign in. Tell me each command to run and check it works with `claude --version`.
- Your site’s code on your computerA local folder. Website-builder-only sites won’t work.Agent prompt
Help me get my website’s code onto this computer. Ask me where the site is hosted, then walk me through downloading or cloning it into a folder.
- The code saved with gitA git repository. No commit yet? Variantly makes the first one for you.Agent prompt
Make sure this folder is a git repository and commit everything in it with the message "before variantly". Initialise git first if needed.
- The site runs on your computerStarts locally and opens in a browser. Node.js 20.11+.Agent prompt
Get this website running locally. Check Node.js is 20.11 or newer, install its dependencies and start the dev server, then tell me the address to open.
Help me get set up for Variantly. Go through these steps in order, skipping any that are already done: 1. Help me install Claude Code on this computer and sign in. Tell me each command to run and check it works with `claude --version`. 2. Help me get my website’s code onto this computer. Ask me where the site is hosted, then walk me through downloading or cloning it into a folder. 3. Make sure this folder is a git repository and commit everything in it with the message "before variantly". Initialise git first if needed. 4. Get this website running locally. Check Node.js is 20.11 or newer, install its dependencies and start the dev server, then tell me the address to open.
Then run it
In your site's folder, paste:
npx variantlyNo npx? Install Node.js from nodejs.org (it comes with npx), or skip the terminal with the prompt below.
Just looking? Ready-made variants, no AI:
npx variantly --demoRun `npx variantly --demo` in this folder and give me the link it prints. It shows ready-made designs without using any AI credits.
Rather not use the terminal?
Paste this into your AI assistant. It sets up and hands you the link.
Redesign this website with variantly. Read https://variantly.style/SKILLS.md first. In this folder, run `npx variantly doctor` and fix anything it marks ✗ (ask me before installing anything). Then ask me in one line what I want to change about the look, and start a run of 4 designs with my answer as the brief. Each design is one session on my AI account. Give me the link it prints, and don't keep a design until I pick one.
Stuck? This names what's missing:
npx variantly doctorRun `npx variantly doctor` in this folder. For each line it marks ✗, tell me in plain words what's missing and fix it, asking me before installing anything. Run it again until nothing is marked ✗.
Pick a direction, then fine-tune it
- Built on Impeccable by Paul Bakaus: the design skill doing the work. Required, and variantly installs it for you if it's missing.
- Live mode tunes one element; variantly redesigns the whole site.
- variantly to choose a direction, then live mode to polish it.
- What changes
- Impeccable live modeOne element: a hero, card, button.
- variantlyThe whole site: colours, fonts, layout, components.
- How you compare
- Impeccable live modeSwaps in place on your running page.
- variantlyEach variant runs as its own site. Flick and slide before/after.
- What you choose
- Impeccable live modeThe best version of a detail.
- variantlyA direction, from several distinct ones.
- Cost
- Impeccable live modeQuick and light.
- variantlyOne AI session per variant. Start with four.
Works with your site
Runs locally with a start command? It works. These are auto-detected; anything else needs one extra answer.
- Next.jsnext dev
- SvelteKitvite dev
- Astroastro dev
- Nuxtnuxi dev
- Vitevite
- Bunbun run dev
- Static HTMLbuilt-in server
- Laravelartisan serve + Vite
- Rails 8rails server
- Djangorunserver
- FastAPIuvicorn
- Reflexreflex run
- Gogo run .
- Rustcargo run
- WaWaspwasp start
Uses your own AI
No account, nothing to pay us. Each variant = one session on your own plan.
- Claude Codeterminal
npm i -g @anthropic-ai/claude-code - Codex CLIterminal
npm i -g @openai/codex - GitHub Copilot CLIterminal
npm i -g @github/copilot
Common questions
- Do I need to be a developer?
- No. If you can paste a command, you’re set. Your AI assistant does the design work, and can set variantly up for you: send it this page.
- What does it cost?
- variantly is free and open source. Each design = one AI session on your own plan. Start with four.
- Can it break my site?
- No. Designs are made in separate copies. When you press Keep, the change is left for you to review.
- What if I don’t like any of them?
- Run it again with a sharper brief. Nothing is kept unless you press Keep.
Quick docs
Every command runs in your site's folder. Add a path to run it somewhere else.
npx variantly- Open the wizard in the current folder.
npx variantly --demo- The full flow with ready-made variants. No AI, no account.
npx variantly doctor- Check Node, git, your AI assistants and the detected stack.
npx variantly keep <n>- Apply variant n. The others stay as branches.
npx variantly status- The current run, as JSON.
npx variantly clean- Remove every copy, branch and state file.
npx variantly install-skill- Put the variantly skill where your assistants read skills.
Flags
--agent <id>- claude, codex, copilot or demo
--count <n>- how many variants, 1–10
--brief <txt>- what you want, in your words
--yes- skip the wizard, use detected defaults
--port <n>- app port (default 4477)
--no-open- don’t open a browser