Open Design vs. Figma und Claude Design — eine vollständige Einführung

Diese Anleitung ist eine vollständige Einführung in Open Design, aufgehängt an einer Frage: Wo passt ein Agent-nativer Design-Workspace neben Figma und Claude Design? Sie installiert die App, konfiguriert einen Agenten, arbeitet mit den integrierten Designsystemen, baut eine echte Landingpage von Anfang bis Ende, iteriert mit den Werkzeugen direkt auf der Canvas und exportiert das Ergebnis. Sie folgt dem Weg, den Anton Larichev (PurpleSchool) in seiner praktischen Einführung genommen hat, neu geschrieben und auf den aktuellen Stand des Releases gebracht. Sieh dir das Video oben für den Live-Durchlauf an oder lies weiter für die Textversion.

Der Open-Design-Workspace — Prototypen, Foliendecks, Bilder und Video in einer ruhigen, vertrauten Canvas.

Was ist Open Design?

Open Design ist eine quelloffene, lokal-zuerst arbeitende Designplattform, die auf dem Coding-Agenten läuft, den du bereits nutzt. Statt an ein Modell gebunden zu sein, erkennt es die CLIs, die schon auf deinem Rechner sind — Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode und ein paar Dutzend mehr — und lässt diesen Agenten die Generierung antreiben. Antons Beschreibung trifft es genau: An der Oberfläche sieht es Claude Design sehr ähnlich, aber unter der Haube ist es „nur eine zusätzliche UI, die dieselben Agenten antreibt, die du ohnehin schon installiert hast.“ Du zahlst kein zweites Abo zusätzlich zu deinem Coding-Plan.

Was es eines ernsthaften Blicks würdig macht:

• Quelloffen, Apache-2.0 — klone es, hoste es selbst, nutze es in Kundenprojekten.
• Läuft lokal — nichts wird hochgeladen; deine Projekte liegen in Ordnern auf deinem eigenen Rechner.
• Agent-austauschbar — richte es auf jede unterstützte CLI aus oder bring deinen eigenen API-Schlüssel für ein anderes Harness mit.
• Eine umfangreiche Bibliothek an Designsystemen und Skills ist eingebaut, sodass du nicht mit einer leeren Canvas startest.
• Mehr als statisches Design — Prototypen, Foliendecks, Bildgenerierung und Video, alles aus einem Workspace.

Wie es sich von Figma unterscheidet

Das ist der Vergleich, den die meisten tatsächlich wollen, also reden wir direkt darüber.

Figma ist ein manueller, kollaborativer Vektoreditor. Du bewegst jeden Frame, zeichnest jede Komponente, und die Stärke liegt in Präzision und Echtzeit-Teamarbeit. Hier generiert nichts das Design für dich — du bist die Designerin oder der Designer, die oder der die Arbeit macht.

Open Design dreht das um. Du beschreibst, was du willst, wählst ein Designsystem, und der Agent generiert ein echtes, interaktives HTML-Artefakt, das du anschließend verfeinerst. Die Ausgabe ist Code, keine Vektordatei — was bedeutet, dass alles, was du baust, sofort näher an deinem tatsächlichen Projekt ist.

Ein Punkt, bei dem Anton ehrlich ist: Open Design ist derzeit schwach darin, ein Designsystem aus einer Figma-Datei herauszuziehen. Wenn du ihm heute einen Figma-Export gibst, kommt das extrahierte System tendenziell unsauber zurück. Wenn deine maßgebliche Quelle also in Figma liegt, ist der sauberere Weg, deinen Agenten dieses Figma-Design zuerst in Code verwandeln zu lassen und dann den Code in Open Design zu bringen (mehr dazu unten). Behandle Open Design als Oberfläche zum Generieren und Iterieren, nicht als Figma-Importer.

Wie es sich von Claude Design unterscheidet

