Build a Website with AI: From One Sentence to a Page Ready to Go Live

💡 One-sentence summary: Building websites with an AI coding agent—one sentence to define requirements, one structure list, one set of static page files ready to go live.

Search for "build a website with AI" and you'll find either website-builder platform ads or course schedules promising "learn HTML in 30 days." This lesson takes the middle path, which is also the shortest route for building a site with zero coding background: no learning syntax, no buying servers—use an AI coding agent to turn a one-sentence idea into a folder of static pages ready to go live, suitable for personal homepages, portfolios, event landing pages, and content sites alike.

This is Lesson 1 of Scenario Practice Route A (building websites). This lesson only covers "getting the pages built": one sentence → three lines of requirements → structure list → static files → review; "publishing to the public internet" is covered in Lessons A2–A4.

• Can't write prompts clearly? Go back to 3.2 Prompt Writing to see how to make requirements specific
• Haven't picked a route yet? Go back to 4.0 Scenario Practice: Pick Your Route

What You'll Be Able to Do After This Lesson

• Break "help me build a website" into three lines of requirements AI can handle: who it's for, what they should do after viewing, and what content must be included
• Use the "page structure method" to first get a "page × block" list, and only let AI start after confirmation—no more receiving a cookie-cutter template face
• Have an AI coding agent write the full set of static files—index.html, style.css, script.js—into your folder, openable in a browser with a double-click
• Be able to explain what a static website is and why you don't need to buy a server, and pick your go-live platform among GitHub Pages, Cloudflare Pages, and Vercel

Why an AI Coding Agent Instead of Web-Based AI?

Both can have AI write web pages; the difference is who cleans up after the writing is done:

Capability	Web-based AI (copy-paste in a chat box)	AI coding agent (the four tools in this course)
Output form	❌ Code pasted in chat; you create files, name them, and save them yourself	✅ Generates the full set of files—index.html, style.css—directly in your folder
Multi-page websites	❌ One page per chat; files lose track of each other as they pile up	✅ Generates multiple pages at once per the structure list, with links between pages matching up
Revisions and iteration	❌ You have to re-paste the entire code block every time	✅ Say "swap out the hero image" and it finds the right file and edits it itself
Path to going live	❌ After writing, you still have to figure out how to upload it yourself	✅ The generated folder is a deployable artifact, ready to go straight into the A2–A4 go-live lessons

All four tools do the same thing in this lesson: write files directly into the folder you specify. If you haven't installed a tool yet, go back to 1.5 Installing Claude Code; if you really don't want to touch the command line, see the WorkBuddy desktop version in 1.5b Alternative Installation Methods.

Your Current Struggles

• "I've wanted to make a personal homepage for years, but every tutorial search turns up HTML/CSS beginner courses, and just setting up the environment scared me off"
• "I had web-based AI write a page once, copied the code out and saved it as a file, but when I opened it, either the images didn't show or the styles were a mess, and I had no idea what went wrong"
• "The page is written, but then what? I heard you need to buy a server, set up an environment, and fiddle with a domain, so I just shelved it"

When to Use This Approach

When you need:

• A storefront anyone can view via a link: personal homepage, portfolio, event landing page, content site
• A page you can visit this very weekend, live for free
• A page that's mainly for display: works, introduction, contact info

And you don't want to:

• Systematically learn the frontend trio before getting started
• Create files by hand, manage code, hunt down typos
• Dive into servers, databases, and ops right from the start

Do visitors need to leave comments, place orders, or register accounts? Skip such dynamic features in the first version—reasons and solutions are in item 2 of the "Pitfall Warnings" below.

🎒 Preparation Before You Start

• Have completed 4.0 Scenario Practice: Pick Your Route, and confirmed you're taking Route A (websites)
• At least one tool can run a full conversation round—if not installed, go back to 1.5 Installing Claude Code; if you really don't want to touch the command line, see 1.5b Alternative Installation Methods
• One real idea (e.g., "make a personal homepage showcasing my photography")—a real goal lasts longer than a "practice project"
• An empty folder, where AI will write the website files
• A cup of water ☕

Follow Along with Me

Five steps and your folder will hold a set of pages ready to go live. The examples uniformly use a "photography portfolio personal homepage"—just swap in your own subject and follow along.

Step 1: Turn a One-Sentence Idea into Three Lines of Requirements

