Veille technologique · Fiche · 2026-05-10

The Unreasonable Effectiveness of HTML Pourquoi l'équipe Claude Code bascule de Markdown à HTML comme format de sortie par défaut

Auteur
Thariq Shihipar · Engineer & serial entrepreneur · équipe Claude Code chez Anthropic · @trq212
Source
x.com/i/status/2052809885763747935
Gallery
thariqs.github.io/html-effectiveness
Identifiant
shihipar-claude-code-html-unreasonable-effectiveness-markdown-2026-05-10
Ton
Article-manifeste praticien · pédagogique-démonstratif · ~1500 mots · insider Anthropic

Veille — compression synthétique

Article-manifeste de Thariq Shihipar (équipe Claude Code chez Anthropic) qui annonce un changement de format de sortie par défaut pour les agents : remplacer Markdown par HTML. Markdown, format dominant depuis l'arrivée des agents (simple, portable, éditable), est devenu un goulot d'étranglement à mesure que les artefacts générés deviennent plus longs et plus riches. Au-delà de ~100 lignes, plus personne ne lit un fichier Markdown. HTML résout six limites simultanément : densité d'information, clarté visuelle, partage, interactivité bidirectionnelle, ingestion contextuelle native à Claude Code, et plaisir. Cinq usages canoniques détaillés (specs/plans, PR review, design, rapports, throwaway editors). Anti-pattern explicite : "don't turn this into a /html skill". FAQ honnête sur les downsides (génération 2-4× plus lente, diffs HTML bruyants).

Thèse en une ligne

"I've started preferring HTML as an output format instead of Markdown and increasingly see this being used by others on the Claude Code team."

Trois facteurs convergents motivent ce basculement :

  1. Les agents produisent des specs/plans plus longs et plus riches qu'avant.
  2. L'auteur (et son entourage) n'édite plus manuellement ces fichiers — il prompte Claude pour les éditer. L'avantage historique de Markdown ("éditable à la main") disparaît.
  3. Opus 4.7 + 1MM context window absorbe sans douleur les tokens supplémentaires du HTML.
Markdown
  • Plat au-delà de 100 lignes
  • Diagrammes ASCII (pis-aller)
  • Couleurs "estimées" avec caractères Unicode
  • Difficile à partager (pas de rendu natif)
  • Unidirectionnel (lecture seule)
HTML
  • Tables, SVG, CSS, canvas, scripts
  • Mise en page responsive
  • Lien S3 directement ouvrable
  • Sliders + "copy as prompt" pour reboucler
  • Joyful

Les 6 raisons

HTML output format 1. Densité info tables · SVG · CSS · scripts 2. Clarté visuelle tabs · responsive · images 3. Partage lien S3 ouvrable directement 4. Interactivité sliders · copy as prompt 5. Ingestion contexte code · MCP · git · Chrome 6. Joyful engagement praticien
01 / DENSITÉ D'INFORMATION

Tables, CSS, SVG, scripts, canvas, images

"Almost no set of information that Claude can read that you cannot fairly efficiently represent with HTML." Privé de cette expressivité, le modèle fait des diagrammes ASCII et estime même les couleurs avec des caractères Unicode.

02 / CLARTÉ VISUELLE

Mise en page navigable, responsive

Au-delà de 100 lignes en Markdown, plus personne ne lit. HTML organise structurellement avec tabs, illustrations, liens. Lecture différenciée selon le form factor.

03 / PARTAGE

Upload S3 → lien direct

Markdown se partage mal (pas de rendu navigateur). HTML s'ouvre partout. "The chance of someone actually reading your spec is much much higher if it's in HTML."

04 / INTERACTIVITÉ

Bidirectionnelle, reboucle vers Claude

Sliders pour régler une animation, knobs pour ajuster un algorithme, boutons "copy as JSON / copy as prompt" pour re-injecter les choix dans Claude Code.

05 / INGESTION CONTEXTE

Avantage natif Claude Code

Différenciation vs ClaudeAI ou Claude Design : agrégation codebase + MCP (Slack, Linear) + git history + Chrome → contexte large pour générer un artefact riche.

