The magic powers of HTML

Ask an AI agent for a document and you often get a markdown file or a long response in the chat about the thing. Ask for an HTML and you can get the thing itself, one you move, walk through and keep. The words you add decide which.

This works in almost every AI tool. Claude, ChatGPT, Copilot and Gemini can all build an HTML page right in the chat. Claude calls it an artifact, ChatGPT shows it as a code block with Preview, Microsoft 365 Copilot builds it in a Copilot Page and Gemini in Canvas. Agents such as Claude Code and Claude Cowork write it as a file in your folder. The tool only decides where the page lands. This guide is about the powers themselves, and about the fact that every one of them has a plain name you can ask for.

# Q4 in one page

Revenue **up 12 percent**
- Now
- Proposed

<h1>Q4 in one page</h1>
<input type="range">
<button>Compare</button>

Three words

An AI agent will give you what you ask for. The challenge is that most people do not know what to ask for.

The AI agent could already build a page with sliders, tabs and steps. It only does it when you ask. The difference between an answer you skim and a page you keep is often the last three words of the prompt.

The phrases are things like add sliders, make it a wizard, make it interactive and not so overwhelming. Nothing technical, just what you want changed.

Why HTML

Thariq Shihipar at Anthropic made this case in The unreasonable effectiveness of HTML, and his page of examples argues it better than another paragraph from me would. What he leaves open is which words to type, and that is the rest of this guide.

The agent defaults to prose because prose is what it is asked for. The words at the end of the request are what tell it to build something else.

What to say

Let me move it. Add sliders, add a filter, let me change the assumptions. Puts the numbers in the model on sliders, so you can change them and see the result update. Data analysis and dashboards with Claude Code builds this kind of page from a spreadsheet you update every month.

Take me through it. Make it a wizard, one step at a time, ask me the questions first. Turns a decision into one question at a time, where each question depends on the last answer.

Four more

Show me less. Not so overwhelming, one screen, put the detail behind a toggle. Keeps the main point on one screen and puts the detail behind a click.

Show me more than one. Give me three directions, side by side. Gives you three versions next to each other, so you can compare and pick one.

Make me want to look at it. Make it magical, make it feel alive. Adds motion and timing, so things respond when you use them.

Let me keep it. One file I can send, make it printable. Puts everything in one HTML file that opens on any laptop with nothing installed.

Interactive or alive

I use two of these as though they were the same instruction, and I am starting to think they pull in different directions.

Make it interactive asks for controls. I get buttons, tabs and inputs, sometimes more of them than the idea needed.

Make it feel alive asks for response. I get motion, timing and state, usually with fewer controls rather than more.

The next time you ask for interactive and get a control panel you did not want, the second phrase may be the one you were reaching for.

Tell a story

Some points need to arrive one at a time. A document cannot hold the second idea back until the first has landed. A page can, because the browser knows how far you have scrolled. The long reads newspapers build this way, with charts that fill in as you scroll, are HTML and nothing more.

Walk me through the point. Make it a scrolling story, let the figure draw itself as I scroll. Shows the argument one idea at a time as you scroll, in the order you set.

An example. How does the context window in AI agents work?

That is one file. The glass, the eight scenes and the scrolling are all in it, and it opens on any laptop with nothing installed.

Just give feedback

Do not try to say everything in the first request. Ask for the page, look at it, and say what is off. Each round is a few more words, and each round lifts what comes back.

The first version is plain and a bit generous. Add sliders puts the numbers in your hands. Make it a wizard turns the list into steps. Not so overwhelming takes away what you did not need. The page you end up with is shaped by your feedback, one round at a time.

When you have the page you want, ask the AI agent to turn it into a skill. The rounds you just went through become the starting point next time, and the first version arrives where this one ended.

We say the same thing in our training. Our contribution is taste, and taste is applied round by round. Put the guesses on sliders and you find out which ones you believe. Walk through the decision and you notice the step you skipped. You are checking your own thinking, on a page you can point at.

Try it tomorrow

Take one thing you asked an agent for this week, something that came back as text and was fine, and ask for it again with three more words on the end. The same request with an ending, nothing more.

If you find yourself typing the same ending every time, turn it into a skill.

The clearest example I know comes from Thariq Shihipar again. In a post on X he shared ELI5, a skill that now sits in Anthropic's own plugin repository and that you call with /eli5 and whatever you want explained. The whole skill rests on one sentence.

explain like I'm someone who knows nothing about this topic, using a HTML artifact with big pictures and few words

Now go make some awesome HTMLs!