Why: "Help me build a website" is the request AI handles worst—the more specific the goal, the more likely AI gets it right in one shot, a principle covered in 3.2 Prompt Writing. Answer three questions yourself before talking code.

Take out your one sentence and fill in three lines (photography portfolio example):

Build a photography portfolio website.
Who it's for: clients who want to book a photo shoot with me, plus friends in my WeChat Moments curious about what I shoot.
What they should do after viewing: browse the work, get a feel for my shooting style, then scan the QR code to add me on WeChat and book a shoot.
Must have: a homepage hero image, portfolio showcase in 3 groups, an About Me section, and contact info.

You should see: three lines of requirements, each with one clear piece of information—this is the "input information" for all the Prompts that follow, and the reference standard for acceptance checks.

Step 2: Have the AI produce a page structure list first

Why: plan before you build is the first discipline of vibe coding (3.1 plan before you build). If you start writing before the structure is confirmed and the AI goes off track, you have to redo the whole page; get the list first and rework is minimized.

Send the three lines of requirements to the AI and explicitly say "don't write code yet":

Based on the requirements below, plan the page structure for a photography portfolio website. Don't write code yet.

Requirements: for clients who want to book a shoot; after viewing, they can browse the work, get a feel for the style, and add me on WeChat to book.
Must have: a homepage hero image, portfolio showcase in 3 groups, an About Me section, and contact info.

Output:
1. How many pages you recommend, and each page's file name
2. Which sections each page has from top to bottom, and what content goes in each section
3. List it all in a table

You should see: the AI outputs a "page × section" list, for example for index.html: navigation / hero image / portfolio area (in 3 groups) / About Me / contact info. Go through it line by line: delete extra sections, add missing ones, and confirm you recognize every section.

💡 This is the "page structure method"

Ask for the structure first, then the code—two separate rounds of questions. This list is the blueprint between you and the AI: everything afterward—generation, acceptance, revisions—is done against it, and the AI won't lose the "contact info" halfway through writing.

Step 3: Have the AI generate the static website files

Why: what you're going to launch is a static website. What is a static website? In one sentence: a website made of HTML, CSS, and JavaScript files that the browser loads directly—GitHub Pages' official definition is "taking HTML, CSS, and JavaScript files directly from a repository and publishing them as a website."

It doesn't need a server running programs, so the pure files the AI writes can go live as-is.

Once the structure list is confirmed, tell the AI:

Generate the website files according to the structure we just confirmed, and write them to the current folder:
- index.html is the homepage; the section order follows the structure list
- Put styles in style.css and interaction scripts in script.js
- Use placeholder images for the portfolio photos for now, all in the images/ folder
- Pure HTML/CSS/JS—no frameworks that require a build step

You should see: the folder now contains index.html, style.css, script.js, and the images/ folder; if the structure list includes multiple pages, page files like about.html will also appear.

💡 This is the unique value of an AI coding agent

It's not "showing you a snippet of code," it's "writing the files for you": every section on the list lands in a real file, and you never touch an editor. All four tools can do this—WorkBuddy also lists "local file operations" as a core capability.

Step 4: Review in the browser, feed your feedback back

Why: you must open and look at the pages the AI wrote yourself before talking about launch—the discipline of the 3.4 acceptance checklist applies just as much to a website with only three files.

Double-click index.html in the folder (or drag the file into the browser window) and check each section against the structure list.

You should see: the browser opens your page with the hero image, portfolio area, About Me, and contact info all in place from top to bottom, and it doesn't break even when you narrow the window.

Feed anything you're not satisfied with straight back, speaking plainly like giving revision notes:

The page is good overall; change three things:
1. The hero image is too tall—the title of the portfolio area should be visible in the first screen
2. Change the portfolio cards to 3 per row
3. Add a WeChat QR code placeholder image to the contact section

You should see: the AI only modifies the corresponding files; go back to the browser and refresh, and it's the new version. Repeat for two or three rounds, until you'd be willing to send this link to someone yourself.

Step 5: Choose a hosting platform and finish the last step of making a website with AI

Why: a static website means you don't have to buy a server—the hosting platform publishes the files to the public web, and all three have a free tier. Which one to choose depends on how you want to hand over the folder.

