Noch ein Open-Source-Repo, das Claude Design einfach geklont hat

Dieser Leitfaden ist ein strukturierter erster Blick auf Open Design: installieren, eine schnelle Demo ausführen, die eingebauten Designsysteme und Vorlagen erkunden und mit einer ehrlichen Einschätzung abschließen, wo es glänzt und wo es noch holprig ist. Er folgt dem Weg, den Chase AI in seinem praktischen Durchgang eingeschlagen hat – neu geschrieben und auf den aktuellen Release gebracht, sodass du Schritt für Schritt mitmachen kannst. Schau dir das Video oben für den Live-Durchlauf an oder lies hier die schriftliche Fassung weiter.

Der Open-Design-Arbeitsbereich – eine ruhige, vertraute Leinwand mit Prototypen, Foliendecks, Bildern und Video an einem Ort.

Was ist Open Design?

Open Design ist eine quelloffene, lokal ausgeführte Designplattform, die auf dem Coding-Agenten läuft, den du ohnehin schon nutzt. Statt dich an einen einzigen Modellanbieter zu binden, erkennt sie die bereits auf deinem Rechner vorhandenen CLIs – Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode und ein paar Dutzend mehr – und lässt diesen Agenten die Generierung steuern. Chase nennt das „bring your own agent“, und genau darum geht es: Du zahlst keine separaten API-Gebühren zusätzlich zu einem Abo, das du bereits hast, weil die Generierung über dein eigenes CLI läuft.

Ein paar Dinge, die einen Blick lohnen:

• Quelloffen, Apache-2.0 – klone es, hoste es selbst, lies jede Zeile.
• Läuft lokal – deine Projekte liegen in Ordnern auf deinem eigenen Rechner, nicht in der Cloud eines anderen.
• Agent-austauschbar – mehr als 21 Coding-Agenten werden unterstützt; du wählst, welches CLI die Arbeit antreibt, oder bringst deinen eigenen API-Schlüssel für ein anderes Harness mit.
• Mehr als nur Prototypen – Prototypen, Foliendecks, Magazin-Layouts, Bildgenerierung und sogar Video, alles aus einem Arbeitsbereich.
• Eine umfangreiche Bibliothek an Designsystemen und Skills ist eingebaut, damit du nicht vor einer leeren Leinwand startest.

Wenn du Claude Design schon einmal benutzt hast, wird dir die Oberfläche sofort vertraut vorkommen – Open Design behält dieselbe ruhige Ästhetik bei und legt dann zusätzliche Fähigkeiten (Foliendecks, Bild und Video) obendrauf. Ehrlich eingeordnet: Es ist ein eigener, offener, lokaler, agentennativer Arbeitsbereich – kein bloßes Re-Skin irgendeines einzelnen Tools.

Bevor du startest

Es gibt drei Wege, Open Design zu installieren. Wähle den, der zu dir passt:

Weg	Am besten für	Voraussetzungen
Desktop-App	Die meisten Menschen – 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	Leute, die im Terminal leben	Ein vorhandenes Coding-Agent-CLI

Chase zeigt im Video den Terminal-Weg, aber die Desktop-App ist heute der empfohlene Weg – kein Node, kein pnpm, kein Klonen, und sie erkennt deine Agenten automatisch für dich.

Schritt 1 – Open Design installieren

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

Geh zu open-design.ai/download und hol dir den Build für dein Betriebssystem. Nach der Installation erkennt die App automatisch jedes Coding-Agent-CLI, das bereits in deinem PATH liegt, und lädt die eingebauten Skills und Designsysteme für dich. Das ist der schnellste Weg zu einem funktionierenden Arbeitsbereich.

Option B – Aus dem Quellcode ausführen

Wenn du es lieber aus dem Repository ausführen möchtest – so wie Chase im Video – brauchst du nur eine Handvoll 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. Es wird ein dynamischer Port ermittelt, also leg keinen fest – klick einfach auf die Adresse, die angezeigt wird. Du brauchst Node ~24 und pnpm 10.33.x; Corepack wählt die festgelegte pnpm-Version für dich aus. (Falls kein Dev-Server hochkommt, kannst du deinem Agenten sagen „starte den Open-Design-Dev-Server“ und ihn den Befehl erledigen lassen.)

