Ich habe Claude Design durch diese Open-Source-Alternative ersetzt!

Diese Anleitung zeigt dir, wie du Open Design vollständig auf deinem eigenen Rechner betreibst – kein Cloud-Konto, keine Abrechnung pro Design, nichts verlässt deinen Laptop. Die Idee ist, Open Design mit einem lokalen Modell-Runner (etwa Ollama) und den Kommandozeilen-Coding-Agenten zu kombinieren, die du ohnehin schon installiert hast, sodass die Generierung lokal abläuft und deine Arbeit privat bleibt. Sie folgt dem Weg, den AI Automation Station in ihrer Lokal-Setup-Anleitung einschlägt, neu geschrieben und an die aktuelle Version angepasst. Sieh dir das Video oben für den Live-Durchlauf an oder lies weiter für die schriftliche Fassung.

Der Open-Design-Arbeitsbereich läuft lokal – deine Projekte, dein Agent, dein Rechner.

Was ist Open Design?

Open Design ist eine quelloffene, local-first Designplattform – eine agentennative Alternative zu Claude Design und Figma. Was ein vollständig lokales Setup möglich macht, ist die Kernarchitektur: Statt fest mit einem einzigen Modellanbieter verdrahtet zu sein, läuft Open Design auf dem Coding-Agenten, den du ohnehin schon nutzt. Claude Code, Codex, Cursor, Gemini, GitHub Copilot, OpenCode und mehr lassen sich alle einbinden. Es ist „bring your own agent“ statt nur „bring your own key“.

Das ist für dieses Tutorial entscheidend: Wenn der Agent, den du auswählst, lokal läuft – ein offener Kommandozeilen-Agent, der ein lokales Modell über einen Runner wie Ollama ansteuert – dann bleibt die gesamte Schleife auf deinem Rechner. Keine verbrannten Credits, keine an eine entfernte API gesendeten Prompts.

Ein paar Dinge sind erwähnenswert:

• Open Source, Apache-2.0 – klone es, hoste es selbst, lies jede Zeile.
• Läuft lokal – deine Projekte liegen in deinen eigenen Ordnern, nicht in der Cloud eines anderen.
• Agenten-steckbar – 21+ Coding-Agenten werden unterstützt; du wählst, welche CLI die Generierung antreibt.
• Mehr als nur Prototypen – Prototypen, Live-Artefakte, Foliendecks, Magazin-Layouts, Bildgenerierung und sogar Video, alles aus einem einzigen Arbeitsbereich.
• Echte Ausgangspunkte integriert – Designsysteme nach Vorbild bekannter Marken (Airbnb, Airtable und andere), dazu Templates und Bild-Presets, sodass du nie vor einer leeren Leinwand sitzt.

Wenn du Claude Design schon einmal benutzt hast, wird dir das Gefühl vertraut sein. Open Design behält dieselbe ruhige Ästhetik bei und läuft genau wie Claude Design im Browser – legt dann aber die Engine darunter offen, damit du jeden gewünschten Agenten einsetzen kannst.

Bevor du loslegst

Du hast drei Möglichkeiten, Open Design zu installieren. Wähle die, die zu dir passt:

Weg	Am besten für	Voraussetzungen
Desktop-App	Die meisten – keine Konfiguration	Keine. Einfach herunterladen und öffnen.
Aus dem Quellcode ausführen	Entwickler, die den Code lesen oder ändern wollen	Node ~24, pnpm 10.33.x
In deinen Agenten installieren	Menschen, die im Terminal leben	Eine vorhandene Coding-Agent-CLI

Das Video geht den Weg über den Quellcode, aber die Desktop-App ist heute der empfohlene Weg – sie braucht kein Node, kein pnpm und keinen Klon.

Für ein vollständig lokales Setup solltest du außerdem einen lokal lauffähigen Kommandozeilen-Agenten installiert haben, bevor du startest – zum Beispiel OpenCode, das mit kostenlosen Modellen ausgeliefert wird und auf einen lokalen Runner wie Ollama zeigen kann. Open Design erkennt es automatisch, sobald es in deinem PATH liegt.

Schritt 1 – Open Design installieren

Option A – Desktop-App (empfohlen, keine Konfiguration)

Gehe zu open-design.ai und klicke auf Download desktop. Builds sind für macOS (Apple Silicon und Intel), Windows (x64) und Linux (AppImage) verfügbar. Nach der Installation erkennt die App automatisch jede Coding-Agent-CLI, die bereits in deinem PATH liegt, und lädt die integrierten Skills und Designsysteme für dich.

Option B – Aus dem Quellcode ausführen

