Claude Code nutzen: Die unvernünftige Effektivität von HTML

Warum HTML?

Informationsdichte

HTML kann im Vergleich zu Markdown wesentlich reichhaltigere Informationen vermitteln. Es kann natürlich einfache Dokumentstrukturen wie Überschriften und Formatierungen darstellen, aber auch alle möglichen anderen Informationen:

• Tabellarische Daten mit Tabellen
• Designdaten mit CSS
• Illustrationen mit SVG
• Code-Snippets mit Script-Tags
• Interaktionen mit HTML-Elementen, JavaScript und CSS
• Workflows mit SVG und HTML
• Räumliche Daten mit absoluten Positionen und Canvas
• Bilder mit Image-Tags

Ich würde sogar so weit gehen zu sagen, dass es fast keine Informationen gibt, die Claude lesen kann, die man nicht recht effizient mit HTML darstellen könnte. Das macht es zu einer äußerst effizienten Möglichkeit für das Modell, dir detaillierte Informationen zu übermitteln und für dich, sie zu überprüfen.

Ich habe festgestellt, dass das Modell ohne diese Möglichkeit oft ineffizientere Dinge in Markdown macht, wie ASCII-Diagramme oder – mein Favorit – das Schätzen von Farben mit Unicode-Zeichen, wie in diesem Screenshot von Claude Code.

Claude Code versucht, Farbe in Markdown darzustellen

Visuelle Klarheit & Lesbarkeit

Da Claude immer komplexere Arbeiten erledigen kann, schreibt es auch immer größere Spezifikationen und Pläne. In der Praxis habe ich festgestellt, dass ich dazu neige, keine Markdown-Datei mit mehr als 100 Zeilen tatsächlich zu lesen, und ich bin sicher nicht in der Lage, irgendjemanden sonst in meiner Organisation dazu zu bringen, sie zu lesen.

Aber HTML-Dokumente sind viel einfacher zu lesen. Claude kann die Struktur visuell so organisieren, dass sie ideal mit Tabs, Illustrationen, Links usw. zu navigieren ist. Sie können sogar mobil responsiv sein, sodass du sie je nach Gerät unterschiedlich lesen kannst.

Einfaches Teilen

Markdown-Dateien sind relativ schwer zu teilen, da die meisten Browser sie nicht nativ gut darstellen. Oft muss man sie als Anhänge an E-Mails oder Nachrichten hinzufügen.

Mit HTML kannst du, sobald du die Datei hochgeladen hast (z. B. auf S3), den Link einfach teilen. Deine Kollegen können sie überall öffnen und leicht darauf verweisen.

Die Wahrscheinlichkeit, dass jemand deine Spezifikation, deinen Bericht oder deine PR-Beschreibung tatsächlich liest, ist viel, viel höher, wenn sie in HTML vorliegt.

Zwei-Wege-Interaktion

HTML ermöglicht es dir, mit dem Dokument zu interagieren. Du könntest es zum Beispiel bitten, Schieberegler oder Drehknöpfe hinzuzufügen, um ein Design anzupassen, oder verschiedene Optionen im Algorithmus zu optimieren, um zu sehen, was passiert. Du kannst es auch bitten, diese Änderungen in einen Prompt zu kopieren, den du zurück in Claude Code einfügen kannst.

Lies mehr über meinen Playgrounds-Beitrag, um Beispiele für diese Zwei-Wege-Interaktion zu sehen: https://x.com/trq212/status/2017024445244924382

Datenerfassung

Warum sollte man Claude Code verwenden, um HTML-Dateien zu erstellen, anstatt z. B. ClaudeAI oder Claude Design? Einer der Hauptgründe ist der ganze Kontext, den Claude Code aufnehmen kann.

Als ich zum Beispiel diesen Artikel geschrieben habe, habe ich Claude Code gebeten, meinen Code-Ordner zu durchsuchen, alle HTML-Dateien zu finden, die ich erstellt habe, sie zu gruppieren und zu kategorisieren und dann eine HTML-Datei mit allen Diagrammen zu erstellen, die jeden Typ repräsentieren. Die Diagramme, die du in diesem Artikel siehst, sind ein direktes Ergebnis davon.

