It's HTML All the Way Down

The AI spits out something good. Super good. Well-reasoned, thorough, exactly what you needed. But when you go to use it, something feels off. It is just a wall of text. You read half of it and eyes glaze over. You would share it, but it looks rough. You save it to read later and obviously never come back to it.

This is a presentation problem! The information was totally there, it just wasn't presented well. Here is the fix:

The one-liner

Summarize the key findings from Q1 and outline the main revenue trends. What should our sales team prioritize going into Q2? Include any risks worth flagging to leadership.

Make this an HTML page.

That is it. Just with that little addition to the end of your prompt, "Make this an HTML page", the output stops being a block of Markdown and becomes a formatted, visual, shareable page. Cards, tables, checklists, color coding, progress bars — the model builds the whole thing. Toggle the demo below to feel the difference on the exact same answer.

Live demoSame answer, two formats

Q2 launch plan — summary Goals: reach 5,000 signups, 8% paid conversion, and a 30% week-4 retention rate. Phase 1 (weeks 1-3): finish onboarding, ship billing, run a 50-person private beta. Phase 2 (weeks 4-6): public launch, 3 founder posts, 1 partner webinar. Phase 3 (weeks 7-9): paid ads at $4k/mo, double down on the best channel. Open risks: support load during beta, ad CAC above $40, and a thin help center.

Identical information. The plain-text version is something you skim once and close. The HTML version is something you actually use, screenshot, and send to your co-founder.

Why HTML output is different

When an AI responds in plain text, it is optimizing for reading in a chat window. That is fine for quick questions. But plain text has a structural problem for anything you want to keep: everything looks the same weight. The headline and the footnote get the same treatment.

HTML is simply a richer canvas. As Anthropic engineer Thariq Shihipar put it in a widely shared post on the Claude blog, there is almost no information a model can read that you cannot represent efficiently in HTML — tables for tabular data, CSS for design, SVG for illustration, and JavaScript for interaction. In the absence of that, models reach for clumsier substitutes, like ASCII diagrams or estimating colors with unicode blocks.

HTML wins on the things that decide whether your output gets used at all:

Information density. Tables and diagrams instead of paragraphs.
Readable at a glance. Hierarchy and color let people find what matters.
Easy to share. One file, opens in any browser, no software on the other end.
Actually interactive. Buttons, sliders, and checkboxes — not just formatted text.

Left: a plain-text AI response for an executive dashboard — walls of Markdown. Right: the same output rendered as a polished HTML page with KPI cards, a table, and color-coded status badges. — The same River AI response, two formats. Left: raw Markdown. Right: "make this an HTML page."

How to use it (copy-paste ready)

The bare minimum is the one-liner above. For more control, stack a few short modifiers. Each one is an optional nudge — dark mode, a responsive layout, a comparison table, an interactive checklist. Build a prompt below and copy it.

/HTML Prompt Builder

More Tools

What are you converting?

Audience

Design aesthetic — feels like…

Characteristics

Tone

Include

You are a world-class product designer specializing in executive operating dashboards. Convert the following operating review into a single-file HTML page. Audience The primary audience is: CEO, Executive team, Board members. They need to understand the key findings within 30 seconds. Tone Write in a Executive brief, Data-driven style. Design The visual design should feel like: Stripe, Linear, Ramp. Characteristics: Clean, Premium, Information-dense, Scannable. Avoid: generic admin templates, excessive colors or gradients, visual clutter. Use a light color scheme with lots of whitespace. Technical requirements Produce one standalone HTML file with embedded CSS and JavaScript. No build step, no external dependencies. Must open directly in a browser. Components KPI cards: Display critical metrics as large cards. Each card shows: current value, prior period comparison, delta (absolute and %), and a color-coded status indicator. Charts: Create SVG-based charts for trend visualization. No external chart libraries. Executive summary: Lead with a 2–3 sentence narrative summary of overall health. Risk matrix: Render strategic risks as a 3×3 Probability × Impact scatter matrix. Output: return only the complete HTML document, no explanation or preamble.

Rule of thumb: the base line does the heavy lifting. Add modifiers only when you have a specific format in mind. You are steering presentation, not re-writing the request.

Where HTML beats prose

This is not just for reports. Simon Willison has published over 200 single-file HTML tools, almost all written by LLMs. His rule: one file, inline CSS and JS, no build step, paste it out of the chat and it works immediately. A few patterns where HTML clearly wins:

Plans and proposals

A launch plan becomes a structured report with a timeline, phased goals, and a real checklist. What took an hour in a word processor becomes a presentable draft in minutes.

Comparisons and analysis

Ask for a comparison and you get an actual grid you can scan in seconds, not a paragraph describing differences. This is also the format AI answer engines extract most reliably — more on that below.

Throwaway tools with a copy-out button

One of the most powerful patterns: build a tool that accepts pasted content, transforms it, and lets you copy the result back with one tap. The loop is simple — paste in, tool does something useful, copy out and paste somewhere else. Here is a prioritization board: drag the cards, then export the order as Markdown.

Throwaway toolDrag to reprioritize

Now2

⠿Fix billing webhook retries

⠿Onboarding empty-state

Next2

⠿Dark mode for editor

⠿CSV import v2

Later1

⠿Public API beta

Drag a card between columns (or describe the order out loud). The export button turns whatever you did in the UI back into text the model can read. You stay in the loop; the loop gets tighter.

