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.

The heading “coding agents → visual artifacts” sits above three illustrated cards labeled slides, docs, and videos.Open full source frame
Coding agents can create visual artifacts: slides, docs, and videos.
0:060:23
Suggest correction

This note stays in this page until you copy or download it. Nothing is submitted; reloading clears the draft.

0:06 · section reference included

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.

0:591:18
Suggest correction

This note stays in this page until you copy or download it. Nothing is submitted; reloading clears the draft.

0:59 · section reference included

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.

2:102:21
Suggest correction

This note stays in this page until you copy or download it. Nothing is submitted; reloading clears the draft.

2:10 · section reference included

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.

HTML code on the left points through an arrow labeled browser to a Q3 Results panel with a grid and four green bars.Open full source frame
HTML structure becomes a visual layout through the browser.

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.

3:373:57
Suggest correction

This note stays in this page until you copy or download it. Nothing is submitted; reloading clears the draft.

3:37 · section reference included

A deck is not its editing tool

Years of making decks in PowerPoint can make the tool and the artifact feel synonymous. But PowerPoint is an authoring environment; the audience sees the presentation. That separation lets the workflow choose an editing format suited to the agent without requiring the audience to care how the deck was produced.

Keep HTML as the editable source, then render to another format such as PDF when distribution requires it.

LayerResponsibility
HTML and CSSEditable content, layout, and theme
Browser presentationVisual result the audience sees
PDF exportA separate format for sharing

The authoring format and the delivery format do not have to match. Changing the former need not change the purpose of the finished deck.

A Q3 Results chart labeled presenting mode is connected by an equals sign and “same result” to an HTML badge labeled editing mode.Open full source frame
An HTML editing format produces the same presentation result.
4:344:44
Suggest correction

This note stays in this page until you copy or download it. Nothing is submitted; reloading clears the draft.

4:34 · section reference included

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.

A browser illustration shows a green logo and “a talk, rendered in a browser” beside an Elements pane containing nested div elements.Open full source frame
A talk rendered in a browser, with its HTML structure alongside it.

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.

5:115:20
Suggest correction

This note stays in this page until you copy or download it. Nothing is submitted; reloading clears the draft.

5:11 · section reference included

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.

5:536:05
Suggest correction

This note stays in this page until you copy or download it. Nothing is submitted; reloading clears the draft.

5:53 · section reference included

Resources

From the talk

Transcript download
Read the transcript and explore slides

Loading transcript and slides…