Lab: Prompting for Web Components

This lab puts one-shot and few-shot prompting to work on your actual page. You'll use your existing HTML as the example, generate new components with the model, evaluate the output, and iterate.

The standard to meet: "good enough to edit," not perfect. A component that needs three lines of changes is a win.

The loop

Every AI-assisted web workflow follows the same pattern:

  1. Write a prompt
  2. Evaluate the output — what's right, what's off
  3. Edit the prompt with specific corrections
  4. Re-run
  5. Paste the final output and check it in the browser

It rarely works perfectly on the first try. That's not a failure. It's the process.

Part 1: One-shot component (20 min)

Pick a new section to add to your About Me page:

  • A "skills" section with a list of things you're learning
  • A "currently reading / watching / listening to" section
  • A footer with your name and a copyright line
  • A highlighted callout box with a fun fact about you

Write a one-shot prompt using one of your existing HTML sections as the example:

Here's an existing section from my page:
[paste one HTML section with its associated CSS classes]

Write a new "[component name]" section in the exact same style.
[Describe the content you want — headings, links, text, etc.]
Output ONLY the HTML. No explanation, no markdown fences.

Run it, evaluate it, edit or re-prompt at least once, and paste the result onto the page. Open the browser and check it.

When evaluating, ask:

  • Does the structure match my page?
  • Does it use my class names and tag choices?
  • What's off — colours, spacing, font, element types?

Part 2: Few-shot for a consistent style (20 min)

Pick a second component. This time use few-shot — paste two to three existing sections as examples:

Here are examples of how my page's components are structured:

Example 1:
[paste first HTML block]

Example 2:
[paste second HTML block]

Write a [new component] in the same style for [description of content].
Output ONLY the HTML. No markdown fences.

Compare this output to the one from Part 1. Is the style match tighter? What did the extra example add that the single example didn't communicate?

Reflection

Write two sentences:

  • "The most useful thing the model got right without me asking was ___."
  • "The thing I had to correct or re-prompt for was ___."

The corrections are the interesting part. They tell you what your page's style has that is hard to capture without explicit instruction, and they'll inform how you write prompts in Week 2.