Neben dem Dateisystem kann Claude Code zusätzlichen Kontext über deine MCPs (wie Slack, Linear usw.), deinen Webbrowser (mit Claude in Chrome), deine Git-Historie usw. finden.

Es macht Freude

HTML-Dokumente mit Claude zu erstellen, macht einfach mehr Spaß und gibt mir das Gefühl, mehr in die Erstellung involviert und investiert zu sein – und das allein ist schon Grund genug.

Wie man loslegt

Ich habe ein wenig Angst, dass die Leute diesen Artikel lesen und daraus eine /html-Fähigkeit oder so etwas machen. Auch wenn das vielleicht einen gewissen Wert hat, möchte ich betonen, dass du nicht viel tun musst, um Claude dazu zu bringen. Du kannst es einfach bitten, „eine HTML-Datei zu erstellen" oder „ein HTML-Artefakt zu erstellen".

Der Trick ist zu wissen, was das Artefakt tun soll und wie du es verwenden könntest. Mit der Zeit wirst du vielleicht eine Fähigkeit entwickeln, aber fürs Erste würde ich vorschlagen, einfach von Grund auf zu promten, um ein Gefühl dafür zu bekommen, wie man es in verschiedenen Fällen einsetzt.

Anwendungsfälle

Um das konkreter zu machen, habe ich viele verschiedene HTML-Dateien für verschiedene Anwendungsfälle erstellt. Du kannst sie alle hier sehen: https://thariqs.github.io/html-effectiveness/ aber hier ist ein Überblick.

Spezifikationen, Planung & Erkundung

HTML ist eine reichhaltige Leinwand für Claude, um in ein Problem einzutauchen. Wenn ich anfange, an einem Problem zu arbeiten, erwarte ich anstelle eines einfachen Markdown-Plans ein Netz von HTML-Dateien. Zum Beispiel könnte ich damit beginnen, Claude Code zu bitten, Ideen zu sammeln und einige Erkundungen verschiedener Optionen zu erstellen. Ich würde es dann bitten, eine davon weiter auszuarbeiten, vielleicht Mockups oder Code-Snippets zu erstellen. Schließlich, wenn ich mich gut fühle, werde ich es bitten, einen Implementierungsplan zu schreiben. Wenn ich mit dem Plan zufrieden bin, erstelle ich eine neue Sitzung und übergebe alle diese Dateien zur Implementierung.

Bei der Überprüfung werde ich auch den Verifizierungs-Agenten bitten, die Dateien zu lesen, und er wird einen viel breiteren Kontext darüber haben, was benötigt wird.

Beispiel-Prompts:

• Ich bin mir nicht sicher, in welche Richtung ich den Onboarding-Bildschirm entwickeln soll. Generiere 6 deutlich unterschiedliche Ansätze – variiere Layout, Ton und Dichte – und lege sie als einzelne HTML-Datei in einem Raster an, damit ich sie nebeneinander vergleichen kann. Beschrifte jede mit dem Kompromiss, den sie eingeht.
• Erstelle einen gründlichen Implementierungsplan in einer HTML-Datei, erstelle unbedingt einige Mockups, zeige den Datenfluss und füge wichtige Code-Snippets hinzu, die ich vielleicht überprüfen möchte. Mach es leicht lesbar und verdaulich.

Anwendungsfälle:

• Erkundung anderer Möglichkeiten, etwas im Code zu implementieren
• Erkundung mehrerer visueller Designs

Code-Review & Verständnis

Code kann in einer Markdown-Datei schwer zu lesen sein. Aber mit HTML können wir Diffs, Annotationen, Flussdiagramme, Module usw. rendern. Verwende dies, um Code zu verstehen, den der Agent geschrieben hat, um ein Code-Review zu erhalten oder um eine PR jemandem zu erklären, der deinen Code reviewed. Ich finde, das funktioniert oft besser als die Standard-Github-Diff-Ansicht, und ich füge jetzt jeder PR, die ich erstelle, eine HTML-Code-Erklärung bei.

Beispiel-Prompt:

Hilf mir, diese PR zu reviewen, indem du ein HTML-Artefakt erstellst, das sie beschreibt. Ich bin nicht sehr vertraut mit der Streaming/Backpressure-Logik, konzentriere dich also darauf. Rendere den eigentlichen Diff mit Inline-Randanmerkungen, kennzeichne die Ergebnisse farblich nach Schweregrad und füge alles andere hinzu, was nötig ist, um das Konzept gut zu vermitteln.

