Anthropic kündigt an: Schreibt in HTML

Vor ein paar Tagen sah ich einen interessanten Beitrag auf X: Anthropics Claude-Code-Team gab bekannt, dass seine interne Dokumentation nicht mehr in Markdown, sondern direkt in HTML geschrieben wird. Der Grund: Markdown ist für Autoren, HTML ist für Leser.

Kurz darauf wurde ein Projekt namens html-anything​ auf GitHub viral – bereits über 2.500 Sterne. Es ermöglicht Ihrem lokalen KI-Agenten, HTML für Sie zu schreiben. Es gibt kein Markdown oder PPTX aus, sondern reine statische HTML-Dateien. Geben Sie Anforderungen links ein, wählen Sie eine Vorlage in der Mitte, und sehen Sie eine Vorschau des Ergebnisses in Echtzeit rechts.

Nach der Installation müssen Sie nur noch eine Sache tun: Beschreiben, was Sie brauchen. Zum Beispiel: „Erstelle einen technischen Blogbeitrag, dunkles Thema, mit Codebeispielen und Datencharts.“

Die KI wählt automatisch die Vorlage aus, wendet Designbeschränkungen an und gibt eine vollständige HTML-Datei aus. Es ist ein fertiges Produkt, kein Entwurf.

Es stellt keine KI bereit, es orchestriert nur

Zur Implementierung: html-anything bringt kein Modell mit, noch verkauft es API-Schlüssel.​ Vereinfacht gesagt, ruft es die KI-Tools auf, die Sie bereits auf Ihrem Computer installiert haben. Claude Code, Cursor, Gemini CLI, Copilot … solange Sie sie schon benutzt und sich angemeldet haben, verwendet es sie einfach. Keine zusätzliche Anmeldung oder Bezahlung erforderlich.

Jede generierte Seite ist ein fertiges Produkt, kein Werk in Arbeit

Es kommt mit 75 sorgfältig gestalteten Vorlagen. Jede Vorlage hat strenge Einschränkungen:

• CJK-erste Schriftartenliste.
• 8px-Basislinienraster.
• Kontrastverhältnis ≥ 4,5.
• Muss echte Daten verwenden.
• Platzhaltertext ist verboten.

Der Vorteil ist, dass sichergestellt wird, dass die Ausgabe professionellen Standards entspricht. Es deckt 9 gängige Szenarien ab:

1. Web-Prototypen.​ Kann verwendet werden, um Landing Pages, Preislisten, Admin-Dashboards, technische Blogs usw. zu erstellen.
2. Präsentationen.​ 20 wählbare Stile, unten ausführlich besprochen.
3. Video generieren.​ Direkt als MP4-Video schreiben und exportieren. Unten ausführlich besprochen.
4. Social-Media-Karten.​ Grafiken im Stil von Xiaohongshu, Twitter, Spotify usw. mit einem Klick generieren.
5. Bürodokumente.​ Vorlagen für Wochenberichte, Anforderungsdokumente, Finanzberichte und andere tägliche Bürodokumente.
6. Lebensläufe.
7. Datenberichte.
8. … und andere Szenarien.

Unter diesen 9 Szenarien sind die Präsentationsvorlagen eine separate Erwähnung wert. Es gibt volle 20 Präsentationsstile. Freunde, die technische Vorträge und Produkt-Demos halten, werden diesen Teil aufsehenerregend finden.

• Schweizer Internationaler Stil:​ Verwenden Sie ein 16-Spalten-Raster mit einer Hauptfarbe. Wählen Sie aus Klein Blau, Zitronengrün usw. Direkt aus 22 festen Layouts anwenden. Es öffnet sich mit diesem „sieht teuer aus“-kühlen Gefühl.
• Magazin- & E-Ink-Stil:​ 10 Layouts gepaart mit 5 Farbschemata, einschließlich Tinte, Indigo Porzellan und Kraftpapier. Sieht aus wie ein fein gedrucktes Kunstmagazin.
• Und Stile wie deck-xhs-pastel(Xiaohongshu Pastell), deck-hermes-cyber(Hermès Cyber Neon), deck-replit(Replit-Produkt-Demo-Stil) usw.

Video-Rahmen-Skripte, können direkt in MP4 gerendert werden

Neben statischen Seiten und Präsentationen kann html-anything auch Videoinhalte generieren. Es stellt 10 Rahmenskripte bereit, die der heygen-com/hyperframes-Spezifikation folgen. Geben Sie sie an Remotion​ weiter, um sie in .mp4zu rendern.

