Open Design – Einstieg: So öffnest du Claude Design richtig (Open-Source-Version)

Projektüberblick

Open Design ist eine Open-Source-Alternative zu Claude Design und wird von nexu-io/open-design entwickelt sowie gepflegt.

Die Kernidee ist ganz einfach: Kein Rad neu erfinden. Die Codierungs-Agenten, die bereits auf deinem Rechner laufen (Claude Code, Codex, Cursor Agent usw., insgesamt 16 CLI), werden direkt zur Design-Engine. Zusammen mit 31 kombinierbaren Design-Skills und 72 markenfähigen Designsystemen erledigt Open Design den gesamten Designprozess lokal.

Wichtige Features im Überblick:

---

Zielgruppe

• Frontend-/Fullstack-Entwickler: Möchten Design-Entwürfe mithilfe von KI erstellen, ohne Figma-Komplexität lernen zu müssen
• Solo-Entwickler: Brauchen schnell Landingpages, mobile Prototypen und Produkt-Demos
• Design-Teams: Suchen eine Design-Automatisierung, die lokal priorisiert und nicht von Cloud-Abhängigkeiten lebt
• KI-Tool-Fans: Wollen das Potenzial vorhandener Coding-Agenten im Design-Bereich erkunden

---

Kernabhängigkeiten und Umgebung

Node.js ~24
pnpm 10.33.x (über Corepack verwaltet)
Betriebssystem: macOS / Windows / Linux

Open Design scannt automatisch nach den installierten Codierungs-Agenten in deinem PATH. Wenn auf deiner Maschine kein einziges CLI vorhanden ist, führt es dich durch die Einrichtung des BYOK-Modus (benötigt API Key).

---

Vollständiger Projekt-Tree

open-design/
├── apps/
│   ├── daemon/                 # Lokaler Dienst (Express + SQLite)
│   │   └── src/
│   │       ├── agents.ts       # Erkennung & Adapter für Codierungs-Agenten
│   │       ├── skills.ts       # Skill-Loader
│   │       └── server.ts       # API-Routen
│   └── web/                    # Next.js 16 Frontend
│       └── src/
│           ├── prompts/        # Prompt-Vorlagen
│           ├── artifacts/      # Parsing der Artefakte
│           └── components/     # UI-Komponenten
├── skills/                     # 31 Design-Skills
│   ├── web-prototype/          # Web-Prototyp
│   ├── mobile-app/             # Mobile-App
│   ├── dashboard/              # Dashboard
│   ├── guizang-ppt/            # Präsentationsfolie
│   └── ...
├── design-systems/             # 72 Designsysteme
│   ├── linear-app/
│   ├── vercel/
│   ├── anthropic/
│   └── ...
├── assets/frames/              # Geräte-Frameworks (iPhone, Pixel, iPad, MacBook)
└── .od/                        # Laufzeitdaten (SQLite, Projektdateien)

---

Schritt für Schritt

1) Repository klonen und Abhängigkeiten installieren

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
pnpm install

corepack enable liest automatisch die in package.json festgelegte pnpm-Version (10.33.x) aus und sorgt so für eine konsistente Team-Umgebung.

2) Lokalen Entwicklungsserver starten

pnpm tools-dev run web

Nach erfolgreichem Start werden zwei URLs ausgegeben:

✅ Daemon running at http://localhost:17456
✅ Web running at http://localhost:17573

Öffne die Web-URL im Browser und lege direkt los.

3) Codierungs-Agent auswählen

Wenn du das Web-Interface zum ersten Mal öffnest, erkennt Open Design automatisch die Codierungs-Agenten, die in deinem PATH installiert sind.

Unterstützte 16 CLI:

Der Modellwähler in der oberen rechten Ecke zeigt die erkannten Agenten an. Wenn kein CLI vorhanden ist, klicke auf Auswahl für BYOK-Modus und starte mit deinem API Key über die OpenAI/Anthropic/Azure/Gemini-Schnittstellen.

4) Design-Skill auswählen

Auf der Startseite werden 31 Skills aufgelistet, nach Szenarien gruppiert:

• Design: web-prototype (Standard), mobile-app, mobile-onboarding, gamified-app, wireframe-sketch, critique, tweaks
• Marketing: saas-landing, pricing-page, blog-post, email-marketing, social-carousel, magazine-poster, motion-frames, sprite-animation
• Operation/Engineering/Product: dashboard, docs-page, pm-spec, team-okrs, meeting-notes, kanban-board, eng-runbook, finance-report, invoice, hr-onboarding
• Deck (Präsentation): guizang-ppt (Standard), simple-deck, replit-deck, weekly-update

Klicke entsprechend deinem Bedarf auf einen Skill, z. B. mobile-app, um einen mobilen Prototyp zu generieren.

5) Designsystem auswählen

Nach der Auswahl des Skills wird ein Panel mit Designsystemen angezeigt. Standardmäßig stehen zwei Startsysteme bereit: default (Neutral Modern) und warm-editorial (Warm Editorial).

Die vollständige Bibliothek umfasst 72 markenfähige Designsysteme:

• AI & LLM: claude, cohere, mistral-ai, ollama, x-ai …
• Entwickler-Tools: cursor, vercel, linear-app, supabase, posthog, sentry …
• Produkte: notion, figma, airtable, intercom, raycast …
• E-Commerce: shopify, airbnb, uber, nike, starbucks …
• Autos: tesla, bmw, ferrari, lamborghini …
• Sonstiges: apple, ibm, nvidia, spotify …

Du kannst auch deine eigene DESIGN.md-Datei hochladen und damit 9 Design-Dimensionen definieren – z. B. Markenfarben, Schriften, Abstände.

6) Design-Instruktion senden

Gib in das Eingabefeld deine Designanforderungen ein, z. B.:

make me a mobile onboarding flow for a fitness app with dark theme

Sobald du das Formular ausgefüllt und abgesendet hast, führt der Agent Folgendes aus:

1. Erzeugt einen TodoWrite-Plan und aktualisiert ihn live im Stream
2. Liest Skill-Templates und das Designsystem
3. Führt eine 5-dimensionale Selbstprüfung aus (Philosophie, Hierarchie, Umsetzung, Spezifität, Zurückhaltung)
4. Gibt <artifact>-Code aus
5. Rendern einer Vorschau im Sandbox-iframe

7) Vorschau und Export

Nachdem das Design gerendert wurde, kannst du:

• Live bearbeiten: Ändere HTML/CSS direkt im Dateibereich rechts
• Herunterladen: Export als HTML (mit eingebetteten Ressourcen), PDF, PPTX, ZIP oder Markdown
• Auf die Festplatte speichern: Klicke auf „Save to disk“, dann werden die Artefakte in .od/artifacts/ gespeichert
• Weiter im Gespräch: Sage dem Agenten „Ändere die Buttons in abgerundete Ecken“ oder „Wechsle die Farbkombination“ – er baut auf dem aktuellen Entwurf auf und passt ihn weiter an

Weitere gängige Befehle:

# Status anzeigen
pnpm tools-dev status

# Logs ansehen
pnpm tools-dev logs

# Alle Services stoppen
pnpm tools-dev stop

# Neustart (Port-Wechsel-Szenario)
pnpm tools-dev restart --daemon-port 17456 --web-port 17573

# Probleme diagnostizieren
pnpm tools-dev check

---

Bestehende Projekte ändern

Viele haben bei Open Design als erstes den Gedanken: „Das ist doch nur ein Tool, um neue Seiten zu generieren.“ In Wahrheit kann es genauso gut verwendet werden, um bestehende Projekte zu ändern – und in deinem Projekt muss dafür nichts wie DESIGN.md vorhanden sein.

Die Kernlogik ist simpel: Der Agent hat vollständigen Zugriff auf das Dateisystem – Read, Write, Bash, WebFetch sind alle vorhanden. Wenn er deinen Code analysiert, versteht er deine Design-Sprache und gibt dann auf Basis des bestehenden Stils aus.

Mit dem Richtungsauswahl-Tool schnell eine visuelle Basislinie setzen

Wenn du keine Design-Spezifikationen hast, erscheint bei Turn 2 ein Auswahlmenü mit 5 Voreinstellungen. Jede davon ist eine deterministische OKLch-Farbpalette plus ein Font-Stack:

