Using Claude Code: The Unreasonable Effectiveness of HTML
Manifest-artiger Artikel von Thariq Shihipar (Engineer & Serial Entrepreneur, Claude Code Team bei Anthropic), der eine Änderung des Standard-Ausgabeformats für Agenten ankündigt: die Ablösung von Markdown durch HTML.
Von Thariq Shihipar// Quelle x.com ↗/Lesezeit 2 min/.md// Automatisch geprüfte Übersetzung
Thariq Shihipar (Claude Code Team bei Anthropic) veröffentlicht einen manifestartigen Artikel, der eine Änderung des Standard-Ausgabeformats für Agenten ankündigt: die Ablösung von Markdown durch HTML. Die Diagnose: Markdown herrschte als dominantes Format zwischen Mensch und Agent (einfach, portabel, editierbar), ist aber einschränkend geworden, da Agenten längere und reichhaltigere Artefakte produzieren. Jenseits von ca. 100 Zeilen liest niemand mehr eine Markdown-Datei — und da der Autor seine Specs nicht mehr manuell bearbeitet (er prompted Claude, sie zu bearbeiten), verschwindet der historische Vorteil von Markdown.
Sechs Gründe rechtfertigen den Wechsel zu HTML: (1) Informationsdichte — Tabellen, CSS, SVG, Skripte, Canvas, Bilder; „almost no set of information that Claude can read that you cannot represent with HTML“; (2) visuelle Klarheit — Tabs, Illustrationen, mobil responsiv; (3) Teilen — S3-Upload → direkter Link, Lesequote vervielfacht; (4) bidirektionale Interaktivität — Schieberegler, Regler, „Copy as Prompt“-Buttons zur Rückkopplung; (5) kontextuelle Aufnahme, nativ in Claude Code (Codebasis + MCP + Git + Chrome); (6) Freude an der Nutzung — „it's joyful“.
Der Autor formalisiert fünf kanonische Anwendungen: (a) Specs/Pläne/Exploration in einem vergleichenden Raster; (b) PR-Review mit inline annotiertem Diff und Severity-basierter Code-Einfärbung; (c) Design & Prototypen mit Animations-Schiebereglern; (d) Berichte/Recherche (sein aus der Git-Historie generierter Prompt-Caching-Explainer); (e) maßgeschneiderte Wegwerf-Editoren — Single-File-HTML, zugeschnitten auf ein einzelnes Datenstück (Drag-and-Drop von Linear-Tickets, Feature-Flag-Editor, Side-by-Side-Prompt-Tuner), stets mit einem re-injizierbaren „Copy as JSON/Markdown/Prompt“-Export.
Explizites Anti-Pattern: der Autor lehnt die Skill-ifizierung seiner Praxis ab. „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'.“ Die Praxis sei zu kontextabhängig, um festgeschrieben zu werden.
Ehrliches FAQ: HTML kostet mehr Tokens, aber der 1-Mio.-Kontext von Opus 4.7 absorbiert dies; die Generierung ist 2-4× langsamer; verrauschte HTML-Diffs = ein ungelöster, ausdrücklich eingeräumter Nachteil.
Abschließende Meta-These: HTML als Gegenmittel gegen kognitive Selbstaufgabe. „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.“ Wiedergewonnene Lesbarkeit ermöglicht es, angesichts zunehmend leistungsfähiger Agenten entscheidungsfähig zu bleiben.
Der Artikel steht in direkter Verbindung mit Meng Tos design.md (HTML = „fertiges Gericht“) und mit Osmanis Comprehension Debt, worauf er eine operative Antwort bietet.
Kernpunkte
Autor. Thariq Shihipar — Engineer & Serial Entrepreneur, Claude Code Team bei Anthropic. X: @trq212. Website: thariqs.github.io/html-effectiveness (Galerie von durch Claude Code generierten HTML-Beispielen, nach Anwendungskategorie geordnet).
Datum. ~2026-05-10 (aktueller Artikel, erwähnt Opus 4.7 mit 1-Mio.-Kontext, X-Snowflake-ID ~ Mai 2026). URL: https://x.com/i/status/2052809885763747935.
These in einem Satz.„I've started preferring HTML as an output format instead of Markdown“ — das Standard-Ausgabeformat für agentische Artefakte sollte von Markdown zu HTML wechseln.
Warum jetzt?. drei zusammenlaufende Faktoren: 1. Agenten produzieren längere und reichhaltigere Specs/Pläne als zuvor. 2. Der Autor (und sein Umfeld) bearbeitet diese Dateien nicht mehr manuell — er promptet Claude, sie zu bearbeiten → der Vorteil des „handbearbeitbaren Markdown“ entfällt. 3. Opus 4.7 + 1-Mio.-Kontext absorbiert die zusätzlichen Tokens von HTML problemlos.
Die 6 Gründe (warum HTML). 1. Informationsdichte — Tabellen, CSS, SVG, Skripte, Canvas, Bilder, absolute Positionierung, räumliche Daten. „Almost no set of information that Claude can read that you cannot fairly efficiently represent with HTML.“ 2. Visuelle Klarheit & Lesbarkeit — Tabs, Illustrationen, Links, mobil responsiv. Jenseits von 100 Zeilen Markdown liest niemand mehr mit. 3. Einfaches Teilen — S3-Upload → direkter Link. „The chance of someone actually reading your spec is much much higher if it's in HTML.“ 4. Bidirektionale Interaktion — Schieberegler, Regler, „Copy as Prompt“-Buttons zur Rückkopplung in Claude Code. 5. Datenaufnahme — Claude Code aggregiert Codebasis + MCP (Slack, Linear) + Git-Historie + Chrome → breiterer Kontext als ClaudeAI oder Claude Design. 6. Es macht Freude — „makes me feel more involved and invested in the creation, and that by itself is enough“.
Beobachtetes Markdown-Anti-Pattern. Das Modell, beraubt visueller Ausdruckskraft, produziert ASCII-Diagramme oder nähert Farben mit Unicode-Zeichen an (der Artikel enthält einen Screenshot, in dem Claude Code versucht, „eine Farbe in Unicode zu zeigen“ → ein absurdes Signal für die Unzulänglichkeit des Formats).
Rhetorischer Bezug.„The Unreasonable Effectiveness of HTML“ ist eine Anspielung auf „The Unreasonable Effectiveness of Mathematics“ (Wigner, 1960) und auf die Reihe der „unreasonable effectiveness of X“-Titel im ML-Bereich (Karpathy 2015 zu RNNs).
5 detaillierte kanonische Anwendungsfälle. 1. Specs, Planung & Exploration — „a web of HTML files“: Brainstorming von 6 Richtungen in einem vergleichenden Raster, Erweiterung einer Option, Mockups, Code-Snippets, Umsetzungsplan. Beispiel-Prompt: „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 & Verständnis — Anhängen eines HTML-Explainers an jeden PR. Diff inline gerendert mit Randannotationen, Severity-basierte Code-Einfärbung. Beispiel-Prompt: „Render the actual diff with inline margin annotations, color-code findings by severity.“ 3. Design & Prototypen — Claude Design selbst basiert auf HTML. Prototyping von Animationen mit Schiebereglern und einem „Copy parameters“-Button zum Export abgestimmter Werte. 4. Berichte, Recherche & Lernen — der Autor ließ seinen Artikel zu Prompt-Caching durch Lesen der Git-Historie generieren. Long-Form-HTML, interaktiver Explainer, Slideshow. 5. Maßgeschneiderte Bearbeitungsoberflächen (Wegwerf-Editoren) — ein Single-File-Wegwerf-Editor für ein bestimmtes Datenstück, stets mit einem Export (Copy as JSON/Markdown/Prompt), der re-injizierbar in Claude Code ist. Beispiele: Drag-and-Drop von 30 Linear-Tickets in Now/Next/Later/Cut-Spalten, ein Feature-Flag-Editor mit Abhängigkeiten und Warnungen, ein Side-by-Side-Prompt-Tuner mit Token-Zähler. „Not a product, or a reusable tool, but a single HTML file, purpose-built for this one piece of data.“
Explizit gemachtes Haupt-Anti-Pattern.„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-ifizierung: Die Praxis ist zu kontextabhängig, um in einem Skill festgeschrieben zu werden; Prompting „make a HTML file“ genügt.
Ehrliches FAQ. (explizite Zugeständnisse):
Token-Effizienz. HTML verbraucht mehr Tokens, aber der 1-Mio.-Kontext von Opus 4.7 absorbiert dies.
Generierung. 2-4× langsamer als Markdown — „but I've found the results are worth it“.
Versionskontrolle.„this is honestly one of the biggest downsides of HTML, HTML diffs are noisy and hard to review compared to Markdown“ — ein ungelöster Nachteil, den der Autor offen einräumt.
Stil / Vermeidung von Hässlichkeit. Nutzung des Frontend-Design-Plugins oder Erstellung eines einzelnen HTML-Designsystems, indem Claude auf die Codebasis verwiesen wird, das anschließend als Referenz für andere generierte HTML-Dateien dient.
Abschließende Meta-These (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 als Gegenmittel gegen kognitive Selbstaufgabe (Osmani) / Comprehension Debt: wiedergewonnene Lesbarkeit ermöglicht es, im Entscheidungsloop zu bleiben.
Verbindungen zum Tech-Watch-Korpus.
Direkte Konvergenz mit Isenberg × Meng Tos design.md (2026-05-06): Meng stellt explizit fest: „HTML = finished dish, MD file = recipe, skills = ingredients“. Shihipar bestätigt den Vorrang von HTML als fertiges, an den Menschen ausgeliefertes Gericht.
Operative Antwort auf Osmani — Cognitive Surrender / Comprehension Debt (2026-05-05): Shihipar benennt genau dasselbe Problem („I had stopped reading plans in depth“) und schlägt HTML als Lösung vor, um „im Loop zu bleiben“.
Spannung mit Lattice / Vincent / Karpathy „Skills-Maxi“: Shihipar nimmt eine entgegengesetzte Haltung zur Skill-ifizierung ein („don't turn this into a /html skill“). Kompromiss: Skills für stabile Muster, reines Prompting für neu entstehende Praktiken.
Bestätigung von Opus 4.7 + 1-Mio.-Kontext als architektonischem Umbruch, der ausführlichere Formate (HTML, Designsysteme, erweiterte Brainstorms) wirtschaftlich tragbar macht.
Teil der Traditionslinie von Compounding Engineering / Cherny: HTML als neue Schicht der artefaktischen Ausgabe zwischen Agent und Mensch, gleichrangig mit PR-Beschreibungen, Release Notes und Commit-Nachrichten.
Meta-Beispiel. Um diesen Artikel zu schreiben, bat der Autor Claude Code, seinen Code-Ordner zu durchsuchen, alle generierten HTML-Dateien zu finden, sie zu gruppieren/kategorisieren und eine HTML-Datei mit allen Diagrammen nach Typ zu erstellen → die Illustrationen des Artikels sind selbst ein Produkt des von ihm beschriebenen Musters.
Resultierender Workflow für den festen Einsatz.
Jede Spec, jeder Plan oder Bericht > 100 Zeilen → Wechsel zu HTML.
Kritische PRs → HTML-Explainer beifügen.
Onboarding von Dateien, Design-Explorationen, Umsortierungen → HTML-Wegwerf-Editor mit strukturiertem Export.
HTML-Diffs sind unübersichtlich und schwer zu reviewen (bewusster Nachteil)
— Thariq Shihipar
Der aus dieser Fiche extrahierte Wissensgraph — 10 Entitäten, 22 Relationen.
In diesem Graphen :Thariq Shihipar · HTML (format de sortie agent) · Throwaway HTML editor · Anti-skill-ification · Cognitive surrender (réponse) · html-effectiveness gallery · Diff HTML bruyant · Design system HTML de référence · Joyful artifact · Unreasonable effectiveness