How to use AI to build real websites without making generic junk — and without pretending you understand code you cannot explain.
You are the director. AI is a fast intern. Interns do not get to make the important calls.
This is not a book to skim and forget. It is a shop manual. You read a section, you fill a worksheet, then you are allowed to touch AI.
You do not need to already know how to code. You do need to be the boss of the project.
AI is not a genie. It is a very fast intern who has seen millions of websites, will copy the average of them unless you stop it, will invent stuff you did not ask for, and sounds confident even when it is wrong.
A director does not film every frame. A director decides what the thing is, who it's for, how it should feel, what "good" means, and when a scene needs another take.
The intern can draft, build, suggest, and speed you up. It cannot know your taste, your jokes, your context, or whether something is actually good. It also cannot take the blame if the site is cringe.
Never ask AI to "make a website." Ask it to help with one clear job at a time, using a brief you wrote.
Your superpower is not typing code. Your superpower is being clear. If you are clear, AI gets useful. If you are vague, AI makes slop.
You do not need to memorize this. You need to recognize it.
A website is a folder of files. The browser reads those files and draws the page.
| Layer | Job | Think of it as |
|---|---|---|
| HTML | Structure: headings, paragraphs, images, links, buttons | Bones / what is on the page |
| CSS | Look: colors, fonts, spacing, layout | Clothes / how it looks |
| JavaScript | Behavior: menus, checks, clicks | Muscles / what it does |
Most first sites are a handful of pages that link to each other: Home, About, the proof page (projects / schedule / gallery), Contact. Navigation is the menu between those pages. If the menu is confusing, the whole site is confusing.
If it only looks good on a big screen, it is not done. Most people will see it on a phone. Every time you build something, shrink the browser window.
Every project. Every time. If you skip the first half, you get slop. If you skip review, you get slop that works. If you skip shipping, it was only homework.
| # | Phase | You do |
|---|---|---|
| 1 | Gather | Collect content, examples, constraints |
| 2 | Decide | Make the calls AI is not allowed to make |
| 3 | Brief | Write it down so the intern cannot wander |
| 4 | Plan | Get a build plan, then approve or change it |
| 5 | Build in slices | One small piece at a time |
| 6 | Review | You judge it. AI does not grade its own homework |
| 7 | Polish | Taste pass, not extra features |
| 8 | Ship | Put it online and show a real human |
| 9 | Fix | Notes from reality, then a small update |
This is the part most people skip. It is also the part that makes you better than the intern. You are not collecting "inspiration" as a vibe. You are collecting evidence for decisions.
In plain words, no fancy language: What is this website? Who is it for? What do you want them to do? What should it not be? When does version 1 count as done?
If you cannot write that paragraph, you are not ready to prompt. Use worksheet W1.
Find 3–5 websites you like. Not 20. Too many and you mash them into mush. For each one write the URL, what you like (specific), what you don't, and what you might copy — layout idea, not their logo or text.
Save screenshots in a folder called references.
AI is bad at sounding like you unless you give it your actual words. Gather: your name / project name, a short bio in your real voice, photos you actually have, real links you want public, real facts. Do not let AI invent your life. If a sentence isn't true, it does not go on the site.
Write 5–10 things you refuse. Constraints make you look original. Unlimited choice makes slop.
Examples: no purple gradients · no "Welcome to my website" · no fake testimonials · no 12 menu items · no autoplay · no lorem ipsum · no extra pages just in case.
AI can suggest options. You pick. Make these decisions out loud or in writing.
Not "everyone." Try: beginners who might join the club · my colleagues and stakeholders · people who liked my previous work · me in 3 months when I forgot how this project worked.
Every page can have extra stuff. The site should have one main job, in 8 words or fewer. Examples: get people to contact you · show 3 projects clearly · explain the event and how to show up.
Start with 3–5 max. For each page: name, why it exists, what the person should do. If a page has no job, cut it.
Pick 3 feeling words, not 15. Then pick 3 you do not want. Example: calm / sharp / friendly — not corporate / cute / chaotic.
Even if you "aren't a designer," make a few calls: light or dark · one main color + one accent · font vibe (clean, sporty, editorial, playful) · photos or no photos · dense or spacious. If you cannot decide, copy one reference direction, not all three.
A brief is the document you hand the intern before they are allowed to work. You will reuse it in almost every later prompt. That is how the project does not drift.
AI models guess the missing pieces. If you do not supply taste, audience, and limits, it fills the blanks with average internet. Average internet is slop.
A brief makes you think, gives the intern a memory, and gives you a way to say the most powerful sentence in this book: "That's off-brief."
Fill worksheet W6. Short sentences. No fluff. Do not invent facts to make it look complete.
Forget trick phrases like "you are a world-class designer with 200 IQ." They are mostly theater.
What works: clear job + context + constraints + examples + how to answer.
| Part | What it is |
|---|---|
| 1 Role | Only if it changes behavior ("act as a strict code reviewer") |
| 2 Job | One thing to do |
| 3 Context | Paste the brief, or the relevant piece |
| 4 Examples | Screenshots, reference sites, a sentence in your voice |
| 5 Constraints | What not to do |
| 6 Output shape | Plan, options, code, or questions — pick one |
Notice: no code yet. That is not slow. That is how you stay in charge.
A · Turn notes into a brief
Here are my messy notes. Turn them into a one-page website brief using my template. Do not invent facts. If something is missing, ask questions in a numbered list instead of filling it in.
B · Ask questions before building
Before we plan, ask me the 8 most important questions you still need. Only questions that would change the site. No generic questions.
C · Plan, don't build
Using this brief, write a build plan for version 1. Break it into slices I can finish one at a time. For each slice: goal, files involved, how I'll know it worked. Do not add features that are not in the brief. Do not write code.
D · Build one slice
Implement only slice 2 from the plan: the homepage header + headline + one button. Follow the brief. Do not restyle the whole site. Do not add extra sections. Afterward, tell me what you changed in bullet points a beginner can understand.
E · Critique like a mean-but-fair friend
Review this homepage against the brief. Do not flatter me. Tell me: 1) what is unclear in 5 seconds, 2) what looks generic/AI, 3) what to delete, 4) the single most important fix. Give me a punch list, not a rebuild.
F · Explain the code
Explain the files you just created like I'm smart but new. For each file: what it is, what would break if I deleted it, and which 3 lines matter most.
G · Taste pass
This looks too much like default AI design. Propose 5 concrete changes to make it feel more like [feeling words] and more like my references. No new features. No new pages. Changes only to type, spacing, color, copy, and layout.
Avoid unless you immediately define them: cool · modern · sleek · unique · professional · make it pop · high-end. Say the visible thing instead: "big headline, almost no extra text" · "same button style everywhere" · "lots of empty space" · "looks like a corporate template, not a bespoke design."
If your prompt contains "redesign everything, add a blog, make it mobile, and also write my bio," the intern will thrash. Split it. Always make it choose, then you choose: Give me 3 options. Pros and cons. Recommendation. Wait.
You guessed instead of asking. List every assumption you made. Star the ones I need to confirm. Do not keep building until I answer. Remove everything I did not ask for. List what you removed. Then show only the slice I asked for. Stop. Restate the goal of this slice in one sentence. If you cannot, ask me one question. Do not write more code. Explain this like I'm 15 and new to code. No jargon without a translation. Then tell me what I should look at in the browser to verify it.
You do not need formal design training. You need a few rules you refuse to break.
| Rule | Meaning |
|---|---|
| Hierarchy | The most important thing looks most important. Squint. Can you still tell what matters? If everything is big, nothing is big. If you have six buttons, you have no buttons. |
| One idea per section | Headline. Short explanation. Maybe an image. Maybe one action. Stop. |
| Real words | If you would not say it out loud to a friend, do not put it on the site. Write the headline yourself at least once. |
| Spacing is design | Beginners and AI cram. Related things sit closer. Unrelated things sit farther. If it feels tight, add space before adding decoration. |
| Consistency = trust | Same fonts, buttons, corners, spacing, nav on every page. |
| Contrast | Text has to be readable. No gray-on-gray. Buttons should look like buttons. Links should be obvious. |
| Mobile is not optional | Shrink the window. Can you tap the menu? Is the main button still obvious? |
| Content first | A beautiful empty site is still empty. Real headlines and photos before glow effects. |
| Original = specific | Your actual photo, joke, schedule, jersey color. Weird for the sake of weird is just another costume. |
Slop: "Empowering tomorrow's leaders through innovative solutions." · "Welcome to my official website. I am passionate about…"
Human: "I make short films about people who get in over their head." · "Practice is Tuesdays at 4:30 behind the gym." · "If you want in, text this number."
Pages exist. Nav works. Real text. Real images. Phone-okay. You do not want a half-built Tesla.
A slice is small enough to judge in 10 minutes. Good: header + nav · homepage hero · about paragraph + photo · contact · footer · mobile menu. Bad: "the whole website" · "make it complete." After each slice, look in the browser. Do not stack five AI changes before looking.
Follow this plan. If you want to change it, ask. Do not silently expand scope.
Good: index.html, about.html, styles.css, /images/team-photo.jpg. Bad: final2-NEW-real.html, thingy. If you cannot find it, you do not control it.
You are not reading to become a compiler. You are catching nonsense: files you didn't ask for, words that aren't yours, extra pages, extra libraries, secrets/passwords (never put those on the site). Then force a plain-English summary. If the intern cannot explain it simply, it is not simple enough.
Every time you pick something, write it down. Models forget. Your notes don't.
Undo to the last version that worked. Describe the one broken thing. Ask for the smallest fix.
Something broke. Do not rewrite the site. Restate the symptom. List 3 possible causes. Tell me the smallest experiment to find out which one it is.
Click every nav link and button. Read the copy out loud. Watch a friend use it without helping. Where they hesitate is your next fix.
The tool can be ChatGPT, Claude, Gemini, Cursor, Devin, or whatever you have. The process does not change. What changes is how much the intern can do while you are not looking. Powerful intern = tighter brief, not looser.
| Step | AI's job | Your job |
|---|---|---|
| 1 Thinking partner | Turn notes into questions, draft the brief, suggest page options, critique references, rewrite copy in your voice | You edit. No whole codebase yet |
| 2 Planning partner | Propose slice plan, list files, flag what's too big for v1 | Approve the plan in writing |
| 3 Build partner | Implement the exact slice | Hand it brief + plan + no-list. Review like a boss |
| 4 Review partner | Critique against the brief | You still decide |
| 5 Explain partner | Quiz you on what you just built | If you miss one, learn it before the next slice |
Quiz me. Ask 5 questions to check whether I understand what we just built. If I miss one, explain it and ask again.
Use after every build slice. If you cannot fill this out, you are generating faster than you are thinking. Slow down. Worksheet W8 is the blank version.
Next: one thing to fix · one thing not to touch · next slice from the plan.
Gather: Audience = students who might join, plus the teacher. Job = get people to the next screening. Pages = Home, Films, Join. Feeling = bold, simple, a little cinematic. No-list = no fake awards, no login, no purple glow. Real content = meeting time, room number, 3 actual short films.
Brief excerpt: Version 1 done when a new kid can find the next meeting and see 3 films. Voice = direct, not student-council-formal. Dark background, one accent from the club poster. Giant movie-title typography on Home.
Approved plan: 1 Home hero + next meeting · 2 Nav + 3 pages hooked up · 3 Films list · 4 Join page · 5 Mobile pass · 6 Taste pass.
Implement only step 1. Dark page, giant title "Friday Night Shorts," one sentence in my voice, next meeting in plain text, one button that goes nowhere yet. No extra sections. Then explain what you made.
Use this script until it becomes habit.
When you have a pile of notes
Organize this into: facts, decisions I already made, open questions, and junk we should ignore. Don't write code.
When you think you're ready
What's missing from this brief that would cause a generic website? Ask me only those questions.
When the brief is solid
Make a version 1 plan in slices. Flag anything that looks too big. Wait.
When the plan is approved
Do slice 1 only. Restate slice 1 first. If your restatement is wrong, stop.
After slice 1 exists
Summarize what changed. Then I'll open the browser and check. Don't start slice 2.
After you look — this one is elite
I checked. Keep X. Change Y. Delete Z. Do not do anything else.
You do not need to be a programmer. You need literacy. Once a session, change something by hand: a headline, a color, an image, a button label. If you never touch it yourself, you will not believe it's yours.
| You see | It usually means |
|---|---|
| <h1> | biggest title on the page |
| <p> | a paragraph |
| <a> | a link |
| <img> | an image |
| <button> | a button |
| class= | a name CSS uses to style that thing |
| color / font-size / margin / padding | look and spacing |
| .html / .css / .js | a page / the look / behavior |
Annotate this page: which parts are content, which are layout, which are decoration. Then show me where each lives in the files.
A site on your laptop is a draft. A site someone else can open is real. You do not need the perfect host. You need a host.
If you can do that, you learned the process.
After v1 ships, new ideas will show up. Good. Put them on a list. Do not immediately build them.
For each idea ask: Does this help the one job? Can a stranger tell we added it? Is it a real need or just intern excitement?
Then pick one improvement. Ship that. Repeat. This is how real builders work. Not one giant forever-project.
A site is done when: you can explain it · a stranger knows what to do on the first screen · it works on a phone · the words sound like you · nothing extra is in it · you would show it without apologizing.
Fill these before you let AI build. Pencil beats typing for the first pass — slower brain, better decisions. If a line is blank, that is a missing decision, not decoration.
Name _______________________________ Project _______________________________ Date ______________
Plain words. No branding. If you cannot finish this, you are not ready to prompt.
3 sites max for v1. Be specific. "Clean" is not a note.
| Site / URL | I like (visible details) | I don't like | I might copy |
|---|---|---|---|
| 1 | |||
| 2 | |||
| 3 |
True things only. If you don't have it, leave it blank — do not let AI fill it.
Things we refuse. This is a feature, not a mood.
| Page | Why it exists | What they do |
|---|---|---|
| Home | ||
Copy this structure. Keep it ugly and true. This document beats any magic prompt.
PROJECT - Name: - One-sentence description: - Audience: - Main job of the site: - Version 1 done when: PAGES - Page name — job — main action CONTENT RULES - Voice: - Do not say: - Must include these true facts: - Never invent: LOOK - Feeling words / anti-feeling words: - Light/dark: - Main color / accent: - Font vibe: - Reference sites and what to steal from each: - Do not copy: NO-LIST - TECH CONSTRAINTS - First version = simple pages, not a big app - Must work on phone - Do not add login, database, or extra libraries unless I ask - Explain any new file in plain English HOW TO WORK WITH ME - Plan first, then wait - Build one slice at a time - Show me what you changed and why - If something is unclear, ask me instead of guessing
AI may propose this. You approve it. If a slice takes more than one work block, split it.
| # | Slice goal | How I'll know it worked | Approved? |
|---|---|---|---|
| 1 | |||
| 2 | |||
| 3 | |||
| 4 | |||
| 5 | |||
| 6 | Taste pass — no new features | Looks like the brief, not default AI |
Slice # ______ Page / part ______________________ Date __________
Paste this shape back to AI. Elite prompt. Nothing else.
Work with a partner or solo. You type. After every AI reply, pause. Do not end a session on "the AI will figure it out later."
Goal: leave with a real brief, not a website. Timebox 40–50 min + 5 min review.
0–5 · Frame. Read the golden rule out loud. "AI can type. You have to decide." Open a notes doc. No coding tool yet.
5–15 · W1. Write the ugly paragraph. Ask yourself the 4 questions: What's this page for? Who is it for? What should they do next? Would you show a friend?
15–25 · W2 + W3. Find 3 reference sites. Say one specific visual thing per site. Dump real content. Ban invented bios.
25–35 · W4 + W5. No-list and decisions. Cut pages until 3–5 remain.
35–45 · W6 with AI as clerk only.
Here are my messy notes. Turn them into a one-page website brief using my template. Do not invent facts. If something is missing, ask questions in a numbered list instead of filling it in.
Answer questions. Edit the brief until it sounds like you.
Last 5 · Stop while winning. Save the brief. No code. Homework: take or find 1 real photo.
Goal: approved slice plan + one real homepage piece you can explain. 40–50 min.
0–5 · Reload the brief. Read W6 out loud. Change anything that feels fake.
5–15 · Plan only.
Using this brief, write a build plan for version 1. Break it into slices I can finish one at a time. For each slice: goal, files involved, how I'll know it worked. Do not add features that are not in the brief. Do not write code.
Fill W7. Delete any slice that is not v1. Freeze the plan.
15–35 · Slice 1 only. Usually header + headline + one button. Paste brief + plan + this:
Do slice 1 only. Restate slice 1 first. If your restatement is wrong, stop. Follow the brief. Do not restyle the whole site. Do not add extra sections. Afterward, tell me what you changed in bullet points a beginner can understand.
Open the browser. Shrink the window. Do W8 out loud.
35–45 · Make it yours. Kill one generic line by hand. Rewrite the headline without AI. Optional:
I checked. Keep X. Change Y. Delete Z. Do not do anything else.
Last 5 · Explain. Point at the page and name: title, sentence, button, nav. If you say "the AI did it," rewind. Homework: click every link on a phone or with the window skinny.
If you only do eight things, do these: write the ugly paragraph · grab 3 references and say what you like specifically · fill the one-page brief · let AI ask questions and propose a plan · approve slices · build slice 1 only · do a director's review out loud · stop while it's still going well.
That is a playbook in motion, not a PDF nobody follows.
AI can type. You have to decide.