Build your first web page with AI

Let me start with something that may surprise you:

So what does this episode teach?

It teaches why the page the AI wrote
looks the way it does.

Once you know why it looks like that,
you know which part to ask the AI to change.
Once you know which part,
you can phrase it right and get it fixed in one pass,
instead of going 10 rounds with the AI and getting nowhere.

This episode is the turning point of the series.
From here on,
you'll be speaking the same language as the AI.

Part A: why the page the AI wrote looks like that

Your first prompt

Say you open Antigravity (or any AI tool),
and your first message is:

Three seconds later the AI hands you three files:

You open the folder,
and the first question in your head is:

why does it have to be three files?
Can't it all go in one?

That question is what this episode answers.

The real reason for splitting into three layers

The real reason is practical.
It has nothing to do with what textbooks say,
and everything to do with the concrete benefit that splitting gives both the AI and you.

① Changing one thing doesn't break another

Picture this:
if everything lived in one file
and you told the AI to make the button blue,
the AI would have to scan a 1000-line blob
to find that button,
and it might break something nearby on the way.

With three layers:

This matters a lot for a vibe coder.
You'll notice the AI messing with unrelated parts much less
when it changes one thing.

② One style sheet can cover many pages

If you're building a site with many pages,
you'll have 5, 10, 20 separate HTML files.

If the styling is buried inside the HTML,
changing one color
means editing 20 files.

Once CSS is its own layer,
you change one style.css
and 20 pages change color at once.

That's also why, when we get to GitHub and deployment later,
the time the layers save you gets more and more ridiculous.

③ The AI reads it faster too

AI tools have this idea of context.
There's a limit to how much it can read at once.

If your page is crammed into one file,
the AI has to read the whole thing for any change.

With layers,
a color change means the AI only reads style.css,
which is faster, uses less quota, and goes wrong less often.

What each layer does (one line each)

You don't need to memorize syntax,
but you do need to remember this split.
Because in Part B we use exactly this split
to teach you how to phrase instructions.

Part B: the three levels of instruction for changing a page

You have a first version of the page now,
and it scores about 80.
You want it at 100.

A vibe coder spends 90% of the time changing things.
The time spent building from scratch is small.

When you change something,
your instruction has to match the layer.
Match the wrong one and the AI builds something you didn't want.

Level 1: you want to add something → HTML instructions

Verbs like add, put, insert, create.

All of these mean one more thing on the page,
so what the AI touches is the HTML.

When you give this kind of instruction,
be clear about what the new thing sits next to.
For example:

Spell out position and content,
and the AI places it correctly the first time.

Level 2: you want to change the look → CSS instructions

Verbs like make it, change it to, a bit bigger, different color, rounded, right-aligned.

All of these mean the same thing is there but it looks different,
so what the AI touches is the CSS.

For this kind of instruction,
adjectives work better than numbers.
You won't remember whether the padding is 16px or 20px,
but you do know when something feels tight or needs more room.

The AI responds better to adjectives and comparisons
than to a precise instruction like padding: 24px.

Level 3: you want to add behavior → JS instructions

Verbs like click, press, hover, pop up, automatically, submit.

All of these are things that happen when you interact,
so what the AI touches is the JavaScript.

For this kind of instruction,
spell out three things: the trigger, the response, and the end state.

Say all three clearly
and the AI won't improvise.

One button, three ways to change it

Same button,
three ways to change it across three different layers.
Read this example once
and you'll always remember how to tell them apart.

Change ①: the text or the position → HTML layer

Change ②: the look → CSS layer

Change ③: the behavior → JS layer

One button, three changes, three files.
Once you see this split,
the next time you ask the AI to change something
you'll know automatically which layer your instruction lands in.

The instruction traps vibe coders fall into

Trap 1: mixing all three layers into one instruction

Three things in one sentence.
The AI usually finishes the first two,
half-finishes the third,
and you can't tell what went wrong where.

Trap 2: working back from the effect to the syntax

A vibe coder won't pick better numbers than the AI,
so describe the feel instead.

Trap 3: not being clear about which file the change is in

The AI can't tell whether you mean the HTML layer, moving the button,
or the CSS layer, a different style.

A template for your instructions

Next time you want the AI to change a page,
use this structure:

Save this template.
Week one it feels mechanical,
week two you notice the AI getting it wrong far less,
week three the structure becomes instinct whenever you talk to the AI.

Once you've worked through the three levels of instruction,
you'll probably notice something:

some things
you simply can't describe in words.

The card I want is nothing like the one you made,
but I don't know how to tell you what I want...

When that feeling shows up,
more precise wording won't save you.
What you need is to draw it for the AI.

In EP.6,
we move into Figma,
where a vibe coder spends the least possible learning time
turning the picture in their head into a design the AI can read.