When AI Agents Should Use HTML Instead of Markdown

Theo explores interactive reports, visual plans, code review, and one-off tools while weighing the costs of generated HTML.

TBTheo Browne연사 · T3
채널
Theo - t3․gg
게시일
2026년 5월 13일
영상
36:05
읽기
7분
슬라이드
6
원문
영어
YouTube에서 열기
스크롤하면 영상이 오른쪽 아래로 작아져 계속 재생됩니다. 자막은 읽기 언어를 따릅니다.
읽기 언어2개 언어로 읽을 수 있음
이 글은 아직 한국어 번역이 없어 영어 원문으로 표시합니다.
요약

30초 요약

Theo Browne considers Thariq’s examples of agent-generated HTML and Andrej Karpathy’s ideas about visual interfaces. He sees value in interaction and visual hierarchy while retaining Markdown for many tasks; generated pages still need source verification, accessibility checks, and safe handling.

  1. 1Compare options visuallyA side-by-side page can make design and implementation trade-offs easier to inspect.
  2. 2Interaction can steer workSliders and export controls turn an artifact into input for the next agent step.
  3. 3Markdown still works for codeA good renderer can highlight fenced code; custom HTML adds its own implementation burden.
  4. 4A review artifact is a guideAnnotations and grouping can help review, but actual code and tests remain authoritative.
  5. 5Build a temporary editorA one-off interface that exports JSON or CSV can support a decision without becoming a permanent product.
  6. 6Account for cost and safetyHTML can add token use, noisy diffs, scripts, and external resources, so review and isolation matter.

핵심 정리

  1. Choose Markdown or HTML according to the audience and the task rather than a blanket rule.
  2. Interactive controls can turn an agent artifact into a way to steer the next step.
  3. Visual summaries and code-review explanations must be checked against their sources.
  4. A one-off editor can be valuable when it imports and exports useful data.
  5. HTML adds token, maintenance, accessibility, and execution-safety considerations.
전문

챕터별로 다듬은 전문 읽기

원본 자막만 보기
01

Why consider HTML?

Theo examines a proposal to use HTML for agent-generated documents. He still values Markdown and compares the trade-offs.

I have used Markdown for nearly two decades, but I think we are asking it to do too much. Thariq from the Claude Code team has been exploring HTML as an alternative for agent-generated output, and Andrej Karpathy has also discussed asking models for HTML. I want to examine where this helps and where Markdown still works well.

Thariq's argument begins with a familiar problem: agents produce long plans, specs, and explanations that people may not read. Markdown is portable and easy to edit, but if an agent is doing most of the editing, the ability to create richer visual structure may be more valuable for some outputs.

The examples include self-contained HTML files for planning and exploration. I recognize a repetitive design style in some generated pages and dislike it. A polished format is not automatically good content, and automated AI-text detectors cannot conclusively establish whether a specific passage was written by a person or a model.

02

Visual exploration and readability

Examples show side-by-side designs, plans, and rich layouts. Theo questions novelty, mobile behavior, and generated content.

One example compares several approaches to debounced search, with trade-offs and a recommendation. A chat response might be enough for that, but an HTML file can be useful when side-by-side layout makes the choices easier to inspect and discuss.

Comparing search implementation options
슬라이드 1 / 6Comparing search implementation optionsAn HTML example places three debounce approaches side by side with code and trade-offs.
Exploring empty-state designs
슬라이드 2 / 6Exploring empty-state designsFour interface directions are arranged for visual comparison.

Another example presents four designs for an empty task state. I often ask an agent for multiple distinct options on different routes so I can compare them instead of repeatedly asking for one more design. Whether a single batch produces more variety is something to test for your own prompts and model.

Implementation roadmaps and pull-request summaries are other possibilities. I like the idea of hierarchy and collapsible sections in a review, though some visual plans feel busier than the Markdown I already enjoy reading. More decoration does not necessarily make an explanation clearer.

Code review and module explanations
슬라이드 3 / 6Code review and module explanationsThe example collection includes annotated pull requests, reviewer writeups, and module maps.