Wenn du Claude Design genutzt hast, wird sich die Oberfläche sofort vertraut anfühlen — dieselbe ruhige Ästhetik, dieselbe Artefakt-zuerst-Schleife. Die Unterschiede, die zählen:

• Jedes Modell, nicht nur eines. Claude Design bindet dich an Opus 4.7. Open Design treibt jeden Agenten an, den du wählst — und du kannst mitten im Projekt wechseln.
• Medienerzeugung eingebaut. Füge Provider-Schlüssel hinzu (OpenAI GPT Image, MiniMax, ElevenLabs und mehr) und Open Design generiert Bilder, Audio und Video direkt inline. Das ist der herausragende Unterschied, den Anton hervorhebt — ein Design-Tool mit nur einem Anbieter gibt dir das nicht.
• Lokal und kommerziell unbedenklich. Apache-2.0 plus lokal-zuerst bedeutet, dass Kundenprojekte nie deinen Rechner verlassen und nie irgendjemandes Erlaubnis brauchen.

Schritt 1 — Open Design installieren

Du hast drei Wege hinein. Wähle den, der zu dir passt:

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

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

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

Option B — Aus dem Quellcode ausführen

Wenn du es lieber aus dem Repository ausführst — wie Anton im Video — sind es 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 die lokale URL, die ausgegeben wird. Es ermittelt einen dynamischen Port, also schreib 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.

Option C — In deinen Coding-Agenten installieren

Um Open Design als Skill innerhalb deines Agenten aufzurufen, ohne je die GUI zu öffnen:

od mcp install <agent>
# <agent> = claude | codex | cursor | copilot | gemini | opencode | …

Dann, innerhalb des Agenten: Use open-design to generate a landing page with the Stripe design system.

Schritt 2 — Deinen Agenten konfigurieren

Beim ersten Start scannt Open Design deinen Rechner und zeigt jede gefundene CLI an, dann führt es dich durch ein kurzes Setup:

• Wähle Agent und Modell. Anton nutzt Claude Code auf Opus 4.7 („eines der besten fürs Design“), aber du kannst auf Codex, Gemini CLI oder jeden anderen erkannten Agenten ausrichten. Es gibt eine Test-Schaltfläche, um die Verbindung zu bestätigen.
• Oder nutze einen API-Schlüssel. Lieber keine lokale CLI? Lege stattdessen eine Basis-URL, einen Schlüssel und ein Modell fest.
• Füge Medien-Provider hinzu. Das ist das Unterscheidungsmerkmal — füge Schlüssel für OpenAI GPT Image, MiniMax, ElevenLabs und andere hinzu, um Bilder, Audio und Video direkt zu generieren.
• Schalte Skills um. Aktiviere die Design-Skills, die du brauchst (Systemdesign, Prototyp, Markenrichtlinien und mehr); lass den Rest aus.

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

Schritt 3 — Mit Designsystemen arbeiten

Die Designsystem-Bibliothek ist das Herz des Tools. Jeder Eintrag nimmt eine echte Marke und kodiert ihre Palette, Typografie, Komponenten und Gesamtatmosphäre in ein wiederverwendbares System.

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

Es gibt zwei Wege, deine eigene Marke hereinzubringen, und Anton testet beide:

1. Importiere ein Claude-Design-ZIP (heute am saubersten). Du hast ein System in Claude Design gebaut? Öffne es dort, wähle Share → Download project as .zip und zieh dieses ZIP in Open Design. All deine Tokens und Komponenten werden direkt übernommen.
2. Extrahiere ein System aus bestehendem Code. Erstelle eine High-Fidelity-Datei ohne angehängtes Designsystem, richte deren Import auf einen Ordner mit deinem echten Code aus und bitte den Agenten, daraus ein Designsystem abzuleiten — Farben, Typografie, Abstände und ein JSX-Komponenten-Kit. Es wird nicht perfekt sein, aber es ist ein solider Ausgangspunkt, den du anpassen kannst.

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

Schritt 4 — Eine echte Seite bauen und iterieren

