A shop owner describes a store. The engine gets it built, checked, fixed and approved.

01The console

The console, mid-replay

One screen, made for a big monitor. The brief is on the left, the store in the middle, and on the right a running record of everything the engine and v0 did.

1 2 3 4 5 6 7 8

1. 1Brief. What the shop owner fills in. "Load a sample" fills it with a ready-made shop.
2. 2Offline demo and Generate. The switch runs a free, simulated build; leave it off for the real thing.
3. 3Preview. The store v0 built, live. Switch between desktop and mobile, or open another page.
4. 4The run. Its name, the result (here "Verified"), how long it took, and "Replay" for a past run. "Past runs" opens older ones.
5. 5The stages. Generate, Preview, Check, Repair, Gate, Deploy, ticked off as they happen.
6. 6Pictures and references. The pictures made for the store, and screenshots of the sites the owner likes, with the names the store must not use.
7. 7What v0 did. Its steps as they happen: files written, commands run. "Prompt sent to v0" shows the exact words it was given.
8. 8Deploy gate and changes. Locked until every check passes. A person approves or declines. Below it, ask for a change.

02Words to know

The words used on this page

Brief

What the shop owner fills in: brand, what they sell, tone, style, products, must-haves and sites they like.

v0

Vercel's AI builder. It writes the store's code and runs a live preview of it.

Engine

This project. It runs every step around v0 and keeps the rules.

Run

One trip from brief to report. Each has a name like halden-cycles-2610252228-si5h.

Preview

The store running in v0's sandbox, before anyone else can see it.

Check

One test on the store, such as "Add to cart updates the cart". Each passes, warns or fails.

Repair

Sending the failed checks back to v0 to fix, with the evidence. Two rounds at most.

Stuck

A check that keeps failing the same way. The engine stops sending it and keeps the gate locked.

Gate

The stop before going live. It opens only when nothing fails, and a person approves or declines.

Deploy

Publishing the store on Vercel at a public address, then running the checks again there.

Change request

A later edit to a finished store. If the change can't pass, the store goes back to how it was.

Reference sites

Up to two sites the owner likes. v0 sees screenshots for layout and type; the store may not use their names.

Image service

A small separate program that makes product pictures on request.

Report

A written record of the run, with screenshots, plus a log the console can replay.

Offline demo

A simulated builder for free rehearsals. No v0, no cost, and always labelled "simulated".

CLI

The same engine, run from the terminal instead of the browser.

03How it all fits together

One engine in the middle, everything else plugs in

You use the engine through the console or the CLI; both show the same run. The engine talks to the outside services, and only knows each of them through a small, written agreement. That is why v0 or the picture maker can be swapped without touching anything else.

04What goes in, what comes out

A brief in plain words. A checked store out.

The owner never sees code. They describe the shop the way they would to a designer. This is the Halden Cycles brief, one of the samples in the console.

Desktop, 1440 px

Phone, 390 px

05From brief to live store

The steps of a run

Every run goes through the same steps. Failures loop back to v0 at most twice, and nothing goes live without a person.

1. Prepare

   A few seconds

   The engine reads the brief. For each product without a photo, it orders a picture or finds one. It takes screenshots of up to two sites the owner likes, and notes their names, which the store must not use.

   You see: the R0 record with picture thumbnails filling in and the two reference screenshots.

2. Build

   2 to 5 minutes

   The engine sends v0 two things: standing rules (design direction, "don't make anything up", and the list of checks the store will face) and this brief. v0 writes the code.

   You see: v0's steps streaming in: files created, commands run. "Prompt sent to v0" shows the exact words.

3. Preview

   A few seconds

   The engine opens v0's live preview through a doorway on this computer, so the console and the checker see exactly the same page.

   You see: the store appear in the middle pane, with a Desktop / Mobile switch.

4. Check

   About a minute

   A real browser opens the store at desktop and phone sizes. It reads the page, clicks buttons, fills the cart and checks the sums.

   You see: round C0, every check marked pass, warn or fail, with screenshots.

5. Repair

   1 to 2 minutes a round

   Failures go back to v0 with the evidence. v0 fixes them, and the checks run again. Two rounds at most.

   You see: the exact message sent to v0, what it changed, and before-and-after screenshots.

6. Gate

   A person decides

   The gate opens only when nothing fails. It lists any warnings for a person to read, then waits for approve or decline.

   You see: "Deploy gate: Locked", or the warnings with Approve and Decline.

7. Deploy and check live

   A few minutes

   On a yes, v0 publishes the store on Vercel. The engine waits for the address to answer, then runs the same checks on the public store.

   You see: the live address and one more round of checks.