A browser document can combine headings, tables, CSS, SVG, code, images, and interactions. That expressiveness can help with spatial relationships and visual explanations that are awkward in plain text. But a generated image URL or embedded data can be wrong, so sources and visual output need checking.

Long Markdown documents can be hard to navigate, and HTML can add tabs, links, responsive layouts, and other structure. Yet responsiveness must actually be implemented: I check an example on mobile and find that it does not work well there. Each extra feature also adds code and potentially more output tokens.

I wonder how much of the appeal comes from a genuinely better hierarchy and how much from novelty. If everyone sends large HTML reports, the novelty may fade. What matters is whether the artifact helps its audience find and understand the relevant information.

03

Interaction and context

Controls can help users steer an agent and authorized source data can inform a report. Reusable workflows should follow experimentation.

Interaction is a stronger advantage. A page can offer sliders or controls to explore a design or algorithm and then copy the selected settings into a prompt. This makes the output a way to steer the next step, not merely a report to read.

An agent with authorized access to a filesystem, repository history, or connected services can gather context and assemble a visualization. I have used this approach for local data. Source access must match the user's permissions, and the resulting summary still needs to be checked against its inputs.

Scattered artifacts suggest an opportunity for a reusable workflow: specify the desired page structure, design conventions, and where generated files belong. That can prevent temporary output from cluttering a repository. I am considering a skill for this, but first I want to experiment with the task itself.

Thariq says making the output more engaging helps him stay involved. I think that matters: if a presentation encourages a person to inspect, question, and steer an agent's work, it can improve collaboration. Enjoyment is useful, though it is not a substitute for checking correctness.

Start simply: ask for an HTML file and describe what it should help you do. Try the task, see what the model gets right or wrong, and notice which instructions you repeat. Only then turn the stable parts into a reusable skill; you can test that skill's text directly as a prompt.

04

Planning, verification, and code review

HTML can organize options and diffs, while Markdown remains effective for readable code. Human review and source checks remain necessary.

For planning, an agent might generate several approaches, expand one into mockups and snippets, and create an implementation plan. Thariq then starts a new session and passes in the artifacts. I also use new threads to carry forward selected context, although the best approach depends on the tool and task.

Those same files can help a separate verification agent understand what was intended. For example, ask for six onboarding layouts with labeled trade-offs, or an implementation plan with mockups, data flows, and important snippets. The reviewer still needs to verify the artifact against the implementation and source evidence.

I disagree that code is inherently hard to read in Markdown. A good renderer can highlight a fenced code block when it is labeled with the language. Generating a custom HTML renderer adds work and can introduce mistakes. Choose the format based on the information, not a blanket rule.

Diffs are a stronger case for a dedicated view. An agent can organize related changes, add annotations, and explain how components interact. I have liked review tools that group changes by relevance rather than file order; I have a prior relationship with one such sponsor, so that preference is based on my own experience.

A focused review artifact can ask the agent to emphasize an unfamiliar part of a change, such as streaming and backpressure, and place annotations alongside the diff. It can help a reviewer navigate, but the actual code and tests remain the source of truth; an agent's summary can omit a defect.

05

Prototypes, reports, and one-off tools

Theo explores interactive design, audience-specific explanations, and temporary editors with export. Generated calculations still require verification.

HTML also works for design prototypes even when the final product is built in another UI technology. Interactive controls can let someone tune a value or compare animations before implementation. The artifact is a sketch to test with real constraints, not proof that the final app is accessible or production-ready.

For reports and learning, an agent can synthesize authorized data from project systems, code, history, and the web into an explainer or slide-like page. A weekly work summary may help a team understand progress, but the underlying records should be checked and sensitive information shared only with the intended audience.

When prompting an explainer, specify the reader's perspective. Even if I understand an implementation, I might ask for an explanation suitable for someone new to it, with a diagram, annotated snippets, and a short list of gotchas. That changes the output from a note for me into material for an audience.

Prompting for an explainer
슬라이드 4 / 6Prompting for an explainerThe example asks for a rate-limiter diagram, annotated snippets, and a gotchas section for a new reader.

A temporary editor is another use: generate a single-purpose page to manipulate one dataset, then export the result as JSON, CSV, or a prompt. The tool does not have to become a permanent product to be valuable. I often discard experimental code after it has helped me make a decision.