Option C – In deinen Coding-Agenten installieren

Um Open Design zu nutzen, ohne je die GUI zu öffnen – indem du es als Skill innerhalb deines Agenten aufrufst – führe aus:

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

Frag dann einfach innerhalb des Agenten: Use open-design to generate a landing page with the Airbnb design system.

Schritt 2 – Erster Start: deinen Coding-Agenten verbinden

Beim ersten Start von Open Design scannt es deinen Rechner und zeigt dir jedes lokale CLI, das es gefunden hat. Eine Abfrage fragt, wie du die KI steuern möchtest. Das ist der „bring your own agent“-Schritt.

• Wähle ein lokales CLI. Richtest du Open Design auf Claude Code, Codex oder OpenCode aus, schöpft die Generierung aus dem Abo, das du ohnehin zahlst, statt separate API-Gebühren zu verursachen. (Du kannst auch deinen eigenen API-Schlüssel einbinden, wenn du ein anderes Harness bevorzugst.)
• Lass das Modell auf Standard, sofern du keinen Grund dagegen hast – es folgt der Konfiguration deines CLI selbst.
• Medienanbieter hinzufügen (optional). Möchtest du Bilder, Video oder Audio generieren? Füge deine eigenen API-Schlüssel für Anbieter wie OpenAI, MiniMax, ElevenLabs und mehr hinzu. Genau das schaltet die Bild- und Videoseite des Arbeitsbereichs frei – etwas, das dir ein reiner Claude-Design-Klon nicht bietet.
• Skills und Designsysteme umschalten. Aktiviere nur die Fähigkeiten, die du für die anstehende Arbeit brauchst.

Du kannst all das später ändern, also halte es beim ersten Durchgang einfach.

Schritt 3 – Den Arbeitsbereich erkunden

Quer oben findest du Designs, Examples, Design systems sowie die Bild- und Video-Vorlagenbibliotheken. Die beiden, auf die es beim ersten Blick am meisten ankommt, sind Designsysteme und Beispiele.

Die Designsystem-Bibliothek: Jeder Eintrag zerlegt eine reale Marke in Palette, Typografie, Komponenten und visuelle Atmosphäre, die du als Ausgangspunkt wiederverwenden kannst.

Die Bibliothek der Designsysteme ist das Highlight. Jeder Eintrag nimmt eine reale Marke – zum Beispiel Airbnb – und zerlegt sie in Palette, Typografie, Komponenten und die gesamte visuelle Atmosphäre. Wenn du eine Seite willst, die sich wie diese Marke anfühlt, rastest du das System ein, und die Generierung startet aus diesen Regeln heraus statt aus einer leeren Leinwand.

Eine ehrliche Anmerkung aus Chases Durchgang: Die Beispiele entstehen durch einzeilige Prompts, wobei der genaue Prompt direkt auf der Karte angezeigt wird. Sie sehen beeindruckend aus, aber dahinter steckt kein Geheimrezept – was du siehst, ist das, was du eingetippt hast. Behandle sie als Inspiration, nicht als Versprechen von Ein-Klick-Magie. Die Bild- und Video-Vorlagen-Galerien sind ähnlich: praktisch als Referenz, aber im Alltag weniger wertvoll als die Workflows für Prototypen und Foliendecks. Richte deine Aufmerksamkeit auf die Ergebnisse, die du tatsächlich ausliefern wirst.

Die Vorlagenbibliothek: Ausgangspunkte für Prototyp, Folie, Bild und Video, die du nach Typ filtern und zum Loslegen forken kannst.

Du kannst die vollständige Plugin-Bibliothek im Web unter open-design.ai/plugins durchstöbern, bevor du irgendetwas installierst.

Schritt 4 – Etwas bauen

Der eigentliche Workflow – und wo Open Design sich verdient macht – ist das Erstellen von Prototypen und Foliendecks. Es funktioniert weitgehend so, wie du es erwartest:

