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 transcript and explore slides
Loading transcript and slides…