Wenn du eine Richtung auswählst, überdeckt der Agent die :root-Variablen der Skill-Templates mit dieser Palette. Alle späteren Komponenten halten sich dann an diese Standards.

Screenshots hochladen – damit der Agent die Design-Sprache extrahiert

Das ist die praxisnähere Vorgehensweise. Open Design enthält ein integriertes Brand-Asset-Extraction-Protokoll:

1. Locate  — Key-Farbblöcke im Screenshot lokalisieren
2. Download — Screenshot in das Projektverzeichnis herunterladen
3. Grep hex — hex-Farbwerte extrahieren
4. Codify   — brand-spec.md schreiben
5. Vocalise — der Agent gibt auf Basis von brand-spec.md aus, nicht durch reines Raten

Die Bedienung ist sehr einfach:

"Here's our current app, I want you to match the styles"
# Danach Screenshot anhängen oder die URL der vorhandenen Seite einfügen

Der Agent analysiert Haupt- und Nebenfarben, Schriftarten sowie Abstandsmerkmale im Screenshot, erzeugt brand-spec.md – und alle späteren Änderungen basieren auf dieser Spezifikation.

Direkt Code lesen – präziser als Screenshots

Das Standard-Working-Directory des Agents ist .od/projects/<id>/, aber du kannst ein vorhandenes Projekt dort ablegen:

# Projekt in das Arbeitsverzeichnis von Open Design kopieren
cp -r ~/my-app/.   .od/projects/<ProjektID>/

Oder du lässt den Agenten über einen MCP-Server direkt über Verzeichnisse hinweg lesen (siehe nächstes Kapitel).

Dann sende solche Anweisungen:

"Read all .css files in ./src/styles and extract the color palette"

"Read the component library at ./components/. Generate a new
form component using the same spacing and border-radius tokens"

"I see you use Tailwind. Add a new button variant that matches
your existing primary/secondary button styles"

Der Agent iteriert über Dateien, analysiert CSS-Variablen/Tailwind-Konfiguration, extrahiert Design-Tokens und generiert anschließend Artefakte, die zum Stil deines bestehenden Codes passen.

MCP-Server: Design-Dateien projektübergreifend lesen

Du willst keine Dateien kopieren? Open Design bietet einen MCP-Server, mit dem dein Coding-Agent direkt Dateien aus Open-Design-Projekten lesen kann.

Auf der Seite „Open Design Settings → MCP Server“ findest du Konfigurationshinweise für verschiedene Clients. Nach der Einrichtung können Claude Code/Cursor-Agenten, die du in anderen Projekten (z. B. ~/my-app) startest, die Design-Dateien des in Open Design geöffneten Projekts direkt abfragen.

Empfohlenes Vorgehen für Änderungs-Szenarien

1. Öffne Open Design und wähle einen Skill, der deinem Projektstil nahekommt (z. B. web-prototype)

2. Turn 1 – Formular:
   - Surface: Web
   - Audience: bestehende Nutzergruppe
   - Tone: im Einklang mit dem bestehenden Produkt

3. Turn 2 – Richtungswahl:
   - Soll gleich bleiben → Screenshot der vorhandenen Seite hochladen und brand-spec.md extrahieren lassen
   - Spielraum für moderates Redesign → eine Richtung als visuelle Baseline wählen

4. Anweisung senden:
   "Add a settings page to my existing project at ./src,
    match the color palette and typography from the attached screenshot"

Der Agent macht dann:

1. Screenshot lesen → brand-spec.md extrahieren (oder CSS-Variablen aus dem Code auslesen)
2. Bestehende Dateien deines Projekts lesen
3. In der neuen Seite Haupt- und Nebenfarben sowie Fonts wiederverwenden
4. Läufähiges HTML ausgeben – im Stil passend zum bestehenden Projekt

---

Häufige Probleme beheben

Q1: Falsche Node-Version, Fehler Requested version v24.x.x is not currently installed

Open Design verlangt Node 24. Installiere mit nvm oder fnm:

nvm install 24 && nvm use 24
# oder
fnm install 24 && fnm use 24