Scale this to anything. Ask the model to add a "copy as prompt" button and you can feed results straight back into the next chat. You stay in the loop; the loop gets tighter.

Simon has built this pattern into dozens of tools: a Hacker News thread exporter that condenses an entire discussion into something you can paste into an LLM, a rich-text inspector that shows the underlying HTML when you paste from any page, an alt-text extractor that accepts pasted images.

hacker-news-thread-export

Paste a HN URL, get a condensed thread ready to drop into an LLM.

paste-rich-text

Copy from any page, paste to see the raw HTML — useful on mobile where view-source is unavailable.

alt-text-extractor

Paste images in, copy their alt text out.

Debugging tools that teach you what is possible

Simon's insight is worth sitting with: the key to building interesting HTML tools is understanding what is possible. Building a custom debugger is the fastest way to learn. His clipboard-viewer — a single HTML file that shows every type of data on your clipboard when you paste — was the foundation for a dozen other tools, because it revealed invisible formats (rich text, RTF, image data) he could use to bootstrap new functionality.

clipboard-viewer

Paste anything. See every clipboard format: text, RTF, images, files.

keyboard-debug

Shows which keys are held down and their KeyCode values in real time.

exif

Select a photo and display all its EXIF metadata immediately.

These are not production apps. They are throwaway instruments for understanding a surface. An AI builds the instrument in 30 seconds; you learn something that would have taken an hour of reading documentation.

Picking values that are painful to describe in words

Some choices are easier to feel than to write: a color, an easing curve, the exact corner radius on a button. Ask for an editing surface with sliders and a copy button, tune it, and paste the result back.

PlaygroundTune a button, copy the params

Corner radius14px

Horizontal padding30px

Hover scale1.04×

Hover the button to preview the animation. Some choices — color, easing, exact padding — are easier to feel with a knob than to describe in a sentence. The copy button closes the loop.

The same launch plan, typed as one prompt — and the four words that turn it into a page.

The real reason: staying in the loop

“As Claude takes on more, I noticed I was reading plans less closely. HTML turned out to be exactly the way to stay engaged with its choices rather than just hand them off.”

That is the deeper point. As models get more capable, the risk is not bad output — it is that you stop reading it. A 100-line Markdown spec gets skimmed. A well-structured HTML page with tabs, diagrams, and annotations gets read. The format is what keeps a human meaningfully in control of the work.

A bonus: HTML is how you get cited by AI

There is a second payoff. The same structure that makes HTML readable for humans makes it extractable for machines. In generative engine optimization — getting cited inside answers from ChatGPT, Perplexity, Google AI Overviews, and Claude — the winning patterns are the same ones HTML encourages: question-style headings, answer-first paragraphs, and structured data. Research summarized across several 2026 GEO guides found that pages with structured lists, tables, and statistics see meaningfully higher visibility in AI answers than walls of prose. Models extract tables and lists with far higher fidelity than paragraphs.

The overlap is the point. Writing for a human who skims and writing for a model that extracts pull in the same direction: clear structure, short paragraphs, and real tables instead of described ones.

Dynamic interfaces in River

Most tools stop at a preview pane. The HTML renders, you screenshot it, and it is gone when the chat scrolls away. River takes the opposite view: there are tons of ways to turn an AI idea into a real, dynamic interface, and the workspace is where they live. You can do it right in the chat, inside an app you build in minutes, or as a full website you publish.

In RiverLots of ways to build one

Widgets, charts, tables — live in the chat, no file, no tab-switching.

River AICloud

Writing workspace

River AI

Ask a follow-up…

AgentOpus 4.7

Because River is a workspace and not just a chat box, the model has real context to work from — your documents, your project, your data — and somewhere to put what it builds. The same idea can stay a quick chat widget, become an app your team uses, or go live as a published River site. That is the difference between an AI that hands you a screenshot and one that hands you something you can ship.

Frequently asked questions

What does “make it an HTML page” actually do?

It changes the output format, not the content. Instead of returning Markdown or plain prose, the model structures the same answer as a styled web page — cards, tables, checklists, and color — that you can open in any browser, share with a link, and skim at a glance.

Is HTML output less token-efficient than Markdown?

HTML usually costs more tokens than Markdown. In practice the trade is worth it: the output is far more likely to be read, reused, and shared, and with large modern context windows the extra tokens are rarely the bottleneck.

Can AI-generated HTML be interactive?

Yes. A single HTML file can carry CSS and JavaScript, so the model can build working sliders, drag-and-drop boards, calculators, and forms — small throwaway tools purpose-built for one task, with a copy or export button to hand results back to the AI.

How does River use HTML differently from a chatbot?

River gives you many ways to turn an idea into a real, dynamic interface: an interactive widget right in the chat, a full app you build in minutes, a website you publish to a live URL, or interactive output dropped into Docs and Canvas. The workspace keeps your context attached and gives the result somewhere to live.

The bigger shift

Most advice about getting more from AI is about making prompts more elaborate. That helps, eventually. But the fastest improvement most people can make is not changing what they ask for. It is changing how they ask to receive it. Same question, same context, same model — delivered as a structured page instead of a paragraph.

Next time, try ending your prompt with four words.

Add this to any prompt

Here’s the Q2 report we discussed — include the three risk items from Tuesday’s call, the updated revenue figures, and a short section on what’s at risk if we miss the June deadline.