Structured Output

When you ask a model for code, it usually wraps it in explanation:

"Sure! Here's an HTML navigation bar you can use: [explanation] ... [code block] ... You can customize the colours by modifying the CSS. Let me know if you'd like any changes!"

If you want to paste that into VS Code, exactly one part of that response is useful. The rest is noise you have to delete.

Structured output is how you get the code directly.

The key phrases

Add these to any prompt when you want clean output:

Output ONLY the HTML. Do not include any explanation, preamble, or markdown code fences.
Return a JSON object with exactly these fields: [list].
Use this template and fill in the blanks: [template].

Without structured output:

Write an HTML navigation bar with links: Home, About, Projects, Contact.

→ prose + explanation + code wrapped in fences

With structured output:

Write an HTML navigation bar with links: Home, About, Projects, Contact.
Output ONLY the HTML. Do not include any explanation, preamble, or markdown code fences.
Style requirements: horizontal layout, links in a row, no bullet points, a bottom border on the nav element.

→ clean HTML you can paste directly into VS Code

Why models add prose by default

Models are trained to be helpful and thorough. Adding context and caveats is what makes a good general-audience response. Structured output overrides that default — you're telling the model explicitly that the explanation is not useful here.

Markdown fences (```html ... ```) are a common gotcha. Models often wrap code in them. For pasting directly into VS Code you want raw code, so add "Do not include markdown code fences" to the prompt.

Practice: generating HTML components

Pick one of these components and write a structured-output prompt to generate it:

A hero section: large heading, subheading, one call-to-action button
A two-column section: text on the left, image placeholder on the right
A skill-tags row: short text chips styled as rounded tags
A simple footer: name, a links row, copyright line

Requirements for your prompt:

Include "Output ONLY the HTML."
Specify at least two style requirements
Use one-shot — paste one existing component from your page as an example

Paste the output into VS Code, open it in the browser, and see how much editing it needs.

JSON

JSON (JavaScript Object Notation) is how data moves between parts of almost every web application. It's a list of key-value pairs:

{
  "title": "Invent the Future",
  "duration": 10,
  "team_size": 4,
  "technologies": ["HTML", "CSS", "JavaScript"]
}

Curly braces hold the object. Keys are strings in quotes. Values can be strings, numbers, arrays ([...]), or other objects. Commas separate pairs.

Try this prompt:

Generate a JSON object for a fictional student project with exactly these fields:
title, description (max 30 words), technologies (up to 4 items), team_size.
Output ONLY the JSON. No explanation, no markdown fences.

Then modify the fields list to describe your own potential Week 2 project.

Combining structured output with few-shot

Structured output and few-shot work well together. A few-shot prompt that also specifies the exact output format typically produces cleaner, more consistent results than either technique alone. Add the format instruction after the examples:

[examples]

Now generate a new component in the same style.
Output ONLY the HTML. No markdown fences. No explanation.