Lesson 4 · Templates

Webpage guide

Turn a piece of your own work into a PowerPoint deck or a webpage, then save the design choices you’d use again.

Webpage guide

Optional. You can use this route independently of the PowerPoint activity.

Your goal: a page that helps a reader complete a specific task, plus design choices you can reuse.

Prepare your content and choose one reader task, such as finding a registration link or copying a prompt.
Build a baseline with Approach 1.
Try one alternative with the same content and reader task in a fresh conversation.
Test and save the result. You do not need to build all five versions.

Approach	Choose it when…
1 · Let AI design the page	You want a baseline.
2 · Set the visual style	You know the appearance you want.
3 · Navigation and controls	You know what readers should be able to find and do.
4 · Use an HTML template	You already have a working design to reuse.
5 · Use a webpage skill	You want to explore a packaged setup for repeated work.

Prepare your content

Your starting point	A way to begin
My wording is ready.	“Keep my headings, wording, order and credits. You can add short labels for the menu.”
My material needs organizing.	“Suggest sections and headings for this audience. Show me what you’d move, shorten or leave out so I can review it.”
I’m starting from scratch.	Write the questions readers will bring and draft an answer under each. Or ask AI to interview you and draft those answers from what you tell it.

Save the content you’re happy with and use it for both versions of the page.

Planning help: content, reader tasks and design choices

What will the page say? If you already have a Word document that reads well, its paragraphs can often go straight onto the page. Its headings might even make a good section menu. If the material is still rough, ask AI to help you organize it. If you’re starting from scratch, write down the questions people come to the page to answer.

What should a reader be able to do? Picture someone opening a workshop guide for the second time. They remember a prompt they want to use. Can they find it, copy it and get back to work? That’s a concrete way to judge both the design and the finished page.

Five approaches to webpage design

Approach	What you decide
1. Let AI design the page	Supply the content, audience and reader’s task. Let AI choose the layout and navigation.
2. Set the visual style	Choose colours, fonts, heading sizes, reading width and spacing. You might ask for prompts on a cream background so they’re easy to spot.
3. Choose how readers use the page	Specify what readers can do. A section menu could jump to the prompts, and a Copy button could copy the one they want.
4. Use a reusable HTML template	Give AI a working page whose layout, menu and controls you want to use again.
5. Use a webpage skill	Package instructions, assets and any checks you want AI to apply each time it builds a page.

Show AI what you mean. If you can recognize a page you like more easily than you can describe it, start there. Attach a screenshot or share a link and say, “I want my page to look like this. What do you notice about the colours, text width and spacing?” For navigation, share a working page or describe what happens when you click or scroll. You can use different examples for appearance and behaviour.

Approach 1: Let AI design the page

When to use it: You want AI to choose the design and navigation.

What to attach: Your reviewed content, audience and one reader task.

Open and copy the webpage Approach 1 prompt

Build a downloadable HTML page from the content I’m supplying. The audience is [audience]. Someone visiting the page should be able to [task]. Keep my wording, section order and credits. Choose the visual style, layout and navigation. Make it usable on a phone and with a keyboard.

What to check: Whether you can complete the reader’s task on the first version.

What to save: The baseline HTML file.

Choose another approach · Test and save your page

Approach 2: Set the visual style

When to use it: You want to control appearance while AI chooses navigation.

What to attach: Your reviewed content and any screenshot used as a visual reference.

Describe the look in ordinary language. If you attach a screenshot, point to the features you want to use.

Open and copy the webpage Approach 2 prompt

Build a downloadable HTML page from my supplied content for [audience]. Their task is [task]. Keep my wording, order and credits. Use a warm paper background, dark body text and cabernet headings. Keep paragraphs in a comfortable reading column, leave space between sections, and underline links. Use my attached screenshot for the look if I’ve supplied one. Choose the navigation yourself. Make the page usable on a phone and with a keyboard.

What to check: Readability, spacing, contrast and the reader’s task.

What to save: The HTML and your style prompt.

Choose another approach · Test and save your page

