Open Design in 20 Minuten — Komplettes Setup + Demo
Ein vollständiger Einstieg von A bis Z — Open Design installieren, deinen Coding-Agent anbinden, den Workspace erkunden und deinen ersten High-Fidelity-Prototyp bauen. Basierend auf dem praxisnahen First-Impressions-Video von CodingMenace.
Dieser Leitfaden führt dich durch deine ersten 20 Minuten mit Open Design — von der frischen Installation bis zum ersten generierten Prototyp. Er folgt dem Weg, den CodingMenace (Dennis) in seinem praxisnahen First-Impressions-Video gegangen ist, neu geschrieben und an die aktuelle Version angepasst, damit du Schritt für Schritt mitmachen kannst. Schau dir das Video oben für die Live-Demo an oder lies hier die schriftliche Fassung.
Open Design positioniert sich als die quelloffene Alternative zu Claude Design — Desktop-first, agent-native, Apache-2.0.
Was ist Open Design?
Open Design ist eine quelloffene, local-first Design-Plattform — eine agent-native Alternative zu Claude Design und Figma. Statt dich an einen einzigen Modellanbieter zu binden, läuft es auf dem Coding-Agent, den du ohnehin schon nutzt: Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode und ein Dutzend mehr. Es ist „bring your own agent“ statt nur bring your own key.
Ein paar Dinge, die einen Blick wert sind:
- Open Source, Apache-2.0 — klonen, selbst hosten, jede Zeile lesen.
- Läuft lokal — deine Projekte liegen in deinen eigenen Ordnern auf deinem Rechner, nicht in der Cloud von jemand anderem.
- Agent-steckbar — über 21 Coding-Agents werden unterstützt; du wählst, welches CLI die Generierung antreibt.
- Mehr als nur Prototypen — Prototypen, Live-Artefakte, Foliendecks, Magazin-Layouts, Bildgenerierung und sogar Video, alles aus einem einzigen Workspace.
- Eine umfangreiche Bibliothek aus Design-Systemen und Skills integriert, sodass du nicht vor einer leeren Leinwand startest.
Wenn du Claude Design schon einmal verwendet hast, kommt dir Optik und Bedienung sofort bekannt vor — Open Design behält bewusst dieselbe ruhige Ästhetik bei und ergänzt sie um neue Fähigkeiten.
Bevor du loslegst
Du hast drei Wege, Open Design zu installieren. Wähle den, der zu dir passt:
| Weg | Am besten für | Voraussetzungen |
|---|---|---|
| Desktop-App | Die meisten — keine Konfiguration nötig | Keine. Einfach herunterladen und öffnen. |
| Aus dem Quellcode starten | Entwickler, die den Code lesen oder anpassen wollen | Node ~24, pnpm 10.33.x |
| In deinen Agent installieren | Leute, die im Terminal zu Hause sind | Ein vorhandenes Coding-Agent-CLI |
Das Video nutzt den Weg über den Quellcode, doch die Desktop-App ist heute der empfohlene Weg — sie braucht weder Node noch pnpm noch ein Klonen.
Schritt 1 — Open Design installieren
Variante 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 jedes Coding-Agent-CLI, das bereits in deinem PATH liegt, und lädt die integrierten Skills und Design-Systeme für dich.
Variante B — Aus dem Quellcode starten
Wenn du es lieber aus dem Repository startest — so wie Dennis im Video —, brauchst du nur drei 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 ausgegeben wird. Du brauchst Node ~24 und pnpm 10.33.x; Corepack wählt die fest verankerte pnpm-Version automatisch für dich aus.
Variante C — In deinen Coding-Agent installieren
Um Open Design zu nutzen, ohne je die GUI zu öffnen — als Skill oder MCP-Server in deinem Agent aufgerufen —, führe aus:
curl -fsSL https://open-design.ai/install.sh | sh -s <agent>
# <agent> = claude | codex | cursor | copilot | gemini | opencode | …Bitte den Agent dann einfach: Use open-design to generate a landing page with the Linear design system.
Schritt 2 — Erster Start: deinen Coding-Agent anbinden
Beim ersten Start scannt Open Design deinen Rechner und zeigt dir jedes lokale CLI, das es gefunden hat — Claude Code, OpenCode, Copilot CLI und weitere. Das ist der „bring your own agent“-Schritt.
- Wähle einen Standard-Agent und ein Modell. Lass das installierte CLI die Generierung antreiben oder erzwinge für dieses Projekt ein bestimmtes Modell (zum Beispiel Claude Opus).
- Füge Medien-Anbieter hinzu (optional). Willst du Bilder, Video oder Audio generieren? Hinterlege deine eigenen API-Schlüssel für Anbieter wie OpenAI (gpt-image), MiniMax, ElevenLabs, fal, Suno und mehr. Hier kommt bring-your-own-key ins Spiel.
- Verbinde MCP-Dienste (optional). Binde Connectoren wie Composio ein, wenn der Agent Daten aus anderen Quellen ziehen soll.
- Schalte Skills und Design-Systeme an oder aus. Aktiviere nur die Fähigkeiten, die du für deine Art von Arbeit brauchst — Prototypen, Foliendecks, Mobile-Apps, Meeting-Notizen und so weiter.
Du kannst all das später ändern, halte es beim ersten Durchgang also einfach.
Schritt 3 — Den Workspace 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. Wechselst du den Ordner, wechselst du das Projekt.
Innerhalb eines Projekts kannst du Prototypen, Live-Artefakte, Foliendecks und Animationen erstellen. Bei Prototypen wählst du zwischen zwei Fidelitätsstufen:
- Wireframe — die nackte Struktur: Kästchen und Formen, um das Layout schnell abzustecken.
- High Fidelity — ein vollständig gestalteter Prototyp der Seite, die du baust.
Ein wichtiger Unterschied zu Claude Design: Du musst nicht zuerst ein Design-System definieren. Open Design bringt sinnvolle Voreinstellungen und eine Galerie von Startpunkten mit, sodass du von einem bestehenden Design-System aus loslegen kannst — oder von gar keinem.
Die Design-System-Bibliothek: reale Marken-Startpunkte (Agentic, Airbnb, Airtable und mehr), die du in jedes Projekt einrasten lassen kannst.
Der Marktplatz geht weit über Marken-Systeme hinaus. Die Templates-Bibliothek deckt Prototypen, Folien sowie die Generierung von Bild und Video ab — filtere nach Typ und forke ein beliebiges als deinen Ausgangspunkt.
Templates: Startpunkte für Prototyp, Folie, Bild und Video — filtere nach Typ und forke, um loszulegen.
Die komplette Plugin-Bibliothek kannst du im Web unter open-design.ai/plugins durchstöbern, bevor du irgendetwas installierst.
Schritt 4 — Deinen ersten Prototyp bauen
Jetzt kommt der spaßige Teil. Im Video importiert Dennis ein bestehendes Claude-Design-Projekt und lässt Open Design eine neue Seite dafür bauen. Hier ist derselbe Ablauf:
- Lege einen neuen Prototyp an. Gib ihm einen Namen (Dennis nennt seinen „Expensely“) und wähle High Fidelity.
- Importiere dein Design-System. Open Design kann ein bestehendes Claude-Design-ZIP importieren, sodass deine Tokens und Komponenten mitkommen. Die importierten Design-Dateien erscheinen im Workspace neben einer Live-Vorschau.
- Schreibe das Briefing. Dennis fordert es auf: „create a new page projecting expenses for 12 months using the previous 3 months.“ Du bekommst das vertraute geteilte Layout: das Gespräch links, Vorschau und Design-Dateien rechts.
- Beantworte die Rückfragen. Der Agent stellt ein paar clevere Nachfragen — gleiche Farben? welche Fidelitätsstufe? einfacher 3-Monats-Durchschnitt? — plant dann eine To-do-Liste, liest das Design-System und baut das Artefakt (
projections-v2.html). - Iteriere am Design. Mit dem ersten Wurf nicht zufrieden? Bitte um eine andere Richtung. Dennis fragt nach „a different look and feel“, wählt eine editoriale Richtung und erhält ein frisches
projections-v3— ein wirklich anderes Design, gebaut aus denselben Daten und demselben Design-System.
Das Ergebnis ist ein echter, interaktiver Prototyp: Klicke dich durch die Charts und Seiten, dann exportiere oder übergib — alles gebaut aus dem Design-System, das du importiert hast.
Tipps, um mehr herauszuholen
- Starte mit High Fidelity, wenn du das echte Ergebnis sehen willst; nutze Wireframe, um die Struktur schnell abzustecken.
- Deine Designs bleiben beim Projektordner — organisiere deine Arbeit, indem du Open Design gegen das richtige Verzeichnis ausführst.
- Hinterlege deine eigenen Medien-Schlüssel nur für die Anbieter, die du tatsächlich nutzt; du brauchst nicht alle.
- Du brauchst kein Design-System, um zu starten. Beginne mit einem integrierten, importiere ein Claude-Design-ZIP oder lass Open Design Voreinstellungen ableiten.
FAQ
Ist Open Design kostenlos?
Ja — es ist Open Source unter der Apache-2.0-Lizenz. Du kannst es kostenlos lokal betreiben; du zahlst nur für die Modell-/API-Nutzung des jeweiligen Agents und der Medien-Anbieter, die du anbindest.
Welche Coding-Agents werden unterstützt?
Über 21 Agents, darunter Claude Code, Codex, Cursor, Gemini, GitHub Copilot und OpenCode. Open Design erkennt die CLIs, die bereits auf deinem Rechner installiert sind.
Muss ich ein Design-System erstellen, bevor ich designen kann?
Nein. Anders als Claude Design gibt dir Open Design funktionierende Voreinstellungen und eine Galerie von Startpunkten. Du kannst dein eigenes Design-System mitbringen, wenn du eines willst.
Wie unterscheidet es sich von Claude Design?
Gleiches vertrautes Gefühl, aber Open Source, local-first und agent-steckbar — plus zusätzliche Fähigkeiten wie Foliendecks, Magazin-Layouts, Bildgenerierung und Video.
Dieser schriftliche Leitfaden basiert auf dem First-Impressions-Walkthrough von CodingMenace. Schau dir das vollständige Video oben an und abonniere CodingMenace für weitere praxisnahe Videos zu KI-Tools.