Platform	How to go live	Who it suits
A2 GitHub Pages	Create a repository on the web, click through a few settings to publish, and the URL is username.github.io	Those who'd also like to have a GitHub repository
A3 Cloudflare Pages	Drag the folder or a zip into the browser and get a 项目名.pages.dev URL	Those who don't even want to create a repository—drag, done
A4 Vercel	One command in the project folder to deploy vercel --prod	Those using an AI coding agent who want to go live with one command

For the quotas, limits, and selection advice for the three free tiers, A5 deployment platform comparison covers it all on one page. One reminder: Cloudflare's official docs now recommend that new projects start with Workers, but for beginners, Pages' drag-and-drop upload is still the most direct path to launch, as covered in A3.

You should see: you've chosen a platform. The next lesson starts with A2 GitHub Pages—the web wizard requires no command line at all, and you'll pick up your first GitHub repository along the way.

📋 Magic Prompts

The instructions in "Follow along with me" are examples; the three below are templates for you to use over and over: swap the topic, swap the style, and only change what's inside the 【】. Use the three Prompts in order: 1 get the structure → 2 get the files → 3 self-check before launch.

📋 Prompt 1: one sentence → page structure list

Expected result: input a one-sentence idea, get a "page × section" structure table—plan first, no code.

## Role
You are a senior website planner, skilled at breaking vague ideas into clear page structures.
## Task
Plan my website idea into a page structure list. Don't write any code yet.
## Input information
### Required fields
- Website topic: 【one sentence, e.g. "a personal homepage for a photography portfolio"】
- Who it's for: 【target visitors—the more specific, the better】
- What they should do after viewing: 【the action you most want visitors to complete】
### Optional fields
- Content that must be included: 【name the sections or information that must appear?】
- Style and feel: 【two words, e.g. "minimal, quiet"?】
## Output specification
A single table: page file name | sections (top to bottom) | what content goes in each section. No more than 5 pages in total.
## Constraints
- ✅ Every section serves the goals in "who it's for / what they should do after viewing"
- ✅ File names in lowercase English; the homepage is always index.html
- ❌ Do not output any code
- ❌ Do not suggest features that require a database or a server

📝 Prompt 2: generate static website files from the structure

Expected result: turn the confirmed structure list into a complete set of HTML/CSS/JS files you can view with a double-click and launch by dragging out.

## Role
You are a front-end engineer, skilled at hand-writing semantic, dependency-free static pages.
## Task
Generate all the website files according to the structure list, and write them to the current folder.
## Input information
### Required fields
- Structure list: 【paste the table confirmed after Prompt 1】
- Site theme and style: [one sentence]
### Optional fields
- Color scheme: [main color, e.g. "dark green"]
- Font feel: [e.g. "sans-serif, large headings"]
## Output specification
index.html (and other pages), style.css, script.js; use placeholder images placed in the images/ folder; links between pages must correspond to each other.
## Constraints
- ✅ Pure HTML/CSS/JS — double-click index.html and it just works
- ✅ index.html sits at the top level of the folder — GitHub Pages looks for it as the entry file
- ✅ On narrow screens (phone width), sections stack automatically with no horizontal overflow
- ❌ No build tools, frameworks, or package managers
- ❌ Don't write features that require a server to run

✅ Prompt 3: pre-launch self-check

Expected outcome: hand the folder to the AI for a quality check, so you don't discover broken links only after uploading.

## Role
You are a pre-launch quality inspector: find problems only, do not redesign.
## Task
Check the static website in the current folder and report the issues that must be fixed before going live.
## Input information
### Required fields
- Page list: [e.g. index.html, about.html]
## Output specification
List issues by severity: links between pages don't match / wrong image paths / referenced files don't exist / index.html is not at the top level. For each issue, give the file it's in and a one-sentence fix.
## Constraints
- ✅ Check every file one by one
- ✅ Only report problems that actually exist
- ❌ Don't tweak the design or adjust the copy along the way
- ❌ Don't add new pages or features

Checkpoint ✅

• The three-line requirements are written: who it's for / what readers should do after viewing / what content it must include
• You've received and confirmed the "page × section" structure list, and know what goes in each section
• There's an index.html at the top level of the folder, and double-clicking opens it in a browser
• You've reviewed the site section by section against the structure list, and fed all revision comments back in
• You've chosen a hosting platform and know which chapter comes next

Pitfall reminders

❌ Opening with "make me a website"

