Huashu Design: HTML-native Design-Skill für Agenten unter MIT
Huashu Design · HTML-native Design-Fertigkeit für Claude Code · Claude Code – HTML-Fähigkeit für die Veröffentlichung von Inhalten · 高保真原型 / 幻灯片 / 动画 + 20 Seiten + 5 Seiten + MP4-Dateien · Agentenunabhängig.
Auf einen Blick
- Was ist das?
- Huashu Design ist keine Bibliothek, sondern eine Skill für Agenten, die aus einem Satz Prototypen, Präsentationen und Animationen erzeugt. Das README beschreibt ein fünfstufiges Marken-Asset-Protokoll, einen Berater mit drei parallelen Logiken und eine Exportkette bis zum editierbaren PPTX.
- Für wen ist es gedacht?
- Huashu Design passt zu Leuten, die bereits mit einem Agenten in einem Projektverzeichnis arbeiten und Entwürfe, Präsentationen oder Kurzanimationen direkt dort erzeugen wollen. Weniger geeignet ist es für Teams, die Ebenen in Figma weiterbearbeiten müssen, oder für Animationen jenseits des Stage- und Sprite-Modells.
- Darf ich es kommerziell nutzen?
- Ja. MIT ist eine freizügige Lizenz: Sie dürfen darauf aufbauende Software nutzen, verändern und verkaufen, solange Sie die Urheberrechts- und Lizenzhinweise beibehalten.
- Wird es noch gepflegt?
- Ja. Das Repository hat innerhalb des letzten Tages neue Commits erhalten.
- In welcher Sprache ist es geschrieben?
- Hauptsächlich HTML, laut der Sprachstatistik von GitHub.
Die Antworten beruhen auf den GitHub-Daten des Projekts (zuletzt abgeglichen am 15. September 2026) und auf unserer Analyse. Sie sind keine Rechtsberatung.
TIEFGEHENDE OPEN-SOURCE-ANALYSE
Huashu Design: ein Satz, ein Agent, ein ablauffähiges Ergebnis
Huashu Design ist keine Bibliothek, sondern eine Skill für Agenten, die Markdown-Anweisungen lesen können. Die Beschreibung im Repository nennt sie eine HTML-native Design-Skill, die hochauflösende Prototypen, Präsentationen und Animationen erzeugt, ergänzt um zwanzig Designphilosophien, eine fünfdimensionale Bewertung und einen MP4-Export. Als Hauptsprache ist HTML eingetragen, der Default-Branch heißt master, die jüngste erfasste Veröffentlichung ist v2.0 vom 21. April 2026 mit dem Titel eines Neuaufbaus von neun Leistungsdemonstrationen in zwei Sprachen.
Der Arbeitsweise nach ist es ein Gespräch. Man formuliert einen Satz, und der Agent liefert je nach Auftrag ein klickbares HTML-Prototyp, ein HTML-Deck mit editierbarem PPTX, eine MP4-Animation mit Hintergrundmusik, eine Infografik oder mehrere Designvarianten. Das README nennt ausdrücklich keine Schaltflächen, keine Panels und kein Figma-Plugin.
Auf die Frage nach den unterstützten Agenten antwortet das README mit einer Liste: Claude Code, Cursor, Codex, OpenClaw und Hermes. Die Kurzbeschreibung bezeichnet die Skill als agentenunabhängig.
Installation mit npx skills add alchaincyf/huashu-design und die Verzeichnisprüfung
Die Installation besteht aus einer Zeile: npx skills add alchaincyf/huashu-design. Das README hängt daran eine Prüfung, die man ernst nehmen sollte, weil sie den häufigsten Fehlerfall beschreibt. Die Skill bestehe nicht allein aus SKILL.md, sondern verweise auf 99 Rezepte, Skripte und Materialien in den vier Unterverzeichnissen references/, assets/, scripts/ und demos/. Fehlen diese Verzeichnisse im Installationspfad, etwa unter ~/.claude/skills/huashu-design/, sei die verwendete skills-CLI zu alt. Ein Fehler, der nur eine einzige Datei synchronisiert, habe bis Version 1.5.15 bestanden und sei mit 1.5.19 behoben worden.
Die Abhilfe lautet npm i -g skills@latest, gefolgt von einer erneuten Installation. Bleibt das Ergebnis trotzdem unvollständig, empfiehlt das README den Weg über einen Klon, also git clone https://github.com/alchaincyf/huashu-design.git ~/.claude/skills/huashu-design.
Diese Selbstprüfung ist aufschlussreich, weil sie zeigt, wie stark die Skill von mitgeliefertem Material abhängt. Eine Installation, die nur die Anweisungsdatei enthält, ergibt eine Skill ohne Stilbibliothek und ohne Exportskripte.
Marken-Asset-Protokoll: fünf Schritte bis zur brand-spec.md
Das README bezeichnet das Marken-Asset-Protokoll als die härteste Regel der Skill. Sobald eine Aufgabe eine konkrete Marke betrifft, sind fünf Schritte vorgeschrieben. Erstens wird gefragt, ob eigene Markenrichtlinien vorliegen. Zweitens werden offizielle Seiten durchsucht, konkret <brand>.com/brand, brand.<brand>.com und <brand>.com/press. Drittens werden Assets heruntergeladen, mit drei Fallback-Stufen: SVG-Datei, danach das vollständige HTML der Website, danach ein Farbabgriff aus Produktscreenshots.
Der vierte Schritt ist der aufschlussreiche: Aus den geladenen Assets werden alle Hex-Werte herausgefiltert, nach Häufigkeit sortiert und von Schwarz, Weiß und Grau befreit. Die Begründung im README ist eindeutig, Markenfarben dürfen nicht aus dem Modellgedächtnis stammen. Im fünften Schritt wird das Ergebnis in brand-spec.md festgeschrieben und als CSS-Variable var(--brand-*) verfügbar gemacht, auf die alle erzeugten HTML-Dateien zugreifen.
Das README berichtet von einem Vergleich zwischen Version 1 und Version 2 mit je sechs Agenten, bei dem die Streuung der Ergebnisse um das Fünffache gesunken sei. Testdetails werden nicht genannt, der Wert ist selbst berichtet.
Designrichtungs-Berater mit Sekundenrad und sechzig CSS-Stilen
Wenn ein Auftrag zu vage für den Anfang ist, greift der Designrichtungs-Berater. Er beginnt mit Rückfragen und der Bitte um Referenzen, beschafft benötigte Bilder aus gemeinfreien Quellen und lässt dann drei Subagenten parallel arbeiten.
Der erste bestimmt eine Richtung über date +%S, also aus den Sekunden der aktuellen Uhrzeit, und wählt eins aus zwanzig. Das README begründet diesen Kunstgriff damit, dass das Modell sonst aus Bequemlichkeit zum Minimalismus neige. Der zweite überträgt Muster preisgekrönter Websites, Präsentationen und iOS-Prototypen auf die eigene Aufgabe. Der dritte orientiert sich an der Philosophie eines Studios, das man bei unbegrenztem Budget beauftragen würde.
Alle drei liefern vollständige visuelle Entwürfe, erst danach wird ausgewählt. Die Begründung lautet, dass eine Stilwahl anhand von Textbeschreibungen kaum zu treffen sei. Unterlegt ist das von einer Sammlung aus sechzig HTML-nativen Stilen, aufgeteilt in zwanzig für Webseiten, zwanzig für Präsentationen und zwanzig für Infografiken, alle als reines CSS ohne Bilderzeugung.
Junior-Designer-Workflow und die Anti-Slop-Regeln
Der Standardmodus heißt Junior Designer Workflow. Er verlangt, Rückfragen gebündelt zu stellen und die Antworten abzuwarten, Annahmen, Platzhalter und Begründungen direkt als Kommentare ins HTML zu schreiben, früh etwas Sichtbares zu zeigen, und vor der Ablieferung einen Browsertest mit Playwright durchzuführen. Der Gedanke dahinter ist ökonomisch: Ein Missverständnis, das nach zwei Minuten auffällt, kostet wenig.
Für die Optik führt das README eine Liste von Verboten, die als Anti-Slop-Regeln bezeichnet werden: violette Farbverläufe, Emoji als Symbole, abgerundete Ecken mit Akzentlinie links, SVG-Gesichter, Inter als Auszeichnungsschrift und CSS-Silhouetten anstelle echter Produktfotos. Empfohlen werden dagegen text-wrap: pretty, CSS Grid, sorgfältig gewählte Serifen für Überschriften sowie oklch-Farben.
Für Animationen stellt die Skill ein Zeitmodell mit Stage und Sprite bereit, angesteuert über vier Schnittstellen: useTime, useSprite, interpolate und Easing. Für iOS-Prototypen wird eine maßstabsgetreue Gerätehülle mit Statusleiste und Home Indicator erzeugt, deren Zustandswechsel Playwright automatisch anklickt.
Exportkette: html2pptx.js, render-video.js, convert-formats.sh
Die Exportseite ist konkret benannt. html2pptx.js liest die berechneten Stile des DOM und übersetzt jedes Element in ein PowerPoint-Objekt, sodass echte Textfelder entstehen, die sich in PowerPoint doppelt anklicken und bearbeiten lassen. Für Video nennt das README render-video.js, convert-formats.sh für die Umrechnung auf 60 fps sowie GIF mit optimierter Palette und add-music.sh für die Hintergrundmusik. Für Präsentationen gibt es export_deck_pdf.mjs und export_deck_pptx.mjs, hinzu kommt verify.py.
Die Zeitangaben in der Übersichtstabelle liegen zwischen drei Minuten für eine fünfdimensionale Bewertung und 15 bis 25 Minuten für eine Präsentation mit editierbarem PPTX. Das sind selbst berichtete Werte ohne Vergleichsumgebung.
Zur Ausführung heißt es, die Kernpipeline aus Entwurf, Rendering und Export laufe vollständig lokal ohne Netzwerkaufrufe. Cloud-Funktionen wie Sprachausgabe über Doubao TTS und KI-Videobewertung lägen isoliert in scripts/cloud/, benötigten eigene Schlüssel und eine ausdrückliche Zustimmung über die Option --yes. Jeder ausgehende Host sei in SECURITY.md aufgeführt; diese Datei gehört nicht zum erfassten Material, eine Prüfung der Netzwerkzugriffe erfordert also das vollständige Repository.
MIT seit 2026-05-14, eigene Grenzen und der Vergleich mit Claude Design
Seit dem 14. Mai 2026 steht das Repository unter MIT. Das README hebt hervor, dass damit eine frühere Regelung mit getrennter kommerzieller Nutzung entfällt und die Nutzung für jeden Zweck ohne vorherige Genehmigung erlaubt ist. Ein Supportanspruch oder eine Gewährleistung ergibt sich daraus nicht.
Die Grenzen listet das README selbst auf. Es gebe keinen Ebenen-Rundlauf zwischen PPTX und Figma, Animationen in der Art von Framer Motion lägen außerhalb des Rahmens, und ohne Marken-Assets sinke die Gestaltungsqualität auf 60 bis 65 Punkte. Diese letzte Zahl ist eine Selbsteinschätzung der Skill und kein unabhängiges Maß.
Zur Einordnung zieht das README selbst den Vergleich mit Claude Design von Anthropic und führt die Idee des Asset-Protokolls auf dessen Systemprompts zurück. Der Unterschied liegt in der Form: Dort ein Browserprodukt mit Abonnementkontingent und Oberfläche, hier eine Skill im Agenten, die über die API-Nutzung läuft und HTML, MP4, GIF, editierbares PPTX und PDF ausgibt. Wer keine Agenten-Umgebung mit Dateizugriff betreibt, hat für dieses Repository keine Verwendung.
Redaktionelles Fazit
Huashu Design passt zu Leuten, die bereits mit einem Agenten in einem Projektverzeichnis arbeiten und Entwürfe, Präsentationen oder Kurzanimationen direkt dort erzeugen wollen. Weniger geeignet ist es für Teams, die Ebenen in Figma weiterbearbeiten müssen, oder für Animationen jenseits des Stage- und Sprite-Modells. Prüfen Sie zuerst, ob nach npx skills add alchaincyf/huashu-design die Verzeichnisse references/, assets/, scripts/ und demos/ tatsächlich angelegt wurden, und lassen Sie danach mit verify.py einen ersten Export laufen.
Community-Notizen