Approach 3: Choose how readers use the page

When to use it: You want specific navigation or controls.

What to attach: Your reviewed content and a description of the features you want. Reference pages or screenshots are optional.

Decide which features would help someone complete your task. In a workshop guide, you might keep the instructions visible, tuck worked examples under headings that open when clicked, and put a Copy button beside each prompt. For a short announcement, a single prominent registration link might be enough.

Open and copy the webpage Approach 3 prompt

Build a downloadable HTML page for [audience] using my supplied wording, section order and credits. The reader needs to [task].

Include these features: [describe what readers should be able to do—for example, use a menu that stays in view and jumps to each section, expand worked examples, or copy individual prompts]. Use clear labels based on my headings. Choose the visual style unless I supply preferences.

If I supply reference pages or screenshots, use only the features I identify. If you can’t inspect a reference or tell how a control works, ask me to describe it. Make the page usable on a phone and with a keyboard. Check that menu links reach the correct headings, headings remain visible, and controls work as described. Return the HTML and tell me what you checked and anything you couldn’t verify.

Optional reference example: If you like two pages, label them A and B and add: “Use the colours, text width and layout of page A, with the navigation of page B.” Supply the links, HTML files or screenshots and identify the features you want.

What to check: Menu labels and destinations, visibility of destination headings, working controls and the reader’s task.

What to save: The HTML and the navigation instructions that worked.

Choose another approach · Test and save your page

Approach 4: Use a reusable HTML template

When to use it: You want to reuse an existing working page design.

What to attach: Your content and HTML template; include any related assets it needs.

Start with a working template or turn a page you liked from an earlier trial into one. Open the Four Ds webpage for an example, or use the OKAI GO HTML template as your starting design.

Open and copy the webpage Approach 4 prompt

Build a downloadable HTML page for [audience] from the content and HTML template I’m supplying. The reader’s task is [task]. Use the template’s styles and working controls. Replace the sample text and credits with mine, update the menu links to match my sections, and preserve my wording and order. Check the links, keyboard controls and phone layout. Tell me what you checked.

To use it again: adapt my webpage Project instructions to name your files, or try my template with its design rules. Start a fresh conversation in the Project with a second source.

What to check: Menu links reach the new headings; examples and credits come from the new source; no leftover sample content.

What to save: The template, design rules and Project instructions.

Choose another approach · Test and save your page

Approach 5: Use a webpage skill

When to use it: You want to explore a reusable webpage skill. Optional extension.

What to attach: Your content and an enabled webpage skill, or a page you want to turn into one.

A webpage skill can keep your instructions, HTML template and reusable assets together. It can also include a check you want run on every page, such as testing that each section-menu link points to a heading that exists.

Open and copy the webpage Approach 5 prompt

Use [webpage skill name] to build a downloadable HTML page from the content I’m supplying. The audience is [audience] and the reader needs to [task]. Keep my wording, section order and credits. Apply the skill’s design and navigation rules and tell me which checks you ran.

To make your own, start with the page that worked best in your trials. Give Claude or ChatGPT that file and describe the job: “Help me make a skill that builds workshop pages like this one. Keep the section menu and Copy buttons. Use the new source for all wording and credits. Have the skill check the menu links before returning the HTML.” Lesson 5 covers using and creating skills.

What to check: The reader’s task on a fresh source, plus the checks the skill reports.

What to save: The skill and the tested example page.

Choose another approach · Test and save your page

Test and save your page

Open the HTML file and do the reader’s task yourself. If the task is “Find and copy the prompt,” check that the label is easy to find and the Copy button copies the whole prompt.

Try a narrow window, enlarged text and keyboard navigation.
Follow menu links and check that you can see the destination headings.
Compare the page with your source: wording, links and credits should survive.
Compare your baseline and alternative on the same task, then choose the more useful version.

Ask for a focused correction if a control or layout fails. Save the HTML and the design prompt you would use again. Share one design choice you would keep.

For a reusable setup, save the template and design rules using Approach 4, then test them on a different source. Downloading an HTML file does not publish it online.