Plötzlich wird dein gesunder Menschenverstand heute ins Wanken geraten. Ehrlich gesagt, nutzen 99 % der Leute immer noch Markdown mit Claude Code. Was ein Insider aus dem Claude Code Team von Anthropic sagte, war: „Hör auf damit.“ Er sagte: „Es ist ungleich besser, in HTML statt in Markdown auszugeben.“
Weil die Ausgaben von Claude Code immer anspruchsvoller werden, ist Markdown schwer lesbar, vermittelt nichts und wird nicht geteilt.
Mit HTML hingegen:
- Kannst du Illustrationen einfügen
- Kannst du farblich codieren
- Kannst du mit Tabs organisieren
- Kannst du sogar Schieberegler und Buttons erstellen
- Kannst du direkt im Browser teilen
Mit anderen Worten: Um den wahren Wert von Claude Code auszuschöpfen, wird nicht nur „was du ausgibst“, sondern auch „in welchem Format du ausgibst“ unglaublich wichtig.
Das behaupte ich.
Die optimale Lösung im Claude-Code-Zeitalter ist nicht nur Markdown, sondern HTML-first.
Tatsächlich hat ClaudeCodeStudio diese Methode bereits vor diesem Artikel genutzt und sorgt dafür, dass Folienmaterialien mit dieser Qualität auf Anhieb rauskommen 👇
Wenn du diesen Artikel bis zum Ende liest, wirst du verstehen, warum das möglich ist – also lies bitte weiter!
Übrigens, hattest du schon einmal so eine Erfahrung?
- Du hast Claude Code einen Plan schreiben lassen, aber das Interesse verloren, nachdem er 100 Zeilen überschritten hatte.
- Du hast eine Markdown-Spezifikation mit dem Team geteilt, aber niemand hat sie zu Ende gelesen.
- Du hast dir ein ASCII-Art-Diagramm angesehen und gedacht: „…Was ist das?“
- Du wolltest Informationen mit Farben oder Layouts ordnen, konntest es aber in Markdown nicht ausdrücken.
- Du hast einen Plan in Slack eingefügt, aber er wurde als Anhang verschüttet.
All das war ein „Problem des Ausgabeformats.“
Ein Artikel mit dem Titel „Using Claude Code: The Unreasonable Effectiveness of HTML“, geschrieben von Thariq (@trq212), einem Mitglied des Claude-Code-Entwicklungsteams, geht derzeit auf X mit über 11 Millionen Aufrufen viral 😳
Thariq ist Mitglied des Claude-Code-Teams bei Anthropic und ein Ingenieur von YC W20. Mit anderen Worten: Es ist ein Artikel von jemandem, der Claude Code täglich an vorderster Front einsetzt und erklärt: „Ich habe aufgehört, Markdown zu verwenden.“
Dieses Mal erkläre ich den Inhalt leicht verständlich, einschließlich konkreter Prompt-Beispiele 👇
Originalbeitrag hier: https://x.com/trq212/status/2052809885763747935
■ Was ist das Problem mit Markdown?
Markdown wird seit Jahren als Kommunikationsmittel zwischen KI-Agenten und Menschen verwendet. Es ist einfach, überall einsetzbar und kann bis zu einem gewissen Grad Rich Text schreiben. Claude Code gibt standardmäßig natürlich in Markdown aus.
Aber ehrlich gesagt, kommt dir das nicht bekannt vor?
Da Claude Code immer komplexere Aufgaben bewältigen kann, werden die Pläne und Spezifikationen, die es ausgibt, immer länger. Liest du wirklich eine Markdown-Datei mit über 100 Zeilen bis zum Ende?
Thariq schreibt im Artikel:
„Ich finde es schwierig, eine Markdown-Datei mit mehr als hundert Zeilen zu lesen.“
Außerdem bearbeiten wir heutzutage Dateien selbst immer seltener. Wir verwenden sie als Referenzen für Spezifikationen oder als Output für Brainstorming. Selbst beim Bearbeiten bitten wir Claude, „das zu reparieren“. Mit anderen Worten: Der größte Vorteil von Markdown – dass es „für Menschen leicht von Hand zu bearbeiten ist“ – ist nicht mehr relevant.
Das spricht ein Problem brillant an, das viele Claude-Code-Nutzer unbewusst gespürt haben.
■ Warum die HTML-Option „unangemessen effektiv“ ist
Was Thariq vorschlägt, ist, das Ausgabeformat von Claude Code von Markdown auf HTML umzustellen.
Du denkst vielleicht: „Ist HTML nicht zum Erstellen von Webseiten da?“ Aber die Ausdruckskraft von HTML ist mit Markdown nicht vergleichbar.
Schauen wir uns an, was mit HTML konkret ausgedrückt werden kann:
- Strukturierte Daten mit Tabellen
- Design und Farbgebung mit CSS
- Illustrationen und Diagramme mit SVG
- Code-Snippets mit Script-Tags
- Interaktion mit JavaScript und CSS
- Workflow-Diagramme durch Kombination von SVG und HTML
- Räumliche Daten mit absoluter Positionierung oder Canvas
- Einbettung von Bildern mit Image-Tags
Thariq behauptet:
„Ich würde so weit gehen zu sagen, dass es fast keine Informationen gibt, die Claude lesen kann, die du nicht ziemlich effizient mit HTML darstellen kannst.“
Jeder, der schon einmal versucht hat, Claude ein ASCII-Diagramm zeichnen oder Farben mit Unicode-Zeichen ausdrücken zu lassen, wird die Bedeutung dieser Worte verstehen. Du wirst von dieser Ineffizienz befreit, wie „einen Ferrari zum Supermarkt zu fahren“.
■ Die Informationsdichte ist überwältigend anders
Die größte Stärke von HTML ist die „Informationsdichte“.
Wenn derselbe Inhalt in Markdown und HTML geschrieben wird, kann HTML viel mehr Informationen viel lesbarer vermitteln. Du kannst mit Tabs umschalten, farblich codieren oder Diagramme einbetten.
Selbst wenn du keine Lust hast, 100 Zeilen Markdown zu lesen, wird dieselbe Informationsmenge, die mit Tabs und Farben in HTML organisiert ist, direkt in deinen Kopf einsinken.
Das ist nicht nur eine „Frage des Aussehens“. Eine Spezifikation, die nicht gelesen wird, ist dasselbe wie eine, die nicht existiert. Die Ausgabe in einem lesbaren Format wirkt sich direkt auf die Qualität der Arbeit selbst aus.
■ Einfaches Teilen
Wenn du versuchst, eine Markdown-Datei mit jemandem zu teilen, läuft es normalerweise so ab:
- Als Datei an Slack anhängen → Niemand öffnet sie
- An eine E-Mail anhängen → Niemand öffnet sie
- Auf GitHub ablegen → Nicht-Entwickler haben keinen Zugriff
Mit HTML lädst du sie einfach auf S3 hoch und schickst einen Link. Jeder mit einem Browser kann sie lesen. Du kannst sie sogar responsiv machen, damit sie auf dem Handy gelesen werden kann.
Thariqs Originaltext:
„Die Wahrscheinlichkeit, dass jemand deine Spezifikation, deinen Bericht oder deine PR-Beschreibung tatsächlich liest, ist viel, viel höher, wenn sie in HTML ist.“
Das ist ein subtiler, aber in der Praxis entscheidend wichtiger Punkt.
■ Die Revolution der wechselseitigen Interaktion
Hier zeigt HTML seine wahre Stärke.
HTML ist nicht nur etwas zum „Lesen“. Es kann bedient werden.
Zum Beispiel die Feinabstimmung eines Designs. Wenn du Claude Code bittest, „eine HTML-Datei mit einem Schieberegler zu erstellen“, gibt es eine Datei aus, mit der du Animationsgeschwindigkeit, Easing und Farben in Echtzeit anpassen kannst. Sobald du passende Parameter gefunden hast, drückst du einfach einen „Kopieren“-Button und fügst sie zurück in Claude Code ein.
Diese wechselseitige Interaktion ermöglicht Anpassungen mit einer Präzision, die Text-Prompts allein nie erreichen könnten.
Du bist befreit von dem Stress, „ein bisschen mehr nach rechts“, „ein bisschen schneller“ oder „nicht diese Farbe“ in Worte fassen zu müssen. Du bewegst einfach den Schieberegler.
■ Konkrete Anwendungsfälle (mit Prompt-Beispielen)
In dem Artikel stellt Thariq HTML-Nutzungsmuster mit konkreten Prompt-Beispielen vor. Diese sind so praktisch, dass ich sie hier so wiedergebe.
𝟭. Design, Planung und Erkundung
Wenn du in Claude Code an komplexen Aufgaben arbeitest, verwende statt eines Markdown-Plans mehrere HTML-Dateien, um ein „Erkundungsnetz“ auszuwerfen.
Prompt-Beispiel:
„Ich kann mich nicht entscheiden, in welche Richtung ich beim Onboarding-Bildschirm gehen soll. Generiere 6 völlig unterschiedliche Ansätze, variiere Layout, Ton und Dichte, und ordne sie in einem Raster in einer HTML-Datei an, damit ich sie vergleichen kann. Schreibe die Vor- und Nachteile für jeden auf Etiketten.“
„Erstelle einen detaillierten Implementierungsplan in einer HTML-Datei. Füge Mockups, Datenflüsse und wichtige Code-Snippets zur Überprüfung ein. Mach es lesbar und leicht verdaulich.“
𝟮. Code-Review und Verständnis
Du kannst Code-Reviews erstellen, die lesbarer sind als der Diff-Bildschirm von GitHub.
Prompt-Beispiel:
„Erstelle ein HTML-Artefakt, um diesen PR zu reviewen. Ich bin mit der Streaming/Backpressure-Logik nicht vertraut, konzentriere dich also darauf. Rendere den tatsächlichen Diff mit Inline-Randanmerkungen, farblich nach Wichtigkeit codiert.“
Thariq schreibt: „Jetzt füge ich jedem PR eine Code-Erklärung im HTML-Format bei.“
𝟯. Design und Prototyping
So wie die Grundlage von Claude Design HTML ist, ist HTML extrem gut für die Design-Darstellung geeignet. Selbst wenn die endgültige Implementierung React oder Swift ist, ist ein Workflow, bei dem zuerst in HTML skizziert und dann umgeschrieben wird, effektiv.
Prompt-Beispiel:
„Ich möchte einen Prototyp für einen neuen Checkout-Button erstellen. Er soll animieren und beim Klicken lila werden. Erstelle eine HTML-Datei, in der ich jeden Animationsparameter mit Schiebereglern und Optionen ausprobieren kann. Füge einen Button zum Kopieren der Parameter hinzu, die gut funktioniert haben.“
𝟰. Berichte, Recherche und Lernen
Claude Code ist gut darin, Informationen aus mehreren Datenquellen zu synthetisieren und in einem lesbaren Bericht zusammenzufassen. Du kannst es bitten, Slack, die Codebasis, den Git-Verlauf und das Internet zu durchsuchen, um Führungsberichte oder Incident-Reports zu erstellen.
Prompt-Beispiel:
„Ich verstehe nicht, wie der Rate Limiter funktioniert. Lies den relevanten Code und erstelle eine HTML-Erklärungsseite. Füge ein Token-Bucket-Flussdiagramm, 3-4 wichtige Code-Snippets mit Anmerkungen und schließlich einen Abschnitt ‚Fallstricke‘ hinzu. Optimiere es so, dass ich es auf einen Blick verstehen kann.“
𝟱. Benutzerdefinierte Bearbeitungsoberflächen
Das war für mich persönlich der schockierendste Anwendungsfall. Mit einem Wegwerf-HTML-Editor Operationen realisieren, die sich in einem Textfeld nur schwer vermitteln lassen.
Prompt-Beispiel:
„Ich möchte die Priorität von 30 Linear-Tickets neu organisieren. Erstelle eine HTML-Datei, in der jedes Ticket eine ziehbare Karte ist, und platziere sie in vier Spalten: Jetzt / Als Nächstes / Später / Gestrichen. Ordne sie zunächst basierend auf deiner Einschätzung an. Füge einen ‚Als Markdown kopieren‘-Button hinzu, um die endgültige Reihenfolge mit einer Begründung pro Bucket zu exportieren.“
„Ich passe dieses System-Prompt an. Erstelle einen Side-by-Side-Editor. Links einen bearbeitbaren Prompt (mit Hervorhebung von Variablen-Platzhaltern) und rechts drei Beispiel-Inputs, damit die Vorlage in Echtzeit reflektiert wird. Füge einen Zeichen-/Token-Zähler und einen Kopier-Button hinzu.“
Ist diese Idee nicht großartig? Die benötigte UI spontan für genau diese Aufgabe generieren. Sie muss nicht wiederverwendet werden. Sie muss nicht perfekt sein. Aber sie ist 100-mal effizienter, als es nur mit Text zu machen.
■ Antworten auf häufige Fragen
In dem Artikel beantwortet Thariq auch häufige Fragen zu HTML.
„Ist es nicht token-ineffizient?“
→ Es stimmt, dass es mehr Tokens verbraucht als Markdown. Aber wenn man die Ausdruckskraft und die „Wahrscheinlichkeit, tatsächlich gelesen zu werden“ bedenkt, ist es insgesamt effizient. Mit Opus 4.7s 1-Millionen-Token-Kontext ist der Anstieg auf einem Niveau, das keine Rolle spielt.
„Dauert die Generierung nicht länger?“
→ Es dauert 2-4 mal länger als Markdown. Aber Thariq selbst findet, dass das Ergebnis diesen Aufwand wert ist.
„Was ist mit der Versionskontrolle?“
→ Das ist ehrlich gesagt ein Nachteil. HTML-Diffs haben mehr Rauschen als Markdown und sind schwerer zu reviewen. Derzeit ist das eine der größten Schwächen von HTML.
„Das Design sieht am Ende billig aus?“
→ Es verbessert sich, wenn du das Frontend-Design-Plugin von Claude Code verwendest. Wenn du Claude Code außerdem bittest, die Codebasis deines Unternehmens zu lesen, um eine „Design-System-HTML-Datei“ zu erstellen und diese danach als Referenz zu verwenden, kannst du es mit dem Stil deines Unternehmens vereinheitlichen.
■ Warum HTML „jetzt“?
Der Grund, warum dieser Artikel Anklang findet, ist der Zeitpunkt.
Jetzt, wo Claude Code komplexe Aufgaben bewältigen kann, sind die Ausgaben lang und dicht. Diese weiterhin in Markdown zu erhalten, einem Format, das nur „Text mit ein wenig Schnickschnack“ ist, ist jetzt ein Engpass.
Thariqs Fazit ist:
„Ich fühle mich viel mehr im Loop als je zuvor, wenn ich HTML verwende.“
Anstatt alles Claude Code zu überlassen, entsteht durch die Ausgabe in HTML ein Kreislauf aus „menschlichem Verständnis, Beurteilung und Feedback“. Das ist die Essenz der Zusammenarbeit mit KI.
■ Zusammenfassung der Praxistipps
- Keine schwierigen Fähigkeiten oder Einstellungen erforderlich. Sage Claude Code einfach: „Erstelle eine HTML-Datei.“
- Versuche nicht, von Anfang an eine Skill-Datei zu erstellen. Probiere es zuerst mit rohen Prompts.
- Beginne mit „Dingen, die Leute lesen sollen“, wie Pläne, Reviews, Berichte und Prototypen.
- Der Effekt verdoppelt sich, wenn du auf „Interaktivität“ achtest, wie Schieberegler und Kopier-Buttons.
- Öffne das generierte HTML im Browser oder lade es auf S3 hoch, um es zu teilen.
Markdown ist nicht schlecht. Aber jetzt, wo die Ausgaben von Claude Code so fortgeschritten sind, ist die Zeit gekommen, auch das Format des Empfängers zu verbessern.
Wenn du das nächste Mal Claude Code einen Plan erstellen lässt, versuche, eine Zeile hinzuzufügen: „Mach es in HTML.“ Du wirst über den Unterschied staunen.
Für diejenigen, die diesen Artikel auch nur ein wenig hilfreich fanden:
𝗖𝗹𝗮𝘂𝗱𝗲 𝗖𝗼𝗱𝗲 𝗦𝘁𝘂𝗱𝗶𝗼 @ 𝗝𝗮𝗽𝗮𝗻 (@ClaudeCode_love) ist
ein Account, der von drei Claude-Code-Enthusiasten betrieben wird.
Wir posten täglich über praktische CLI-Nutzung und Automatisierung.
Wir entwickeln derzeit gemeinsam mit einem börsennotierten Unternehmen einen KI-Agenten.
Unsere üblichen Beiträge 👇
- Reale Produktentwicklungsfälle mit Claude Code und Claude
- Organisation von Claude-Code-Nutzung / Vibe Coding / Entwicklungstrends
- Neueste Informationen zu Claude Code aus dem Ausland
Von der Entwicklungsidee über Design, Implementierung und Verbesserung
fassen wir ausländische und Primärinformationen so zusammen, dass ein funktionierendes Produkt in die Welt hinausgeht, nicht nur „der Build ist fertig“.
Wenn du interessiert bist, folge uns und schau vorbei 👀 Ich denke, es wird sich lohnen!
