HTML is All You Need (for Agents to Make Graphics) - Amol Kapoor, Nori

Key Concepts

• Coding Agents: AI systems capable of performing complex tasks beyond just writing code, including document and media creation.
• Geospatial Reasoning: The human-centric ability to manipulate objects on a canvas (e.g., drag-and-drop, resizing).
• SVG (Scalable Vector Graphics): A coordinate-based image format that is difficult for AI models to generate because it requires "hand-writing" raw numerical data.
• HTML/CSS as a Medium: Using structured, semantic language (HTML) to define visual layouts, which aligns with how AI models process information.
• Abstraction of Tools: Decoupling the editing format (HTML) from the presentation format (PDF, slides, video).

---

1. The Problem: Human-Centric Tools vs. AI Reasoning

Amol, CEO of Nori Atentic, argues that current AI failures in visual tasks (like creating slide decks or graphics) stem from forcing AI to use human-centric tools.

• The "Fiddling" Tax: Humans spend excessive time on formatting, alignment, and branding in tools like PowerPoint or Figma.
• The Geospatial Fallacy: Humans interact with the world via "click, drag, and drop." When AI is forced to interact with these coordinate-based interfaces, the output is often "garbage" because the AI lacks a human’s intuitive sense of spatial alignment.
• The Pelican Test: A benchmark where models are asked to draw a pelican on a bicycle using SVG. Models consistently fail because they cannot "see" the image; they only see a "wall of numbers," which is an unnatural way for an AI to process visual information.

2. The Paradigm Shift: Thinking Like the Model

The core argument is that developers must stop forcing AI to act like a human user and instead provide tools that match the AI’s "native medium."

• Language as the Native Medium: AI models are trained on billions of tokens and understand structure, hierarchy, and logic.
• HTML as the Solution: HTML is inherently structured (headings, grids, divs). By using HTML/CSS, the AI defines the structure of a document, and the browser handles the rendering of pixels. This allows the AI to create complex layouts, charts, and motion without needing to calculate specific coordinates.

3. Methodology: The HTML-First Workflow

Amol outlines a framework for generating professional-grade visual artifacts:

1. Data Integration: Connect the AI agent to company data sources (Slack, codebases, call transcripts, emails).
2. Structural Generation: Instruct the agent to generate content using HTML/CSS rather than attempting to manipulate a proprietary canvas (like a .pptx file).
3. Rendering: Use the HTML output as the source of truth. This can be rendered directly in a browser, converted to PDF for board decks, or used to generate video content.
4. Automation: By automating the "grunt work" of formatting, the human user shifts their role from "fiddler" to "editor/storyteller."

4. Real-World Applications

• Slide Decks: Nori Atentic uses HTML to generate board and sales decks, allowing for rapid creation (e.g., building a deck on a phone during a commute).
• Documentation: Using HTML/CSS to add vibrancy and brand consistency to internal docs.
• Video Production: The video presentation itself is described as being built using HTML and CSS ("divs all the way down"), demonstrating that complex visual media can be generated through code-based structure.

5. Notable Quotes

• "Most people think coding agents only write code. But if you ask me, that's just bad marketing."
• "Asking an AI to use a canvas is like asking a human to write SVG by hand."
• "Stop thinking like a user. Think like the model. Give it the right language, and for graphics, all you need is HTML."

6. Synthesis and Conclusion

The primary takeaway is that the limitation of AI in visual design is not a lack of intelligence, but a mismatch of medium. By moving away from coordinate-based, human-centric tools (PowerPoint, Figma) and toward structured, language-based formats (HTML/CSS), developers can leverage the AI's natural ability to reason about structure. This approach transforms the AI from a clumsy user of human tools into a highly efficient engine for generating professional, branded, and complex visual content.