Wer mit Claude Code entwickelt, kennt diese Lücke: Der Code sitzt, aber der visuelle Prototyp fehlt. open-design schließt diese Lücke. Das Skill-Paket aus dem Repository nexu-io/open-design bringt 19 fertige Design-Skills direkt in deine Claude-Code-Session und macht aus Textbeschreibungen klickbare Prototypen.
Das Projekt positioniert sich als lokale, quelloffene Alternative zu Anthropics eigenem Claude Design. Du brauchst kein Cloud-Abo, kein Figma-Konto und kein Designer-Team. Du installierst die Skills einmal und kannst sofort Prototypen für Web, Desktop und Mobile generieren.
Was ist open-design?
open-design ist eine Sammlung von Claude-Code-Skills kombiniert mit einem umfassenden Design-System-Repository. Das Paket enthält 19 vorgefertigte Skills und 71 Design-Systeme. Es deckt damit ein breites Spektrum ab: von Material Design über minimalistische Stile bis hin zu plattformspezifischen UI-Frameworks.
Die besondere Stärke liegt in der Vielfalt der Ausgabeformate. Du kannst mit einem einzigen Befehl nicht nur statische Mockups erstellen, sondern auch klickbare Prototypen, Präsentations-Slides, Bilder, Videos und sogenannte HyperFrames. HyperFrames bündeln mehrere UI-Zustände in einem einzigen interaktiven Dokument. Das ist nützlich, wenn du einen kompletten User Flow auf einmal präsentieren willst.
Das Projekt läuft vollständig lokal. Deine Design-Daten verlassen deinen Rechner nicht. Das macht es besonders interessant für Teams, die mit vertraulichen Produktideen arbeiten.
Wie richtest du open-design ein?
Skills für Claude Code kannst du über die Kommandozeile hinzufügen. Das folgende Kommando fügt das open-design-Paket zu deiner lokalen Claude-Code-Umgebung hinzu:
# open-design Skills zu Claude Code hinzufügen
npx skills add nexu-io/open-design
Nach der Installation stehen dir alle 19 Skills per Slash-Command zur Verfügung. Du rufst sie direkt in deiner Claude-Code-Session auf. Eine separate Konfigurationsdatei brauchst du nicht.
Die Design-Systeme sind vorkonfiguriert. Du wählst das passende System aus und gibst Claude Code deine Anforderungen. Die KI kombiniert dann die Vorgaben aus dem Design-System mit deiner Beschreibung und generiert den Prototyp.
Wichtig: Claude Code Skills laufen lokal und greifen auf dein Dateisystem zu. Du solltest verstehen, wie Skills grundsätzlich funktionieren, bevor du sie einrichtest. Den Einstieg dazu findest du im Artikel Claude Code Skills erstellen: Dein eigener Workflow.
Praxis-Beispiel: Mobile Prototype mit Material Design
Ein typischer Workflow sieht so aus. Du hast eine App-Idee und willst schnell einen visuellen Prototyp erstellen, den du dem Kunden zeigen kannst:
/design-prototype
System: Material Design 3
Platform: Android
Screen: Onboarding Flow, 3 Screens
Akzentfarbe: Blau, helles Theme
Output: HTML Prototype mit Navigationspfaden
Claude Code verarbeitet diese Eingabe mit dem hinterlegten Material-Design-System und generiert einen vollständigen HTML-Prototyp. Jeder Screen ist mit dem nächsten verlinkt. Du kannst den Prototyp direkt im Browser öffnen und dem Kunden zeigen.
Das spart einen kompletten Figma-Schritt. Kein Exportieren, kein Teilen von Design-Dateien, kein Erklären von Figma-Links. Du schickst eine einzelne HTML-Datei und bekommst Feedback zu echtem UI statt zu Beschreibungstext.
Wann lohnt sich open-design?
open-design passt besonders gut in drei Situationen.
Solo-Entwickler und Founder: Du baust ein Produkt alleine und willst trotzdem professionelle Prototypen für Investoren oder erste Nutzer erstellen. Mit open-design bekommst du Ergebnisse, die aussehen, als kämen sie aus einem Design-Workshop. Du sparst dir Lizenzgebühren und den Lernaufwand für ein separates Design-Tool.
Teams mit Datenschutz-Anforderungen: Wenn deine Produktideen vertraulich sind, willst du sie nicht in eine Cloud-Plattform hochladen. open-design läuft komplett lokal. Keine Daten gehen an externe Server. Das ist relevant für Branchen mit strengen Compliance-Vorgaben.
Rapid Prototyping vor dem Coding: Vor dem eigentlichen Code lohnt es sich, die UI-Struktur durchzudenken. open-design erlaubt dir, mehrere Design-Varianten schnell zu vergleichen. Du zeigst dem Kunden zwei Optionen, bekommst konkretes Feedback und fängst dann erst an zu coden.
Weniger sinnvoll ist open-design, wenn du bereits ein eingespieltes Designer-Entwickler-Team mit Figma-Workflow hast. Dort ist ein echtes Design-Tool in der Zusammenarbeit effizienter, weil Kommentare, Versionen und Handoff direkt integriert sind.
Wer nach weiteren Design-Skills sucht, findet mit dem ui-ux-pro-max-skill eine ergänzende Option für noch mehr Designstile und Farbpaletten in Claude Code.
Häufige Fragen
Ist open-design kostenlos? Ja. Das Projekt ist Open-Source und kostenlos nutzbar. Du brauchst nur eine laufende Claude-Code-Umgebung und installierst die Skills einmalig über die Kommandozeile.
Welche Ausgabeformate unterstützt open-design? Das Paket unterstützt Web-Prototypen in HTML und CSS, Desktop-UI-Mockups, Mobile-Screens, Präsentations-Slides, Bilder, Videos und HyperFrames. Welche Formate konkret verfügbar sind, hängt vom gewählten Skill und Design-System ab.
Muss ich Design-Kenntnisse mitbringen? Nein. Die Design-Systeme sind vorkonfiguriert. Du beschreibst, was du brauchst. Die KI wendet die hinterlegten Designregeln an. Ein Grundverständnis von UI-Konzepten hilft, ist aber kein Muss.
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: Jetzt kostenlos beitreten
Marcel Porcher, newways.ai