06 / JOYFUL

L'argument émotionnel assumé

"Making HTML documents with Claude is just more fun and makes me feel more involved and invested in the creation, and that by itself is enough."

5 use cases canoniques

1

Specs, planning & exploration

Au lieu d'un plan Markdown linéaire, faire émerger un web de fichiers HTML : brainstorm de 6 directions en grille comparative, expansion d'une option, mockups, code snippets, puis plan d'implémentation final.

"I'm not sure what direction to take the onboarding screen. Generate 6 distinctly different approaches — vary layout, tone, and density — and lay them out as a single HTML file in a grid so I can compare them side by side. Label each with the tradeoff it's making."
2

Code review & understanding

HTML rend les diffs lisibles : annotations marginales inline, color-coding par sévérité, flowcharts. "I find this often works better than the default GitHub diff view, and I attach a HTML code explainer to every PR I make now."

"Help me review this PR by creating an HTML artifact that describes it. I'm not very familiar with the streaming/backpressure logic so focus on that. Render the actual diff with inline margin annotations, color-code findings by severity."
3

Design & prototypes

Claude Design est déjà basé sur HTML. Prototyper animations avec sliders, exporter les paramètres réglés vers React/Swift/etc.

"I want to prototype a new checkout button. When clicked it does a play animation and then turns purple quickly. Create a HTML file with several sliders and options to try different options on this animation, give me a copy button to copy the parameters that worked well."
4

Reports, research & learning

Synthèse multi-sources (Slack, codebase, git history, web) en un document HTML lisible. Format long, explainer interactif, slideshow. L'auteur a fait générer son article sur prompt caching depuis l'historique git.

"I don't understand how our rate limiter actually works. Read the relevant code and produce a single HTML explainer page: a diagram of the token-bucket flow, the 3-4 key code snippets annotated, and a 'gotchas' section at the bottom. Optimize it for someone reading it once."
5

Custom editing interfaces (throwaway editors)

Éditeur jetable single-file, purpose-built pour une donnée précise. "Not a product, or a reusable tool, but a single HTML file." Finit toujours par un export "copy as JSON/markdown/prompt" re-injectable dans Claude Code.

Patterns : drag-and-drop de tickets Linear en colonnes Now/Next/Later/Cut · éditeur de feature flags avec warnings de dépendances · prompt-tuner side-by-side avec compteur tokens · curation de datasets · pickers de couleurs/easing curves/cron schedules.

"I need to reprioritize these 30 Linear tickets. Make me an HTML file with each ticket as a draggable card across Now / Next / Later / Cut columns. Pre-sort them by your best guess. Add a 'copy as markdown' button that exports the final ordering with a one-line rationale per bucket."

Anti-skill-ification : un mouvement remarquable

"I'm a little bit afraid that people will read this article and turn it into a /html skill or something. While there might be some value in that, I want to emphasize that you don't need to do much to get Claude to do this. You can just ask it to 'make a HTML file'."

Mouvement notable venant d'un insider de l'écosystème qui pousse les Claude Skills. Shihipar refuse de canoniser sa pratique en skill : la pratique est trop contextuelle pour être figée. Le bon réflexe est de "prompter from scratch" jusqu'à trouver ses propres patterns.

Tension avec : Lattice (atoms/molecules/refiners), Vincent Superpowers, Karpathy skills-maxi. Position intermédiaire possible : skills pour les patterns stables (gem writing, design system), prompt nu pour les pratiques émergentes.

FAQ honnête (downsides assumés)

Isn't it less token efficient?

HTML utilise plus de tokens. Mais avec le 1MM context d'Opus 4.7, l'augmentation devient peu sensible dans la fenêtre de contexte. "The added expressiveness of HTML and the much higher likelihood of me reading it means I get overall better output."

Doesn't this take longer to generate?

2-4× plus longtemps que Markdown. Assumé : "the results are worth it."

What about version control?

Downside non résolu. "This is honestly one of the biggest downsides of HTML, HTML diffs are noisy and hard to review compared to Markdown."

How do I view the HTML file?