1. Benenne das Projekt und wähle ein oder mehrere Designsysteme aus der eingebauten Liste.
2. Wähle die Detailtreue – Wireframe, um die Struktur schnell abzustecken, oder hohe Detailtreue für das vollständig gestaltete Ergebnis.
3. Optional ein Claude-Design-ZIP importieren. Du hast dein eigenes Designsystem in Claude Design gebaut? Öffne das Projekt dort, wähle Share → Download project as .zip und lade dieses ZIP dann in Open Design hoch. Alle Designdateien erscheinen im Arbeitsbereich, bereit zur Wiederverwendung. (Im Moment ist dieser ZIP-Import der sauberste Weg, deine eigene Marke einzubringen – einen Knopf zum „Designsystem von Grund auf erstellen“ gibt es noch nicht.)
4. Schreib das Briefing und klick auf Erstellen. Open Design führt dieselbe Art klärender Q&A durch, die du in Claude Design sehen würdest – für wen ist das, wie viele Folien, welche Detailtreue, welcher visuelle Ton – und erstellt dann eine To-do-Liste, die es Punkt für Punkt abarbeitet. Im Video bittet Chase um eine Landingpage für ein fiktives SaaS namens Lighthouse mit drei vergleichbaren Richtungen (klassisch gestapelt, redaktionell und laut), generiert dann ein brutalistisches Foliendeck und exportiert es nach PowerPoint.

Das Ergebnis ist ein echtes, interaktives Artefakt, gebaut aus dem Designsystem, das du gewählt hast. Chases ehrliche Einschätzung: Die Ergebnisse landen ungefähr bei einer „90-%-Lösung“ – ein Deck, das markengerecht und brauchbar ist, mit ein paar Anpassungen bei Abständen und Formatierung, die dir noch bleiben. Für etwas, das noch früh dran ist, ist das ein starker Ausgangspunkt.

Tipps

• Nutze ein lokales CLI, nicht die API, damit die Generierung aus einem Abo schöpft, das du ohnehin hast, statt pro Aufruf abgerechnet zu werden.
• Starte von einem eingebauten Designsystem, um die leere Leinwand zu überspringen; importiere ein Claude-Design-ZIP, wenn du deine eigene Marke brauchst.
• Füge nur die Medien-Schlüssel hinzu, die du wirklich nutzt – du brauchst nicht jeden Anbieter, um loszulegen.
• Erwarte einen 90-%-Entwurf, dann feilst du. Exportiere früh (auch nach PowerPoint), um die kleinen Formatierungsabweichungen abzufangen, bevor du übergibst.
• Setz zuerst auf Prototypen und Foliendecks. Sie sind die ausgefeiltesten Oberflächen; die Beispiel- und Vorlagengalerien taugen besser als Inspiration denn als fertige Ergebnisse.

FAQ

Ist Open Design kostenlos? Ja – es ist quelloffen unter der Apache-2.0-Lizenz. Du führst es lokal kostenlos aus; du zahlst nur für die Modell- und Mediennutzung des jeweiligen Agenten und der API-Anbieter, die du verbindest. Richtest du es auf ein lokales CLI aus, läuft die Generierung über das Abo, das du bereits hast.

Welche Coding-Agenten werden unterstützt? Mehr als 21 Agenten, darunter Claude Code, Codex, Cursor, Gemini, GitHub Copilot und OpenCode. Open Design erkennt die bereits auf deinem Rechner installierten CLIs automatisch, sodass du in der Regel nichts konfigurieren musst.

Kann ich mein eigenes Designsystem verwenden? Ja. Der reibungsloseste Weg heute ist, das System in Claude Design zu bauen, das Projekt als ZIP herunterzuladen und dieses ZIP in Open Design zu importieren – deine Tokens und Komponenten kommen direkt mit. Es gibt in der GUI noch keinen eigenen Knopf zum „Designsystem erstellen“, daher ist der ZIP-Import der empfohlene Weg.

Wie unterscheidet es sich von Claude Design? Dasselbe vertraute Gefühl, aber quelloffen, lokal ausgeführt und agent-austauschbar über mehr als 21 CLIs hinweg – plus zusätzliche Fähigkeiten wie Foliendecks, Magazin-Layouts, Bildgenerierung und Video, die ein Tool mit nur einem Anbieter nicht bietet. Es ist ein früher Release, also rechne mit ein paar Ecken und Kanten, aber das Fundament ist solide.

---

Dieser schriftliche Leitfaden basiert auf dem praktischen Durchgang von Chase AI. Schau dir das vollständige Video oben an und abonniere Chase AI für weitere praxisnahe Analysen von KI-Tools.