• frame-glitch-title​ – Glitch-Kunst-Titel-Rahmen. Cyan/Magenta-Farbsäulenversatz, CRT-Abtastlinien, beschädigte Datenuntertitel, Absatz-ASCII-Rauschen. Für Cyberpunk-Themen gemacht.
• frame-logo-outro​ – Markenlogo-Abschluss-Rahmen. Logo wird Block für Block zusammengebaut + leuchtender Heiligenschein, Slogan steigt auf, CTA erscheint. Die Schlusskarte für einen Produktlaunch.
• vfx-text-cursor​ – Cursor-Schreibe-Effekt. Jedes Zeichen erscheint mit einer Magenta × Cyan-Farbsäulen-Spur. Geben Sie ein Zitat ein, erhalten Sie einen filmischen Eröffnungsrahmen.

Ein-Klick-Export auf mehrere Plattformen

Sobald der Inhalt generiert ist, ist der nächste Schritt die Veröffentlichung. Html-anything unterstützt den Ein-Klick-Export auf mehrere Mainstream-Plattformen und erspart Ihnen die mühsame manuelle Formatierung.

• WeChat Offizieller Account:​ CSS vollständig inline eingebettet, einfach einfügen und verwenden.
• X / Weibo / Xiaohongshu:​ Automatisch als 2× hohe DPI-PNG gerendert, in die Zwischenablage kopiert.
• Zhihu:​ LaTeX-Formeln werden automatisch zu Bildplatzhaltern verarbeitet.

Wenn Sie jemals unter der Neuformatierung desselben Inhalts für verschiedene Plattformen gelitten haben, ist diese Funktion sehr praktisch.

Streaming-Rendering + Sandbox-Vorschau

Auch die Erfahrung während der Generierung ist wichtig. Html-anything verwendet SSE (Server-Sent Events) Streaming-Rendering, sodass Sie den kreativen Prozess der KI in Echtzeit sehen können. Sie können zusehen, wie die Seite von der KI „gezeichnet“ wird. Wenn Sie sehen, dass sie in die falsche Richtung geht, können Sie sofort abbrechen und neu anweisen, was Generierungsressourcen spart und den kreativen Prozess kontrollierbarer macht.

Auch die Sicherheit wird berücksichtigt; es ist keine grobe Implementierung, die sich nur um die Funktionalität kümmert. Der gesamte generierte HTML-Code wird in einem gesandboxten iFrame in der Vorschau angezeigt, wodurch lokaler Speicher und Cookies isoliert werden.

Nachdem Sie diese Funktionen gesehen haben, bin ich sicher, dass einige von Ihnen es unbedingt ausprobieren möchten.

⚠️ Voraussetzungen:​ Sie müssen mindestens ein unterstütztes KI-CLI lokal installiert haben, wie z. B. Claude Code, und es muss funktionsfähig sein.

Installation (3 Schritte):

1. Klonen Sie den Code auf Ihren Computer. bashbashgit clone https://github.com/nexu-io/html-anything
2. Wechseln Sie in das Verzeichnis und installieren Sie die Abhängigkeiten. bashbashcd html-anything pnpm install
3. Starten Sie mit einem Befehl. bashbashpnpm devÖffnen Sie Ihren Browser unter http://localhost:3000, um die Oberfläche zu sehen.

Möchten Sie sehen, wie jede Vorlage aussieht? Öffnen Sie das Verzeichnis skills/im Repository. Jede Vorlage hat eine example.html-Datei. Doppelklicken Sie, um den Effekt zu sehen.

Zwei kleine Probleme

Natürlich ist das Projekt nicht perfekt. Es hat derzeit zwei Hauptbeschränkungen:

1. Es kann derzeit nur die Formate HTML und PNG​ ausgeben. Wenn Sie PDF oder PPTX benötigen, müssen Sie sich auf den Browserdruck oder Drittanbieter-Tools zur Konvertierung verlassen.
2. Das Ändern von Inhalten erfordert eine Neugenerierung über den KI-Agenten. Die Einstiegshürde ist für Personen, die kein KI-CLI installiert haben, etwas hoch.

Abschließende Gedanken

Nachdem wir so viel über die Funktionen gesprochen haben, kehren wir zum Ausgangsthema zurück – HTML oder Markdown?

Es gibt in der Community einige Debatten. Einige denken, Markdown reicht aus – einfach, direkt und versionskontrollfreundlich. Andere glauben, HTML ist die richtige Antwort – freies Layout, WYSIWYG. Beide Ansichten haben ihre Berechtigung.

Ich denke, der Schlüssel liegt nicht im Format selbst, sondern im Kontext, in dem Sie sich befinden.

• Notizen machen, Dokumentation schreiben.​ Markdown reicht aus.
• Plattformübergreifende Veröffentlichung, feines Layout erforderlich.​ Die Vorteile von HTML kommen zum Tragen.

Besonders jetzt, da KI Ihnen helfen kann, HTML zu schreiben, ist die Formatierungsbarriere kein Problem mehr. Was denken Sie?

Das Projekt ist unter der Apache-2.0-Lizenz​ quelloffen. Interessierte Freunde können den Quellcode und die Dokumentation im GitHub-Repository einsehen.

Open-Source-Adresse:​ https://github.com/nexu-io/html-anything