Get the First Draft of Your Website on Screen
You have a plan. Now the AI does the typing. The goal of this stage is small and specific: every page in your plan exists and opens in your browser. It does not need to be pretty yet.
Keep it plain
Ask for plain HTML and CSS files. No framework, no build step, no database. A site made of plain files can be opened by double-clicking, hosted almost anywhere for little or nothing, and read by you when something looks off. You can add more later if the site ever needs it. Most never do.
The prompt
Start a fresh folder and a fresh chat in whichever tool you chose in Pick Your AI Tool. Paste your plan, then this:
Build this as a small static website: plain HTML and one CSS file, no frameworks. Pages: Home, Services, Contact. Put the business name and phone number at the top of every page, next to the main button. The Services page is a simple list of services with prices. Contact has the opening hours and the address, which should open in a map when tapped. It must read well on a phone first. Use placeholder text only where I have not given you the real words, and mark every placeholder with [FILL IN].
Build this as a small static website: plain HTML and one CSS file, no frameworks. Pages: Home, one page per project (start with three), About. Home shows the projects as a grid of large images that link to each project page. Leave the images as clearly labelled placeholders I will replace. It must read well on a phone first. Mark every placeholder with [FILL IN].
Build this as a one-page static website: plain HTML and one CSS file, no frameworks. Show, in this order: what the event is, the date and time, the place with a link that opens it in a map, the dress code, and a clear reply button that opens an email to me with a subject line filled in. It must read well on a phone first. Mark every placeholder with [FILL IN].
Build this as a small static blog: plain HTML and one CSS file, no frameworks. Pages: Home listing posts newest first, About, and two example posts that both use the same post layout. Each post has a title, a date and the body. It must read well on a phone first. Keep the text easy to read: a comfortable line length and a large font. Mark every placeholder with [FILL IN].
The [FILL IN] marker matters. It makes every made-up word easy to find later with a search, so nothing invented reaches the live site by accident.
Open it
Double-click index.html. It opens in your browser. Click every link and every button. If one goes nowhere, tell the AI exactly which one: "The Contact link on the Services page does nothing." A precise complaint gets a precise fix. Run It and See It covers what to do when the page will not open at all.
Check it narrow
Most visitors will arrive on a phone. Make your browser window as narrow as it will go, or use the browser's device view. Text should wrap, nothing should run off the side, and the main button should still be on screen without scrolling.
Take a save point
It works. Save it before you change anything else, the way Save Points showed you. The next stage rewrites most of the words, and you want a way back.
Video deep dives for this stage
Official showcase
Community picks
No videos for this stage yet.