Tschüss, Claude Design! Das ist der BESTE Open-Source-KI-UI-Generator

Diese Anleitung richtet sich an Windows-Nutzer, die Open Design auf dem eigenen Rechner laufen lassen wollen — ohne Cloud-Konto und ohne monatliche Credits, die man verbrauchen muss. Sie folgt dem Weg, den AI Automation in ihrem Windows-Installations-Walkthrough einschlägt, neu geschrieben und auf die aktuelle Version gebracht, damit du Befehl für Befehl mitmachen kannst. Sieh dir das Video oben für den Live-Durchlauf an oder lies hier die schriftliche Fassung.

Open Design läuft lokal unter Windows: ein quelloffener, agentennativer Design-Arbeitsbereich, den du vollständig selbst kontrollierst.

Was ist Open Design?

Open Design ist eine quelloffene, lokal-zuerst arbeitende Design-Plattform — eine agentennative Alternative zu Claude Design und Figma. Statt dich auf einen einzigen Modellanbieter festzulegen, läuft es auf dem Coding-Agenten, den du ohnehin schon nutzt: Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode und ein Dutzend weitere. Es ist „Bring deinen eigenen Agenten“ statt nur „Bring deinen eigenen Schlüssel“.

Ein paar Dinge, die es lohnenswert machen:

• Open Source, Apache-2.0 — klone es, hoste es selbst, lies jede Zeile.
• Läuft lokal — deine Projekte liegen in deinen eigenen Ordnern auf deinem Rechner, nicht in der Cloud eines anderen.
• Agenten-steckbar — über 21 Coding-Agenten werden unterstützt; du wählst, welche CLI die Generierung antreibt, und die Qualität der Ausgabe richtet sich nach dem gewählten Modell.
• Mehr als Prototypen — Prototypen, Live-Artefakte, Folien-Decks, Magazin-Layouts, Bildgenerierung und sogar Video, alles aus einem Arbeitsbereich.
• Eine integrierte Bibliothek aus Designsystemen und Vorlagen, sodass du nicht vor einer leeren Leinwand startest.

Wenn du Claude Design schon benutzt hast, wird dir das Gefühl sofort vertraut sein — Open Design behält dieselbe ruhige Ästhetik bei und legt dann Fähigkeiten (und deine Modellauswahl) obendrauf.

Bevor du loslegst

Es gibt drei Wege, Open Design unter Windows zu installieren. Wähle den, der zu dir passt:

Weg	Am besten geeignet für	Voraussetzungen
Desktop-App (Windows x64)	Die meisten Windows-Nutzer — ohne Konfiguration	Keine. Herunterladen und öffnen.
Aus dem Quellcode ausführen (WSL)	Entwickler, die den Code lesen oder ändern wollen	WSL2 + Ubuntu, Node ~24, pnpm 10.33.x
In deinen Agenten installieren	Leute, die im Terminal leben	Eine vorhandene Coding-Agent-CLI

Das Video nutzt den Weg aus dem Quellcode über WSL, der großartig ist, wenn du im Repo arbeiten möchtest. Für die meisten ist aber der native Windows-Desktop-Build der empfohlene Weg — es gibt einen Windows-(x64)-Installer, der weder WSL noch Node noch ein Klonen benötigt. Diese Anleitung behandelt beides; der WSL-Walkthrough weiter unten ist für den Fall, dass du gezielt den Quellcode-Weg willst.

Schritt 1 — WSL einrichten

Wenn du nur die Desktop-App möchtest, springe weiter zu Schritt 2, Option A. Willst du den Quellcode-Weg, brauchst du zuerst eine Linux-Umgebung innerhalb von Windows. Genau das liefert WSL (Windows Subsystem for Linux) — eine echte Ubuntu-Shell, die neben Windows läuft, ohne Dual-Boot und ohne eine virtuelle Maschine, die man bemuttern muss.

