Open Design - die kostenlose Open-Source-Alternative zu Claude Design

Desktop-App

open-design.ai · Mac & Windows · One-Click

Der einfachste Weg. Installer von der offiziellen Seite ziehen, öffnen, fertig. Die App spawnt deinen lokalen Claude-Code (oder Codex, Cursor, Gemini CLI) als Design-Engine und gibt dir das Interface, das du aus Claude Design kennst.

1. Download-Seite öffnen

› https://open-design.ai/

2. Installer für dein System wählen

› Mac (Apple Silicon · Intel x64) oder Windows (x64)

Beim ersten Start scannt die App deinen $PATH nach 16 unterstützten Coding-CLIs (Claude Code, Codex, Cursor, Gemini, OpenCode, Qwen, Copilot, Hermes, Kimi und weitere). Keine CLI? Settings → BYOK-Mode öffnet einen API-Proxy für Anthropic, OpenAI, Azure, Google oder Ollama.

Claude Code Setup-Prompt

nexu-io/open-design · Lokaler Build · Copy-Paste

Wenn du Open Design lieber aus dem Source-Code baust und Claude Code die Arbeit machen lassen willst, kopier den Prompt unten in eine frische Session. Claude prüft Node 24 und pnpm 10.33.x, klont das Repo, installiert die Dependencies und startet den Dev-Server auf Port 7456.

1. Repo-Adresse zum Mitlesen

› https://github.com/nexu-io/open-design

2. Diesen Prompt in Claude Code einfügen

›

Installiere Open Design (github.com/nexu-io/open-design) lokal: pruefe Node 24 + pnpm 10.33.x, klone nach ~/Tools/open-design, run corepack pnpm install, starte corepack pnpm tools-dev, oeffne http://localhost:7456 ...

Claude führt die Befehle der Reihe nach aus und meldet sich wenn etwas fehlt. Du kannst zwischendurch redirecten. Der Build dauert beim ersten Mal etwa 2-3 Minuten.

Docker Compose

Containerisiert · Kein Node nötig · Linux-freundlich

Wenn du Docker Desktop schon laufen hast, ist das die schnellste Variante. Drei Befehle, kein Node-Setup, kein pnpm. Open Design läuft im Container auf Port 7456 und du erreichst dasselbe Interface wie bei den anderen Setups.

1. Repo klonen

› git clone https://github.com/nexu-io/open-design.git ~/Tools/open-design

2. Container starten

› cd ~/Tools/open-design/deploy && docker compose up -d

3. Im Browser öffnen

› http://localhost:7456

Logs anschauen mit docker compose logs -f. Stoppen mit docker compose down. Beim Pull beim ersten Start lädt Docker das Image, das kann eine Minute dauern.

Ein Prompt. Ein Artifact.

Open Design ist artifact-first. Du tippst einen Brief, der Agent stellt eine kurze Discovery-Frage, wählt Design-System und Direction, und schiebt dir Sekunden später eine fertige HTML-Page in eine Sandbox-Vorschau. Hier der Master-Prompt, den ich am häufigsten nutze. Tauschst die Variablen in [Klammern], kopierst rein, lieferst ab.

Master-Prompt (für jeden Skill nutzbar)

