Skip to content
variantly

How it works

One real run, screen by screen: variantly making four designs for Northgate Cycles, a made-up bike shop. The screens follow your theme, light or dark.

These were taken with the demo agent, which applies fixed restyles so you can try the whole flow for free. With your own AI assistant, each design is a full redesign by Impeccable (variantly installs it if it's missing): see real ones in the demo.

  1. Setup · step 1 of 4

    Step 1: Run one command

    In your site’s folder, run npx variantly. A page opens in your browser at localhost:4477. It has already found your site and your AI assistant.

    • Static HTML found: variantly starts the site itself.
    • Here the demo agent is picked: no AI, no account, nothing spent.
    • Something missing? The fix is written right on the card.
    The variantly wizard, step 1: Static HTML app found, demo agent ready, and a Continue to variants button.The variantly wizard, step 1: Static HTML app found, demo agent ready, and a Continue to variants button.
    localhost:4477Demo agent · Northgate Cycles
  2. Variants · step 2 of 4

    Step 2: Pick how many

    Choose 2, 4 or 6 designs and which pages they redesign. Just the home page is fastest; keeping a design later restyles the rest of the site to match.

    • Each design is one session on your own AI plan.
    • Extras such as Rewrite the copy or Add motion are optional.
    Wizard step 2: four variants selected, the Home page selected, optional extras unticked.Wizard step 2: four variants selected, the Home page selected, optional extras unticked.
    localhost:4477Demo agent · Northgate Cycles
  3. Your site · step 3 of 4

    Step 3: Say who it’s for

    Three short answers help every design aim at your visitors instead of guessing. All optional.

    • For: commuters and weekend riders in the neighbourhood.
    • Must stay: the price table and the booking form.
    Wizard step 3: answers typed into Who is it for, What does it offer and What must stay.Wizard step 3: answers typed into Who is it for, What does it offer and What must stay.
    localhost:4477Demo agent · Northgate Cycles
  4. Review · step 4 of 4

    Step 4: Check, then start

    Every choice on one screen, each with an Edit link. Nothing is spent until you press Make 4 variants.

    • App, agent, number of designs, pages, extras and your answers.
    Wizard step 4: a summary of every choice and a Make 4 variants button.Wizard step 4: a summary of every choice and a Make 4 variants button.
    localhost:4477Demo agent · Northgate Cycles
  5. The board · generating

    Step 5: Watch them being made

    Each design is made in a separate copy of your project, on its own git branch. Your files stay untouched.

    • Two designs work at a time; the rest wait for a free slot.
    • The panel below shows what the assistant is doing, line by line.
    • A design that fails says why, and you can retry it.
    The departures board: V01 and V02 building, V03 and V04 waiting for a free slot, with V01’s live log underneath.The departures board: V01 and V02 building, V03 and V04 waiting for a free slot, with V01’s live log underneath.
    localhost:4477Demo agent · Northgate Cycles
  6. Compare · design 3

    Step 6: Flick and compare

    Your real site, running. Press 1 to 4 to flick between designs and drag the divider for before and after.

    • Left: Northgate Cycles as it was. Right: design 3.
    • Every link and button still works; it is the live site.
    • The dock at the bottom tucks away while you scroll.
    Compare view: the original site on the left of the divider, design 3 on the right, the variant dock along the bottom.Compare view: the original site on the left of the divider, design 3 on the right, the variant dock along the bottom.
    localhost:4477Demo agent · Northgate Cycles
  7. Compare · keep

    Step 7: Keep one

    Press Keep. Before anything changes, variantly says what will: here, two files.

    • The other designs stay as branches, in case you change your mind.
    A confirmation bar: Apply V03 to your working tree? 2 files. Cancel or Apply V03.A confirmation bar: Apply V03 to your working tree? 2 files. Cancel or Apply V03.
    localhost:4477Demo agent · Northgate Cycles
  8. Kept · design 3

    Step 8: It’s in your folder

    The design is now uncommitted changes in your project. Read them, commit them, or throw them away: it’s your call.

    • git diff shows exactly what changed.
    • A ready-made prompt hands it to your assistant to finish.
    • npx variantly clean removes the other designs.
    The kept screen: V03 applied as uncommitted changes, a hand-off prompt for your agent, and the next commands.The kept screen: V03 applied as uncommitted changes, a hand-off prompt for your agent, and the next commands.
    localhost:4477Demo agent · Northgate Cycles

Try the same run

Run it in your site's folder. Add --demo to try it with no AI first. Need git or Node.js? Get started lists all four things it needs.

npx variantly