Every block on this page is ready to copy. Work down them in order and you
finish with your home page rebuilt and live, not a mockup of one.
The method is the part worth having: design the page as a real file first,
look at it, reject it, and only then turn it into build prompts. Doing it the other way
round is why most AI-built sites look the same.
The proof
This site, before and after
BeforeAfter< >
Drag it. Same business, same offer, one afternoon of work between them.
00
Before you start
The only step with nothing to paste. Read it, get set up, and check the one thing you cannot substitute.
What you'll have at the end
Your home page, rebuilt and live, in about two hours. Not a mockup. The real page.
Nothing here touches your current site
Your live site stays exactly as it is for the whole process. You're building alongside it, not
on top of it. Nothing goes live until you decide it does.
What you need
An AI you can chat with
Claude, ChatGPT, or Gemini. The paid tiers work better here because the design step is long,
but any of them will get you through it. Have one open in a tab.
Your current website's URL
That's where your copy and images come from. If your site is behind a login or a
coming-soon page, have the actual text ready to paste instead.
Hex codes if you have them. If you don't, don't go looking. Step 2 pulls them off your
current site.
Two things to know before you begin
You'll reject the first design. Everyone does. It's step 6, it's built into
the process, and it's the part that makes this work.
Go one step at a time. Each block feeds the next one. Skipping ahead to the
interesting part is the one reliable way to end up with a generic page.
01
Teach your AI the method
Everything downstream depends on this landing. It's short on purpose.
To your AI
I'm rebuilding my website's home page today, and you're going to help me
design it. Read this whole message before you reply.
The method, and it is not the obvious one:
We design the page as a real HTML file first, and only then turn it into
build prompts. Not the other way around. You will not write a single build
prompt until I have looked at a real page and approved it.
Here is why, because you will be tempted to skip it. A design brief made of
principles and prohibitions is not a design. It says what to avoid and never
says what a section should look like, so every section comes out the same
shape: a heading over a paragraph over a row of rounded cards. That is what
happens when an AI is asked to invent. Ask it to transcribe something that
already exists and it is excellent. An AI page builder is a transcriber, not
a designer, so my job today is to give it something worth transcribing.
I also cannot judge a design I have not seen. Neither can you. Every round of
"make it more distinctive" against a written brief burns a cycle and lands
somewhere generic. Reacting to a real page is easy. Specifying one is not.
How you and I will work for the next hour:
- One step at a time. Do what I ask, then stop and wait for me. Do not run
ahead to the next step because you can see it coming.
- Never invent a fact. Not a price, a statistic, a testimonial, a client
name, a date, or an image URL. Every number you put on the page has to
come from something I gave you. If you need something I have not given
you, stop and ask me for it.
- No em dashes or long dashes as punctuation. No emojis. US spelling.
- When you show me the design, show me the page, not a description of the
page.
Expect me to reject the first design you build. That is not a failure, it is
the process working. A rejected HTML file costs an hour. A rejected website
costs a day, and by then it is live and other people have seen it.
Reply with exactly these three lines and nothing else:
1. The method, in one sentence.
2. What you will do first when I ask you for the design.
3. How you will show me an HTML file I can open and look at, in this tool.
What you should get backThree short lines. Line 3 is the one that matters, because it tells you where your design will appear in the tool you're using. If you got paragraphs, an offer to start building, or a question, paste the block again.
02
Harvest your current site
Your copy already exists. We're improving it, not writing from nothing.
To your AI
Before we design anything, I want everything my current site already says
pulled into one place, so we improve real copy instead of writing new copy
from nothing.
My current home page: [PASTE YOUR URL]
Open it and read it. If you cannot open URLs, tell me and I will paste the
text instead.
Give me back, in this order:
1. Every piece of copy on the page, section by section, top to bottom, in
the order it appears. Headline, subhead, body, button labels, captions.
Word for word as written, not summarized.
2. The absolute URL of every image, and one line on what each shows.
3. The colors the site uses, as hex codes, and the typefaces if you can
identify them.
4. A short list of anything on the page that is a claim I would need to
back up: a statistic, a client count, a testimonial, a promise about
results.
Rules for this step:
- Copy it, do not improve it. This step is a record of what exists.
- Never guess an image URL. If you cannot read one, say so and leave it out.
- If a section has no real copy, say so rather than filling it in.
Then stop. Do not suggest changes yet.
What you should get backA plain inventory that reads like your site. If it reads better than your site, your AI rewrote it, and the before and after you're about to build is worthless. Paste the block again.
03
Confirm what it found
Your AI just read your whole site. It should be filling this in, not interrogating you about your own home page. You are confirming and filling gaps, nothing more.
To your AI
You just read my whole site, so do not ask me things it already told you.
Fill in as much of this as you can from what you read. Mark anything you
genuinely cannot tell from the page as TO FILL.
1. Does this site sell something directly, or send people somewhere else to
buy?
2. Who is this page written for?
3. What is the one action the page pushes? Name the primary button, its exact
words, and where it goes.
4. Is there a form? What fields does it collect, and what does it say after
someone submits?
5. Which claims on the page would need proof: a statistic, a client count, a
testimonial, a promise about results.
Then show me your answers, and ask me about two things only:
- Anything you marked TO FILL.
- Anything where the page looks wrong, unclear, or contradicts itself.
Rules for this step:
- Do not ask me a question the site already answers. If you can read it, fill
it in and move on.
- Never guess a number, a claim, or where proof comes from. Those are exactly
the ones to ask me about.
- We are giving this page a new design, not a new message. Treat the
positioning as settled unless I tell you otherwise.
When we are done, write it back as a one page brief I can copy and keep, with
every TO FILL still visible in it.
What you should get backA filled-in brief plus a short list of questions. If it asks you something written plainly on your own home page, tell it to read the page again. Keep the brief somewhere you can paste it back. Every later step refers to it.
04
Build and measure your palette
Color that fails is cheap to fix now and expensive to fix after the site is built.
To your AI
Build my palette out and measure it before we design anything.
My brand colors: [PASTE HEX CODES, or say "use the colors you found on my
current site"]
Take those and extend them into a working range: a page background, a
surface color for anything sitting on that background, a main text color, a
quieter secondary text color, a border color, and one accent for buttons.
Then measure. For every text color, against every background it could sit
on, give me the actual contrast ratio as a number. Small text needs 4.5 to
1. Large headings need 3 to 1.
Give me back a table: the color, what it is for, what it sits on, its
ratio, and pass or fail.
Rules for this step:
- Measure every combination, not the ones you expect to pass.
- A mid-tone brand color that looks right as a button fill will usually
fail as small text. Say so explicitly when it does, and mark that color
as button fill only.
- Do not change my brand colors to make them pass. Change what I use them
for, and tell me what you changed.
- If a color fails everywhere, say so now. It is cheap to fix here and
expensive to fix after the site is built.
What you should get backA table of numbers, not a description. Anything reading “good contrast” without a ratio means it wasn't measured. Ask for the numbers.
05
Pick a direction
A direction fixes the shape: real typefaces at real sizes, explicit column placement, prohibitions that shape composition, and a signature motif. None of them carry color, on purpose, so any one of them can carry your brand. Pick one and copy it.
To your AIEach button copies that one direction, wrapped in the instructions your AI needs. Copy one, not several.
01
Editorial Portrait
A long-form magazine profile. The owner's photograph carries the page.
Read the full spec
Here is the design direction for my site. Use it exactly as written.
## 01. Editorial Portrait
*A long-form magazine profile. The owner's photograph carries the page.*
**Typography**
| Role | Face | Notes |
|---|---|---|
| Display | **Fraunces**, 300, optical size high, tracking tight | Headlines. Set large |
| Body | **Inter**, 400, 17px, line-height 1.7 | Measure capped at 68 characters |
| Utility | **Inter**, 500, uppercase, letter-spaced .28em, 11px | Section labels on the rail |
**Layout**
- Asymmetric 12-column grid. Content sits in columns 2 to 8 or 5 to 12, never centered.
- Section headings sit in the narrow column beside their content, not above it.
- Images run large and may bleed past the text column to the page edge. Never crop a face.
- Never place text over a photograph. Text and image sit side by side.
- No cards, no shadows, no gradients, no corner radius above 2px.
**Motion**
- **On scroll**: images fade and rise 24px, 700ms, ease-out. The headline in the same
section starts 150ms after its image, so the picture lands first.
- Nothing else animates. No hover movement beyond a link underline.
**Signature**
A thin vertical rule beside each section, with the section name set small, uppercase and
letter-spaced running down it. On mobile the rule goes and the label moves above the
heading.
Rules for this step:
- This direction has no colors in it on purpose. The shape comes from here,
the color comes from the palette we measured. Do not substitute one for
the other.
- The prohibitions are the design. If it says no cards and no shadows, that
is not a style preference to soften, it is the thing that stops the page
looking like every other page.
- Do not start building yet.
Reply with one sentence: what this direction will make my page look like,
in your own words.
02
Quiet Room
Somewhere you can hear yourself think. Restraint is the design.
Read the full spec
Here is the design direction for my site. Use it exactly as written.
## 02. Quiet Room
*Somewhere you can hear yourself think. Restraint is the design.*
**Typography**
| Role | Face | Notes |
|---|---|---|
| Display | **Karla**, 300 | Headings. Never bold, anywhere on the site |
| Body | **Karla**, 400, 18px, line-height 1.9 | Running copy |
| Utility | **Karla**, 400, 13px | Captions. No second family, no monospace |
**Layout**
- One column, maximum width 620px, centered.
- At least 160px between sections on desktop, 96px on mobile. Every section holds one idea.
- Very few images. Where one appears it is small, soft, and sits alone with space around it.
- No cards, no borders around content, no icons, no shadows.
**Motion**
- **On scroll**: opacity only, 900ms. No travel, no scale, no stagger beyond one step.
- **Hover**: opacity changes and nothing else. Nothing slides or bounces anywhere.
**Signature**
A single hairline that grows from zero to about 40 percent width as its section enters
view, used once between each pair of sections. It is the only thing on the site that
moves horizontally.
Rules for this step:
- This direction has no colors in it on purpose. The shape comes from here,
the color comes from the palette we measured. Do not substitute one for
the other.
- The prohibitions are the design. If it says no cards and no shadows, that
is not a style preference to soften, it is the thing that stops the page
looking like every other page.
- Do not start building yet.
Reply with one sentence: what this direction will make my page look like,
in your own words.
03
Warm Analog
A beautifully made printed thing rather than a screen.
Read the full spec
Here is the design direction for my site. Use it exactly as written.
## 03. Warm Analog
*A beautifully made printed thing rather than a screen.*
**Typography**
| Role | Face | Notes |
|---|---|---|
| Display | **Newsreader**, 500 | Headings, set generously |
| Body | **Newsreader**, 400, 17px, line-height 1.75 | Running copy |
| Accent | **Caveat** | Pull-quotes only, no more than three times on the whole site |
**Layout**
- A loose grid. Elements sit a few pixels off strict alignment on purpose.
- A subtle paper grain over the page background, and a light grain over photographs at low
opacity. Grain only. Never a color tint and never a darkening filter on an image.
- Images get a thin inset border, like a mounted print.
- No neon, no glass, no glow, no gradients.
**Motion**
- **On scroll**: two-layer parallax on image sections, background moving at 0.85 speed.
Drop the parallax entirely below 768px.
- Images fade in over 800ms rather than appearing.
**Signature**
A hand-drawn underline stroke beneath the key phrase in each section heading, drawn as
inline SVG and animating left to right on entry. It is the one hand-made mark on the site.
Rules for this step:
- This direction has no colors in it on purpose. The shape comes from here,
the color comes from the palette we measured. Do not substitute one for
the other.
- The prohibitions are the design. If it says no cards and no shadows, that
is not a style preference to soften, it is the thing that stops the page
looking like every other page.
- Do not start building yet.
Reply with one sentence: what this direction will make my page look like,
in your own words.
04
Luminous
Light moving through water. Alive without being loud.
Read the full spec
Here is the design direction for my site. Use it exactly as written.
## 04. Luminous
*Light moving through water. Alive without being loud.*
**Typography**
| Role | Face | Notes |
|---|---|---|
| Display | **Outfit**, 500 | Headings, set wide |
| Body | **Outfit**, 400, 17px, line-height 1.7 | Running copy |
| Utility | **Outfit**, 500, 12px, letter-spaced | Labels |
**Layout**
- Deep dark background. Two large soft radial glows sit behind the content, heavily
blurred.
- Content sits on translucent panels with a backdrop blur and a 1px light border at low
opacity. Corner radius 20px. Depth comes from light, not from drop shadows.
- One panel per row below 768px, and reduce the blur radius there so it stays fast.
- **Contrast is the risk in this direction.** Text must clear 4.5:1 against the panel
behind it measured with the blur applied, and body text never sits directly on a glow.
**Motion**
- **Ambient**: the background glows drift continuously on a 20 second loop. Freeze this
under `prefers-reduced-motion`.
- **Hover**: panels rise 16px and their border brightens, 250ms.
- **On scroll**: sections fade in over 600ms, no travel.
**Signature**
The ambient glow follows whichever section is in view, so the page brightens around
whatever the reader is currently on.
Rules for this step:
- This direction has no colors in it on purpose. The shape comes from here,
the color comes from the palette we measured. Do not substitute one for
the other.
- The prohibitions are the design. If it says no cards and no shadows, that
is not a style preference to soften, it is the thing that stops the page
looking like every other page.
- Do not start building yet.
Reply with one sentence: what this direction will make my page look like,
in your own words.
05
Statement
Someone speaking clearly and not apologizing for it. The words are the design.
Read the full spec
Here is the design direction for my site. Use it exactly as written.
## 05. Statement
*Someone speaking clearly and not apologizing for it. The words are the design.*
**Typography**
| Role | Face | Notes |
|---|---|---|
| Display | **Anton**, uppercase, tracking slightly negative | Set enormous, filling the container width |
| Body | **IBM Plex Sans**, 400, 18px, line-height 1.6 | Running copy |
| Utility | **IBM Plex Sans**, 700, 12px, uppercase, letter-spaced | Buttons and labels |
**Layout**
- Two colors and nothing between them. High contrast throughout.
- Very few images. Where one appears it is full-bleed and sits between text sections as a
break, never as decoration beside text.
- No cards, no icons, no gradients, no rounded corners.
- Below 768px keep the display type dominant, breaking to one word per row if it needs to.
**Motion**
- **On scroll**: headline rows slide up 40px from behind a clipping mask, staggered 90ms
apart, 500ms each.
- **Hover**: buttons invert their colors. Nothing moves.
**Signature**
Each major section opens with one line of the headline per row, each row arriving
separately from behind its mask, so it reads as delivered speech rather than a block of
text appearing.
Rules for this step:
- This direction has no colors in it on purpose. The shape comes from here,
the color comes from the palette we measured. Do not substitute one for
the other.
- The prohibitions are the design. If it says no cards and no shadows, that
is not a style preference to soften, it is the thing that stops the page
looking like every other page.
- Do not start building yet.
Reply with one sentence: what this direction will make my page look like,
in your own words.
06
Considered
An architect's studio. Precise rather than decorative.
Read the full spec
Here is the design direction for my site. Use it exactly as written.
## 06. Considered
*An architect's studio. Precise rather than decorative.*
**Typography**
| Role | Face | Notes |
|---|---|---|
| Display | **Inter**, 600, modest sizes | Headings. This direction does not shout |
| Body | **Inter**, 400, 16px, line-height 1.65 | Running copy |
| Utility | **IBM Plex Mono**, 400, 11px, uppercase, letter-spaced .16em | Margin labels |
**Layout**
- A visible 12-column grid with hairline vertical rules at the margins. Every element
snaps to it.
- Section dividers are 1px full-width rules, never a color band.
- One accent color, used no more than four times on any page.
- No shadows, no gradients, no decorative illustration. Corner radius 4px maximum.
- Below 768px collapse to one column and move the margin labels above each section.
**Motion**
- **On scroll**: a 6px rise with opacity, 300ms, no stagger.
- **Hover**: links underline. That is the entire motion budget for the site.
**Signature**
Each section is numbered and labeled in the left margin, small and uppercase. Only number
sections whose order actually carries meaning, such as a real process or sequence. Do not
number a set of unordered sections just to fill the margin.
Rules for this step:
- This direction has no colors in it on purpose. The shape comes from here,
the color comes from the palette we measured. Do not substitute one for
the other.
- The prohibitions are the design. If it says no cards and no shadows, that
is not a style preference to soften, it is the thing that stops the page
looking like every other page.
- Do not start building yet.
Reply with one sentence: what this direction will make my page look like,
in your own words.
07
Cinematic
The opening of a film. You move through it rather than reading down it.
Read the full spec
Here is the design direction for my site. Use it exactly as written.
## 07. Cinematic
*The opening of a film. You move through it rather than reading down it.*
**Typography**
| Role | Face | Notes |
|---|---|---|
| Display | **Cormorant Garamond**, 300 | Set very large over imagery |
| Body | **Jost**, 400, 17px, line-height 1.7 | Running copy |
| Utility | **Jost**, 400, 12px, uppercase, letter-spaced .18em | Buttons and captions |
**Layout**
- Every major section is 100vh, holding one full-bleed image and a small amount of text.
- **Text over imagery always sits on a directional scrim** weighted to the side the text
is on, so the subject of the photograph stays visible. Never an even dark layer over the
whole image.
- Preload the first two images and lazy-load the rest. This direction is heavy.
- Below 768px keep the full-screen scenes but move text below the image wherever the
portrait crop would hide the subject.
**Motion**
- **On scroll**: scroll position drives the scene. The image scales from 1.0 to 1.06
across the scroll of its section while the text holds still.
- Text fades in at 30 percent scene visibility, 800ms.
- Scene transitions cross-fade rather than cut. Disable the scale under
`prefers-reduced-motion`.
**Signature**
The slow scale of each scene image against text that stays put. It reads as a camera
pushing in, and it is the reason to choose this direction at all.
Rules for this step:
- This direction has no colors in it on purpose. The shape comes from here,
the color comes from the palette we measured. Do not substitute one for
the other.
- The prohibitions are the design. If it says no cards and no shadows, that
is not a style preference to soften, it is the thing that stops the page
looking like every other page.
- Do not start building yet.
Reply with one sentence: what this direction will make my page look like,
in your own words.
08
Living Line
Something growing. Curves and drawn lines instead of rectangles.
Read the full spec
Here is the design direction for my site. Use it exactly as written.
## 08. Living Line
*Something growing. Curves and drawn lines instead of rectangles.*
**Typography**
| Role | Face | Notes |
|---|---|---|
| Display | **Gilda Display**, 400 | Headings |
| Body | **Mulish**, 400, 17px, line-height 1.75 | Running copy |
| Utility | **Mulish**, 400, 13px, letter-spaced .06em | Buttons and captions |
**Layout**
- Sections are separated by flowing SVG shapes, not straight edges.
- Images sit inside organic masks such as an arch or a soft blob, never a hard rectangle.
- Fine single-weight line illustration in the margins, drawn from the business's own
subject matter. Sparse, never more than two per section.
- No hard shadows, no sharp corners anywhere, no grid rules.
- Below 768px simplify each section shape to a single curve.
**Motion**
- **On scroll**: section shapes fade and scale from 0.98, 700ms, gently eased. Nothing
snaps into place.
- **Hover**: borders and fills soften. No travel.
**Signature**
A continuous thin line running down the whole page, weaving between sections and drawing
itself with `stroke-dashoffset` as the reader scrolls. On mobile it moves to the left edge
and stays.
Rules for this step:
- This direction has no colors in it on purpose. The shape comes from here,
the color comes from the palette we measured. Do not substitute one for
the other.
- The prohibitions are the design. If it says no cards and no shadows, that
is not a style preference to soften, it is the thing that stops the page
looking like every other page.
- Do not start building yet.
Reply with one sentence: what this direction will make my page look like,
in your own words.
09
The Board
A gallery wall. The artwork is the product, and nothing on the page competes with it.
Read the full spec
Here is the design direction for my site. Use it exactly as written.
## 09. The Board
*A gallery wall. The artwork is the product, and nothing on the page competes with it.*
**Typography**
| Role | Face | Notes |
|---|---|---|
| Display | **Marcellus**, 400 | Collection names. Roman, carved, never bold |
| Body | **Public Sans**, 400, 16px, line-height 1.65 | Running copy, kept short |
| Utility | **Public Sans**, 500, 11px, uppercase, letter-spaced .14em | Colorway names, specs, labels |
**Layout**
- **The user interface carries no color of its own.** Ground is a gallery grey, text is
near-black, and there is no accent hue anywhere. The work supplies every color on the
page. This is deliberate: the collections have palettes that disagree with each other,
and any brand accent would fight most of them. Do not add one.
- Artwork sits on white, centered on the grey ground, with a soft shadow so it reads as a
mounted board on a wall rather than a picture pasted onto the page.
- **Artwork is presented whole.** Never crop it, never scale it below legibility, never
put text or a scrim on top of it, and never place two boards side by side.
- The index of collections is a gallery wall: an even grid of boards, equal gutters, each
labeled beneath in utility type. No cards, no borders, no hover captions over the art.
- Text sits in the margins and between boards, never over them. Keep it brief; the work
is doing the talking.
- Boards are tall and heavy. Lazy-load everything below the first, and put the real pixel
dimensions in the `width` and `height` attributes of every `img` so the page does not
jump as they arrive.
- **A lazy-loaded image must never be sized `h-auto` inside a fixed-ratio parent.** With no
intrinsic size yet, `h-auto` computes to zero, a zero-area element never trips the
lazy-load threshold, so it never loads and never gains a size. The image stays blank
forever. Give the image its own `width`/`height` attributes and let the box follow the
artwork, rather than fixing the box and leaving the image to fill it.
**Motion**
- **On scroll**: artwork fades in over 500ms with at most 16px of travel. Nothing scales,
nothing parallaxes. A large image moving while it loads looks broken.
- **Hover**: on the gallery wall, the board under the cursor holds full opacity while the
rest drop to about 80 percent. Nothing moves and nothing zooms.
- Colorway changes crossfade over 350ms in place.
**Signature**
The colorway rail. Under each collection, a horizontal row of its colorways, each labeled
with its own name. Selecting one does not navigate anywhere: the large artwork above
crossfades to that colorway in place and the name sets in the margin, so a buyer can flip
through the range the way they would flip through a physical sample book without losing
their place. Where a collection has only one colorway, the rail does not appear at all.
Rules for this step:
- This direction has no colors in it on purpose. The shape comes from here,
the color comes from the palette we measured. Do not substitute one for
the other.
- The prohibitions are the design. If it says no cards and no shadows, that
is not a style preference to soften, it is the thing that stops the page
looking like every other page.
- Do not start building yet.
Reply with one sentence: what this direction will make my page look like,
in your own words.
What you should get backOne sentence that sounds like the direction you picked. If it could describe any of the others, it didn't land.
06
Get the design, then reject it
This is the step everything else depends on, and the one people want to rush.
To your AI
Now build my home page as one self-contained HTML file.
Use everything we have: the copy you pulled from my current site, the brief
I answered, the palette you measured, and the direction I picked.
Requirements for the file:
- One file. Inline <style>, inline <script>, nothing external except fonts
and images.
- It has to open in a browser by double-clicking it. No build step, no
framework, no dependencies.
- Real copy, tightened from my current site. No lorem ipsum and no
placeholder headings like "Section Two".
- Real images at the absolute URLs you collected. Never invent an image
URL. If a section needs an image I do not have, leave the space and tell
me what is missing.
- Exactly one h1.
- Every image needs real alt text describing what it shows.
Do not use any of these, no matter how well they seem to fit:
- see-through panels sitting over a photograph
- body text at reduced opacity
- rounded cards with a drop shadow on every one of them
- a row of three icons with a circle behind each one
- a fade-up animation on every section as it scrolls into view
- full width color bands stacked one after another
Those six are what an AI reaches for when it is not sure. They are the
reason most AI-built pages look identical.
Also: no em dashes or long dashes as punctuation. No emojis. US spelling.
Every number on the page comes from my brief. Do not invent, round, or add
a figure.
Build it, then show me the file so I can open it and look at it.
You are going to reject this one. That's not a setback, it's the step. A
rejected HTML file costs an hour. A rejected website costs a day, and by then it's live.
When you reject it, do not say “make it more distinctive.” That's the sentence that
burns a whole afternoon and lands somewhere just as generic. Name specific things you can point
at.
To your AI
I looked at it. Three things to change:
1. [WHAT YOU DISLIKED, AND WHERE ON THE PAGE]
2. [WHAT YOU DISLIKED, AND WHERE ON THE PAGE]
3. [WHAT YOU DISLIKED, AND WHERE ON THE PAGE]
Change only those three things. Leave everything else exactly as it is.
Do not take the opportunity to improve anything I did not name.
Then show me the file again.
What you should get backThe same page with three things different. If anything else moved, say so and ask for it back. Repeat this block until you would put your name on the page.
07
Check the design before extracting
You're the last person who will look at this. After here, everything gets transcribed faithfully, mistakes included.
To your AI
Before we turn this into build prompts, check the design file itself.
Everything in it is about to get transcribed faithfully, mistakes included.
Go through this list against the actual file and tell me what you found:
1. Does every tag close? A missing closing tag does not throw an error, it
silently reparents everything after it.
2. Search for aria-hidden. It belongs on decorative marks and dividers. It
does not belong on a photograph of a person, a caption, or anything
carrying words.
3. Exactly one h1, and headings in order with no levels skipped.
4. Every image has real alt text. Not the filename, not empty.
5. Search for href="#". Every one is either a placeholder I need to fill in
or a mistake. List them.
6. Every number on the page traces back to my brief. List any that do not.
7. Any placeholder copy still in the file. Read it properly. This is the
easiest thing in the world to ship by accident.
8. Re-measure the contrast of every text color against the background it
actually ended up on. Give me ratios, not adjectives.
Give me the list, fix what is clearly a mistake, and ask me about anything
that is a decision rather than a mistake.
What you should get backA list with real findings on it. A clean pass on all eight items on the first try usually means it checked the conversation instead of the file. Ask it to open the file and check again.
08
Extract the prompt pack
Your AI stops designing here and starts transcribing. The prompts carry your actual stylesheet and markup, byte for byte.
To your AI
The design is approved. Now turn it into build prompts for GHL AI Studio.
You are not designing anything from here. You are transcribing the file we
approved. Every prompt you write carries the actual markup and the actual
stylesheet from that file, byte for byte. Never write a prompt that
describes a design. A prompt that describes a design produces a different
page, and nothing about it looks wrong until it is built.
The pack, in this order:
1. Design system. The complete stylesheet, exactly as written, as one new
file. Say in the prompt: this file is mine, do not edit it again in any
later prompt.
2. Shell and routing. Layout, header, footer, the routing, the motion
script.
3 to N. Sections, two or three per prompt. Never a whole page in one
prompt. It gets truncated and the later sections arrive half built.
Split on natural seams, and keep a section together with its follow-on.
N+1. Verify. Read only, changes nothing.
N+2. Cleanup. Deletes the scaffold page, reports before deleting.
Things AI Studio gets wrong, that your prompts have to prevent:
- It cannot open files or take attachments. Never write "attach" or "paste
this file in." Any file it needs, put the full content in a fenced code
block and say: create this file exactly as written, byte for byte, do not
rewrite, refactor, or reformat.
- It has no environment variables. Never write VITE_ anything.
- Its code ships to the browser, so no secret ever goes in a prompt.
- Forms and booking calendars connect natively. Never invent an endpoint or
propose a backend to create a contact. Do say which fields to collect and
what the success message says, because saying nothing makes it invent an
endpoint. Anything collecting a phone number or email needs a consent
checkbox, unchecked by default, required before submit, full sentence
visible, and you have to ask for it or it will not appear.
- Do not explain how to do something it already does. A long paragraph of
plumbing makes it build the complicated version of something that needed
one sentence.
- Images: absolute public URLs only. A local path renders nothing. Never
filter, tint, or blend an image, it will recolor art to match the theme
and make it disappear. Never render an icon below 64px.
- Structural CSS gets a class, never an ID. An id-scoped hero inherits
nothing on the second page, and the symptom is a page that looks broken
with no error anywhere.
- Ask for exactly one h1, by name.
- Large CSS blocks go missing in transit while their markup lands. Keep CSS
blocks small, and put any later change in a separate overrides file that
loads after the stylesheet rather than editing it.
- Any inline SVG carries fill, stroke, stroke-width, font-family and
font-size on the elements themselves. Unstyled HTML degrades gracefully.
Unstyled SVG renders as solid black shapes.
- Prefer flex with wrapping to grid templates. A grid with more children
than columns collapses, and fewer moving parts means fewer parts arrive
damaged.
- Creating a file is not wiring a file. Every structure prompt states the
routing change out loud, or the file is never compiled and never errors.
- The last prompt has AI Studio list every distinct image URL it used and
the count, so I can check it against what we gave it.
Append the standing rule block to every single prompt.
Output the prompts one at a time, ready to paste, nothing else in them. No
preamble, no notes to me inside the prompt. Wait for me to tell you a
prompt landed before you write the next one.
What you should get backOne prompt, and then silence. If you got the whole pack at once, it stopped transcribing and started summarizing somewhere in the middle. Ask for them one at a time.
The standing rule block
This one is never pasted on its own. It goes at the bottom of every prompt your AI writes
above. It's here so you can check it's actually there.
Goes inside another prompt
- Reproduce the markup exactly as given. Do not restructure it, do not
rename classes, do not swap plain elements for component library
equivalents, and do not add utility classes.
- All styling comes from the stylesheet. Do not write inline styles beyond
the ones already present in the markup.
- Use the copy exactly as written. Do not rewrite, shorten, expand,
retitle, or add headings.
- No em dashes or long dashes as punctuation anywhere. No emojis. US
spelling.
- Every number on this page comes from this prompt. Do not invent, round,
or add any figure.
- Do not add cards, drop shadows, rounded corners, icon rows, or scroll
animations of your own.
- When you are done, tell me which files you created or changed and nothing
else.
09
Run the pack, then verify
Paste your prompts one at a time, in order, and look at the preview after each one before you paste the next.
AI Studio will tell you it finished work it did not do. Its word is never
evidence. Check the preview in its own browser tab, with a hard refresh. The embedded pane serves
old builds silently and says nothing.
Failures that never produce an error message
What you see
What it actually is
A change that appears not to have happened
Old build in the preview. Own tab, hard refresh, then look at the code.
The markup changed but the styling did not
The CSS block never arrived. Put it in an overrides file instead.
Solid black shapes where a diagram should be
The SVG lost its styling. It needs its own attributes, not more CSS.
Text wrapping one word per line
A grid slot too narrow. More children than there are columns.
A page showing something the current code cannot produce
Old build again. When the page contradicts the routing, it is not a code problem.
The last thing you paste
Read only comes first on purpose. Fixing before knowing builds a second wrong layer on top of
the first.
To AI Studio
Read only. Change nothing.
1. Print the routing table and name which component the home page renders.
2. List every section file with its line count, and say whether each one
returns real markup or is empty.
3. List every distinct image URL used anywhere on the page, and the total
count.
4. Confirm there is exactly one h1 and print it.
Report only. Do not fix anything you find.
What you should get backFour answers you can check by eye. If the image count is lower than what you gave it, images were silently dropped. If a URL appears that you don't recognize, it invented one, and it will fail as a broken image with no error anywhere.
