Du bittest Claude Code um einen Report, einen Plan, eine Zusammenfassung. Was zurückkommt, ist meistens eine Markdown-Datei. Öffnest du sie, sieht das ungefähr so aus:

# Wochenbericht KW 20

## Was diese Woche erledigt wurde
- Startseite überarbeitet
- Kontaktformular repariert
- Hosting-Problem behoben

## Was noch offen ist
- Newsletter-Integration testen
- Google Analytics einrichten

## Nächste Schritte
Beim nächsten Meeting sollten wir die offenen
Punkte durchgehen und Prioritäten setzen...

Das # soll eine Überschrift sein. Das ## eine zweite Ebene. Die Bindestriche sind eigentlich eine Liste. Markdown heißt dieses Format, und irgendetwas muss es erst umwandeln, damit es wie ein richtiges Dokument aussieht. Im Browser oder als E-Mail-Anhang siehst du genau das: rohe Sonderzeichen, kein Styling, grauer Textschlonz.

Für Notizen, die du selbst liest, ist das okay. Für alles, was du teilst oder präsentierst, gibt es etwas Besseres.

Thariq Shihipar vom Claude Code-Team bei Anthropic hat das kürzlich öffentlich beschrieben: Claude Code kann HTML ausgeben statt Markdown. Der Unterschied ist größer als er klingt.

Was ist HTML und warum ist es besser?

HTML (Hypertext Markup Language) ist die Sprache, aus der Websites gemacht sind. Jede Seite, die du öffnest, ist HTML. Du brauchst null Programmierwissen, um es zu nutzen: Du bittest Claude Code darum, Claude erstellt eine Datei, du öffnest sie per Doppelklick im Browser. Fertig.

Was du siehst, ist kein Rohtexte mit Sonderzeichen. Es ist ein richtiges Dokument, das du direkt jemandem schicken kannst.

Abstrakte Illustration, die den Kontrast zwischen einer einfachen Notiz und einem strukturierten, farbigen Report symbolisiert

newsletter.sh

# Neuer Artikel? Du erfährst es als Erstes.

# Kein Spam. Ein kurzes Mail, wenn etwas erscheint.

>

Claude Code HTML-Ausgaben: Was das konkret bedeutet

Wenn Claude Code eine HTML-Datei erstellt statt einer Markdown-Datei, bekommst du:

  • Tabellen, die wirklich wie Tabellen aussehen
  • Farbliche Status-Anzeigen (grün, gelb, rot für "erledigt", "in Arbeit", "blockiert")
  • Diagramme und Grafiken direkt im Dokument
  • Tabs und Sektionen zum Navigieren in längeren Texten
  • Klickbare Inhaltsverzeichnisse
  • Layouts, die auf dem Handy genauso gut lesbar sind wie am Desktop

Das Entscheidende: Du kannst die Datei im Browser öffnen und sie jemandem schicken. Kein Tool, keine App, keine Konvertierung. Wer sie öffnet, braucht nur einen Browser.

Markdown funktioniert prima, wenn du Dateien selbst bearbeitest oder in GitHub veröffentlichst. Sobald du sie aber teilen willst, wird es umständlich. Die andere Person sieht entweder rohen Text voller Sonderzeichen, oder du brauchst ein Extra-Tool zur Umwandlung.

Dazu kommt ein weniger offensichtlicher Vorteil: HTML ist das einzige Format, das Claude selbst überprüfen kann. Die KI rendert es, sieht was funktioniert und was nicht. Markdown kann Claude nur lesen. Bei HTML gibt es eine Qualitätskontrolle. Bei Markdown nicht.

Abstrakte Illustration einer Datei, die sich im Browser in einen sauber formatierten, farbigen Report verwandelt

5 Fälle, wo HTML die bessere Wahl ist

Das sind keine theoretischen Szenarien. Diese Situationen kommen im Alltag jedes Selbstständigen vor.

Statusberichte für Kunden

Du arbeitest an einem Projekt und willst dem Kunden Fortschritt zeigen. In Markdown schreibst du eine Aufzählungsliste, der Kunde bekommt eine graue Textwand.