Wenn du fnm nutzt, stelle sicher, dass dein Shell-Setup-File auch fnm env lädt (siehe fnm Offizielle Doku).

Q2: Codierungs-Agent wird nicht erkannt

Open Design scannt beim ersten Start den PATH. Prüfe, ob das CLI installiert ist und global verfügbar ist:

# Einen Agent testen
which claude     # macOS/Linux
where claude     # Windows

# Falls installiert, aber nicht erkannt wird: Service neu starten
pnpm tools-dev stop && pnpm tools-dev start web

Q3: Port ist belegt

Die Standardports 17456 (daemon) und 17573 (web) könnten bereits belegt sein:

# Auf andere Ports wechseln
pnpm tools-dev run web --daemon-port 17457 --web-port 17574

Q4: Nach Wechsel des Designsystems ändern sich die Styles nicht

Das Designsystem von Open Design wird über das Einfügen von CSS-Variablen aus DESIGN.md umgesetzt. Nach jedem Wechsel nutzt der Agent im neuen Dialog die neuen Variablen; bereits erzeugte alte Dialoge werden nicht automatisch aktualisiert. Öffne einen neuen Dialog, dann wird das neue System angewendet.

Q5: Vorschau-iframe lädt nur eine leere Seite

Das Sandbox-iframe nutzt srcdoc zum Rendern. Wenn nichts angezeigt wird:

1. Prüfe, ob es CSP-Fehler in der Browser-Konsole gibt
2. Stelle sicher, dass kein Adblocker das iframe-Laden blockiert
3. Klicke „Download HTML“, lade es herunter und öffne es lokal direkt zum Test

Q6: BYOK-Modus meldet einen API-Key-Fehler

BYOK-Agenten liegen unter /api/proxy/{anthropic,openai,azure,google}/stream. Prüfe:

1. Der baseUrl, der auf der Settings-Seite konfiguriert ist, ist korrekt (OpenAI-kompatibles Format)
2. API Key ist gültig und hat Zugriff auf die entsprechenden Modelle
3. Wenn das Feld apiKey nicht ausgefüllt ist, verweigert der Server die Anfrage (SSRF-Schutz)

---

Weiterführende Lektüre / Fortgeschrittene Richtungen

Eigene Design-Skills hinzufügen

Skills liegen als Ordner mit SKILL.md + assets/ + references/ vor und folgen der SKILL.md-Spezifikation von Claude Code.

Lege unter skills/ einen neuen Ordner an, füge SKILL.md hinzu und definiere ein od:-Frontmatter (mode, scenario, design_system.requires usw.). Nach einem Neustart des Services erscheint der Skill automatisch im Skill-Selector.

Claude Design Export-Pakete importieren

Anthropics Claude Design unterstützt Exporte als ZIP. Ziehe die ZIP-Datei in den Willkommens-Dialog von Open Design. POST /api/import/claude-design analysiert das Paket, rekonstruiert das Projekt und der Agent kann nahtlos weiter editieren.

MCP-Server integrieren

Open Design bietet einen stdio-basierten MCP-Server. Konfiguriere ihn in MCP-Clients wie Claude Code/Cursor/VS Code, dann kann der Agent direkt auf Design-Dateien und Assets in Open Design zugreifen – ohne manuelle ZIP-Exporte.

Desktop-App bauen

Die Electron-Desktop-Version unterstützt macOS (Apple Silicon) und Windows (x64):

# macOS
pnpm tools-pack mac build --to all
pnpm tools-pack mac install

# Windows
pnpm tools-pack win build --to nsis
pnpm tools-pack win install

Die gepackte App kann unabhängig gestartet werden; die Daten werden im System-AppData-Verzeichnis abgelegt.

Erweiterte Mediengenerierung

Neben Code-Artefakten integriert Open Design auch Bildgenerierung (gpt-image-2), Videogenerierung (Seedance 2.0, HyperFrames) und Audio-Generierung (Suno, Udio). Nach der Einrichtung eines API Keys können in deinem Designprozess direkt Medien wie .mp4 und .png ausgegeben werden.

---

Projektseite: nexu-io/open-design