Der eigentliche Workflow besteht darin, Prototypen und Foliendecks zu bauen. Im Video baut Anton eine Preis-/Landingpage für PurpleSchool gegen ein importiertes Designsystem:

1. Erstelle ein Projekt, wähle Web/Desktop/Mobil und entscheide dich für Wireframe oder High Fidelity.
2. Hänge das Designsystem an und füge dein Briefing ein (Anton nutzt eine kurze Spezifikation: Hero, Preise, Features, FAQ, Footer).
3. Wähle dein Modell im Projekt (hier Claude Code auf Opus) und sende ab.
4. Beantworte die klärenden Fragen, die Open Design stellt, bevor es eine Zeile schreibt — Oberfläche, Zielgruppe, Tonalität — und sieh dann zu, wie es eine To-do-Liste abarbeitet.

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

Wo Open Design seinen Wert beweist, ist die Iteration direkt auf der Canvas: Wähle einen beliebigen Block aus und kommentiere ihn, zeichne direkt auf die Vorschau, um auf das zu zeigen, was du geändert haben willst, bearbeite Schriften und Größen inline und prüfe das Layout bei Desktop-/Tablet-/Mobil-Breiten. Es ist die schnelle Feedback-Schleife, die mit einem nackten Agenten im Terminal umständlich nachzubilden ist.

Wenn du zufrieden bist, exportiere das Ergebnis als eigenständiges HTML oder ZIP und gib es deinem Team — oder zieh den Code direkt in dein Projekt.

Tipps

• Füttere es nicht mit rohen Figma-Dateien. Die Figma-Extraktion ist heute der schwächste Weg; wandle Figma zuerst in Code um, dann importiere den Code.
• Importiere ein Claude-Design-ZIP, wenn du deine eigene Marke brauchst — es ist der reibungsloseste Einstieg.
• Nutze eine lokale CLI, damit die Generierung auf einem Abo läuft, das du ohnehin schon zahlst, statt auf API-Gebühren pro Aufruf.
• Verlass dich auf die Kommentar- und Zeichenwerkzeuge auf der Canvas — einen Block auszuwählen und darauf zu zeichnen ist weit schneller, als die Änderung in Prosa zu beschreiben.
• Erwarte einen starken Entwurf, dann poliere. Exportiere früh, um kleine Abstands- und Formatierungsabweichungen zu erwischen.

FAQ

Sollte ich Figma durch Open Design ersetzen? Nein — sie erledigen unterschiedliche Aufgaben. Figma ist ein präziser, kollaborativer manueller Editor; Open Design ist eine Agent-native Oberfläche zum Generieren und Iterieren, die Code ausgibt. Nutze Open Design, um schnell vom Briefing zu einem echten, markenkonformen Entwurf zu kommen, und behalte Figma für die Arbeit, die handwerkliche Präzision und Live-Zusammenarbeit braucht.

Kann es meine Figma-Designs importieren? Indirekt. Direkte Figma-Extraktion ist heute grob. Der verlässliche Weg ist, das Figma-Design mit deinem Agenten in Code umzuwandeln und dann diesen Code (oder ein Claude-Design-ZIP) in Open Design zu importieren.

Muss ich Claude nutzen? Nein. Open Design treibt jeden unterstützten Agenten an — Codex, Gemini CLI, Cursor, OpenCode und mehr — und du kannst Modelle mitten im Projekt wechseln oder deinen eigenen API-Schlüssel mitbringen.

Ist es kostenlos? Die App ist quelloffen unter Apache-2.0 und kostenlos lokal auszuführen. Du zahlst nur für die Modell- und Mediennutzung des jeweiligen Agenten und der Provider, die du anbindest.

---

Diese Textanleitung basiert auf Anton Larichevs praktischer Einführung. Sieh dir das vollständige Video oben an und abonniere PurpleSchool | Anton Larichev für mehr Tiefgang zu Entwicklung und KI-Tooling.