The argument in one line.
HTML generates better agent outputs than Markdown because its visual rendering makes complex information faster to understand, easier to explain, simpler to prototype, and more efficient to iterate on—returning more value per token spent despite higher token costs.
Read if. Skip if.
READ IF YOU ARE…
- A developer or AI engineer currently using Markdown for agent prompts or outputs who wants to understand why HTML might improve response quality.
- A technical creator building tutorials or content around Claude, agents, or AI workflows who needs a concrete four-level framework to explain HTML-over-Markdown to an audience.
- Someone running multi-agent systems or complex Claude implementations who's hitting readability or structural limits with Markdown and wants practical adoption patterns.
SKIP IF…
- You work exclusively with non-technical stakeholders or end users — this video assumes comfort with code, markup, and agent architecture.
- You're looking for a deep technical dive into HTML rendering engines or browser behavior — this is a conceptual framework, not a systems-level breakdown.
The full version, fast.
HTML is a more effective output format than Markdown for AI agents when the goal is comprehension, communication, or visual iteration, because rendered pages compress information that would otherwise be a wall of text. The video walks through four levels where this matters: understanding complex repos or concepts by asking the agent to render explanations as a throwaway HTML page, explaining ideas to teammates and clients through HTML slides instead of Gamma or PowerPoint, prototyping visual elements like checkout buttons with interactive playgrounds, and tweaking live designs through embedded sliders that emit a patch back to the agent. Token cost is the real tradeoff, but you should judge it by return per token, not absolute usage.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Create a free account →Where the time goes.
00:00 – 00:30
01 · Cold open + promise
Pattern-interrupt question, the 9.3M-views credibility receipt, the four-levels promise.
00:30 – 01:40
02 · Tariq's core thesis
Markdown became the dominant agent format but is now restrictive (hard to read past 100 lines, no rich visuals).
01:40 – 03:13
03 · Markdown vs HTML, same data two outputs
Side-by-side renderings: Q1 sales report, API outage incident, customer reports. HTML wins on scannability for non-technical reviewers.
03:13 – 05:00
04 · Level 1, HTML for understanding things
Asks Claude Code to teach him cli-printing-press from GitHub, then converts the verbose reply into a throwaway HTML explainer page.
05:00 – 06:59
05 · Community plug + Level 2, HTML for explaining
RoboNuggets soft CTA. Then: his Agentic AI Foundations course slides are all HTML-generated by Claude Code. Microsoft engineers internally sharing AI-generated HTML for SWE/PM coordination.
06:59 – 08:33
06 · Level 3, HTML for prototyping
Asks Claude Code for 10 styles of the same Markdown-vs-HTML slide; gets 10 visual variants in one shot. Builds Tariq's checkout-button playground with live sliders.
08:33 – 09:50
07 · Level 4, HTML for tweaking things
Demos his own tweak skill: embeds an HTML control panel (title size, body size, kerning, glow, saturation) next to a live website, click bake to get a patch you paste back into Claude Code.
09:50 – 11:40
08 · But what about the cost?
Preempts the token-cost objection. Reframes as ROI per token, not absolute cost. Quotes Tariq's FAQ. Concedes HTML's drawbacks (2-4x longer to render, version control friction).
11:40 – 12:06
09 · Summary + subscribe CTA
Markdown isn't dying, but for communicating an idea, render via HTML. Plug for separate HTML-slides lesson.
Lines worth screenshotting.
- HTML output from Claude Code is more readable, shareable, and visually actionable than Markdown for any document longer than 100 lines.
- The core difference between Markdown and HTML as agent output formats is not content but rendering — HTML displays colors, tables, and visual hierarchy that Markdown cannot.
- An incident report rendered in HTML can direct the reader's eye to the root cause with a colored box; the same report in Markdown requires top-to-bottom linear reading.
- Asking Claude to build a throwaway HTML page explaining a concept produces a shareable artifact more useful for presenting to non-technical stakeholders than a wall of agent output.
- HTML slides generated by Claude Code serve the same purpose as Gamma or PowerPoint decks but are built in seconds from a prompt rather than through a drag-and-drop interface.
- The token cost of generating HTML output is justified by the ROI-per-token of delivering something directly usable rather than something that requires reformatting before use.
- Planning documents rendered in HTML — with sprint tracks, dependency arrows, and status indicators — are faster to review than the same information in a flat Markdown table.
- The four levels of HTML use with Claude Code are: understand (learn a concept visually), explain (present to others), prototype (build a functional UI), and tweak (refine iteratively).
- A Claude Code skill that encodes HTML mastery and is shared with the agent at session start makes every subsequent output HTML-native without requiring per-prompt instructions.
- An Anthropic engineer's viral article (9.3M views in 48 hours) about HTML's effectiveness is functionally an internal endorsement of a workflow pattern that was previously underground.
- Diagrams and visual flowcharts generated in HTML by Claude Code communicate system architecture to non-technical audiences in a format that text descriptions cannot match.
- The key insight from Tariq's article is that Markdown was adopted because it is easy to write, not because it is the best format for agent output — HTML is better for the latter purpose.
Steal the react-to-viral-article + four-level framework.
Claude Code playbook
Jay didn't write a viral article, he packaged one. The format is repeatable: find a high-authority technical post, lift its core list, demo each item on screen, gate a downloadable skill behind your community.
- Find a viral technical post from a credible source (Anthropic engineer, OpenAI researcher, GitHub eng) within 48-72 hours of publication.
- Lift the structural list (here: four levels) and use it as your chapter spine. Don't invent, translate.
- For each item, show a 20-30 second screen-record demo in Claude Code. Visual proof, not narration.
- Build a single skill file that summarizes the whole framework. That's your lead magnet, gated behind community signup.
- Preempt the obvious objection (here: token cost) with a reframe (ROI per token). Quote the original author's FAQ for authority.
- Make your B-roll itself an example of the thing you're teaching. Jay's slides are HTML-rendered by Claude Code, meta-loop intentional.
- Hard CTA mid-video (community + skill), soft CTA at end (subscribe + watch-next).
Terms worth knowing.
- Markdown
- A lightweight plain-text format that uses simple symbols (like # for headings and ** for bold) to indicate structure, widely used for AI agent instructions and documentation files because it's human-readable without rendering.
- HTML (Hypertext Markup Language)
- The standard language for creating web pages, capable of rendering colors, tables, animations, and interactive elements — proposed here as a richer alternative to Markdown for AI agent outputs that need to be visually reviewed.
- render
- The process of converting raw markup or code into its visual display — for example, converting Markdown or HTML text into formatted, styled output that appears in a browser or preview panel.
- throwaway HTML page
- A temporary, single-purpose HTML file generated by an AI agent to display information visually for immediate review — discarded after use rather than kept as a permanent artifact.
- plan mode
- A Claude Code operating mode in which the agent outlines its intended steps in a structured plan before taking any actions, allowing the user to review and approve before execution begins.
- token
- The basic unit of text that AI language models process — roughly three to four characters or about three-quarters of a word — used to measure the cost and context-window usage of AI interactions.
- ROI per token
- A reframe of AI cost analysis that evaluates whether the value gained from a more expensive interaction (like rendering HTML) outweighs the additional tokens spent compared to a cheaper but less useful alternative.
- version control
- A system that tracks changes to files over time, allowing teams to see edit history and revert to earlier versions — Markdown files integrate better with version control tools than HTML because their plain-text diffs are easier to read.
- kerning
- The spacing between individual characters in a font — adjustable in CSS-based HTML layouts and referenced here as an example of the fine-grained design control that HTML enables.
- Gamma
- An AI-powered presentation tool that generates slides from a text prompt — mentioned here as a tool that HTML-generated slides can potentially replace for sharing information visually.
Things they pointed at.
00:12linkTariq's 'Using Claude Code: The Unreasonable Effectiveness of HTML' article
04:08toolcli-printing-press (GitHub repo)
05:30toolGamma / PowerPoint (as foil)
06:00productAgentic AI Foundations course (own)
06:36linkNicholas Bustamante's interactive HTML version of Tariq's article
06:54linkBin Liu (VP Product, Agent) note
08:00toolhtml-it skill (own, gated behind RoboNuggets-free, code n54)
08:33tooltweak skill (own)
Lines you could clip.
00:00
“What if the way you're communicating with your agents is restricting how good their output can be?”
01:10
“Markdown files are actually sometimes quite restrictive, especially if you use markdown files for planning or as output.”
10:15
“It is sometimes better to just think of the lens as a return on investment. With the time and tokens that you are spending with your agent, are you actually getting the return and the value from that interaction?”
11:00
“While Markdown often uses fewer tokens, the added expressiveness of HTML and the much higher likelihood of me reading it means you would get better overall output.”
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
metaphoranalogystory
00:00What if the way you're communicating with your agents is restricting how good their output can be? Well, a senior engineer on the Cloud Code team just published this article making exactly that case, and it already pulled 9,300,000 views in just two days.
00:13His argument is that HTML is more powerful than Markdown if you know how to use it. So I thought I'll show you what made this article land with millions of people and the four levels by which you can use HTML to work better with your agents. Let's dive into it.
00:30So this person, Tariq, he's part of the technical team of Cloud Code of Entropic, and he recently published this article, like, two days ago that's titled, using Cloud Code, the unreasonable effectiveness of HTML. And you can see it went quite viral. Let's see.
00:44It already has 9,300,000 views forty eight hours after it was written. And I read the whole thing, and it is actually quite useful.
00:52And I tend to agree with his points in here, so I thought it might be useful for you as well. But just to go through the sort of key points that he mentioned here as his core thesis, he's saying that markdown, even though it has become the dominant file format used by agents, which are present when you're making like your call .md's or your agents.md's or your design.md's.
01:10Since agents have become more and more powerful, he argues that markdown files are actually sometimes quite restrictive, especially if you use markdown files for planning or as output. It is actually quite difficult to read or at least takes time to read if it's more than a 100 lines, and I tend to agree. That's why from my experience and it seems from Tariq's as well, there is now this sort of as an output format instead of markdown.
01:37And if in case you don't know the difference between those two, both of these in their essence is all just text. But the key difference between them is how they render to you as the user. And by render, we just mean how they appear on your screen.
01:49For example, if you look at your markdown files, all they are are text files with basically these hashtags or number signs connoting the heading or the bigger text in your whole document, and then you have the body written down in here. So very clean, still very readable by people. But if you just compare it with HTML, stands for hypertext markup language, you can see how much more visual it is.
02:11It can render colors for you. It can render tables and so on.
02:15And in fact, just to go through some more examples in here so you can differentiate between the two before we go into the actual use cases. Let's say you're reviewing a report for an API outage incident. If you render it in markdown, it is still formatted like this where you need to read from top to bottom.
02:29But if you are rendering it via HTML, you can see it's much more visual. You can point the viewer to key parts in here, like, for example, this colored box with the root cause if you think that is more important to be communicated in order to drive your point better. If you have some sort of customer report, it is so much easier to visualize everything using HTML versus, a markdown document, which just list those data points for you.
02:51This is especially true when it comes to planning, which is something that we'll show more later. But let's say you are planning for your next sprint or your next project, if you just have those rendered in markdown, it takes much longer to review them just because of the nature of how they're being rendered versus if you render them visually through HTML just like this one.
03:09So given that, when should you now use HTML instead of markdown? So I'll be giving a few examples, but if you want to try this out yourself and also instantly give your agent a bit of HTML mastery with the stuff that I'll show here, you can find this skill I made which basically just summarizes all the knowledge and all the examples that I will be showcasing in this video.
03:27And you can just give this whole thing to your agent, and you can have it custom fitted for your own setup. So the first thing where HTML really excels in is for helping you understand things. For instance, the other day, I was trying out this new printing press toolkit over at GitHub in this repository, and I actually wanted to understand how it works under the hood.
03:45So naturally, what I did is open up Cloud Code, give it the GitHub URL of this repo, and I just ask it to teach me how printing press works, which is this toolkit, and what are the general steps that it takes. Now it actually gave me a pretty good reply in here, but one of the problems with these agents is that they are actually sometimes quite verbose.
04:02And if you're reading through just a wall of text to understand something, it is not always the best experience. And so from here, what I just did is to ask it to build a throwaway HTML page for me that basically captures all of that sort of explanations that it has, but put it in a nicer format that I can read to. And if you watched that video that I published a day ago, this is basically coming from that workflow where I ask Cloud Code to render this in HTML.
04:28And it's, number one, much nicer and easier to understand. And number two, it's also much easier to present to other people. And then to take it further, because I wanted to explain specifically this step four, I just copied that part that it said, and I asked it to explain it simply.
04:42And again, it gave me this . So what I just did is to ask it to make a separate HTML slide explaining that line and to add it as slide two for this HTML page. And so it was able to build that, and it was also able to, in parallel, give me this nice visual, which again is much easier to communicate with.
05:00And by the way, if you're interested in going from just using AI to getting paid for it, then check out the Robo Nuggets community down in the description. We've got founders in there who landed their first client in weeks, live build sessions where we create this stuff together, and the actual templates behind what I just showed in this video.
05:13The community is also the reason these lessons get made, so see that below if that's for you. Now the next thing that I think HTML is quite outstanding on is when you need to explain things to other people, which is pretty much what I'm doing here. Right?
05:24So all of these slides, they are all formatted in HTML. And you can see just how much more shareable and explainable they are versus if we are viewing like a text file together, especially for nontechnical people, product managers, and people who are more, let's say, output and visual based. This type of visual rendering and icons is just a much more better experience when you need to explain and communicate things to your peers.
05:45One great example of this is the emergence of using HTML slides in place of tools like Gamma or PowerPoint. For example, this one that you are seeing, which is our Agenetic AI foundations course that we do in person as well as in the community, All of these are generated by Cloud Code, all using HTML. So you can see it's more engaging.
06:03It has nice visuals. It has nice animations, and you can even create diagrams or visuals like this, which is much more visual versus having to explain everything through text. And the thing with HTML is you actually don't need to have those fancy animations in order to get some benefit from it.
06:19So you can see here, I saw this post from Nicholas, which was actually a good application because he basically turned the article from Tarik into this interactive HTML page. And he says here that from within Microsoft, their engineers sent AI generated HTML to coordinate between software engineers and product managers.
06:34And I can definitely see this happening because HTML, files like this, are still information rich. But apart from that, they are also much easier to read.
06:43Here's another note by Bin Liu, who is the VP for product for agent, and they pretty much do the same thing. So it's definitely worth exploring if HTML would be sort of a good communication medium for you and your clients or your peers in order to align better on plans and documentation. The third use case for HTML is you can actually use it to prototype things, and this is very important, especially when it comes to visual design.
07:04To give an example, what I basically ask Claude Code to do is to give me 10 styles of the different HTML slides for this markdown versus HTML pack that we were building, and it gave me several prototypes that I can choose from. Right? And you can see if you were to do this sort of in markdown mode or as a plan in plan mode, then just having to read that wall of text where it describes, let's say, this prototype number seven as having a Japanese Zen theme and then this prototype number eight to have a corporate cool theme.
07:31It doesn't have that same impact or effect versus if you just quickly see all of these visual designs in one go and have them prototype those for you. To give it another good example from the article by Tariq, he gave this example prompt where he asked Cloud Code to prototype a new checkout button and to create an HTML file showing that checkout button.
07:47So I tried that prompt myself, and it gave me this playground where I can tweak the press duration. I can change the starting color of this checkout button if I wanted to, change the shape to be more circular. And then once I'm done with that, I can just copy the parameters in here and then paste it back to Cloud Code.
08:03If So you're prototyping, you can see with a simple prompt like that, you can easily create a throwaway HTML page that just gives you a lot more control when it comes to these visual assets. And just to give you a quick comparison, I sent that same prompt over at Cloud Code on planning mode, and it gave us this markdown formatted plan, which is okay.
08:19But you can see how different it is versus seeing it visually. Right? Plan mode is probably good for some use cases, but for several instances, especially for visual matters and assets, I think using HTML is just a much better experience.
08:32And, naturally, the other thing that you can use HTML for is to tweak things. To give an example, let's say you want to tweak the design of this website. What you can do is to actually embed an HTML window like this, which just lets you tweak the elements in this website, like, for example, the title size, the size of the body text.
08:48You can even have more options in here, which gives you nice sliders for, let's say, the saturation of the website if you want it a bit more colored. Also, it gives you space to adjust the kerning of the fonts. The glow of that title text is also possible.
09:01And then you can just ask Cloud Code to give you more sliders depending on what it is that you want to tweak in this website. And that is all HTML based, and that is just a skill that I made called tweak, which, again, you can just grab it below. And simply what I did here is to just invoke that skill and give it the link to that HTML file, which is basically this website that you are seeing.
09:18And then once you're done with that, similar to the other thing that we did earlier, you can just click on bake, and that gives you a nice prop in here. And if you copy that patch and give it the clogged code, then all of those changes that you wanted made will be applied to this final website. But there you can see because of the power of these agents with rendering these HTMLs, you can actually do stuff like this that wasn't really possible before in order to better your workflow, especially if you're in the business of communicating ideas, visually showing them, or even if you just want to understand things faster and better.
09:49So as you can see, HTML is quite good for a lot of use cases, but there's obviously a big question behind all of this. Right? Which is what about the cost?
09:56Because as you would rightfully ask, HTML would need more tokens. Right? And this is a completely valid question, especially since we are living in a compute constrained environment now.
10:05And it's also why I don't think HTML will replace markdowns for everything. Markdown files definitely still have their place. But one concept that I think you should consider is the ROI that you are getting from every token that you spend.
10:17Let's say for instance that you are using HTML to explain or understand things better. If you have a lot of conversations or turns with your agent in order to understand a complex topic, for example, then that might actually end up costing you more tokens versus if you just have it visualize that same concept for you. So instead of just talking about token usage as an absolute, it is sometimes better to just .
10:41Like, with the time and the tokens that you are spending with your agent, are you actually getting the return and the value from that interaction? In fact, Tariq also mentioned this in the FAQs, which I think is one of the key sections that one should read if you are reviewing this article. Basically, he says here that while markdown often uses fewer tokens, the added expressiveness of HTML and the much higher likelihood of me reading it means that you would get better overall output.
11:04And he also highlighted here some of the other drawbacks of HTML, which are important to consider and why markdown, I think, is still here to stay because HTML does take longer. So around two to four times longer to render versus markdown. And also there is another aspect around version control.
11:19So if those aspects, if those things are important to you, then using HTML for your particular use case might not be the right thing. But there, I hope you got something from that video. In summary, I think markdown files are still here to stay.
11:30Cloud. Mds are probably not gonna be renamed to cloud.htmls anytime soon.
11:34But if you need to communicate an idea or have your agent communicate an idea to yourself, then having it render things via HTML may be a good idea for you. So there, I hope that was useful. And if it is, then consider subscribing because that helps me a lot to put out more educational stuff like this.
11:48And if you want to know how I created those HTML slides, I actually made a separate lesson for it, which you can just find somewhere in this video. See you guys next time. Thank you.
The Hook
The bait, then the rug-pull.
A senior engineer on the Claude Code team just dropped an article arguing that Markdown, the default file format every agent reads and writes, is quietly throttling your output. It pulled 9.3 million views in 48 hours. Jay E lifts the four-level framework and runs it end-to-end so you can decide whether to rip Markdown out of your own stack.
Named ideas worth stealing.
00:22list
The Four Levels of HTML for Agents
- Understand things (turn verbose agent replies into readable HTML explainers)
- Explain things to others (HTML slides instead of Gamma/PowerPoint, share with non-technical peers)
- Prototype things (ask for N style variants, get visual prototypes instead of wall-of-text plans)
- Tweak things (embed HTML control panels next to live pages, bake-to-patch workflow)
Tariq's four use cases for using HTML as the output medium between you and your agent.
Steal forDirect lift for any Joe video explaining Claude Code workflows. Pair each level with a JoeFlow / ModBoard / Mod Producer demo.
10:00concept
ROI per token
Reframe of token cost: don't measure absolute tokens, measure whether the time + tokens you spent actually returned value.
Steal forCounter-argument to every 'AI is too expensive' objection. Joe can use this exact frame for any pricing or context-window discussion.
02:10concept
Same data, two outputs
Visual proof-pattern: show identical underlying data rendered as raw Markdown vs styled HTML, side-by-side. Used for sales reports, incident postmortems, voice-of-customer notes.
Steal forSales-page visual for any before/after Joe pitches: JoeFlow transcripts (raw vs rewriter), Mod Boss compiles (chat scrollback vs structured).
How they asked for the click.
VERBAL ASK
11:40subscribe
“Consider subscribing because that helps me a lot to put out more educational stuff like this. And if you want to know how I created those HTML slides, I actually made a separate lesson for it, which you can just find somewhere in this video.”
Soft tail CTA: subscribe + watch-next pointer. The harder CTA fires mid-video at 04:57 with the community pitch + skill download. Two-stage funnel: free skill via community signup is the lead magnet, paid Agentic AI Masterclass is the upsell.
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
AFFILIATECommission earned if you click.
Visual structure at a glance.
