Open Source Claude Design — komplett kostenloses KI-Designsystem

Dieser Leitfaden ist die schriftliche Begleitung zu WorldofAIs Überblick über Open Design — weniger eine Installationsanleitung, mehr eine Aufschlüsselung nach dem Motto „Das ist es wirklich und darum ist es wichtig“. Wir folgen dem roten Faden aus WorldofAIs Video, neu geschrieben und auf den aktuellen Release gebracht. Sieh dir oben den Live-Rundgang an oder lies hier die Konzept-zuerst-Variante: was Open Design ist, warum es eingeschlagen hat, was du damit bauen kannst und wie du loslegst.

Der Open Design Workspace: Prototypen, Foliendecks, Bilder und Video starten alle an einem Ort.

Was ist Open Design?

Open Design ist eine quelloffene, lokal-zuerst arbeitende Designplattform — eine agentennative Alternative zu Claude Design und Figma. Die Kernidee ist einfach, aber ungewöhnlich: Statt eine geschlossene App zu sein, die fest an einen Modellanbieter gekoppelt ist, läuft Open Design auf dem Coding-Agent, den du bereits nutzt.

Richte es auf einen Projektordner, und es durchsucht deinen Rechner nach installierten Coding-Agent-CLIs — Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode und eine lange Liste weiterer — und lässt dich dann eines auswählen, das die Generierung antreibt. Diese CLI wird zu deinem Design-Agent. Du bringst nicht deinen eigenen Key mit und zahlst einen Aufschlag obendrauf; du bringst deinen eigenen Agent mit und führst Design über das Abo oder den Tarif aus, für den du ohnehin schon zahlst.

Und es ist wirklich lokal. Darunter liegt ein Daemon mit echtem Dateisystemzugriff: Er liest und schreibt Dateien, führt Befehle aus und speichert den Zustand in einer lokalen SQLite-Datenbank. Deine Designs liegen in deinen eigenen Ordnern, deine Projekte gehören dir, und nichts muss durch die Cloud eines anderen hin und zurück laufen. Auf dieser lokalen Laufzeitumgebung sitzen Export-Pipelines (HTML, PDF, Foliendecks, ZIP), der Import von Claude Design ZIP sowie MCP-Server für den Agent-zu-Agent-Zugriff auf deine Designdateien — so fügt sich das in deine vorhandenen Werkzeuge ein, statt sie zu ersetzen.

Warum es eingeschlagen hat

Open Design wurde zu einem der am schnellsten wachsenden Open-Source-Projekte auf GitHub, und WorldofAI benennt klar, warum. Es läuft auf drei Dinge hinaus.

Es ist quelloffen und kostenlos. Lizenziert unter Apache-2.0 — klone es, hoste es selbst, lies jede Zeile. Kein Abo, das den Zugang einschränkt, und kein separater Sitzplatz, den man kaufen müsste. Du zahlst nur für die Modell- und Mediennutzung des Agents und der Anbieter, die du anbindest. Claude Design hingegen sitzt hinter einer Bezahlschranke und verbrennt Rate-Limits schnell; ein paar ernsthafte Generierungen, und schon wägst du die Rechnung für die Zusatznutzung ab.

Es ist Bring-your-own-Agent, nicht nur Bring-your-own-Key. Genau das dreht die Rechnung um. Die meisten „offenen Alternativen“ binden dich weiterhin an ein einziges Modell — du tauschst einen API-Key aus, steckst aber trotzdem im Ökosystem eines anderen. Open Design erkennt die Coding-Agent-CLIs, die bereits auf deinem System sind, und leitet die Generierung über diejenige, die du wählst. Du möchtest mit hoher Reasoning-Intensität auf Codex laufen? Oder bevorzugst du Claude Code, OpenCode, die Gemini CLI oder ein effizientes offenes Modell wie MiniMax für Webarbeit? Deine Entscheidung, pro Projekt. Keine Bindung an mehrere Modelle. Und falls du keine CLI eingerichtet hast, fährt ein OpenAI-kompatibler Bring-your-own-Key-Proxy denselben Workflow ohne die lokale Konfiguration.

Praxiserprobte Designsysteme, die du in jedes Projekt einklinken kannst — so startest du nicht von einer leeren Leinwand.

Design baut auf Code auf, nicht bloß auf einem Bildmodell. Das ist der leise Unterschied. Open Design liefert eine Bibliothek aus kombinierbaren Skills und vollständigen Designsystemen mit, sodass du kein einmaliges Bild generierst — du generierst echtes, strukturiertes Design in Produktionsqualität. Weil die Ausgabe so gebaut wird, wie Code gebaut wird, geht sie vom Design direkt in die Produktion: Übergib die generierten Dateien an einen anderen Coding-Agent und baue weiter. WorldofAIs Fazit lautet, dass die Ausgabequalität es mit Claude Design aufnimmt und dabei mehr leistet — und das, ohne dich an einen einzigen Anbieter zu fesseln.

Was du bauen kannst

Open Design ist kein UI-Generator für nur einen Trick. Aus einem einzigen Workspace kannst du Folgendes erzeugen:

• High-Fidelity-Prototypen und Landingpages — vollständig gestaltete Seiten, nicht bloß Wireframes, gebaut auf einem echten Designsystem.
• Foliendecks und Pitch-Decks — strukturierte, animierte Präsentationen mit sauberen Abschnitten.
• Magazin- und Editorial-Layouts — Editorial-Stücke im langen Scroll, Dokumente im Stil von Geschäftsberichten und andere reichhaltige Layouts.
• Mobile App-Oberflächen — ausgefeilte App-UIs, die gestaltet wirken und nicht automatisch generiert.
• Bilder — generierte Assets über die Medienanbieter, die du anbindest (zum Beispiel das Bildmodell von OpenAI).
• Video und Audio — Bewegtbild und Ton aus derselben Quelle, ebenfalls über deine eigenen Anbieter-Keys.

Die Galerie mit Beispielen, die in der App steckt — Landingpages, Foliendecks, Designsysteme — macht die Bandbreite auf einen Blick deutlich. Alles kommt aus einem einzigen Werkzeug, angetrieben von dem von dir gewählten Agent, und du kannst Modelle frei mischen, statt auf einen Anbieter beschränkt zu sein.

Erste Schritte

Du hast drei Wege, Open Design auszuführen. Wähle den, der zu dir passt:

Weg	Am besten für	Was du brauchst
Desktop-App	Die meisten — keine Konfiguration	Nichts. Herunterladen und öffnen.
Aus dem Quellcode ausführen	Entwickler, die den Code lesen oder ändern wollen	Node ~24, pnpm (über Corepack)
In deinen Agent installieren	Leute, die im Terminal leben	Eine vorhandene Coding-Agent-CLI

Desktop-App (empfohlen). Geh auf open-design.ai, lade den Desktop-Build für deine Plattform herunter und öffne ihn. Kein Node, kein pnpm, kein Klonen — die App erkennt die Coding-Agent-CLIs in deinem PATH automatisch und lädt die integrierten Skills und Designsysteme für dich.

Aus dem Quellcode ausführen — der Weg, den WorldofAI im Video wählt — sind vier 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 (der Port wird dynamisch vergeben — kopiere den aus deinem Terminal und gehe nicht von einer festen Nummer aus). Du brauchst Node ~24; Corepack wählt die festgelegte pnpm-Version für dich aus.

In deinen Coding-Agent installieren — um Open Design als Skill innerhalb deines Agents aufzurufen, ohne die GUI je zu öffnen:

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

Beim ersten Start öffnet sich der Willkommens-Daemon, in dem du die Grundlagen einrichtest: einen Standard-Agent und ein Modell wählen (die App erkennt lokale CLIs automatisch oder du steckst einen OpenAI-kompatiblen Key ein), optional Medienanbieter-Keys für Bild/Video/Audio hinzufügen und beliebige MCP-Dienste anbinden. Speichern, loslegen, dann einen Prototyp erstellen — gib ihm einen Namen, wähle High fidelity statt Wireframe und schreibe dein Briefing. Der Agent stellt ein paar klärende Fragen (Plattform, Artikelausrichtung, Designrichtung), plant seine Arbeit, liest das Designsystem und baut das Artefakt. In WorldofAIs Durchlauf produzierte Codex in etwa fünf Minuten eine saubere Newsletter-Landingpage — abgerechnet über seinen eigenen Codex-Tarif, vollständig über die Skills von Open Design geleitet.

Tipps

• Wähle den passenden Agent für die Aufgabe. Open Design leitet über die CLI, die du auswählst — probiere ein effizientes Modell wie MiniMax für schnelle Webarbeit oder stelle Codex auf hohe Reasoning-Intensität für die ausgefeilteste Ausgabe.
• Starte mit High Fidelity, wenn du das echte Ergebnis sehen willst; geh nur dann auf Wireframe zurück, wenn du die Struktur schnell grob abstecken möchtest.
• Bring deine eigenen Medien-Keys mit nur für die Anbieter, die du tatsächlich nutzt — du brauchst nicht alle, um mit dem Gestalten zu beginnen.
• Du brauchst nicht zuerst ein Designsystem. Beginne mit einem integrierten, importiere ein Claude Design ZIP oder lass Open Design sinnvolle Standardwerte ableiten.
• Designs bleiben beim Projektordner. Organisiere deine Arbeit, indem du Open Design gegen das richtige Verzeichnis ausführst.

FAQ

Ist Open Design wirklich kostenlos? Ja — es ist quelloffen unter Apache-2.0, ohne Abo. Du zahlst nur für die Modell- und Mediennutzung des Agents und der Anbieter, die du anbindest.

Wie unterscheidet sich „Bring your own Agent“ von „Bring your own Key“? Bring-your-own-Key bindet dich weiterhin an einen Anbieter — du lieferst nur den Key. Open Design erkennt die Coding-Agent-CLIs, die bereits auf deinem Rechner sind, und lässt dich pro Projekt wählen, welche die Generierung antreibt. Keine Bindung an ein einzelnes Modell.

Muss ich Claude verwenden? Nein. Claude Code ist eine Option unter vielen — Codex, Cursor, Gemini, Copilot, OpenCode und weitere werden alle unterstützt, und du kannst die Agents im Workspace wechseln, wann immer du willst.

Ist es nur für UI-Mockups? Nein. Derselbe Workspace erzeugt Landingpages, Folien- und Pitch-Decks, Magazin-Layouts, mobile App-Oberflächen, Bilder und Video — und weil das Design auf Code aufbaut, geht es vom Design direkt in die Produktion.

---

Dieser schriftliche Leitfaden basiert auf WorldofAIs Überblick über Open Design. Sieh dir oben das vollständige Video an und abonniere WorldofAI für mehr zu den neuesten KI-Tools und -Workflows.