A Prompt Template for Building a Web Page

August 29, 2026

The easiest way to get a good web page from an AI assistant is to give it a template with the content, layout, style and technical limits already filled in. A page request that says only “make me a website for my business” returns something generic. A request with real text, a chosen structure and clear constraints returns something you can publish after a few edits.

Below is a template, followed by notes on how to fill in each part.

The template

Build a single-page website as one HTML file with CSS inside. No frameworks, no build step.

Purpose: [what the page is for and who visits it]
Sections, in order: [for example: header, short intro, three feature blocks, FAQ, contact]
Content: [paste your actual text for each section, or say "use placeholder text marked with [EDIT]"]
Style: [colors, font feel, mood in one or two sentences]
Layout: single column on phones, up to two columns on wide screens
Links and buttons: [where each goes]
Accessibility: good contrast, readable font size, alt text on images, semantic headings
Do not: invent facts, testimonials or statistics
After the code: list what I need to edit before publishing.

Purpose and audience

Start with who the page is for and what you want them to do. “A page for neighbors to sign up for a community garden workday” gives the assistant a direction that “a community page” does not. A single clear action, such as signing up or sending an email, helps the layout stay focused.

Sections and content

Listing sections in order gives you control of the structure. For a first page, five or six sections are plenty. Common choices are a header with a one-line promise, a short explanation, a few points of detail, answers to common questions, and a way to get in touch.

If you have real text, paste it. If you do not, ask for placeholder text that is clearly marked, so you do not publish filler by accident. The instruction “Do not invent facts, testimonials or statistics” is worth keeping. Without it, assistants sometimes add convincing but made-up claims, which can mislead visitors and cause trouble.

Style in plain words

Describe the feel, not the CSS. “Calm, light background, one green accent color, friendly rounded sans-serif font” is enough. If you have brand colors, give the hex codes, which look like #0f766e. If you do not, ask the assistant to choose a palette of three colors and tell you the values so you can change them later.

Avoid asking for animation, parallax or heavy effects on a first page. They add code that is harder to check and can slow the page down.

Mobile first

Many visitors will use a phone. Say so in the prompt: “single column on phones.” Then test it. Open the file in your browser, make the window narrow, or use the developer tools device preview, and look for:

1. Text that runs off the screen.
2. Buttons too small to tap comfortably.
3. Images wider than the screen.
4. Columns that do not stack.

If something fails, describe what you see at which width, and ask for a fix limited to that section.

Images

AI assistants can reference images but cannot create real photos of your business. Use images you own or have permission to use, and ask the assistant to include descriptive alt text and to size images so they do not stretch. If you have no images yet, ask for a layout that works well without them. Text-only pages can look clean and load fast.

Check the page before it goes live

Run through this checklist:

• Click every link and button.
• Read all the text for errors and invented claims.
• Check the page on a phone and a large screen.
• Tab through links with the keyboard to see that focus is visible.
• View the file size; a simple page should be small.
• Make sure no placeholder text marked [EDIT] remains.

Ask the assistant to produce the “what I need to edit” list from the template and tick it off.

Keep a library of finished prompts

After a page works, save the final version of your prompt, not just the code. Put it in a notes file with a title and a date. When you build a similar page later, such as another event or another small business, you can copy the prompt, replace the content, and get a close match to your earlier result in one step.

You can also record small lessons next to each prompt, for example that the first draft’s buttons were too small or that the assistant added invented claims until you told it not to. Over several pages, these notes turn into a checklist that is specific to how you work.

Ask for placeholders you can find

Mark every spot you must edit with a recognizable tag, such as [EDIT]. Then, before publishing, use your editor’s search tool to find all [EDIT] markers. This is a simple way to avoid shipping a page that still says “Your text here” in the middle of a paragraph.

You can also ask the assistant to list all placeholders at the end of its answer, with a short note on what to put in each. Compare that list with the search results. If the counts differ, something was missed, and it is better to find it now than after visitors do.

Making changes

Treat later edits like the first build: one change per message, with a copy of the working file saved first. “Change the heading color to dark green” is easy to apply and check. “Redesign the page to feel more modern” is vague and may rewrite everything.

When you ask for a text change, paste the exact old and new wording to prevent rewrites you did not request.

Next steps

Fill in the template for a page you actually need, even a small one such as an event announcement. Use your real text. Send it, save the result, and run the checklist on a phone and a computer. Fix the first three problems you find, then follow our guide on hosting a static site for free to put it online. Keep your filled-in template, because you can reuse it for the next page by changing only the content.