Wer ein Interface-Konzept zeigen will, greift oft zuerst zu Figma oder einem anderen Designtool. Das funktioniert, dauert aber. huashu-design ist ein Claude-Code-Skill, der diesen Schritt überspringt. Du beschreibst dein Interface oder deine Präsentation in natürlicher Sprache, und Claude generiert eine vollständige HTML-Datei mit Styles und Animationen.
Der Skill bringt 20 Designprinzipien und ein fünfdimensionales Review-System direkt in Claude Code. So erhältst du nicht nur generierten Code, sondern auch eine strukturierte Einschätzung: Visuelles Design, Nutzbarkeit, Konsistenz, Zugänglichkeit und technische Qualität werden automatisch bewertet.
Was ist huashu-design?
huashu-design ist ein Open-Source-Skill für Claude Code, entwickelt von Alchain. Der Skill ergänzt Claudes Fähigkeiten um spezifische Designregeln. Claude Code kennt nach der Einrichtung Konzepte wie visuelle Hierarchie, Weißraum, Kontrast und typografische Prinzipien, weil sie im Skill explizit beschrieben sind.
Das Besondere: Der Skill funktioniert vollständig lokal im Browser. Kein externes Design-SaaS, kein Cloud-Abo, keine Anmeldung. Du arbeitest mit statischem HTML und CSS, das sofort im Browser läuft. Für Animationen nutzt der Skill CSS-Transitions und, wo nötig, JavaScript. Den fertigen Output kannst du direkt als MP4 exportieren, zum Beispiel für einen Produktteaser oder eine Demo.
Das Projekt ist agent-agnostic: Du kannst huashu-design theoretisch auch mit anderen KI-Agenten nutzen. Für Claude Code ist es aber besonders optimiert, weil die Skill-Datei direkt in die CLAUDE.md-Logik integriert wird.
Installation und erste Schritte
Die Einrichtung folgt dem Standard-Muster für Claude-Code-Skills. Du klonst das Repository und referenzierst die Skill-Datei in deiner Projektkonfiguration.
# Repository in dein Tools-Verzeichnis klonen
git clone https://github.com/alchaincyf/huashu-design ~/tools/huashu-design
# Skill in deine CLAUDE.md einbinden
echo "" >> CLAUDE.md
echo "@~/tools/huashu-design/CLAUDE.md" >> CLAUDE.md
Nach dem nächsten claude-Start ist der Skill aktiv. Du kannst sofort Prompts für Designs schreiben, und Claude berücksichtigt automatisch die hinterlegten Designregeln.
Ein einfacher Einstiegs-Prompt könnte so aussehen: "Erstelle eine Landing Page für eine SaaS-App zur Zeiterfassung. Modernes Design, dunkles Farbschema, eine klare CTA-Schaltfläche." huashu-design sorgt dafür, dass Claude nicht nur irgendein HTML generiert, sondern den Output auch nach den fünf Qualitätsdimensionen prüft und bewertet.
Praxisbeispiel: Slide-Deck für eine Investorenpräsentation
Stell dir vor, du brauchst in zwei Stunden eine erste Version deiner Pitch-Präsentation. Du hast keine Keynote-Vorlage und keinen Designer zur Hand. huashu-design ist genau für diesen Fall gemacht.
Du schreibst einen Prompt wie: "Erstelle ein Slide-Deck mit fünf Slides. Thema: B2B-SaaS für HR-Teams. Professioneller Look, helles Design mit einem blauen Akzent. Slides: Titelseite, Problem, Lösung, Traction, Team." Claude generiert daraufhin ein HTML-Dokument, das du direkt im Browser öffnen und mit den Pfeiltasten navigieren kannst.
Das Ergebnis ist kein Wireframe, sondern ein High-Fidelity-Entwurf mit Typografie, Farben und Layout. Du kannst das HTML direkt anpassen oder Claude bitten, einzelne Slides zu überarbeiten. Wenn du eine Video-Demo brauchst, nimmst du den Browser-Output als MP4 auf.
Dieser Workflow spart Zeit in frühen Projektphasen. Du bekommst schnell ein Artefakt, das du Stakeholdern zeigen oder für Feedback nutzen kannst.
Wann lohnt sich huashu-design?
huashu-design ist kein Ersatz für professionelles UI-Design in der Produktion. Figma bleibt das richtige Werkzeug, wenn du pixelgenaue Specs für Entwickler brauchst oder ein komplexes Design-System pflegst.
Der Skill lohnt sich besonders in diesen Situationen:
- Du entwickelst alleine oder im kleinen Team ohne feste Designerrolle.
- Du willst eine Idee schnell visualisieren, bevor du Zeit in Figma oder Code investierst.
- Du baust Demos, Onboarding-Flows oder Marketing-Slides und brauchst keine pixel-perfekte Übergabe.
- Du lernst Claude Code und willst ausprobieren, wie weit KI-generierte Designs tragen.
Für alle, die bereits andere Claude-Code-Skills für Design einsetzen, passt huashu-design gut dazu. Eine alternative Perspektive auf HTML-Prototypen liefert der Artikel open-design Skills für Claude Code: Prototypen lokal generieren, der zahlreiche fertige Design-Skills und Design-Systeme direkt in Claude Code bringt.
Häufige Fragen
Muss ich HTML oder CSS kennen, um huashu-design zu nutzen? Grundkenntnisse helfen, wenn du den generierten Code anpassen willst. Für die reine Nutzung reicht ein klarer Prompt. Claude erklärt auf Nachfrage auch, was er generiert hat und warum.
Was bedeutet das fünfdimensionale Review-System konkret? Der Skill enthält Anweisungen, den generierten Output nach fünf Kriterien zu prüfen: Visuelles Design, Nutzbarkeit, Konsistenz, Zugänglichkeit und technische Korrektheit. Claude gibt dir nach der Generierung automatisch Feedback zu diesen Punkten, sofern du es anforderst.
Kann ich den Output in echte Produktionsprojekte übernehmen? Ja, aber mit Bedacht. Das generierte HTML ist sauber und brauchbar. Für Produktionscode solltest du es trotzdem reviewen und an dein Design-System anpassen. Als Startpunkt oder Prototyp ist es gut geeignet.
Komm in die kostenlose Claude Business Community: lerne Claude, Automatisierung, Co-Work, Claude Code, App-Building und Agent-Coding. Zeit sparen, Kosten sparen, Business skalieren: Claude Business Community auf Skool.
Autor: Marcel Porcher, newways.ai