Pick a design direction before your AI builds: brief, three drafts, one file, then code

Why this step matters

When an agent builds straight from "make me a website", it makes the design decision for you, quietly, and you only see it once the whole site exists. Changing direction then means redoing everything.

This guide moves that decision to the front. You see three looks as real drafts, pick one, write it into one file, and only then build. It sits between step 1 (brief) and step 2 (build) of Vibe-code a website that doesn't look AI-made.

It is an order we suggest, put together from the documented steps of each skill below. The skills can be swapped; the order is the point.

What you need first

Claude Code or Codex, with your site's project folder open. The skills below are free, but these agents may need a paid plan.
Huashu Design for the three drafts.
UI UX Pro Max for the design file. Optional: a hand-written note works too.
A build skill: Fable Forge or frontend-design.
Your real material: logo if you have one, a few real photos, prices, hours, and any honest proof such as reviews.

The Huashu Design, UI UX Pro Max and frontend-design pages had their install steps checked against each upstream README on 30 Sep 2026, and each says what we actually ran. The Fable Forge page is our own older guide.

Step 1: Write the brief (about 15 minutes)

Five lines, before anything visual:

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

Check: you would be happy for a customer to read it.

Step 2: Get three directions as drafts (about 20 to 30 minutes)

Do this in a separate scratch folder, not in your site's project. Huashu Design's own instructions say it is for mockups, decks and prototypes, not production websites.

You should get three drafts that differ in more than colour: different type, layout and mood. If two look alike, ask for one to be replaced.

Check: you can say in one sentence why each draft fits or does not fit your brief.

Step 3: Pick one and write it down (about 15 minutes)

Pick one, and say what you would change. Then save the decision into one file your build agent will read. With UI UX Pro Max:

That gives you design-system/<name>/MASTER.md. Its first suggestion is a keyword match, so the edit step matters: the file should describe the draft you chose, not a generic recommendation. Without the skill, ask the agent to write the same thing by hand: colours with hex codes, two fonts, spacing, the one layout idea, and a short "do not" list.

Then move the decision into your real project. The drafts were made in a scratch folder, so copy these into your site's project folder: your five-line brief (for example as design-system/<name>/BRIEF.md), the screenshot of the draft you picked, and design-system/<name>/MASTER.md. If you ran UI UX Pro Max in the scratch folder, the file is there, not in your project. Step 4 points at these files, so check they exist before you go on.

Check: someone who never saw the drafts could build the right look from the file alone, and the file is in your site's project.

Step 4: Build the real first screen (about 30 to 60 minutes)

Back in your site's project folder:

If the chosen look is calm and premium, you can add high-end-visual-design here, but tell the agent the design file wins where the two disagree.

Check: the first screen matches the draft you picked, and it could not belong to a different business.

Step 5: Check before you call it done

Follow step 3 of the vibe-coding chain: screenshots at phone and desktop width with agent-browser, and npx impeccable detect from Impeccable. Then check the page against the checklist at the bottom of your MASTER.md.

Watch-outs

Too many design skills at once. Each has its own rules, and some contradict each other: on which icon sets are allowed, on cards nested inside cards, and on spring or bounce motion. Use one to pick, one file to decide and one to build. Your approved design file wins, and any exception you keep gets written into it.
Three drafts cost time and usage. For a one-page fix you do not need this. Use it for a new site or a full redesign.
Fonts and images need licences. Some fonts suggested by design skills are paid. Stock or web images need their licence checked. Your own photos are the safest.
Do not let drafts leak real data. Use your public business details only; keep customer names, prices you have not announced and private documents out of the scratch folder.
Publishing is your call. Nothing here deploys. Review the page yourself before it goes live.

Link and credit

Built from the public instructions of Huashu Design (MIT), UI UX Pro Max (MIT), Taste Skill (MIT) and Fable Forge (Apache-2.0). This page is our own write-up.