8. Report

   Instant

   Everything is written down: the report, the screenshots and the event log.

   You see: the report's path at the end, and the run listed under Past runs.

Where the time goes

06What it checks

A real browser, not a guess

The checker opens the store the way a shopper would, at desktop width (1440 px) and phone width (390 px). Each check ends in one of four ways, and each way has its own destination.

Why are invented figures only a warning? Neither v0 nor the engine can know whether "4.9 stars" is true. So instead of asking v0 to guess, the engine shows the figures to the person at the gate. In the Halden run it found five, all of them monthly "Pay in 3" amounts that v0 worked out from the prices. Probably right, but a person should confirm them.

07When a check fails

Repair: back to v0 with the evidence

The engine doesn't say "it's broken, try again". It sends v0 each failed check, what the browser actually saw, and on which screen size. Then it checks everything again, not just the parts that failed.

In the Halden run, the first round found two problems:

• Cart subtotal adds up · desktopThe checker couldn't click "Add to cart" on Halden City 3. v0's fix: the cart drawer now closes with the Escape key.
• Accessibility · phoneA scrollable table, the frame size guide, couldn't be reached with the keyboard. v0's fix: it can now take keyboard focus.

v0 changed 2 files (14 lines added, 2 removed) in 1 minute 16 seconds, and the second round passed.

When a fix doesn't take

If a check fails exactly the same way after a repair, the next message to v0 adds what it changed last time and how the browser actually drew the element. If it is still the same after that, the check is marked stuck and no longer sent. The gate stays locked, and all the evidence is there for a person to read.

Earlier runs went down this path too: one where a check was marked stuck, and one that still failed after two repairs and stayed locked at the gate.

08Pictures

Every product gets a picture, and the store says where it came from

A store without pictures looks broken, and a wrong picture is worse than none. The engine takes the first of these that works for each product:

1. 1A photo the owner put in the brief
2. 2A picture made by the image service, if it's switched on
3. 3A free Unsplash photo, credited to its photographer
4. 4A plain colour tile, never a picture of something else

Why make pictures at all? Halden's products are named by model, like "Halden City 3". Unsplash found a photo for only one of the nine, and it was the wrong one: a USB cable for the light set. A made picture shows the product the brief describes.

How the image service fits in

• The engine says what, never how. An order names the product, its description, the brand and its style, and the shape (square, or wide for the home page's hero). How the picture gets made is the service's business.
• Same order, same picture. Pictures are kept, so a rerun or a change doesn't make them again.
• Today's service runs locally and uses OpenAI's gpt-image. Any service that answers the same way can replace it, such as a hosted image API or a stock photo library.
• Honest by rule. The store's footer must say the pictures are AI-generated, and the "Image credits" check makes sure it does. Pictures never contain text or logos.

09Changing a store

Changes go through the same checks, and undo themselves if they fail

Once a store has passed, the owner can ask for changes. There are two ways in the console:

10Console and CLI

Two ways to drive the same engine

The commands

What the CLI prints

▲ storefront engine  run halden-cycles-2610252228-si5h
  Halden Cycles · 9 products · generator v0 (v0-pro) · max 2 repair rounds
  ▣ 9 product pictures and a hero from the image service: 10 ready
● Generate
  ◫ reference 1  https://www.vanmoof.com  the store must not say: VanMoof
  ✎ create lib/products.ts
  ✎ create components/cart-provider.tsx
  … 30 more steps
  agent finished: 34 parts in 2m53s
● Verify · round 0 · preview
  ✓ desktop Page loads                  HTTP 200 in 5.7s
  ✗ desktop Cart subtotal adds up       Could not click add to cart on "Halden City 3"
  ✗ mobile  Accessibility (axe-core)    1 serious/critical, 0 minor/moderate
● Repair · round 1
● Verify · round 1 · preview
  → passed  42 pass · 2 warn · 0 fail
  fixed: Cart subtotal adds up (desktop), Accessibility (axe-core) (mobile)
✓ passed  All checks passed after 1 repair round; deployment skipped  6m48s

11Making it production-grade

Keep the core, rebuild what's around it

Today this is a working demo on one laptop: one person, no logins, runs kept in memory and in folders. What makes it trustworthy (the steps, the checks, the repair loop and the gate) carries over as it is. What changes is everything around it: who can use it, where things are kept, and where the work runs.

In three phases

12Questions

Questions people ask

13Contact

Building something like this?

Storefront Engine was built by Radu Turtoi. If you're putting an AI builder in front of real customers and want the checks, repairs and approvals around it, or a second pair of hands on one, write to:

workwith@raduturtoi.com