answer-me-with-html erklärt: Antworten als HTML-Seite statt Textwand

Was ist answer-me-with-html? Es ist ein Skill für Coding-Agenten, der eine komplexe Antwort nicht als lange Textwand im Terminal ausgibt, sondern als eine einzige, gut lesbare HTML-Seite. Das Sprachmodell schreibt dafür nur einen kurzen Entwurf in erweitertem Markdown; ein mitgeliefertes Programm übernimmt Layout, Farben, Dunkelmodus und die Koordinaten der Diagramme.

Ein Agent-Skill ist dabei eine Sammlung von Anleitungen, die ein Agent wie Claude Code bei Bedarf lädt. Der Skill bestimmt also, wann eine Seite entsteht und wie der Entwurf aufgebaut sein muss.

Warum answer-me-with-html gerade so gefragt ist

Das Repository QingYunA/answer-me-with-html ist seit dem 02.10.2026 öffentlich und zählte am 04.11.2026 5'280 Sterne und 351 Forks (Stand 04.11.2026, Quelle: GitHub). Zwischen dem 04.10. und dem 26.10.2026 erschienen 20 Releases, zuletzt Version 0.5.10.

Das README begründet den Ansatz mit einer eigenen Messung: Bei neun von Hand geschriebenen HTML-Seiten seien 79 Prozent der Tokens auf SVG-Koordinaten, CSS und HTML-Tags entfallen. Mit dem Skill schreibe das Modell laut README im Mittel 612 statt 4'893 Tokens und sei 2,6-mal schneller. Diese Werte stammen vom Hersteller; wir haben sie nicht nachgemessen. Das README verweist ausserdem auf einen Beitrag von Andrej Karpathy über Erklärformate für Sprachmodell-Antworten, an dem sich die Videofunktion orientiert.

So funktioniert es

Der Ablauf laut SKILL.md:

1. Entscheiden. Gibt es mindestens drei zusammenhängende Begriffe, einen Ablauf, einen Vergleich oder eine Entwicklung über die Zeit, wird eine Seite erzeugt. Sonst bleibt es bei Text.
2. Panels planen. Drei bis acht Felder, jedes beantwortet genau eine Teilfrage.
3. Bausteine wählen. Für Abläufe gibt es flow, für Nachrichten zwischen Beteiligten sequence, für Hierarchien tree, für Zeitachsen timeline, dazu Tabellen mit Statuswörtern, Hinweisboxen (callout) und Rückfragen an den Leser (ask).
4. Rendern. Das Programm prüft den Entwurf, meldet Fehler mit Zeilennummer und Korrekturbeispiel und schreibt die Seite.
5. Antworten. Im Chat stehen danach nur zwei bis drei Zeilen und der Link zur Seite.

Auffällig ist der Schreibstil, den der Skill verlangt. Er stützt sich auf ASD-STE100, eine kontrollierte Fachsprache aus der Luftfahrt: Antwort zuerst, ein Satz pro Fakt, keine Einleitung, keine Zusammenfassung am Schluss. Für Deutsch prüft das Programm nur Satz- und Absatzlänge.

Installation

Laut README gibt es mehrere Wege. In Claude Code als Plugin:

/plugin marketplace add QingYunA/answer-me-with-html
/plugin install answer-me-with-html@answer-me-with-html

Oder über den Installer für mehrere Agenten:

npx skills add QingYunA/answer-me-with-html

Voraussetzung ist Node.js ab Version 20. Diese Befehle haben wir nicht ausgeführt. Wir haben die SKILL.md und die Referenzdokumentation als Text von GitHub gelesen (Commit 406ef8d) und den Skill selbst wörtlich angewendet.

Unser Test

Wir haben den Skill in Claude Code (Modell Claude Opus 5.5) mit folgender Frage angewendet: «Wie funktioniert DNSDas DNS (Domain Name System) ist das Adressbuch des Internets: Es übersetzt einen Domainnamen wie beispiel.ch in die IP-Adresse des Servers, auf dem die…Mehr erfahren →, wenn ich meine DomainEine Domain ist der eindeutige Name einer Website im Internet, etwa beispiel.ch. Sie besteht aus dem frei wählbaren Namen (Second-Level-Domain) und der Endung…Mehr erfahren → zu einem neuen Hoster umziehe?» Als Beispiel diente die fiktive Domain der Schreinerei Holzwerk Muster in Winterthur. Nach den Regeln des Skills entstand ein Entwurf mit sieben Panels: eine Abfrage vom Browser bis zum Nameserver als Sequenzdiagramm, ein Flussdiagramm zu dem, was sich beim Umzug ändert, sechs Schritte in der richtigen Reihenfolge, eine Tabelle der Einträge, die mit müssen, ein Warnhinweis zu E-Mail, Prüfbefehle mit dig und ein ehrlicher Hinweis, dass sich die Dauer nur über die TTL-Werte abschätzen lässt.

