Skip to content
variantly

Get started

Run npx variantly in your site's folder. Check the four things it needs below, or try a whole run first with the demo agent: no AI, no account.

Before you start

Four things. Missing one? Copy its prompt into your AI assistant.

  1. An AI coding agent on your computerClaude Code, Codex, Copilot CLI, Gemini CLI or Cursor CLI, signed in or on OpenRouter. variantly finds the one you have, or installs one and opens its sign-in. Lovable/v0 only? Those run in the browser; install Claude Code.
    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`.
  2. Your site’s code on your computerA local folder. Website-builder-only sites won’t work.
    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.
  3. The code saved with gitA git repository. No commit yet? Variantly makes the first one for you.
    Prompt: Make sure this folder is a git repository and commit everything in it with the message "before variantly". Initialise git first if needed.
  4. The site runs on your computerStarts locally and opens in a browser. Plus Node.js 20.11+, whatever your site is built with: variantly itself runs on it (that’s what npx runs), and most AI agents install with it.
    Prompt: Get this website running locally and tell me the address to open. Also check Node.js is 20.11 or newer (`node --version`) and install it if not: variantly runs on Node even if the site doesn’t.

Missing more than one? One prompt walks through them all.

Prompt: 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 and tell me the address to open. Also check Node.js is 20.11 or newer (`node --version`) and install it if not: variantly runs on Node even if the site doesn’t.

Then run it

In your site's folder, paste:

terminal
npx variantly

No npx? Install Node.js from nodejs.org (it comes with npx), or skip the terminal with the prompt below.

Rather not use the terminal?

Paste this into your AI assistant. It sets up and hands you the link.

Prompt: 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.

Just looking? Ready-made variants, no AI:

terminal
npx variantly --demo
Prompt: Run `npx variantly --demo` in this folder and give me the link it prints. It shows ready-made designs without using any AI credits.

Stuck? This names what's missing:

terminal
npx variantly doctor
Prompt: Run `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 ✗.

Try a whole run, no AI needed

The comparison above is a finished run. To see the whole flow on your own machine, use the built-in demo agent: same worktrees, live previews and Keep, but it only appends a fixed CSS theme instead of calling a model. No account, no credits.

  1. 01Get a sample project

    Any site in a git repository works. Or use the made-up shop from the comparison above, copied out of the repository into a fresh git repo of its own.

    terminal
    git clone https://github.com/highnet/variantly.git
    terminal
    cp -r variantly/examples/oak-and-iron oak && cd oak
    terminal
    git init -q && git add -A && git commit -qm before
  2. 02Start the demo run

    Opens the wizard at localhost:4477 with the demo agent picked. Each design gets its own git worktree and branch; the demo agent needs no model or account.

    terminal
    npx variantly --demo
  3. 03Compare them live

    Every design runs as a live preview next to the original. Flick between them and drag the line to compare. The demo agent’s looks are crude on purpose: a real agent redesigns from scratch.

  4. 04Keep one

    Press Keep (or run npx variantly keep 2). Its change lands in your folder as an unstaged diff, merged with any edits you had not committed.

  5. 05Review the code

    git diff shows exactly what changed. Commit it like any other edit, or throw it away.

    terminal
    git diff
  6. 06Undo or clean up

    git restore <file> drops a kept change (and anything else uncommitted in that file, so commit your own work first). npx variantly clean removes the worktrees, branches and state.

    terminal
    npx variantly clean
Set it up on your siteBook a live demo

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
  • Wa
    Waspwasp start
  • Anything elseyour start command

Uses your own AI

No account, nothing to pay us. Any of these, on your own plan or an OpenRouter key (Claude Code, Codex). variantly finds the one you have. Each variant = one session.

  • Claude Code
    terminal
    npm i -g @anthropic-ai/claude-code
  • Codex CLI
    terminal
    npm i -g @openai/codex
  • GitHub Copilot CLI
    terminal
    npm i -g @github/copilot
  • Gemini CLI
    terminal
    npm i -g @google/gemini-cli
  • Cursor CLI
    terminal
    curl https://cursor.com/install -fsS | bash

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.