1. WSL und Ubuntu installieren. Öffne PowerShell und führe wsl --install aus — das aktiviert WSL2 und installiert standardmäßig Ubuntu. Starte neu, falls Windows danach fragt, starte dann Ubuntu über das Startmenü und lege beim ersten Öffnen deinen Linux-Benutzernamen und dein Passwort fest. (Du hast Ubuntu bereits von einem anderen Tool? Nimm es einfach weiter — das musst du nicht wiederholen.)

2. Die Basispakete aktualisieren. Aktualisiere in der Ubuntu-Shell den Paketindex und installiere die nötigsten Pakete:

sudo apt update && sudo apt install -y curl git

Tipp zur Fehlerbehebung aus dem Video: Wenn ein späterer Schritt einen seltsamen Fehler auswirft, starte deine Linux-Instanz sauber neu — führe in PowerShell wsl --shutdown aus und öffne dann Ubuntu erneut. Ein Neustart beseitigt die meisten Anlaufschwierigkeiten beim ersten Durchlauf.

3. Node 24 installieren. Der Quellcode-Build zielt auf Node ~24 ab. Ein frisches Ubuntu hat noch kein nvm, also installiere es zuerst und hole damit dann Node 24:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
source ~/.bashrc            # nvm in die aktuelle Shell laden
nvm install 24
nvm use 24
node --version              # sollte v24.x ausgeben

Mit eingerichtetem Ubuntu und aktivem Node 24 bist du bereit, Open Design zu installieren.

Schritt 2 — Open Design installieren

Option A — Windows-Desktop-App (empfohlen, ohne Konfiguration)

Gehe zu open-design.ai und klicke auf Download desktop. Es gibt einen nativen Windows-(x64)-Build (neben macOS und Linux). Führe den Installer aus, öffne die App, und sie erkennt automatisch jede Coding-Agent-CLI, die bereits in deinem PATH liegt, und lädt dann die integrierten Skills und Designsysteme für dich. Kein WSL, kein Terminal — das ist der einfachste Weg unter Windows.

Option B — Aus dem Quellcode ausführen (innerhalb von WSL)

Das ist der Weg, den AI Automation vorführt. Klone in deiner Ubuntu-Shell mit aktivem Node 24 das Repository und starte die Web-Laufzeitumgebung:

git clone https://github.com/nexu-io/open-design.git ~/open-design
cd ~/open-design
corepack enable && pnpm install
pnpm tools-dev run web

corepack enable lässt Corepack die im Repo festgelegte pnpm-Version (10.33.x) wählen, sodass du pnpm nicht selbst installierst. pnpm install holt die Abhängigkeiten und kompiliert native Bestandteile — beim ersten Durchlauf kann das ein paar Minuten dauern, was zu erwarten ist und kein Fehler. pnpm tools-dev run web bootet anschließend den lokalen Daemon und den Webserver.

Wenn es fertig ist, gibt der Befehl eine lokale URL aus — kopiere sie und füge sie in deinen Windows-Browser ein. WSL leitet den Port automatisch nach Windows durch, sodass sich die App einfach öffnet.

Wichtig: Der Port wird beim Start dynamisch zugewiesen — lies die Adresse, die der Befehl tatsächlich ausgibt. Gehe nicht von einem festen Port aus; die Adresse kann auf deinem Rechner und zwischen Durchläufen abweichen.

Option C — In deinen Coding-Agenten installieren (WSL)

Du möchtest die GUI überspringen und Open Design als MCP-Server in deinem Agenten aufrufen? Unter WSL gibt es zuerst einen zusätzlichen Schritt. Linux liefert bereits /usr/bin/od (das Octal-Dump-Tool) mit, das das eigene od von Open Design verdeckt — sodass od mcp install … sonst mit „file not found“ für mcp/install fehlschlüge. Füge einen kleinen Wrapper hinzu, der od auf deinen Klon zeigen lässt, und stelle ihn an den Anfang von PATH:

mkdir -p ~/.local/bin
cat > ~/.local/bin/od <<'EOF'
#!/usr/bin/env bash
repo="$HOME/open-design"     # der ~/open-design-Klon aus Option B
cd "$repo" || exit 127
exec corepack pnpm exec od "$@"
EOF
chmod +x ~/.local/bin/od
export PATH="$HOME/.local/bin:$PATH"
hash -r
type -a od                   # jetzt sollte das od von Open Design gewinnen

Verdrahte es dann mit deinem Agenten:

od mcp install <agent>
# <agent> = claude | codex | cursor | copilot | gemini | opencode | …

Bitte den Agenten dann einfach: Use open-design to generate a landing page with the Airbnb design system.

Erster Start: Verbinde deinen Coding-Agenten

Beim ersten Laden des Arbeitsbereichs scannt Open Design deine Umgebung und zeigt jede gefundene CLI an. Da WSL eine echte Linux-Box ist, erfasst es Agenten, die innerhalb von Ubuntu installiert sind — eine Gemini-CLI oder ein anderer Agent, der in WSL lebt, wird also dort erkannt. Klicke auf rescan, wenn etwas noch nicht auftaucht.

• Wähle einen Standard-Agenten und ein Modell. Lass die installierte CLI die Generierung antreiben oder richte sie auf einen bestimmten Anbieter und ein bestimmtes Modell aus. Wie das Video betont, bedeutet ein stärkeres Modell merklich bessere Ausgaben — greife also zu einem leistungsfähigen, wenn das Ergebnis zählt.
• Füge Medienanbieter hinzu (optional). Um Bilder, Video oder Audio zu erzeugen, füge deine eigenen API-Schlüssel ein — Bring-deinen-eigenen-Schlüssel, nur für die Anbieter, die du tatsächlich nutzt.
• Verbinde MCP-Dienste (optional). Binde Konnektoren ein, wenn der Agent aus anderen Quellen ziehen soll.
• Lege Einstellungen fest. Sprache, Erscheinungsbild, Benachrichtigungen — sogar ein Desktop-Haustier. All das kannst du später ändern, halte den ersten Durchgang also einfach.

Den Arbeitsbereich erkunden

Open Design hält deine Arbeit projektbezogen: Wenn du es gegen einen Ordner ausführst, leben die Designs, die du erstellst, in diesem Projektverzeichnis. Deine erste Projektliste wird leer sein — das ist normal.

Innerhalb eines Projekts kannst du Prototypen, Folien-Decks, Bilder, Videos und mehr bauen. Zwei Ausgangspunkte lassen die leere Leinwand verschwinden:

Die Designsystem-Bibliothek: Wähle einen echten Markenlook — Airbnb, Airtable und viele weitere — und Open Design überträgt dessen Tokens, Farben und Typografie in dein Design.

• Designsysteme fassen den Look einer Marke als DESIGN.md aus Tokens — Primär- und Sekundärfarben, Typografie, Abstände. Sieh dir eines in der Vorschau an, und du kannst direkt darauf aufbauen, statt eine Palette von Grund auf zu definieren.
• Vorlagen decken Prototypen, Folien sowie Bild- und Videogenerierung ab. Filtere nach Typ und forke eine beliebige als Startvorsprung.

Vorlagen: Ausgangspunkte für Prototyp, Folie, Bild und Video — filtere nach Typ und forke, um zu starten.

Du kannst die vollständige Bibliothek vor dem Installieren von allem im Web unter open-design.ai/plugins durchstöbern.

Etwas bauen

Hier ist der Ablauf, den AI Automation durchspielt, neu geschrieben für die aktuelle Version:

1. Wähle ein Designsystem. Suche dir eins aus, das dir gefällt — etwa Airbnb — und öffne es, um seine DESIGN.md und Tokens zu inspizieren.
2. Importiere es als Ausgangspunkt. Verwende Share → Download as ZIP und wähle dann in deinem Projekt Import flat design ZIP. Das Design erscheint im Arbeitsbereich, bereit zum Aufbauen.
3. Beschreibe die gewünschte Änderung als Prompt. Tippe ein Briefing in einfacher Sprache — „Kannst du den Hintergrund dunkel machen?“ — und sende es ab. Der Agent liest das Designsystem, plant seine Arbeit und erzeugt eine neue Version des Artefakts.
4. Iteriere nach Belieben. Ändere Schriften, füge ein Logo hinzu oder entferne es, lade eigene Assets hoch und lass sie an den richtigen Stellen platzieren. Jeder Prompt liefert einen frischen Entwurf zum Behalten oder Verwerfen.
5. Exportiere, wenn du zufrieden bist. Klicke auf Share und lade das Ergebnis als ZIP herunter.

Die Ausgabe ist ein echtes, bearbeitbares Design, angetrieben von dem Modell, das du verbunden hast — ein leistungsfähiger Agent zahlt sich also direkt in dem aus, was du zurückbekommst.

Tipps, um mehr herauszuholen

• Wähle ein starkes Modell. Die Ausgabequalität richtet sich nach dem verbundenen Agenten — ein kostenloses Modell reicht, um den Ablauf zu lernen, aber für echte Arbeit lohnt sich ein leistungsfähiges.
• Lies jedes Mal die ausgegebene URL. Die lokale Adresse ist dynamisch; kopiere, was tools-dev ausgibt, statt einen alten Link wiederzuverwenden.
• Installiere deine Agenten dort, wo Open Design sucht. Führst du aus dem Quellcode in WSL aus? Installiere deine CLIs innerhalb von Ubuntu, damit der Arbeitsbereich sie erkennt; die Desktop-App liest deinen Windows-PATH.
• Du brauchst kein Designsystem, um zu starten. Beginne mit einem integrierten, importiere ein ZIP oder lass Open Design Standardwerte ableiten. Deine Designs bleiben beim Projektordner, organisiere die Arbeit also, indem du sie gegen das richtige Verzeichnis ausführst.

FAQ

Ist Open Design kostenlos? Ja — es ist Open Source unter der Apache-2.0-Lizenz. Du kannst es lokal kostenlos ausführen; du zahlst nur für die Modell-/API-Nutzung des jeweiligen Agenten und der Medienanbieter, die du verbindest.

Soll ich WSL oder die Windows-Desktop-App verwenden? Für die meisten ist der native Windows-(x64)-Desktop-Build einfacher — kein WSL, kein Node, kein Klonen. Nutze den WSL-Quellcode-Weg, wenn du gezielt den Code lesen oder ändern möchtest. Beachte, dass WSL2 ein primär unterstützter Weg ist, während Windows-nativ nach bestem Bemühen (best-effort) läuft; falls du bei dem einen auf Reibung stößt, probiere den anderen.

Welche Coding-Agenten werden unterstützt? Über 21 Agenten, darunter Claude Code, Codex, Cursor, Gemini, GitHub Copilot und OpenCode. Open Design erkennt die CLIs, die bereits auf deinem Rechner installiert sind — innerhalb von WSL für den Quellcode-Weg oder in deinem Windows-PATH für die Desktop-App.

Wie unterscheidet es sich von Claude Design? Dasselbe vertraute Gefühl, aber quelloffen, lokal-zuerst und agenten-steckbar — du bist also nicht auf ein Modell festgelegt und verbrennst keinen festen Credit-Pool. Außerdem geht es über Prototypen hinaus, mit Folien-Decks, Magazin-Layouts, Bildgenerierung und Video.

---

Diese schriftliche Anleitung basiert auf dem Windows-Installations-Walkthrough von AI Automation. Sieh dir das vollständige Video oben an und abonniere AI Automation für weitere praxisnahe Videos zu KI-Tools.