Bau mir [WAS: SaaS-Landing / Pitch-Deck / Mobile-App / Magazine-Poster / Motion-Hero] für [PROJEKT/THEMA]. Zielgruppe: [WER]. Tone: editorial, klar, kein Buzzword-Bingo. Design-System: wähl was passt, gerne Linear-, Vercel- oder Stripe-Style. Sprache: Deutsch. Inhalt: [3-5 Sektionen oder Slides als Bullet-Liste]. Branding: [Farb-Anker oder „freie Hand"]. Mach mir bitte vorher die Discovery-Frage falls du was klären musst.

Variante · SaaS-Landing in 60 Sekunden

Bau mir eine SaaS-Landing für ein KI-Tool das Rechnungen automatisch prüft. Zielgruppe: Energieberater im DACH-Mittelstand. Editorial, Vercel-Style, deutsch. Sektionen: Hero · Problem · Live-Demo-Mockup · Drei Use-Cases · Pricing-Teaser · CTA.

Variante · Pitch-Deck im Magazine-Style

Bau mir ein 8-Slide Pitch-Deck für eine Seed-Runde. Thema: AI-Consulting-Studio das DACH-Mittelständler in 4 Wochen auf Claude Code aufrüstet. Magazine-Layout, WebGL-Hero auf Slide 1, deutsch. Slides: Cover · Problem · Lösung · Markt · Traction · Team · Roadmap · Ask.

Variante · Mobile-App-Prototype (iPhone)

Bau mir ein Mobile-App-Onboarding mit 3 Frames im iPhone-15-Pro-Chrome. App: Gamified-Habit-Tracker für Solo-Founder. Frames: Splash mit Logo · Value-Prop mit „Heutige Quest" · Signup-Screen. Tone: Cinematic, dunkel, mit XP-Ribbon auf Frame 2.

Output · 1 HTML-Artifact in der Sandbox · Export als HTML/PDF/PPTX/ZIP · Editierbar im File-Workspace

Vier Outputs, ein Interface.

Web + Editorial

31 Skills · Prototype-Mode

SaaS-Landings, Editorial-Magazine-Pages, Dashboards, Docs, Blog-Posts. Jeder Skill liefert ein einzelnes self-contained HTML-Artifact mit Display-Headlines, deterministischen OKLch-Paletten und Five-Dimensional Self-Critique. Du tippst einen Brief, der Agent baut das Ding.

Decks + Pitches

4 Deck-Skills · Magazine-Layout

Pitch-Decks im Magazine-Style mit WebGL-Hero auf Slide 1, weekly-update-decks, simple decks, replit-decks. Jede Slide horizontal-swipe, single-file HTML-Output, PDF-Export ist ein Klick. Statt PowerPoint-Vorlage kriegst du ein Design das in einem VC-Meeting nicht peinlich aussieht.

Mobile + Motion

iPhone, Pixel, Motion-Frames, HyperFrames

Multi-Screen Mobile-Prototypes in pixel-genauen Device-Frames. Plus Motion-Graphics als HyperFrames (HTML zu MP4 für Product-Reveals, Kinetic-Typography, Data-Charts). Renderst direkt in dein Projekt-Folder, Output ist ein echter .mp4.

BYOK + Local-First

16 CLIs · 6 Modell-Provider · SQLite

Open Design scannt deinen $PATH und nutzt was schon da ist: Claude Code, Codex, Cursor, Gemini, OpenCode, Qwen, Copilot und neun weitere. Keine CLI? BYOK-Proxy zu Anthropic, OpenAI, Azure, Google, Ollama Cloud. Alles bleibt lokal in .od/app.sqlite, keine Cloud-Pflicht.

Das Wichtigste

Apache-2.0, kein Vendor-Lock-in. Open Design ist offiziell unter github.com/nexu-io/open-design, Apache-2.0-Lizenz, 40k+ Stars in zwei Wochen. Du kannst forken, anpassen, eigenes Branding bauen und produktiv einsetzen ohne Subscription. Anders als Claude Design, das closed-source und cloud-only ist.

Discovery-Form vor jeder Generation. Bevor das Modell auch nur einen Pixel improvisiert, kommt eine kurze Radio-Frage-Form (Surface, Audience, Tone, Brand-Context, Scale). 30 Sekunden Discovery sparen 30 Minuten Redirects. Wenn du noch kein Brand hast, schlägt der Agent fünf curated Visual-Directions vor (Monocle, Minimal, Tech Utility, Brutalist, Soft Warm).

Claude-Design-Imports gehen direkt rein. Du hast ein Claude-Design-Export-ZIP liegen? Drop es auf den Welcome-Dialog, der Daemon parst es zu einem echten Projekt-Folder. Dein Agent macht weiter wo Anthropic aufgehört hat. Außerdem: Persistenz in SQLite, das heißt morgen findest du dein Projekt mit allen offenen Tabs wieder genau so wie du es verlassen hast.

Claude Design, aber kostenlos und open-source.

Drei Wege rein. Einer davon ist deiner.

Desktop-App

Claude Code Setup-Prompt

Docker Compose

Ein Prompt. Ein Artifact.

Vier Outputs, ein Interface.

Werde Teil der SKAILE Community.

Early Access sichern

Du stehst auf der Liste.