Um es direkt aus dem Repository zu starten – so wie im Video – brauchst du nur ein paar Befehle:

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

Öffne dann die lokale URL, die im Terminal ausgegeben wird. Du brauchst Node ~24 und pnpm 10.33.x; Corepack wählt die festgelegte pnpm-Version für dich aus. Der Port wird dynamisch zugewiesen, verwende also die Adresse, die der Befehl anzeigt, statt eine zu raten.

Option C – In deinen Coding-Agenten installieren

Um Open Design vom Terminal aus zu steuern – es als Skill oder MCP-Server in deinem Agenten aufzurufen, ganz ohne GUI – führe aus:

od mcp install <agent>
# od ships with Open Design; <agent> = claude | codex | cursor | copilot | gemini | opencode | …

Frage dann innerhalb des Agenten: Use open-design to generate a dense analytics dashboard with the Airbnb design system.

Erster Start: verbinde deinen lokalen Agenten

Beim ersten Start von Open Design durchsucht es deinen Rechner und zeigt jeden gefundenen Kommandozeilen-Agenten an – Claude Code, OpenCode, Codex, Gemini und andere. Das ist der Moment, der einen rein lokalen Workflow real macht: Du wählst, welcher Agent deine Designs generiert.

• Wähle einen lokalen Agenten, um keine Credits auszugeben. Claude Code ist hervorragend, greift aber auf deine Claude-Credits zurück. Wenn du stattdessen eine kostenlose, lokale Option wie OpenCode wählst, läuft die Generierung kostenlos auf deinem Rechner. OpenCode bündelt mehrere kostenlose Modelle (MiniMax unter anderem) und kann vor einem lokalen Runner wie Ollama sitzen, sodass das Modell deinen Computer nie verlässt.
• Füge Anbieter-API-Schlüssel nur hinzu, wenn du willst. Es gibt einen Bereich zum Einfügen von Schlüsseln für Anthropic, OpenAI, Azure und Google Gemini, falls du jemals auf ein gehostetes Modell zurückgreifen möchtest. Für einen vollständig lokalen Durchlauf kannst du das komplett überspringen.
• Füge Medienanbieter hinzu (optional). Wenn du Bilder, Video oder Audio generieren möchtest, füge deine eigenen Schlüssel für diese Anbieter hinzu. Das ist der Bring-your-own-key-Teil – und er ist optional.
• Schalte Skills und Designsysteme um. Aktiviere nur die Funktionen, die du für die anstehende Arbeit brauchst.

Alles hier lässt sich später ändern, halte den ersten Durchlauf also einfach: Wähle deinen lokalen Agenten und mach weiter.

Erkunde den Arbeitsbereich

Open Design hält deine Arbeit projektbezogen – die Designs, die du erstellst, liegen im Projektordner, in dem du arbeitest. Wechsle den Ordner und du wechselst das Projekt.

Starte einen neuen Prototyp (im Video wird einer „Tube Analytics“ genannt) und du hast sofort die Wahl: von einem Designsystem ausgehen oder frei arbeiten. Du bist nicht gezwungen, zuerst ein Designsystem zu definieren. Du kannst eines der integrierten Systeme wählen – das Claude/Anthropic-System, Airbnb, Airtable und mehr – oder eine Claude Design ZIP importieren, sodass all deine vorhandenen Tokens und Komponenten mit übernommen werden.

Die Designsystem-Bibliothek: echte Marken-Ausgangspunkte, die du in der Vorschau ansehen, deren DESIGN.md du dir holen und die du in jedes Projekt einrasten lassen kannst.

Hier gibt es mehr als nur Markensysteme. Open Design liefert eine Galerie von Beispieldesigns, die du vor der Nutzung in der Vorschau ansehen kannst – klicke auf eines, und es öffnet eine Live-Vorschau zusammen mit dem Prompt, der es erzeugt hat. Klicke auf Use prompt, um von dort aus zu starten. Daneben stehen Bild-Templates, die du als Ausgangspunkt forken kannst.

Beispieldesigns und Bild-Templates – sieh dir jedes in der Vorschau an, forke es dann oder verwende seinen Prompt erneut.

Baue etwas – lokal

Jetzt der Teil, der beweist, dass die lokale Schleife funktioniert. Im Video öffnet der Ersteller ein SaaS-Analytics-Dashboard und bittet Open Design, es zu erweitern.