Bittest du Claude Code um eine HTML-Zusammenfassung, bekommst du: einen formatierten Report mit Statusampeln, einer kurzen Einleitung zum Fortschritt und einer klaren Liste der nächsten Schritte. Den kannst du direkt schicken, ohne selbst noch Hand anlegen zu müssen.

Specs und Pläne zum Teilen

Du planst etwas und willst, dass eine andere Person die Planung versteht. Ein Markdown-Plan mit mehr als 50 Zeilen? Den liest niemand durch. Shihipar beobachtet das immer wieder: HTML-Specs werden gelesen, Markdown-Specs werden überflogen.

Als HTML-Dokument mit Tabs, Sektionen und visuellem Aufbau ist die Chance deutlich höher, dass dein Gegenüber wirklich bis zum Ende liest und sinnvolles Feedback gibt.

Abstrakte Illustration eines strukturierten Dokuments mit Tabs, Sektionen und Übersichtsdiagrammen

Designvarianten nebeneinander vergleichen

Du bist unsicher, welche Richtung du bei einem Design nehmen sollst. Normalerweise beschreibst du Optionen in Text oder bittest um eine Vor- und Nachteile-Liste.

Bitte stattdessen um ein HTML-Dokument mit mehreren Varianten nebeneinander. Claude kann vier verschiedene Layouts in einer Datei zeigen, mit Farben, Schriftgrößen und grober Struktur. Das ist kein fertiges Design, aber es gibt dir und deinem Auftraggeber eine viel klarere Grundlage für Entscheidungen als jeder beschreibende Text.

Interaktive Wegwerf-Tools

Das ist der Fall, der mich am meisten überrascht hat. Claude kann HTML-Dateien erstellen, die echte Interaktion bieten: Schieberegler, Auswahlfelder, verschiebbare Listen.

Ein konkretes Beispiel: Du hast 30 offene Aufgaben und willst sie priorisieren. Bitte Claude um ein HTML-Tool mit allen Aufgaben als verschiebbaren Karten in drei Spalten: "Jetzt", "Als nächstes", "Später". Du ordnest sie per Klicken und Ziehen. Am Ende gibt es einen Button, der dir die sortierte Liste als kopierbaren Text ausgibt, den du direkt in Claude Code einfügen kannst.

Das ist kein Produkt, keine App, nichts Dauerhaftes. Ein Wegwerf-Tool für einen einzigen Zweck.

Abstrakte Illustration von verschiebbaren farbigen Karten in drei Spalten eines einfachen Interfaces

Reports und Recherchen für Entscheider

Du hast Claude gebeten, etwas zu analysieren: Konkurrenten, Optionen für eine Entscheidung, Marktdaten. Das Ergebnis ist oft lang und detailliert.

Als HTML-Report mit einer kurzen Zusammenfassung oben, Details in der Mitte und einer klaren Empfehlung unten ist das für eine Führungskraft oder einen Kunden viel zugänglicher als ein Rohtextblock. Kein endloses Scrollen, kein "Was soll ich jetzt damit anfangen?".

Präsentationen ohne PowerPoint

Du musst einem Kunden oder deinem Team etwas vorstellen. Normalerweise: PowerPoint öffnen, Folien bauen, exportieren, hoffen dass es bei der anderen Person öffnet.

Mit HTML geht das anders. Claude erstellt eine HTML-Datei mit Folien, die du mit den Pfeiltasten navigierst. Kein PowerPoint, kein Keynote, kein Export-Schritt. Du schickst die Datei. Die Qualität reicht für interne Präsentationen und erste Kundenmeetings ohne viel Vorbereitungszeit.

Für Einsteiger

Noch nie mit Claude Code gearbeitet? Dann lies zuerst den Einsteiger-Guide für Claude Code (Setup in 15 Minuten, kein Vorwissen nötig) und das Erste-Projekt-Tutorial, bevor du hier weitermachst.

3 Beispiele: Prompt und Ergebnis

Das sind keine Mockups. Diese drei Dokumente hat Claude Code tatsächlich so erstellt. Du siehst jeweils den genauen Prompt und was rauskommt.

Wochenbericht für den Kunden

