Using Claude Code: The Unreasonable Effectiveness of HTML

Punti chiave

1. Autore. Thariq Shihipar — Ingegnere e imprenditore seriale, team Claude Code di Anthropic. X: @trq212. Sito: thariqs.github.io/html-effectiveness (galleria di esempi HTML generati da Claude Code, organizzata per categoria d'uso).
2. Data. ~2026-05-10 (articolo recente, cita Opus 4.7 con contesto da 1MM, ID snowflake di X ~ maggio 2026). URL: https://x.com/i/status/2052809885763747935.
3. Tesi in una riga. "I've started preferring HTML as an output format instead of Markdown" — il formato di output predefinito per gli artefatti agentici dovrebbe passare da Markdown a HTML.
4. Perché ora?. tre fattori convergenti: 1. Gli agenti producono specifiche/piani più lunghi e ricchi di prima. 2. L'autore (e chi gli sta intorno) non modifica più manualmente questi file — chiede a Claude di modificarli → il vantaggio del "Markdown modificabile a mano" scompare. 3. Opus 4.7 + contesto da 1MM assorbe senza sforzo i token extra dell'HTML.
5. Le 6 ragioni (perché HTML). 1. Densità informativa — tabelle, CSS, SVG, script, canvas, immagini, posizionamento assoluto, dati spaziali. "Almost no set of information that Claude can read that you cannot fairly efficiently represent with HTML." 2. Chiarezza visiva e facilità di lettura — tab, illustrazioni, link, responsive per mobile. Oltre 100 righe di Markdown, nessuno le legge più. 3. Facilità di condivisione — upload su S3 → link diretto. "The chance of someone actually reading your spec is much much higher if it's in HTML." 4. Interazione bidirezionale — slider, manopole, pulsanti "copy as prompt" per il rientro in Claude Code. 5. Ingestione dei dati — Claude Code aggrega codebase + MCP (Slack, Linear) + cronologia git + Chrome → contesto più ampio rispetto a ClaudeAI o Claude Design. 6. È piacevole — "makes me feel more involved and invested in the creation, and that by itself is enough".
6. Anti-pattern osservato in Markdown. il modello, privato dell'espressività visiva, produce diagrammi ASCII o approssima i colori con caratteri Unicode (l'articolo include uno screenshot di Claude Code che tenta di "mostrare un colore" in Unicode → un segnale assurdo dell'inadeguatezza del formato).
7. Riferimento retorico. "The Unreasonable Effectiveness of HTML" è un omaggio a "The Unreasonable Effectiveness of Mathematics" (Wigner, 1960) e alla tradizione dei titoli "unreasonable effectiveness of X" nel ML (Karpathy 2015 sulle RNN).
8. 5 casi d'uso canonici approfonditi. 1. Specifiche, pianificazione ed esplorazione — "a web of HTML files": brainstorming di 6 direzioni in una griglia comparativa, espansione di un'opzione, mockup, snippet di codice, piano di implementazione. Prompt di esempio: "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." 2. Code Review e comprensione — allegare un explainer HTML a ogni PR. Diff renderizzato inline con annotazioni a margine, colorazione del codice per gravità. Prompt di esempio: "Render the actual diff with inline margin annotations, color-code findings by severity." 3. Design e prototipi — Claude Design è esso stesso basato su HTML. Prototipazione di animazioni con slider e pulsante "copy parameters" per esportare i valori regolati. 4. Report, ricerca e apprendimento — l'autore ha fatto generare il proprio articolo sul prompt caching leggendo la cronologia git. HTML long-form, explainer interattivo, presentazione a diapositive. 5. Interfacce di editing personalizzate (editor usa e getta) — un editor usa e getta a file singolo per uno specifico insieme di dati, che termina sempre con un export (copy as JSON/markdown/prompt) re-iniettabile in Claude Code. Esempi: drag-and-drop di 30 ticket Linear nelle colonne Now/Next/Later/Cut, un editor di feature flag con dipendenze e avvisi, un prompt-tuner affiancato con contatore di token. "Not a product, or a reusable tool, but a single HTML file, purpose-built for this one piece of data."
9. Anti-pattern principale reso esplicito. "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." → Anti-skill-ificazione: la pratica è troppo dipendente dal contesto per essere fissata in una skill; basta il prompt "make a HTML file".
10. FAQ onesta. (concessioni esplicite):
11. Efficienza dei token. HTML usa più token ma il contesto da 1MM di Opus 4.7 lo assorbe.
12. Generazione. 2-4× più lenta di Markdown — "but I've found the results are worth it".
13. Controllo di versione. "this is honestly one of the biggest downsides of HTML, HTML diffs are noisy and hard to review compared to Markdown" — uno svantaggio irrisolto che l'autore riconosce apertamente.
14. Stile / evitare la bruttezza. usare il plugin di frontend design o creare un unico design system HTML facendo puntare Claude sulla codebase, per poi farvi riferimento negli altri file HTML generati.
15. Meta-tesi finale (in-the-loop). "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 am happy to say instead that I feel more in the loop than ever before when using HTML." → HTML come antidoto alla resa cognitiva (Osmani) / debito di comprensione: la leggibilità ritrovata permette di restare nel ciclo decisionale.
16. Collegamenti con il corpus di veille.
17. Convergenza diretta con design.md di Isenberg × Meng To (2026-05-06): Meng afferma esplicitamente "HTML = finished dish, MD file = recipe, skills = ingredients". Shihipar convalida la centralità di HTML per il piatto finito consegnato all'umano.
18. Risposta operativa a Osmani — Cognitive Surrender / Comprehension Debt (2026-05-05): Shihipar nomina esattamente lo stesso problema ("I had stopped reading plans in depth") e propone HTML come soluzione per "restare nel ciclo".
19. Tensione con Lattice / Vincent / Karpathy "skills-maxi": Shihipar adotta la posizione opposta sulla skill-ificazione ("don't turn this into a /html skill"). Compromesso: skill per pattern stabili, prompting nudo per pratiche emergenti.
20. Conferma di Opus 4.7 + contesto da 1MM come cambiamento architetturale che rende economicamente sostenibili formati più verbosi (HTML, design system, brainstorming estesi).
21. Parte della tradizione Compounding engineering / Cherny: HTML come nuovo strato di output artefattuale tra agente e umano, alla pari di descrizioni di PR, note di rilascio e messaggi di commit.
22. Esempio meta. per scrivere questo articolo, l'autore ha chiesto a Claude Code di leggere la propria cartella di codice, trovare tutti i file HTML generati, raggrupparli/categorizzarli e produrre un file HTML con tutti i diagrammi per tipo → le illustrazioni dell'articolo sono esse stesse un prodotto del pattern che descrivono.
23. Flusso di lavoro risultante per una pratica solida.
24. Ogni specifica, piano o report > 100 righe → passare a HTML.
25. PR critiche → allegare un explainer HTML.
26. Onboarding di file, esplorazioni di design, riordini → editor HTML usa e getta con export strutturato.
27. Mantenere Markdown per: messaggi di commit, brevi note di fiche, file di configurazione .md (CLAUDE.md, agents.md, ecc.).