1. Starte den Prototyp. Wähle ein Designsystem (oder frei) und importiere optional deine Claude Design ZIP, damit der Agent den vollständigen Kontext deines vorhandenen Designs hat.
2. Hänge Referenzen an. Ziehe oder füge Bilder als visuelle Referenz ein oder tippe @, um eine Datei aus dem Projekt anzuhängen – zum Beispiel eine Datei „SaaS Analytics dashboard“.
3. Schreibe das Briefing. Gib ihm etwas Konkretes als Prompt: „Build out the remaining tabs in the dashboard using your design system.“ Du erhältst das vertraute geteilte Layout – die Konversation links, die Live-Vorschau und die Designdateien rechts.
4. Sieh zu, wie es auf deinem Agenten läuft. Open Design ruft deine gewählte CLI auf – im Video OpenCode – und baut die neuen Bildschirme. Weil es lokal über die kostenlosen Modelle von OpenCode läuft, kostet das null Credits: Claude, Gemini oder Codex wird nichts berechnet. Neue Tabs (Trends, Content-Skript-Generatoren, Transkripte, Kommentare) erscheinen, gestylt passend zum vorhandenen System.
5. Exportieren oder bereitstellen. Wenn das Design fertig ist, bitte es, es als ZIP herunterzuladen, um es in deine Codebasis zu übergeben, oder direkt auf Vercel bereitzustellen – aus Open Design heraus, etwas, das Claude Design nicht bietet. Um die Änderungen zurück in deine App einzuarbeiten, lege die ZIP in einen Coding-Agenten wie Claude Code und sage „implement these design changes using the ZIP file.“

Das Ergebnis ist ein echtes, interaktives Design – von Anfang bis Ende auf deinem eigenen Rechner gebaut, mit deinem eigenen Agenten, kostenlos.

Tipps

• Wähle einen kostenlosen lokalen Agenten für kostenlose Generierung. OpenCode mit seinen gebündelten kostenlosen Modellen (oder ein lokales Modell über Ollama) hält jeden Durchlauf bei null Credits.
• Bewahre gehostete Schlüssel für die Fälle auf, in denen du sie brauchst. Füge Anthropic-/OpenAI-/Gemini-Schlüssel nur ein, wenn du auf ein Premium-Modell zurückgreifen möchtest; ein lokaler Agent braucht keinen davon.
• Du brauchst kein Designsystem, um zu starten. Beginne von einem integrierten, importiere eine Claude Design ZIP oder arbeite einfach frei.
• Deine Designs bleiben beim Projektordner – organisiere deine Arbeit, indem du Open Design gegen das richtige Verzeichnis ausführst.
• Export ist eine Übergabe, kein Lock-in. Lade als ZIP herunter, stelle auf Vercel bereit oder füttere die Dateien an einen Coding-Agenten, um sie in deinen vorhandenen Code zu integrieren.

FAQ

Kann ich Open Design wirklich ohne jegliche Cloud-Kosten betreiben? Ja. Open Design selbst ist Open Source (Apache-2.0) und kostenlos zu betreiben. Wenn du es auf einen kostenlosen lokalen Agenten wie OpenCode zeigen lässt – optional gestützt von einem lokalen Runner wie Ollama – geschieht die Generierung auf deinem Rechner ohne Credit-Kosten. Du zahlst nur, wenn du dich dafür entscheidest, ein bezahltes gehostetes Modell oder einen Medienanbieter zu verbinden.

Wie halte ich alles lokal und privat? Wähle beim ersten Start einen lokalen Kommandozeilen-Agenten statt eines Cloud-Agenten. Weil Open Design auf dem von dir gewählten Agenten läuft, bedeuten ein lokaler Agent und ein lokales Modell, dass deine Prompts und Designs deinen Computer nie verlassen.

Welche Coding-Agenten werden unterstützt? 21+ Agenten, darunter Claude Code, Codex, Cursor, Gemini, GitHub Copilot und OpenCode. Open Design erkennt die bereits auf deinem Rechner installierten CLIs und lässt dich wählen, welche die Generierung antreibt.

Wie unterscheidet es sich von Claude Design? Dasselbe vertraute, browserbasierte Gefühl, aber Open Source, local-first und agenten-steckbar. Du bringst deinen eigenen Agenten mit (lokal oder gehostet), bist nicht gezwungen, vorab ein Designsystem zu definieren, und kannst zusätzliche Dinge tun, die Claude Design nicht kann – etwa direkt auf Vercel bereitstellen und Folien, Bilder und Video aus demselben Arbeitsbereich generieren.

---

Diese schriftliche Anleitung basiert auf der Lokal-Setup-Anleitung von AI Automation Station. Sieh dir das vollständige Video oben an und abonniere AI Automation Station für weitere praktische Tutorials zu KI-Tools.