Das gebündelte Programm am.mjs ist eine einzelne Datei von rund einem Megabyte. Fremden Code dieser Grösse führen wir auf unseren Rechnern nicht ungeprüft aus. Das Projekt bietet auf seiner Website einen Playground, der laut eigener Angabe denselben Renderer im Browser ausführt, ohne dass Daten das Gerät verlassen. Dort haben wir den Entwurf eingefügt; die erzeugte Seite trägt die Kennung «Answer me with HTMLHTML (Hypertext Markup Language) ist die Auszeichnungssprache, mit der der Inhalt und die Struktur jeder Webseite beschrieben werden: Überschriften, Absätze,…Mehr erfahren → 0.5.10».

Was gut war: Die Diagramme wurden ohne Nacharbeit sauber gesetzt, auch mit deutschen Umlauten und Teilnehmernamen wie «Registry .ch». Die Tabelle wurde mit einer Zeile Zusatz sortierbar, und die Statuswörter ok und warn erschienen als Häkchen und Ausrufezeichen. Die Seite ist eine einzelne Datei mit strenger Content-Security-Policy, sie lädt nichts aus dem Netz nach. Der Reply-Knopf erlaubt es, Kommentare zu einzelnen Panels zu sammeln und als Markdown an den Agenten zurückzugeben.

Was weniger gut war: Die Bedienelemente der Seite sind englisch beschriftet (Reply, Remark, Copy source), auch wenn der Inhalt deutsch ist; eigene Beschriftungen gibt es laut Dokumentation nur für Englisch, Chinesisch, Japanisch und Hebräisch. Die Zahl der Panels und der Stil sind bewusst knapp. Wer eine ausführliche Anleitung für Kunden braucht, muss den Text danach ergänzen oder eine echte Dokumentationsseite bauen. Ausserdem haben wir nur einen Entwurf geprüft; wie gut ein Agent die Regeln über viele Fragen hinweg einhält, wissen wir nicht.

Beispiele aus der Praxis

• Interne IT-Fragen in KMU: Wer einen Domain-Umzug, die Einrichtung von SPF und DKIM oder einen Wechsel des E-Mail-Anbieters plant, erhält statt einer langen Chat-Antwort eine Seite, die sich im Team weitergeben lässt. Mehr zu den Grundlagen steht im Glossar unter DNS.
• Code-Erklärungen in Agenturen: Die Bausteine für Ordnerbäume, Datenmodelle und Diffs eignen sich, um neuen Teammitgliedern den Aufbau eines Projekts zu zeigen. Code lässt sich mit Dateipfad und Zeilenangabe einbetten, statt ihn abzutippen.
• Entscheidungen vorbereiten: Mit dem Baustein ask legt der Agent offene Entscheidungen direkt auf die Seite. Der Leser wählt Optionen, kommentiert und kopiert eine strukturierte Antwort zurück.

Grenzen, Risiken, Lizenz

Die Lizenz ist MIT, die Nutzung auch kommerziell erlaubt. Die Schrift Bangers im Skill-Ordner steht unter der SIL Open Font License. Die Seiten entstehen lokal; was das Gerät verlässt, ist der Inhalt, den das Sprachmodell ohnehin verarbeitet. Wer Kundendaten oder internen Code in einer Seite einbettet, sollte daran denken, dass die Seite den Entwurf im Quelltext mitführt (Funktion «Copy source»), bevor sie weitergegeben wird. Für das Datenschutzgesetz (DSG)Das Datenschutzgesetz (DSG) regelt in der Schweiz, wie Unternehmen und Bundesorgane Personendaten bearbeiten dürfen. Die revidierte Fassung (revDSG) gilt seit…Mehr erfahren → gilt dasselbe wie bei jeder Arbeit mit Sprachmodellen: Personendaten nur mit geklärtem Anbieter verarbeiten.

Das gebündelte Programm ist gross und für Laien kaum prüfbar. Wer den Skill installiert, führt es bei jeder Antwort aus. Das ist bei einem populären, quelloffenen Projekt mit Tests vertretbar, aber kein Freipass: vorher in einem Testordner ausprobieren und Updates bewusst einspielen. Hinweise dazu stehen in unserem Artikel über sicheres Vibe-Coding.

Für wen lohnt sich answer-me-with-html?

Für alle, die regelmässig mit einem Coding-Agenten arbeiten und Erklärungen, Pläne oder Vergleiche lieber anschauen als lesen. Für reine Kurzfragen bringt der Skill nichts. Wer KI-Werkzeuge wie dieses im Unternehmen sinnvoll einführen möchte, findet Unterstützung bei unserer KI-Beratung, und Praxiswissen im Artikel über Claude Code im Unternehmen.

Weitere Projekte aus dieser Serie finden Sie in der Übersicht über alle 20 GitHub-Trends vom November 2026.