# shihipar-claude-code-html-unreasonable-effectiveness-markdown-2026-05-10

## Veille

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**. These: Markdown war das dominante Format zwischen Menschen und Agenten (einfach, portabel, editierbar, lesbar), ist aber zu **einem Engpass** geworden, da Agenten längere und reichhaltigere Artefakte produzieren (Specs, Pläne, Berichte, Code-Reviews). Jenseits von ca. 100 Zeilen liest niemand mehr eine Markdown-Datei. HTML löst sechs Einschränkungen gleichzeitig: **Informationsdichte** (Tabellen, CSS, SVG, Skripte, Canvas, Bilder), **visuelle Klarheit** (navigierbares, mobil-responsives Layout), **einfaches Teilen** (ein S3-Link, direkt im Browser öffenbar), **bidirektionale Interaktivität** (Schieberegler, Regler, „Copy as JSON/Prompt“-Buttons zur Rückkopplung in Claude Code), **native kontextuelle Aufnahme** (Claude Code liest die Codebasis + MCP Slack/Linear + Git-Historie + Chrome) und **Freude an der Nutzung** (der Autor stellt ausdrücklich fest: *„it's joyful“*). Fünf kanonische Anwendungen im Detail: (1) **Specs/Pläne/Exploration** in einem vergleichenden Raster, (2) **PR-Review** mit inline annotiertem Diff, (3) **Design & Prototypen** mit Animations-Schiebereglern, (4) **Berichte/Recherche/Lernen** (der Autor ließ einen Prompt-Caching-Explainer aus der Git-Historie generieren), (5) **maßgeschneiderte Wegwerf-Editoren** (Drag-and-Drop von Linear-Tickets, Feature-Flag-Editoren, Side-by-Side-Prompt-Tuner), die einen re-injizierbaren „Copy as Markdown/Diff/JSON“-Export erzeugen. Explizites Anti-Pattern: *„I'm a little bit afraid that people will read this article and turn it into a /html skill“* — der Autor **lehnt eine vorschnelle Skill-ifizierung ab** und empfiehlt stattdessen Prompting von Grund auf („make a HTML file“). Pragmatisches FAQ: Token-Kosten werden durch den 1-Mio.-Kontext von **Opus 4.7** absorbiert, 2-4× längere Generierungszeit, verrauschte HTML-Diffs (ein realer Nachteil), Stil wird über ein HTML-Referenz-Designsystem im Zaum gehalten.

## Titre Article

Using Claude Code: The Unreasonable Effectiveness of HTML

## Date

2026-05-10

## URL

https://x.com/i/status/2052809885763747935

## Keywords

HTML, Markdown, Ausgabeformat, Claude Code, agentische Artefakte, Thariq Shihipar, Anthropic, Opus 4.7, 1-Mio.-Kontext, Informationsdichte, SVG, CSS, Canvas, responsives Layout, bidirektionale Interaktivität, Copy as JSON, Copy as Prompt, kontextuelle Aufnahme, MCP, Slack, Linear, Git-Historie, Chrome, Specs, Pläne, Exploration, Code Review, PR-Review, annotiertes Diff, Designsystem, Prototypen, Animationen, Schieberegler, Berichte, Recherche, Explainer, Wegwerf-Editoren, Wegwerf-Editor, Feature-Flags, Prompt-Tuning, Freude, Anti-Skill-ifizierung, Prompt von Grund auf, S3, Teilen, Token-Effizienz, verrauschtes Diff, Design-Drift, Frontend-Design-Plugin, Geschmack, Design-Gedächtnis, html-effectiveness, Galerie, Playgrounds, bidirektionale Interaktion, Urteilsvermögen, Comprehension Debt, In-the-Loop, Designsystem-Datei, Illustrationen vs. ASCII, Farbe-via-Unicode-Anti-Pattern, mobil responsiv, Tabs, Illustrationen, maßgeschneiderte Wegwerf-UI

## Authors

Thariq Shihipar (Engineer & serial entrepreneur, équipe Claude Code chez Anthropic — site : thariqs.github.io/html-effectiveness ; X : @trq212)

## Ton

**Profil**: Persönlicher Manifest-Artikel (~1500 Wörter), veröffentlicht auf X / einem persönlichen Blog, unverblümt in der Ich-Perspektive, Praktiker-Evangelist-Register. Zielpublikum: fortgeschrittene Claude-Code-Nutzer, Designer, PMs, Ingenieure, die Specs/Pläne/Berichte mit einem Agenten erstellen. Technisches Niveau: mittel — kein Code, viel gelebte Praxis (konkrete Beispiele: sein Artikel zu Prompt-Caching, seine alltäglichen PRs, seine Onboarding-Brainstorms).

**Stil**: **Pädagogisch-demonstrativ**. Beginnt mit einem Zugeständnis („Markdown has become the dominant file format used by agents… *But* as agents have become more and more powerful, I have felt that markdown has become a restricting format“). Es folgt eine klassische rhetorische Struktur: *warum → wie → Anwendungsfälle → FAQ → Abschluss*. Jeder Abschnitt wird durch ein **gelebtes Beispiel** gestützt („when writing this article, I asked Claude Code to read through my code folder…“) statt durch eine abstrakte Beweisführung. Einwände werden vorweggenommen („Isn't it less token efficient?“, „How do I view the HTML file?“, „What about version control?“) in Form eines ehrlichen FAQ (mit dem Zugeständnis, dass verrauschte HTML-Diffs *„one of the biggest downsides“* seien).

Epistemische Position: **Anthropic-Claude-Code-Insider**, der eine bereits von seinem Team übernommene Praxis formalisiert (*„I increasingly see this being used by others on the Claude Code team“*). Emotionaler Ton: enthusiastisch, aber nicht missionarisch. Für Viralität platzierte Signalphrasen: *„the unreasonable effectiveness of HTML“* (eine Anspielung auf Wigner-Karpathy), *„it's joyful“*, *„the chance of someone actually reading your spec is much much higher if it's in HTML“*, *„I'm a little bit afraid that people will read this article and turn it into a /html skill“*. Bemerkenswerter Meta-Zug: **explizite Anti-Skill-ifizierung** — der Autor, obwohl Teil des Ökosystems, das Claude Skills vorantreibt, weigert sich, seine Praxis in einem Skill zu kanonisieren. *„You don't need to do much to get Claude to do this. You can just ask it to 'make a HTML file' or 'make a HTML artifact'.“*

Gesamtton: **doktrinär, aber bescheiden**. Emotionaler Schluss („I feel much more in the loop than ever before when using HTML. I hope you do too.“) — führt die technische Frage zurück auf das gelebte Problem des **Verlusts kognitiver Kontrolle** angesichts von Agenten, die Pläne produzieren, die zu lang sind, um gelesen zu werden (starke Resonanz mit Osmanis *Cognitive Surrender* / *Comprehension Debt*).

## Pense-betes

- **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.
- Markdown beibehalten für: Commit-Nachrichten, kurze Fiche-Notizen, .md-Konfigurationsdateien (CLAUDE.md, agents.md usw.).

## RésuméDe400mots

**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.

## GrapheDeConnaissance

- Thariq Shihipar —travaille_chez→ Anthropic (ORGANISATION, 0.97)
- Thariq Shihipar —fait_partie_de→ équipe Claude Code (ORGANISATION, 0.97)
- Thariq Shihipar —recommande→ HTML (format de sortie agent) (METHODOLOGIE, 0.98)
- HTML (format de sortie agent) —remplace→ Markdown pour artefacts agentiques longs (METHODOLOGIE, 0.95)
- Thariq Shihipar —affirme_que→ Markdown devient restrictif au-delà de ~100 lignes (AFFIRMATION, 0.92)
- HTML (format de sortie agent) —permet→ densité d'information (tables, CSS, SVG, scripts, canvas) (CONCEPT, 0.97)
- HTML (format de sortie agent) —permet→ interactivité bidirectionnelle (sliders, copy as prompt) (CONCEPT, 0.96)
- HTML (format de sortie agent) —améliore→ taux de lecture des specs et rapports (CONCEPT, 0.93)
- HTML (format de sortie agent) —résout→ Cognitive surrender (réponse) (CONCEPT, 0.9)
- Claude Code —utilise→ codebase + MCP + git history + Chrome (CONCEPT, 0.95)
- Opus 4.7 —utilise→ 1MM context window (CONCEPT, 0.97)
- 1MM context Opus 4.7 —permet→ HTML (format de sortie agent) (CONCEPT, 0.93)
- Throwaway HTML editor —utilise→ export copy as JSON / markdown / prompt (CONCEPT, 0.96)
- Thariq Shihipar —s_oppose_à→ Anti-skill-ification (CONCEPT, 0.95)
- Thariq Shihipar —affirme_que→ les diffs HTML sont bruyants et difficiles à reviewer (downside assumé) (AFFIRMATION, 0.92)
- HTML (format de sortie agent) —mesure→ 2-4× plus lente que Markdown (MESURE, 0.88)
- Frontend design plugin —permet→ HTML (format de sortie agent) (CONCEPT, 0.85)
- Design system HTML de référence —permet→ cohérence stylistique cross-fichiers (CONCEPT, 0.88)
- Unreasonable effectiveness —converge_avec→ design.md de Meng To (HTML = finished dish) (CONCEPT, 0.93)
- Unreasonable effectiveness —résout→ comprehension debt d'Osmani (réponse opérationnelle) (CONCEPT, 0.9)
- Claude Code —permet→ HTML (format de sortie agent) (METHODOLOGIE, 0.96)
- Anthropic —emploie→ Thariq Shihipar (PERSONNE, 0.97)

---
Canonical: https://www.thekb.eu/de/fiches/shihipar-claude-code-html-unreasonable-effectiveness-markdown-2026-05-10/