Design ohne Designer: Interfaces direkt im Terminal erstellen

Eine vertraute Geschichte: Du schreibst Code, die Logik funktioniert perfekt, aber alles sieht aus wie ein Relikt aus den Neunzigern. Um es gut aussehen zu lassen, musst du entweder Figma öffnen und dich daran erinnern, wie man Rechtecke zeichnet, oder einen Designer anrufen und eine Woche warten. Aber was, wenn du nur schnell einen Prototyp skizzieren oder eine Präsentation für ein Meetup zusammenstellen musst?

Kürzlich bin ich auf das huashu-Design-Repository gestoßen. Es ist kein weiterer Grafikeditor oder keine UI-Komponentenbibliothek im herkömmlichen Sinne. Es ist eine „Fähigkeit" für KI-Agenten (wie Claude Code oder Cursor), die Textprompts in sofort einsatzbereite, funktionierende Design-Artefakte umwandelt. Du gibst buchstäblich im Terminal ein: „Erstelle mir einen Prototyp einer iOS-Habit-Tracker-App," und ein paar Minuten später erhältst du eine interaktive HTML-Datei.

Was ist das überhaupt

Der Projektentwickler, bekannt als 花叔 (Huasheng), hat sich zum Ziel gesetzt, die Claude-Design-Philosophie auf die Kommandozeile zu bringen. Die Kernidee ist, dass gutes Design nicht im Vakuum entsteht. Es wächst aus dem Kontext: bestehenden Markenrichtlinien, Logos und Farbpaletten.

Huashu Design ist eine Sammlung von Anweisungen und Tools, die ein neuronales Netzwerk darauf trainieren, wie ein professioneller Junior-Designer zu arbeiten. Das Tool kann Farben von deiner Website extrahieren, Schriftarten auswählen und nicht nur Bilder, sondern funktionierenden Code generieren.

Was dieses Tool kann

Das Projekt adressiert mehrere Schmerzpunkte von Entwicklern bei visuellen Elementen. Hier ist, was es ausgibt:

1. Interaktive Prototypen. Es generiert HTML-Dateien mit einem iPhone-15-Pro-Frame-Mockup. Buttons sind klickbar, Screens wechseln, Daten werden von echten APIs oder Mocks geladen.
2. PPTX-Präsentationen. Du bittest es, Folien für einen Vortrag zu skizzieren, und das Tool erstellt ein HTML-Deck, das in Standard-PowerPoint konvertiert werden kann. Und das werden keine Bilder sein – es werden bearbeitbare Textblöcke sein.
3. Motion Design. Es hat eine eingebaute Stage-+-Sprite-Engine. Du kannst es bitten, eine Animation des Workflows deines Algorithmus zu erstellen und erhältst eine MP4- oder GIF-Ausgabe.
4. Infografiken. Wenn du Daten für einen Artikel oder Bericht visualisieren musst, setzt das Tool ein Magazin-Layout mit CSS Grid.

Ein interessantes Detail: Das Projekt enthält 40 fertige Stile (20 für Web und 20 für Präsentationen). Das hilft, den typischen „KI-generierten" Stil mit lila Verläufen und austauschbaren Icons zu vermeiden, den alle bereits satt haben.

Wie es unter der Haube funktioniert

Das Wertvollste hier sind die Brand-Working-Protokolle. Wenn du es bittest, ein Design für ein bestimmtes Unternehmen zu erstellen, rät das Tool nicht einfach Farben. Es folgt einem strikten Algorithmus:

• Sucht nach der offiziellen Seite brand.company.com.
• Lädt Logos im SVG-Format herunter.
• Parst die CSS-Dateien der Website, um exakte HEX-Farbcodes zu extrahieren.
• Speichert alles in Datei brand-spec.md.

Erst danach beginnt das eigentliche Rendering. Dieser Ansatz stellt sicher, dass das Ergebnis nicht wie eine zufällige Bastelei aussieht.

Für Animationen wird ein Timeline-Modell verwendet. Du beschreibst die Logik über APIs wie useTime oder interpolate, und eingebaute Scripts auf Basis von Playwright rendern sie in einen Video-Stream.

Wie man es ausprobieren kann

Das Tool ist für Claude Code optimiert, kann aber für andere KI-Tools angepasst werden. Die Installation ist unkompliziert:

npx skills add alchaincyf/huashu-design

Danach kannst du direkte Befehle im Chat des Agenten geben. Zum Beispiel: „Erstelle eine Präsentation über KI-Psychologie in 3 Stilvarianten." Der Agent wird nicht einfach Text ausschütten – er wird drei visuelle Richtungen basierend auf seiner Stilbibliothek vorschlagen.

Für wen ist das nützlich

Ich sehe zwei Hauptszenarien. Das erste ist schnelles Testen von Hypothesen. Wenn du einem Kunden oder Team zeigen musst, wie eine Funktion funktionieren wird, ohne stundenlang an Mockups zu arbeiten. Das zweite ist Content-Erstellung. Wenn du einen Blog betreibst oder auf Konferenzen sprichst, ist die Fähigkeit, eine stilvolle Präsentation oder Animation zu erstellen, während du Code schreibst, ein enormer Zeitersparnis.

Das Projekt ist kürzlich auf MIT-Lizenz umgestiegen, sodass es frei für kommerzielle Zwecke verwendet werden kann.

Natürlich wird huashu-Design keinen Art Director ersetzen. Komplexe Interfaces mit tiefgreifender UX-Verfeinerung erfordern nach wie vor menschliche Hände. Aber für Aufgaben in der Art von „mach es gut und schnell" ist dies arguably eine der interessantesten Lösungen, die ich in letzter Zeit gefunden habe.

Wenn du es leid bist, mit CSS zu kämpfen oder möchtest, dass deine Nebenprojekte anständig aussehen – wirf einen Blick auf das Repository. Die README enthält viele Live-Beispiele, die die Fähigkeiten besser erklären als jeder Text.