I show a token-cost calculator that accepts values and imports or exports CSV. The generated interface was useful to me, although I experienced a slow loading problem on the host. A calculator's convenience does not validate its formula or inputs; those still need independent checking.

A one-off token cost calculator
슬라이드 5 / 6A one-off token cost calculatorThe generated tool offers editable rows and CSV import and export; calculations still need verification.
06

Costs, sharing, and staying involved

HTML can add tokens, noisy diffs, and executable content. Theo weighs those costs against richer collaboration.

HTML can consume more tokens than concise Markdown, and its diffs can be noisier in version control. The extra cost may be worthwhile if the visualization or interaction improves a decision, but a large context window does not eliminate monetary cost, latency, or review overhead.

A reusable design-system reference can help agents match a team's visual style. Generated pages also need a deliberate place to live and a way to share them. Before opening or publishing an untrusted HTML artifact, review its scripts and external resources and use an appropriately isolated environment.

The point I take from Thariq's conclusion is staying in the loop. A richer artifact may make it easier to inspect a plan instead of handing all choices to the agent. I intend to experiment further rather than replace every Markdown file immediately.

07

Future interfaces

Karpathy speculates about more visual interaction, while Theo demonstrates annotated screenshots and considers future agent interfaces.

Karpathy suggests that visual output and audio input may become more useful interfaces for AI, and speculates about future interactive simulations or generated video. I find the direction interesting, but it is a hypothesis about future interfaces, not an established result or a universal preference for every user.

I already use screenshots and annotations to point an agent toward a particular part of a screen. A graphical interface that shows the pasted image helps me understand the context I sent. T3 Code, which I help build, is one such interface; that is a relevant connection when I recommend it.

Pointing at screen context
슬라이드 6 / 6Pointing at screen contextTheo annotates a screenshot to show the passage he wants an agent to consider.

I wonder whether an agent interface could render custom HTML responses and provide a way to share them. There is still plenty to explore in how people provide input, inspect output, and steer work. HTML is a useful starting point alongside Markdown and other formats, not a final answer for every task.

같은 채널의 다른 글

슬라이드 5장38:47EN
Theo - t3․gg· 2026년 10월 28일Theo’s Long-Running Agent Experiments: Verification, Compute and CostTheo Browne · Ping LabsA skateboard game and two compiler projects show how repeated checks and flexible compute can sustain agent work—and how expensive those loops can become.코딩 에이전트에이전트 엔지니어링AI cost & performance+2
슬라이드 5장36:07EN
Theo - t3․gg· 2026년 10월 27일Theo on Token Costs, Coding Agents, and the Price of AI CapabilityTheo Browne · Ping LabsA viral estimate of Lauren's AI spending prompts a closer look at cache pricing, benchmarks, and the changing work of coding agents.AI cost & performance코딩 에이전트Inference+1
슬라이드 5장30:37EN
Theo - t3․gg· 2026년 10월 26일Theo’s Three Skills for Reviewing and Shipping with Coding AgentsTheo Browne · Ping LabsHow sol-loop, full-send and full-stop encode review, verification and different levels of merge authority.Agent skills코딩 에이전트Code review & verification+2
슬라이드 2장0:43EN
Theo - t3․gg· 2026년 10월 23일Theo Distinguishes Security Vulnerabilities from Active AttacksTheo Browne · Ping LabsA short explanation of why disclosed software flaws and reported attacks are different kinds of security news.CybersecuritySoftware engineering
슬라이드 6장29:22EN
Theo - t3․gg· 2026년 10월 22일Theo on Security Vulnerabilities, Stolen API Keys and AITheo Browne · Ping LabsA look at the gap between vulnerability disclosure and patching, and a speculative account of why stolen inference keys may be valuable.CybersecurityAI securitySoftware engineering+1
슬라이드 4장31:13EN
Theo - t3․gg· 2026년 10월 20일Theo on Why Smarter Models Help More Than DevelopersTheo Browne · Ping LabsFrom game modifications to compiler experiments, Theo revisits his assumptions about who benefits from more capable AI.코딩 에이전트Developer productivityHuman-AI Collaboration+1