Ouvrir localement dans un navigateur (on peut demander à Claude de l'ouvrir) ou uploader à S3 pour un lien partageable.

How do I get Claude to match my taste / not make it ugly?

Utiliser le frontend design plugin. Pour matcher le style de votre boîte : créer un design system HTML unique en pointant Claude vers la codebase, puis le référencer comme blueprint pour les autres fichiers HTML générés.

When do you use Markdown now?

"I have honestly stopped using markdown altogether for almost everything, but I'm probably far on the HTML maximalist side of things." Position assumée comme extrême par l'auteur lui-même.

Résumé 400 mots

Thariq Shihipar (équipe Claude Code chez Anthropic) publie un article-manifeste annonçant un changement de format de sortie par défaut pour les agents : remplacer Markdown par HTML. Le diagnostic : Markdown a régné comme format dominant entre humain et agent (simple, portable, éditable) mais est devenu restrictif à mesure que les agents produisent des artefacts plus longs et plus riches. Au-delà de ~100 lignes, plus personne ne lit un fichier Markdown — et comme l'auteur n'édite plus manuellement ses specs (il prompte Claude pour les éditer), l'avantage historique de Markdown disparaît.

Six raisons justifient le basculement vers HTML : (1) densité d'information — tableaux, CSS, SVG, scripts, canvas, images ; "almost no set of information that Claude can read that you cannot represent with HTML" ; (2) clarté visuelle — tabs, illustrations, responsive mobile ; (3) partage — upload S3 → lien direct, taux de lecture multiplié ; (4) interactivité bidirectionnelle — sliders, knobs, boutons "copy as prompt" pour reboucler ; (5) ingestion contextuelle native à Claude Code (codebase + MCP + git + Chrome) ; (6) plaisir"it's joyful".

L'auteur formalise cinq usages canoniques : (a) specs/plans/exploration en grille comparative ; (b) PR review avec diff annoté inline et code-coloring par sévérité ; (c) design & prototypes avec sliders d'animation ; (d) rapports/recherche (son explainer sur prompt caching généré depuis l'historique git) ; (e) éditeurs jetables custom — single-file HTML purpose-built pour une donnée (drag-and-drop de tickets Linear, éditeur de feature flags, prompt-tuner side-by-side) finissant toujours par un export "copy as JSON/markdown/prompt" re-injectable.

Anti-pattern explicite : l'auteur refuse la skill-ification de sa pratique. "I'm a little bit afraid that people will read this article and turn it into a /html skill. You don't need to do much — just ask it to 'make a HTML file'." La pratique est trop contextuelle pour être figée.

FAQ honnête : HTML coûte plus de tokens mais le 1MM context d'Opus 4.7 absorbe ; génération 2-4× plus lente ; diffs HTML bruyants = downside non résolu, assumé.

Méta-thèse finale : HTML comme antidote au cognitive surrender. "I had begun to fear that because I had stopped reading plans in depth I would simply have to leave Claude to make its choices. But I feel more in the loop than ever before when using HTML."

Articulation avec la veille corpus

Graphe de connaissance

Triples

SujetTypePrédicatObjetTypeConf.Temp.Source
Thariq ShihiparPERSONNEtravaille_chezAnthropicORGANISATION0.97DYNAMIQUEdéclaré_article
Thariq ShihiparPERSONNEfait_partie_deéquipe Claude CodeORGANISATION0.97DYNAMIQUEdéclaré_article
Thariq ShihiparPERSONNErecommandeHTML comme format de sortie par défautMETHODOLOGIE0.98ATEMPORELdéclaré_article
HTMLTECHNOLOGIEremplaceMarkdown pour artefacts agentiques longsMETHODOLOGIE0.95DYNAMIQUEdéclaré_article
MarkdownTECHNOLOGIEest_devenurestrictif au-delà de 100 lignesCONCEPT0.92DYNAMIQUEdéclaré_article
HTMLTECHNOLOGIEoffredensité d'information (tables, CSS, SVG, scripts, canvas)CONCEPT0.97ATEMPORELdéclaré_article
HTMLTECHNOLOGIEpermetinteractivité bidirectionnelle (sliders, copy as prompt)CONCEPT0.96ATEMPORELdéclaré_article
HTMLTECHNOLOGIEamélioretaux de lecture des specs et rapportsCONCEPT0.93ATEMPORELdéclaré_article
HTMLTECHNOLOGIEest_antidote_àcognitive surrender / comprehension debtCONCEPT0.90ATEMPORELinféré
Claude CodeTECHNOLOGIEingèrecodebase + MCP + git history + ChromeCONCEPT0.95DYNAMIQUEdéclaré_article
Opus 4.7TECHNOLOGIEdispose_de1MM context windowCONCEPT0.97STATIQUEdéclaré_article
1MM context Opus 4.7CONCEPTabsorbecoût tokens supplémentaire du HTMLCONCEPT0.93ATEMPORELdéclaré_article
Throwaway HTML editorMETHODOLOGIEtermine_parexport copy as JSON / markdown / promptCONCEPT0.96ATEMPORELdéclaré_article
Thariq ShihiparPERSONNEs_oppose_àskill-ification prématurée du pattern HTMLCONCEPT0.95ATEMPORELdéclaré_article
HTML diffsTECHNOLOGIEsontbruyants et difficiles à reviewer (downside assumé)CONCEPT0.92ATEMPORELdéclaré_article
Génération HTMLMETHODOLOGIEest2-4× plus lente que MarkdownCONCEPT0.88ATEMPORELdéclaré_article
Frontend design pluginTECHNOLOGIEaideClaude à produire du HTML styléCONCEPT0.85ATEMPORELdéclaré_article
Design system HTML uniqueMETHODOLOGIEsert_deréférence pour cohérence cross-fichiersCONCEPT0.88ATEMPORELdéclaré_article
Article HTML effectivenessEVENEMENTs_articule_avecdesign.md de Meng To (HTML = finished dish)CONCEPT0.93ATEMPORELinféré
Article HTML effectivenessEVENEMENTrépond_àcomprehension debt d'OsmaniCONCEPT0.90ATEMPORELinféré
Claude CodeTECHNOLOGIEgénèreartefacts HTML pour specs, PR, rapports, éditeurs jetablesMETHODOLOGIE0.96ATEMPORELdéclaré_article
AnthropicORGANISATIONemploieThariq ShihiparPERSONNE0.97DYNAMIQUEdéclaré_article

Entités

EntitéTypeAttributValeurAction
Thariq ShihiparPERSONNErôleEngineer & serial entrepreneur, équipe Claude Code chez Anthropic, X @trq212AJOUT
HTML (format de sortie agent)METHODOLOGIEcatégorieFormat préféré pour artefacts agentiques richesAJOUT
Throwaway HTML editorMETHODOLOGIEcatégorieÉditeur single-file purpose-built pour une donnée, finissant par export structuréAJOUT
Anti-skill-ificationCONCEPTcatégorieRefus de figer un pattern contextuel en skill prématuréeAJOUT
Cognitive surrender (réponse)CONCEPTcatégoriePratique de rester dans la boucle décisionnelle via lisibilité HTMLAJOUT
html-effectiveness galleryTECHNOLOGIEcatégorieSite exemples de Shihipar (thariqs.github.io/html-effectiveness)AJOUT
Diff HTML bruyantCONCEPTcatégorieDownside assumé du basculement Markdown → HTMLAJOUT
Design system HTML de référenceMETHODOLOGIEcatégorieFichier HTML unique servant de blueprint stylistique inter-fichiersAJOUT
Joyful artifactCONCEPTcatégorieCritère émotionnel-pragmatique de choix de formatAJOUT
Unreasonable effectivenessCONCEPTcatégorieLignée rhétorique Wigner-Karpathy appliquée à HTML pour agentsAJOUT

Workflow découlant pour la pratique cabinet

Méta-observation : cette fiche HTML est elle-même une démonstration du pattern qu'elle décrit. La version Markdown coexiste (shihipar-claude-code-html-unreasonable-effectiveness-markdown-2026-05-10.md) — la version HTML est l'artefact de lecture, la Markdown reste l'artefact d'indexation et de knowledge graph.