Anwendungsfälle:

• Erstellen einer PR
• Reviewen einer PR
• Verstehen eines Themas im Code

Design & Prototypen

Claude Design basiert auf HTML, weil HTML im Design unglaublich ausdrucksstark ist, selbst wenn deine endgültige Oberfläche nicht HTML ist. Claude kann ein Design in HTML skizzieren und es dann in deiner bevorzugten Sprache schreiben, sei es React, Swift usw.

Du kannst auch Interaktionen prototypisieren, wie Animationen, Aktionen usw. Erwäge, Claude zu bitten, Schieberegler, Drehknöpfe usw. zu erstellen, um genau das einzustellen, wonach du suchst.

Beispiel-Prompt:

Ich möchte einen neuen Checkout-Button prototypisieren. Wenn er geklickt wird, führt er eine Play-Animation aus und wird dann schnell lila. Erstelle eine HTML-Datei mit mehreren Schiebereglern und Optionen, damit ich verschiedene Optionen für diese Animation ausprobieren kann. Gib mir einen Kopier-Button, um die Parameter zu kopieren, die gut funktioniert haben.

Verwende dies für:

• Erstellen von Design-System-Artefakten
• Anpassen von Komponenten
• Visualisieren von Komponentenbibliotheken
• Prototypisieren von freudvollen Animationen

Berichte, Recherche & Lernen

Claude Code ist unglaublich gut darin, Informationen aus mehreren Datenquellen zu synthetisieren und sie in einen lesbaren Bericht umzuwandeln. Du kannst Claude bitten, dein Slack, deine Codebasis, deine Git-Historie, das Internet usw. zu durchsuchen und es zu nutzen, um extrem lesbare Berichte für dich selbst, für die Führungsebene, für dein Team usw. zu erstellen.

Du könntest dies in Form eines langen HTML-Dokuments, eines interaktiven Erklärers oder sogar einer Diashow/Präsentation zusammenstellen. Bitte Claude, SVG für Diagramme zu verwenden, um es zu visualisieren.

Zum Beispiel habe ich Claude für meine Beiträge zum Prompt-Caching gebeten, eine tiefgehende Recherchedatei in HTML für mich zu erstellen, die ich über alle unsere Änderungen am Prompt-Caching lesen konnte, nachdem ich die Git-Historie gelesen hatte.

Beispiel-Prompt:

Ich verstehe nicht, wie unser Rate-Limiter tatsächlich funktioniert. Lese den relevanten Code und erstelle eine einzige HTML-Erklärungsseite: ein Diagramm des Token-Bucket-Flusses, die 3–4 wichtigsten Code-Snippets mit Anmerkungen und einen „Fallstricke"-Abschnitt unten. Optimiere sie für jemanden, der sie einmal liest.

Verwende dies für:

• Zusammenfassen, wie eine Funktion funktioniert
• Erklären eines Konzepts für mich
• Wöchentliche Statusberichte an deinen Chef
• Vorfallsberichte an deine Führungsebene
• SVG-Illustrationen, Flussdiagramme, technische Diagramme usw.

Benutzerdefinierte Bearbeitungsoberflächen

Manchmal ist es schwer, rein in einem Textfeld zu beschreiben, was man will. In diesem Fall bitte ich Claude, mir einen Wegwerf-Editor für genau das zu bauen, woran ich gerade arbeite. Kein Produkt, kein wiederverwendbares Werkzeug, sondern eine einzige HTML-Datei, maßgeschneidert für dieses eine Datenelement.

Der Trick ist immer, mit einem Export zu enden: einem „Als JSON kopieren"- oder „Als Prompt kopieren"-Button, der das, was ich in der Benutzeroberfläche gemacht habe, wieder in etwas verwandelt, das ich in Claude Code einfügen kann.

Beispiel-Prompts:

