# Using Claude Code: The Unreasonable Effectiveness of HTML

**Author:** [Thariq](https://x.com/trq212) (@trq212)
**Published:** May 8, 2026
**Source:** https://x.com/trq212/status/2052809885763747935
**Examples:** https://thariqs.github.io/html-effectiveness

---

## Overview

Markdown has become the dominant file format used by AI agents to communicate with humans. But as agents have grown more powerful, Thariq argues Markdown has become a restricting format. He has switched to **[HTML](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23htmlEffectiveness)** as the preferred output format — finding it superior for information density, visual clarity, ease of sharing, two-way interaction, data ingestion, and joy.

> "I feel more in the loop than ever before when using HTML."

---

## Six Principles: Why HTML Beats Markdown

### [Information Density](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23kpInfoDensity)
HTML can represent almost any set of information Claude can read — tables, CSS styling, SVG illustrations, code snippets with `<script>` tags, JavaScript interactions, spatial data using absolute positions, and images. Markdown forces inefficient workarounds like ASCII diagrams and Unicode color estimation.

### [Visual Clarity & Readability](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23kpVisualClarity)
People stop reading Markdown files over 100 lines. HTML organizes structure visually with tabs, illustrations, links, and mobile responsiveness — the chance of someone actually reading your output is dramatically higher.

### [Ease of Sharing](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23kpSharing)
Most browsers don't render Markdown natively. HTML files can be uploaded to S3 and shared as links — colleagues open them anywhere, on any device. No attachments needed.

### [Two-Way Interaction](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23kpInteraction)
HTML enables sliders, knobs, and interactive controls. The user tweaks a design in the browser, clicks "copy as prompt," and pastes the result back into Claude Code — closing the human-agent feedback loop.

### [Data Ingestion](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23kpDataIngestion)
Claude Code can read your file system, MCPs (Slack, Linear), browser history, and git — synthesizing far more context into a single HTML document than ClaudeAI or Claude Design.

### [Joyful Creation](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23kpJoy)
Making HTML documents with Claude is just more fun. The human feels more involved and invested in the creation. "That by itself is enough."

---

## Five Use Cases

### [Specs, Planning & Exploration](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23ucSpecs)
Brainstorm options in a grid, create mockups, write implementation plans with data flow diagrams. From exploration through implementation.

### [Code Review & Understanding](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23ucCodeReview)
Render annotated diffs with inline margin notes, color-coded severity, and flowcharts. Thariq attaches an HTML code explainer to every PR.

### [Design & Prototypes](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23ucDesign)
Sketch designs in HTML even when the end surface is not HTML. Claude Design is based on HTML for this reason. Add sliders and knobs to tune animations.

### [Reports, Research & Learning](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23ucReports)
Synthesize information across Slack, codebase, git history, and the web into readable reports, interactive explainers, or slideshows with SVG diagrams.

### [Custom Editing Interfaces](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23ucEditors)
Throwaway single-purpose UIs for reordering tickets, tuning prompts, or editing config. Always end with a "copy as JSON" or "copy as prompt" export button.

---

## How to Adopt HTML as Your Output Format (7 Steps)

1. **[Start Simple](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23step1)** — Just ask Claude to "make a HTML file." No skill needed.
2. **[Pick Your First Use Case](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23step2)** — Convert one Markdown workflow to HTML — a spec, review, or report.
3. **[Create a Design System](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23step3)** — Point Claude at your codebase for a styling reference file.
4. **[Use the Frontend Design Plugin](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23step4)** — Improve aesthetic quality of generated HTML.
5. **[Add Export Buttons](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23step5)** — Every interactive editor needs a copy-prompt mechanism.
6. **[Upload for Sharing](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23step6)** — S3-hosted HTML links are dramatically easier to share than Markdown attachments.
7. **[Embrace the Joy](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23step7)** — Making HTML with Claude is more fun and involving.

---

## FAQ

**Q: [Why HTML instead of Markdown?](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23faq1)**
A: HTML conveys far richer information — tables, SVG, CSS, JS. Markdown beyond 100 lines stops being read. HTML documents are more likely to actually be read.

**Q: [Isn't HTML less token-efficient?](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23faq2)**
A: Yes, but expressiveness and readability produce better output. With 1M context in Opus 4.7, the extra tokens are not noticeable.

**Q: [How do I view the HTML file?](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23faq3)**
A: Open locally in a browser, or upload to S3 for a shareable link. Browsers render HTML natively.

**Q: [Doesn't HTML take longer to generate?](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23faq4)**
A: Yes — 2-4x longer. But people read the output, quality is higher, and the process feels more invested.

**Q: [What about version control?](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23faq5)**
A: HTML diffs are noisy — the biggest downside. But agent-mediated editing means diff noise matters less in practice.

**Q: [How to avoid ugly HTML?](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23faq6)**
A: Use the frontend design plugin. For company styling, create a design system file from your codebase.

**Q: [What are the main use cases?](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23faq7)**
A: Specs/Planning, Code Review, Design/Prototypes, Reports/Research, and Custom Editing Interfaces.

**Q: [How is Claude Code different from Claude Design for HTML?](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23faq8)**
A: Claude Code ingests far more context — filesystem, MCPs, git, browser. Unavailable in other Claude products.

**Q: [Do I need a special skill?](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23faq9)**
A: No. Just ask for a HTML file. Start prompting from scratch before building a skill.

**Q: [When does Thariq still use Markdown?](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23faq10)**
A: He has stopped altogether — but acknowledges being an HTML maximalist. Adopt incrementally.

**Q: [What is the copy-prompt pattern?](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23faq11)**
A: Every interactive editor exports what you did back into a prompt pasteable into Claude Code.

**Q: [Why does HTML make him feel more in the loop?](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23faq12)**
A: HTML documents are visually engaging — he reads them in depth instead of passively accepting agent output.

---

## Glossary

- **[HTML Effectiveness](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23htmlEffectiveness)** — HTML as a superior AI agent output format over Markdown.
- **[Agent Output Format](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23agentOutputFormat)** — The file format AI agents use to communicate results to humans.
- **[HTML vs. Markdown](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23htmlVsMarkdown)** — Tradeoffs between the two formats for AI output.
- **[AI Collaboration](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23aiCollaboration)** — HTML output makes humans feel more invested in AI creation.
- **[Copy-as-Prompt](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23copyPrompt)** — Export buttons turning UI actions into pasteable Claude Code prompts.
- **[Frontend Design Plugin](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23frontendDesign)** — Claude Code plugin for aesthetic HTML output.
- **[Design System File](https://linkeddata.uriburner.com/describe/?uri=https%3A%2F%2Fx.com%2Ftrq212%2Fstatus%2F2052809885763747935%23designSystem)** — Company styling reference for consistent HTML across sessions.

---

## Related Resources

- [Original X Post](https://x.com/trq212/status/2052809885763747935)
- [HTML Examples Gallery](https://thariqs.github.io/html-effectiveness)
- [Thariq on X](https://x.com/trq212)
- [RDF Knowledge Graph](../rdf/unreasonable-effectiveness-html-deepseek_v4pro-1.ttl)
- [HTML Infographic](../webpages/unreasonable-effectiveness-html-deepseek_v4pro-1.html)

---

*Generated by kg-generator skill · Powered by DeepSeek V4 Pro · May 11, 2026*