AI Engineer World's Fair 2026
HTML is All You Need (for Agents to Make Graphics)
Read the talk
HTML Is All You Need for Agents to Make Graphics
A coding agent can make slides, documents, and video when it authors structure in HTML and CSS and lets the browser turn that structure into pixels.
From a talk by Amol Kapoor
Before you start: Basic familiarity with HTML elements and CSS will help with the layout example; no agent framework experience is required.
Can a coding agent make your next slide deck?
Can a coding agent make slides, documents, or even video? The name suggests a tool for software development, but the underlying capability is broader: an agent can work with structured text to produce artifacts that are not themselves software products. Amol Kapoor, introducing himself as CEO of Nori Agentic, starts from an AI employee with access to company code, documents, Slack, and other data. Making visual artifacts becomes another application of that capability—provided the agent gets a representation it can work with.
Suggest correction
This note stays in this page until you copy or download it. Nothing is submitted; reloading clears the draft.
The work hidden inside a slide
A slide deck contains two kinds of work: deciding what to say and getting everything into place. Kapoor estimates that slide creation consumes roughly 34,000 human years every day. That is an extrapolation, not a measured total. He contrasts a ten-hour deck with about twenty-five minutes once formatting, branding, and repositioning are removed; his companion article describes the shorter figure as active human work, rather than elapsed generation time. The useful distinction is between developing the story and spending hours adjusting its presentation.
Open PowerPoint, Slides, Figma, or Canva, and the default workflow is a canvas. You click, drag, drop, resize, and snap objects to a grid. These interactions fit human hands and spatial perception. An application-specific data structure sits underneath, but the visible editing interface asks you to manipulate objects in space.
Give an agent that workflow and the failure modes are familiar: overlapping objects, unreadable text, and missing alignment. Kapoor connects those failures to skepticism about agents’ spatial reasoning and invokes ARC-AGI. ARC-AGI more broadly evaluates generalization and skill acquisition; it is not founded on the premise that agents cannot reason about space. The narrower question here is whether a poor layout reveals a limit of the model or a mismatch in the interface it was given.
Suggest correction
This note stays in this page until you copy or download it. Nothing is submitted; reloading clears the draft.
A pelican, a bicycle, and a wall of numbers
Simon Willison’s pelican exercise makes the representation problem concrete: ask a model to draw a pelican riding a bicycle, using only SVG. The task requires recognizable objects and a plausible spatial relationship between them. Kapoor shows examples he considers poor, then questions whether that establishes that agents are hopeless at graphics.
Try the same constraint on a person: handwrite an SVG of a pelican. The person may know exactly what the bird looks like yet struggle to express it as numeric geometry. Kapoor describes that source as a wall of numbers. Humans usually solve the problem by drawing on a canvas, where they can see and manipulate the shapes directly. The representation makes a large difference to how easily a visual idea becomes an artifact.
Figma MCPs, PowerPoint CLIs, and screenshot-and-replace loops expose different interfaces, but Kapoor groups them together because they retain a workflow organized around the human canvas. His analogy reverses the pelican problem: asking an AI to manipulate a canvas resembles asking a human to write SVG by hand. Choose the authoring language around the agent’s strengths: words, structure, and relationships rather than repeated pixel-level manipulation.
Suggest correction
This note stays in this page until you copy or download it. Nothing is submitted; reloading clears the draft.
Write structure; let the browser lay it out
The desired medium already exists: HTML, styled with CSS. It is text, describes structured content, and renders through a widely available browser. Kapoor says models have encountered billions of examples of this language in training, though he supplies no model-specific corpus count. His practical point is familiarity: web markup gives an agent an established vocabulary for expressing a visual artifact.
HTML supplies elements and document structure; CSS supplies layout and styling. A heading can be an h1, a group of panels can live in a grid, and chart elements can be styled inside that structure. The browser computes the resulting pixels. Kapoor describes this as avoiding coordinate placement: the useful mechanism is that the agent can specify relationships instead of manually positioning every object. CSS Grid, for example, can automatically place children into tracks. It still requires layout decisions, and poorly chosen sizing can still cause overflow or overlap.
A small slide illustrates that division of responsibility. The source below asks for a heading and two equal-width panels. It specifies spacing and typography but never computes the panels’ screen coordinates.
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Q3 Results</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 4vw;
background: #10251e;
color: #f1fff7;
font-family: system-ui, sans-serif;
}
main { max-width: 1100px; margin: auto; }
h1 { font-size: clamp(2rem, 5vw, 4rem); }
.panels {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
}
section {
padding: 1.5rem;
border: 1px solid #7cdda9;
border-radius: 1rem;
overflow-wrap: anywhere;
}
@media (max-width: 600px) {
.panels { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<main>
<h1>Q3 Results</h1>
<div class="panels">
<section>
<h2>Progress</h2>
<p>Summarize the quarter's completed work.</p>
</section>
<section>
<h2>Next steps</h2>
<p>Explain the decisions needed for the next quarter.</p>
</section>
</div>
</main>
</body>
</html>
The same browser platform supports fonts, charts, richer layouts, and motion. The recording’s code-to-render diagram makes that handoff visible: HTML passes through the browser into a Q3 Results panel with a grid and four green bars.
Kapoor then returns to the pelican riding a bicycle, this time asking for HTML. The intended advantage is an artifact whose structure the model can manipulate and whose source a person can read, theme, and edit line by line. The demonstration does not identify the models or settings needed to establish a controlled HTML-versus-SVG comparison; it illustrates the proposed change in authoring medium.
Suggest correction
This note stays in this page until you copy or download it. Nothing is submitted; reloading clears the draft.
The same source medium reaches beyond slides
Kapoor reports using this approach for the company’s routinely presented and shared slide decks, including board decks and sales decks. Documents use the same approach to add color and visual structure while following the company brand. The recording itself extends the example to video: Kapoor describes its visuals as HTML and CSS, “divs all the way down.” The accompanying browser illustration shows the talk beside an Elements pane containing nested div elements.
The broader design choice is whether plain text is enough for the intended use. Kapoor favors adding structure and color when they make an artifact more useful, rather than accepting plain text simply because it is convenient to generate. HTML gives an agent a way to make that choice without moving into a separate canvas-editing workflow.
Suggest correction
This note stays in this page until you copy or download it. Nothing is submitted; reloading clears the draft.
The deck still needs something to say
A beautiful deck has little value without substantive content. Once the agent can handle presentation, the next requirement is access to the material that belongs in it. Call transcripts and emails are Kapoor’s examples: give the model access to those inputs, and it can assemble content as well as generate the visual artifact.
That leaves the human focused on vision and story while the agent handles the assembly work. Kapoor presents Nori Sessions as the product that connects those capabilities, and reports building entire board decks from his phone during a subway commute. He attributes that workflow to a bot embedded in company context and says Nori supplies the capabilities needed to make it work. The content access is essential to the pitch: HTML provides a medium for presentation, while company knowledge supplies what the presentation is about.
The closing instruction is to design from the model’s working medium: “Stop thinking like a user. Think like the model.” For graphics, Kapoor’s answer is HTML—a language the agent can edit as structure and the browser can turn into something an audience can see.
Suggest correction
This note stays in this page until you copy or download it. Nothing is submitted; reloading clears the draft.
Resources
From the talk
Willison's collection of model-generated SVG pelicans riding bicycles.
The benchmark's official explanation of generalization, skill acquisition and core knowledge priors.
Nori's current product overview for cloud agents with organizational context and integrations.
Further reading
Kapoor's workflow combines company context, HTML/CSS slides, recorded feedback, agent revisions and PDF export.
François Chollet's original framework for measuring intelligence and introducing ARC.
Practical examples of browser-managed rows, columns, sizing, alignment and automatic placement.
Read the complete timestamped transcript
- 0:06
[upbeat music] Hi, I'm Amol, CEO of Nori Agentic. We deploy an AI employee that understands your company, your code, docs, Slack, and other kinds of data.
- 0:23
We spend a lot of time thinking about how coding agents really work. Most people think coding agents only write code, but if you ask me, that's just bad marketing.
- 0:33
Forget the name for a second. Coding agents can do almost anything. There's just one trick: You have to be able to think like an agent to get it to do what you want it to do.
- 0:44
Today, we're gonna talk about how we use coding agents to do something most people think agents are terrible at: make visual artifacts, like slides, docs, and yeah, even video.
- 0:59
Every day, the world pours something like thirty-four thousand human years into making slide decks. Most of that time isn't the thinking, it's the fiddling. A deck that takes ten hours should really take about twenty-five minutes once you remove all the formatting and the branding and the moving things around.
- 1:18
Say you need to make a slide. What do you do? You open a tool, PowerPoint, Slides, Figma, Canva, and then you start manipulating a canvas. Every one of these tools is built for human hands and human eyes.
- 1:33
Click, drag, drop, resize, snap to grid, all motions and patterns that make sense for our geospatial view of the world. There is a data structure underneath, but it's in a format that only the application can read.
- 1:47
What happens when you hand these tools to an agent? Well, the output comes out all wrong. Things overlap in weird ways. You can't see the text. There's no alignment.
- 1:56
It's just garbage. AI skeptics say that it's not just the tools. Agents fundamentally can't reason about space, and there are whole benchmarks, like ARC-AGI, that are built exactly around that premise.
- 2:10
There's a famous little test for this from developer Simon Willison. He asks every new model the same thing: "Can you draw a pelican riding a bicycle?" But there's a trick.
- 2:21
The agent is only allowed to use SVG. It's a quick gut check for whether a model can reason about space at all. Here are some examples of what the models actually give you on this test, and yeah, these are pretty bad.
- 2:35
Like, genuinely, deeply, really bad. So does that mean it's hopeless? Agents are just doomed to be bad at graphics? No, I don't think so. If you ask me, it's not the model, it's the medium.
- 2:49
If I asked you, someone who is presumably human, to handwrite an SVG of a pelican, you wouldn't be able to do that either. SVGs are just a wall of numbers.
- 3:00
You can't go from a wall of numbers to a pelican. You just can't see that way. That's just not how people think. We think graphically, so we build tools that let us draw on a canvas.
- 3:12
Figma MCPs, PowerPoint CLIs, screenshot and replace loops. What do all of these agent tools have in common? They all approach the problem like a human, but an AI is not a human.
- 3:25
Asking an AI to use a canvas is like asking a human to write SVG by hand. It doesn't really make sense. You need to give the AI tools based on how it thinks, not in pixels, in language.
- 3:37
Words, tokens, structure, that is its native medium. Imagine a language that's incredible at describing layout, that models have seen and trained on billions of examples of, that they understand intuitively, that renders to pixels and can run everywhere.
- 3:57
Oh, right. HTML lets a model think in structure. HTML tags have meanings built into the language, a heading, a chart, a grid, and the browser turns it all into pixels, so the model never actually places a coordinate, and you can get all sorts of visual effects, charts and layouts, fonts and motion, all of it for free.
- 4:19
Remember that pelican from earlier? Now ask it to do the same exact task, but in HTML. Same bird, but now it's in a structure that the model can reason about, and you can read and theme and edit every single line of it.
- 4:34
I spent my whole life building slide decks with PowerPoint, so I always thought that those two things, slide decks and PowerPoint, were synonyms. But that's just not really true, is it?
- 4:44
PowerPoint is a tool that you use to make slide decks. The deck itself, that's just the presentation mode, and as it turns out, no one in your audience is gonna care how you got to the presentation mode.
- 4:58
The editing format is totally arbitrary, so you can just pick the editing format that the agents are already good at, HTML, and if you need to, render to a different format, like PDF, later on.
- 5:11
We use this HTML trick to build all of our slide decks, our board decks, and our sales decks. These are real things that we actually present and send out constantly.
- 5:20
We use it for our docs too. It gives our docs color and vibrancy, all while following our brand. And of course, we also use it to make videos, like this one.
- 5:31
What you're watching is just HTML and CSS. It's literally just divs all the way down.
- 5:40
Almost everything is better with a little structure and a little bit of color. Plain text is a choice, generally a choice of convenience, but it's usually the wrong one if you're actually trying to create something of use.
- 5:53
Now, I do want to take a quick beat here and point out that a beautiful deck on its own is generally not worth anything. You still have to go and get all of that content, all of the things that actually populate that deck, right?
- 6:05
Well, again, we can think like the model. If you just give the model access to your data, say, your call transcripts or your emails, you can have the model build the deck end to end.
- 6:17
Let your agents do all the grunt work while you focus on vision and story. That's what Nori Sessions lets you do. I've built entire board decks for my phone on the subway during my commute.
- 6:29
Why? Because our Nori bot lives in the fabric of our company. Of course, Nori ships with everything you need to make this all work, so don't bother reinventing the wheel.
- 6:39
That's my little spiel. Thanks for listening. If you have just one takeaway, it's this: Stop thinking like a user. Think like the model. Give it the right language, and for graphics, all you need is HTML. [upbeat music]