"Erstelle einen wöchentlichen HTML-Statusbericht für das Projekt 'Webseite Relaunch' der Muster GmbH. Statusampeln für erledigte Aufgaben, aktuelle Baustellen und blockierte Punkte. Plus eine kurze Zusammenfassung oben und nummerierte nächste Schritte unten."

Screenshot eines HTML-Statusberichts mit farbigen Statusampeln grün gelb rot, kurzer Zusammenfassung oben und nummerierten nächsten Schritten

Die Datei öffnet sich per Doppelklick im Browser und ist sofort verschickbar.

Designvarianten vergleichen

"Ich bin unsicher über die Richtung für die Startseite. Erstelle eine HTML-Datei mit 3 verschiedenen Varianten nebeneinander: dunkel/fokussiert, hell/zwei-spaltig, bold/verspielt. Jeweils ein grobes Preview und die wichtigsten Vor- und Nachteile."

Screenshot einer HTML-Datei mit drei Designvarianten nebeneinander, je mit grobem Vorschau-Layout und Kompromissliste

Eine Entscheidungsgrundlage, ohne eine Zeile Design-Software zu öffnen.

Interaktives Priorisierungs-Board

"Ich muss 10 Aufgaben priorisieren. Erstelle eine HTML-Datei mit drei Spalten: Jetzt, Als nächstes, Später. Jede Aufgabe als Karte mit Farbmarkierung nach Bereich. Vorsortierung nach deiner Einschätzung. Button zum Kopieren der finalen Liste."

Screenshot eines HTML-Boards mit drei Spalten Jetzt Als nächstes Später und farbmarkierten Aufgabenkarten

Du verschiebst die Karten per Klicken und Ziehen. Der "Liste kopieren"-Button gibt dir das Ergebnis als Text, den du direkt in Claude Code einfügen kannst.

So bittest du Claude darum

Einfache Faustregel: Benutze HTML, wenn das Ergebnis für andere gedacht ist oder wenn Claude damit weiterarbeiten soll. Für Notizen, die nur du liest, reicht Markdown weiterhin.

Du brauchst kein HTML-Wissen. Du sagst, was du willst, und fügst "als HTML-Datei" hinzu. Das ist buchstäblich alles.

Vier Prompts, die direkt funktionieren:

Für einen Statusbericht:

"Erstelle einen HTML-Report über den Projektstand dieser Woche. Statusampeln (grün/gelb/rot) für jeden Bereich, kurze Zusammenfassung und die nächsten Schritte für den Kunden."

Für einen Planungsüberblick:

"Erstelle eine HTML-Datei mit dem Implementierungsplan. Füge Mockups der Hauptbereiche ein und zeige den Ablauf als Diagramm. Optimiert für einmaliges Lesen, nicht zum Bearbeiten."

Für Designvergleiche:

"Ich bin unsicher über die Richtung für die Startseite. Erstelle eine HTML-Datei mit 4 verschiedenen Ansätzen nebeneinander. Beschrifte jeden mit dem Kompromiss, den er macht."

Für ein interaktives Tool:

"Ich muss diese 20 Aufgaben priorisieren. Erstelle eine HTML-Datei mit jeder Aufgabe als verschiebbarer Karte in den Spalten Jetzt, Als nächstes und Später. Vorsortierung nach deiner Einschätzung. Button zum Kopieren der finalen Liste als Text."

Du öffnest die generierte Datei per Doppelklick im Browser. Fertig.

Abstrakte Illustration von Textprompts auf einem Bildschirm mit farbigen Hervorhebungen

Ein wichtiger Hinweis: HTML-Dateien brauchen länger zum Generieren als Markdown. Shihipar schätzt das 2- bis 4-fache der normalen Zeit. Für einfache Notizen lohnt sich das nicht. Für alles, was du teilst oder präsentierst, ist es den Unterschied wert. Was alles möglich ist, zeigt seine HTML-Beispiel-Sammlung mit 20 fertigen Dokumenten.

Wenn du Claude Code generell effizienter konfigurieren willst, damit du Muster wie diesen nicht jedes Mal neu beschreiben musst, empfehle ich den Claude Code Best Practices Guide.

Abstrakte Illustration eines geöffneten Browsers mit einem strukturierten, farbigen Dokument auf dem Bildschirm