Symptom: the AI throws back a huge chunk of boilerplate-flavored HTML that's impossible to know where to start editing, and it gets messier the more you change it.

Cause: without a structure list, the AI can only guess your needs based on "the most common kind of website."

Correct approach: split it into two prompts — first use Prompt 1 to get the structure, and only after confirming it, use Prompt 2 to get the files. The five minutes you save with "one sentence straight to a website" will be paid back double when you revise.

❌ Trying to build login, comments, or online payment in the first version

Symptom: the form looks usable, but there's nowhere to store the data visitors submit; registration and login are even more out of the question.

Cause: a static website has no server-side program. GitHub Pages officially does not support server-side languages like PHP, Ruby, or Python — this is a platform boundary, not a limitation of the AI's ability.

Correct approach: make the first version purely static — showcasing your work and clearly listing contact info can achieve the "book a shoot" goal just as well. If you truly need dynamic features, there are two paths: choose Vercel or Cloudflare Pages and learn about their platform functions (A5 deployment platform comparison); or check out the WorkBuddy web app in the "Advanced tips" below.

❌ Using the free tier as a commercial site, or assuming a private repo means nobody can see it

Symptom: ads go up on the page and orders start coming in, or content you didn't want public gets uploaded directly.

Cause: the Vercel Hobby (free) plan is for personal, non-commercial use only; the GitHub Pages free tier requires the repository to be public, and the site content is visible on the public internet — even if the repository is set to private.

Correct approach: don't put pages that collect money on Vercel's free tier; if you mind content being public, think through what to put online before launch. The free-tier conditions of all three providers are listed item by item in A5 deployment platform comparison — read it before choosing a platform.

Advanced tips (optional)

🚀 Want dynamic features like messages or bookings? (optional)

Static ≠ only fixed pages. Two advanced paths:

• Platform functions: both Cloudflare Pages Functions and Vercel support running server-side code without managing a server yourself — good for solving small dynamic needs within Route A; see A5 for how to choose
• WorkBuddy's "web app" publishing: AI generates the website, then connects cloud database, authentication, and file storage on demand; the official description says "no need to buy your own server, and no need to set up deployment or ongoing operations" — just click the share button or tell the AI to "publish/go live" — good for people who don't want to touch deployment at all; see 2.4 WorkBuddy usage for how

🚀 More than one page, or want to use a framework? (optional)

• Plan multiple pages in the structure list: have the AI list page filenames like about.html and works.html in the output of Prompt 1; Prompt 2 will generate them all at once, with navigation matching each other
• Want to use a framework like VitePress: all three hosting platforms support automatic builds — but that's a matter for after A5; for your first stop, get the whole workflow running with hand-written static files, and you'll be much clearer about it

Lesson recap

✅ You've completed the "build" half of making a website with AI:

• One sentence → three-line requirements: who it's for / what readers should do after viewing / what content it must include
• Three-line requirements → structure list: ask for structure first, then code; filenames in lowercase English, homepage index.html
• Structure list → static files: the AI coding agent writes index.html, style.css, and script.js directly
• Files → acceptance: check section by section in the browser, and feed comments back as-is
• Acceptance → platform choice: GitHub Pages / Cloudflare Pages / Vercel, each free tier with its own conditions

Stage	What you produced	Key point
Define requirements	Three-line requirements	Who it's for / what readers should do after viewing / what content it must include
Define structure	"Page × section" list	Plan first, then code; homepage fixed as index.html
Generate	A folder of static files	Pure HTML/CSS/JS, viewable by double-clicking
Acceptance	Pages you've reviewed and iterated on	Check section by section against the list; give comments only, don't change the design
Choose a platform	A clear go-live choice	Free-tier conditions differ; A5 has the full table

Today you had AI generate every file of a website — without writing a single line of code or buying anything. The "build" part ends here.

Next lesson preview

In the next lesson, A2 Going live on GitHub Pages: free static website hosting, you'll turn the folder into a URL accessible from the public internet. You'll learn:

• How to create a repository named username.github.io and publish with a few clicks on the web page
• Choosing the publishing branch under Settings → Pages, and why the entry file must sit at the top level of the publishing directory
• Waiting up to 10 minutes after pushing, and where to look when the site doesn't update
• What the free tier's public-repository requirement means for your content

When you're ready, keep the folder at hand and head into A2 →