• Ich muss diese 30 Linear-Tickets neu priorisieren. Erstelle mir eine HTML-Datei mit jedem Ticket als ziehbare Karte in den Spalten Jetzt / Als Nächstes / Später / Gestrichen. Sortiere sie nach deiner besten Schätzung vor. Füge einen „Als Markdown kopieren"-Button hinzu, der die endgültige Reihenfolge mit einer einzeiligen Begründung pro Bucket exportiert.
• Hier ist unsere Feature-Flag-Konfiguration. Baue einen formularbasierten Editor dafür, gruppiere Flags nach Bereich, zeige Abhängigkeiten zwischen ihnen, warne mich, wenn ich ein Flag aktiviere, dessen Voraussetzung deaktiviert ist. Füge einen „Diff kopieren"-Button hinzu, der mir nur die geänderten Schlüssel gibt.
• Ich stimme diesen System-Prompt ab. Erstelle einen Side-by-Side-Editor: bearbeitbarer Prompt auf der linken Seite mit hervorgehobenen Variablenplätzen, drei Beispieleingaben auf der rechten Seite, die die ausgefüllte Vorlage live neu rendern. Füge einen Zeichen-/Token-Zähler und einen Kopier-Button hinzu.

Verwende dies für:

• Neuordnen, Priorisieren oder Einteilen von allem (Tickets, Testfälle, Feedback)
• Bearbeiten von strukturierten Konfigurationen (Feature-Flags, Umgebungsvariablen, JSON/YAML mit Einschränkungen)
• Abstimmen von Prompts, Vorlagen oder Texten mit Live-Vorschau
• Kuratieren von Datensätzen, Genehmigen/Ablehnen von Zeilen, Taggen von Beispielen, Exportieren der Auswahl
• Annotieren eines Dokuments, Transkripts oder Diffs und Exportieren der Annotationen
• Auswählen von Werten, die sich nur schwer in Text ausdrücken lassen: Farben, Easing-Kurven, Zuschneidebereiche, Cron-Zeitpläne, Regexe.

Häufig gestellte Fragen

Ich habe vielen Leuten davon erzählt, dass ich auf HTML umgestiegen bin, und habe ein paar wiederkehrende Fragen gesehen.

Ist das nicht weniger tokeneffizient?

Obwohl Markdown oft weniger Token verwendet, habe ich festgestellt, dass die zusätzliche Ausdruckskraft von HTML und die viel höhere Wahrscheinlichkeit, dass ich es lese, insgesamt zu besseren Ergebnissen führen. Mit dem 1-MM-Kontextfenster in Opus 4.7 ist der erhöhte Tokenverbrauch im Kontextfenster nicht wirklich spürbar.

Wann verwendest du jetzt Markdown?

Ehrlich gesagt habe ich aufgehört, Markdown für fast alles zu verwenden, aber ich bin wahrscheinlich ziemlich extrem auf der Seite der HTML-Maximalisten.

Wie kann ich die HTML-Datei anzeigen?

Ich öffne sie normalerweise einfach lokal in einem Browser (du kannst Claude bitten, sie zu öffnen) oder lade sie auf S3 hoch, wenn ich einen teilbaren Link haben möchte.

Dauert das nicht länger zu generieren als Markdown?

Das dauert tatsächlich länger! HTML kann 2-4x länger brauchen als Markdown, aber ich habe festgestellt, dass sich die Ergebnisse lohnen.

Was ist mit der Versionskontrolle?

Das ist ehrlich gesagt einer der größten Nachteile von HTML. HTML-Diffs sind im Vergleich zu Markdown verrauscht und schwer zu reviewen.

Wie bringe ich Claude dazu, meinen Geschmack zu treffen / es nicht hässlich zu machen?

Das Frontend-Design-Plugin hilft Claude, gute HTML-Dateien zu erstellen. Um jedoch den Stil deines eigenen Unternehmens zu treffen, kannst du eine einzelne Design-System-HTML-Datei erstellen, indem du Claude auf deine Codebase hinweist. Du kannst diese Design-System-Datei dann als Referenz für andere HTML-Dateien verwenden.

Bleib auf dem Laufenden

Alles oben Gesagte soll sagen, dass ich denke, der wahre Grund, warum ich HTML verwende, ist, dass ich mich viel mehr mit Claude verbunden fühle. Ich hatte begonnen zu befürchten, dass ich, weil ich aufgehört hatte, Pläne gründlich zu lesen, Claude einfach seine Entscheidungen treffen lassen müsste.

Aber ich bin froh zu sagen, dass ich mich stattdessen mit HTML mehr verbunden fühle als je zuvor. Ich hoffe, dir geht es auch so.