Vibe-code a website that doesn't look AI-made: brief, build, browser check, review

Why an order matters

Most AI-made websites go wrong in the same place: the agent builds before anyone has said who the page is for, then declares it done without looking at it. The tools below each fix one part of that. The order is what makes them work together.

This is the order behind the design standard on this site, written up in Fable Forge: brief, build, check in a browser, review. The tools are swappable. The order is the point.

What you need first

Claude Code or Codex, with your site's project open. The skills below are free, but these agents may need a paid plan.
The prompts below use three tools, so install them first or swap them as noted:

- frontend-design to build (step 2). Swap: Fable Forge; change the skill name in the prompt. - agent-browser to look at the page (step 3). Swap: the Playwright guide, which does the same as a script. - Impeccable for the design-tell scan (steps 2 and 3). Without it, leave out the impeccable lines.

Optional: Superpowers, if the page needs real features such as a form or a booking flow.

The install steps on the frontend-design, agent-browser, Impeccable and Superpowers pages were checked against each upstream README on 30 Sep 2026, and each page says what we actually ran. The Fable Forge and Playwright pages are older guides.

Step 1: Brief (about 15 minutes, you and the agent)

Before any code, get five lines in writing:

Who visits, in one sentence.
The one thing they should do (WhatsApp you, book, buy, call).
The proof you can honestly show: real reviews, real photos, real numbers. If you have none yet, say so.
One idea taken from the business itself, not from other websites.
What must not appear: fake testimonials, stock logos, prices you do not offer.

Prompt:

With Fable Forge this is its direction note. With Impeccable, /impeccable init records the same kind of facts in a PRODUCT.md file. With Superpowers, the brainstorming step asks these questions for you.

Check: you would be happy to show the brief to a customer.

Step 2: Build (about 30 to 60 minutes)

Ask for the first screen only, not the whole site:

Look at it. If the direction is wrong, fix the brief, not the pixels. Once the first screen is right, build the rest.

For a page that already exists and if you use Impeccable, use a smaller command, such as /impeccable critique home then /impeccable polish home, so the agent fixes problems instead of redesigning everything.

Check: the page runs locally, and the first screen could not belong to a different business.

Step 3: Check in a real browser (about 10 minutes)

The agent must look before it says done. Prompt:

You get two screenshots, an error list, a list of design tells with where they are, and a report on whether the main action works with test data. If you use Playwright instead, the Playwright guide does the same as a script you keep in the project.

Check: you have looked at both screenshots yourself, and the main action went where it should with test data.

Step 4: Review and fix, at most twice

Pick the three problems that matter most and fix only those. Then run step 3 again. If it is still wrong after two rounds, stop and rethink the brief. More rounds of small fixes rarely rescue a wrong direction.

For a second opinion, start a fresh agent session with no history, give it the brief, the screenshots and the page address, and ask what a visitor would find confusing. The agent that built the page should not be the only one who approves it.

Check: a short list of what is still unproven, for example "never tested on a real iPhone" or "no real reviews yet".

Before you publish

Read every word on the page. Remove anything you cannot back up.
Deploying is your decision, not the agent's. Tell the agent to prepare the change and stop.
After it is live, open the real address on your own phone once.

What this will not do

It will not choose your taste for you. You approve the brief and the first screen.
Screenshots show that the page renders at those sizes; the click test shows the main action works with test data. Neither proves the page brings enquiries. Only real visitors can tell you that.