Claude Design hat ausgedient … Die BESTE kostenlose Claude-Design-Alternative (unbegrenzt & Open Source)

Diese Anleitung zeigt dir, wie du Open Design mit der Gemini CLI als jenem Agenten betreibst, der die Generierung antreibt – sodass Prototypen, Landingpages und UI aus einem einzigen Workspace stammen und sich dabei auf Geminis großzügiges kostenloses Kontingent stützen. Sie folgt dem Weg, den Sandeep Singh in seinem praktischen Walkthrough einschlägt, neu geschrieben und auf den aktuellen Release aktualisiert. Sieh dir das Video oben für die Live-Version an oder lies einfach weiter.

Die Kostenfrage ist der springende Punkt. Open Design selbst ist kostenlos und quelloffen; das Einzige, was du „bezahlst“, sind der Agent und das Modell, die du mitbringst. Bring die Gemini CLI mit, authentifiziere dich mit deinem Google-Konto, und diese Rechnung fällt faktisch auf null.

Der Open-Design-Workspace – quelloffen, lokal-zuerst und angetrieben von welchem Coding-Agenten auch immer du verbindest.

Was ist Open Design?

Open Design ist eine quelloffene, lokal-zuerst arbeitende Designplattform, die auf dem Coding-Agenten läuft, den du ohnehin schon nutzt, statt dich an einen einzigen Modellanbieter zu binden. Es ist „bring your own agent“: Claude Code, Codex, Cursor, Gemini, GitHub Copilot, OpenCode und mehr als 21 weitere können jeweils die Generierung antreiben. Du wählst den Agenten; Open Design kümmert sich um die Designebene.

Ein paar Dinge, die es einen Blick wert machen:

• Open Source, Apache-2.0 – klone es, hoste es selbst, lies jede einzelne Zeile.
• Läuft lokal – deine Projekte leben in Ordnern auf deinem eigenen Rechner, nicht in der Cloud eines anderen.
• Agenten-austauschbar – mehr als 21 Coding-Agenten werden unterstützt, darunter die Gemini CLI; du wählst, welcher die Generierung antreibt.
• Mehr als Prototypen – Prototypen, Live-Artefakte, Foliendecks, Magazin-Layouts, Bildgenerierung und sogar Video, alles aus einem Workspace.
• Eingebaute Ausgangspunkte – gebrandete Designsysteme und Vorlagen sind ab Werk dabei, sodass du nie vor einer leeren Leinwand sitzt.

Es steht aus eigener Kraft: ein lokaler, modellunabhängiger Design-Workspace. Dass es sich sauber mit einem kostenlosen Agenten wie der Gemini CLI kombinieren lässt, ist der Bonus, der es wirklich kostenlos nutzbar macht.

Bevor du beginnst

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 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	Leute, die im Terminal leben	Eine vorhandene Coding-Agent-CLI

Die Desktop-App ist heute der empfohlene Weg – kein Node, kein pnpm, kein Klonen. Sandeep lädt das Installationsprogramm für seine Plattform (eine .dmg unter macOS, eine setup.exe unter Windows) direkt aus dem neuesten Release.

Schritt 1 – Open Design installieren

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

Gehe zu open-design.ai und klicke auf Download desktop. Builds sind für macOS (Apple Silicon und Intel), Windows (x64) und Linux (AppImage) verfügbar. Nach der Installation erkennt die App automatisch jede Coding-Agent-CLI, die bereits in deinem PATH liegt, und lädt die eingebauten Skills und Designsysteme für dich. Beim ersten Start landest du auf dem Verbindungsbildschirm, wo du eine lokale CLI auswählst oder deinen eigenen API key einfügst.

Variante B – Aus dem Quellcode ausführen

Falls du es lieber aus dem Repository ausführst, 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 ausgegeben wird – der Port wird dynamisch vergeben, verwende also die Adresse, die in deinem Terminal erscheint, statt einer festen. Du brauchst Node ~24 und pnpm 10.33.x; Corepack wählt die festgelegte pnpm-Version für dich.

Variante C – In deinen Coding-Agenten installieren

Um Open Design zu nutzen, ohne je die GUI zu öffnen – es als Skill oder MCP-Server innerhalb deines Agenten aufzurufen – führe aus:

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

Dann frage einfach innerhalb des Agenten: Use open-design to generate a landing page with a modern minimal design system.

Die Gemini CLI als deinen Agenten verbinden

Das ist der Schritt, der den Workflow kostenlos macht. Open Design bringt kein eigenes Modell mit – es treibt jene CLI an, auf die du es richtest – also bringst du die Gemini CLI mit und lässt ihr kostenloses Kontingent die Arbeit erledigen.

Warum die Gemini CLI? Zwei Gründe, wie Sandeep es ausdrückt: Die Gemini-Modelle behaupten sich gegenüber den übrigen, und das kostenlose Kontingent ist großzügig. Melde dich mit einem Google-Konto an, und du erhältst kostenlos ein großes tägliches Anfragenkontingent; der Gemini-API-Key hat ein kleineres kostenloses Kontingent. Für nachhaltige Designarbeit ist die Google-Konto-Anmeldung die richtige Wahl.

1. Installiere die Gemini CLI. Folge dem Installationsbefehl auf der Homepage der Gemini CLI (Homebrew unter macOS und Linux oder das dokumentierte Installationsprogramm anderswo). Jedes Terminal funktioniert.
2. Führe gemini aus und authentifiziere dich. Starte es, vertraue dem Arbeitsordner, wenn du dazu aufgefordert wirst, und wähle dann Sign in with Google. Dein Browser öffnet sich für ein Google-Login mit zwei Klicks und meldet Erfolg. Starte die Gemini CLI neu; du solltest das aktive Modell und 0% verbrauchtes Kontingent sehen.
3. Richte Open Design darauf aus. Starte Open Design neu und öffne Settings. Die Gemini CLI taucht nun als verfügbarer Agent auf – wähle sie aus, Test the connection, und du solltest ein OK zurückbekommen. Speichern, und du kannst loslegen mit dem Designen.

Du kannst hier auch deinen eigenen API key einfügen, statt eine lokale CLI zu nutzen, und separate Keys für Bild-, Video- und Audiomodelle hinzufügen, falls du später Mediengenerierung möchtest. Für kostenlose, sich unbegrenzt anfühlende Designarbeit reicht jedoch die Anmeldung über die Gemini CLI völlig aus. Alles in den Settings lässt sich später ändern, halte den ersten Durchgang also schlicht.

Den Workspace erkunden

Open Design hält deine Arbeit projektbezogen: Jedes Projekt lebt in seinem eigenen Ordner, und ein Wechsel des Ordners wechselt das Projekt. Innerhalb eines Projekts kannst du Prototypen, Live-Artefakte, Foliendecks, Bilder und sogar Video und Audio erstellen – nicht nur UI.

Die Designsystem-Bibliothek – gebrandete Ausgangspunkte, die du in der Vorschau ansehen und in jedes Projekt einklinken kannst.

Die eingebaute Designsystem-Bibliothek gibt dir gebrandete Ausgangspunkte zur Vorschau und Wiederverwendung, sodass du nicht damit blockiert bist, erst Tokens definieren zu müssen, bevor du beginnen kannst. Du kannst auch dein eigenes Designsystem mitbringen, ein bestehendes Claude-Design-Projekt importieren oder bei null anfangen und Open Design sinnvolle Standardwerte herleiten lassen.

Vorlagen: Ausgangspunkte für Prototyp, Folie, Bild und Video – nach Typ filtern und zum Loslegen forken.

Die Vorlagen-Bibliothek reicht über Markensysteme hinaus bis zu Prototypen, Folien sowie Bild- und Videogenerierung. Filtere nach Typ und forke einen beliebigen als deinen Ausgangspunkt. Du kannst die vollständige Plugin-Bibliothek im Web unter open-design.ai/plugins durchstöbern, bevor du irgendetwas installierst.

Etwas bauen

Mit verbundener Gemini CLI ist der Build-Ablauf derselbe, den Sandeep im Video durchführt:

1. Erstelle ein Projekt. Benenne es, wähle ein Designsystem, das zum gewünschten Look passt, und wähle High fidelity, damit du die echte Sache siehst statt eines Wireframes.
2. Schreibe das Briefing. Statt eines der vorgeschlagenen Prompts beschreibe, was du willst – Sandeep bittet um eine Landingpage. Du kannst auch einen Screenshot eines Layouts anhängen, das dir gefällt, und Open Design bitten, diesem Thema zu folgen.
3. Beantworte die Rückfragen. Der Agent stellt clevere Nachfragen: einzelne Landingpage oder Landing-plus-Pricing, responsive Oberfläche, für wen sie ist, ein visueller Ton (Sandeep wählt eine moderne, minimalistische Linear/Vercel-Anmutung) sowie etwaige Markenfarben oder Schriftarten. Du kannst Felder leer lassen oder es eine Richtung für dich wählen lassen.
4. Wähle eine visuelle Richtung und generiere. Wähle eine der vorgeschlagenen Richtungen, sende ab, und ein paar Sekunden später erscheint die gestylte Landingpage mit den Abschnitten, um die du gebeten hast.
5. Iteriere per Prompt. Willst du ein Logo austauschen, ein fehlendes Icon hinzufügen oder die FAQ erweitern? Beschreibe die Änderung einfach und sende ab. Falls eine Bearbeitung etwas aus dem Lot bringt, rückt ein Folge-Prompt es wieder zurecht.

Wenn du zufrieden bist, öffne die Designdateien, inspiziere den Quellcode, bearbeite Ebenen bei Bedarf manuell und exportiere dann – PDF, PPTX, ein komprimiertes Bündel oder ein Deploy zu Vercel.

Der kostenlose Teil ist real: Sandeep baut zwei Prototypen mit mehreren Iterationen und hat, als er danach seinen Gemini-Verbrauch prüft, nur etwa 2 % seines Tageskontingents verbraucht. Mit einem großen Tageskontingent, das sich jeden Tag erneuert, kannst du nahezu durchgehend designen, ohne auf einen Zähler zu schauen.

Tipps

• Melde dich bei der Gemini CLI mit deinem Google-Konto an statt mit einem API key – das tägliche kostenlose Kontingent ist viel größer, und genau das macht diesen Workflow faktisch kostenlos.
• Beginne mit High Fidelity, wenn du das echte Design beurteilen willst; geh nur zum Wireframe herunter, um die Struktur schnell abzustecken.
• Prüfe deinen Verbrauch mit stats in der Gemini CLI, um zu sehen, wie wenig Designarbeit gemessen an deinem Tageskontingent tatsächlich kostet.
• Deine Designs bleiben beim Projektordner – organisiere die Arbeit, indem du Open Design gegen das richtige Verzeichnis ausführst.
• Du brauchst zum Starten kein Designsystem. Beginne mit einem eingebauten, importiere ein Claude-Design-Projekt oder lass Open Design Standardwerte herleiten.

FAQ

Ist es wirklich kostenlos? Faktisch ja. Open Design ist quelloffen unter Apache-2.0, die Software kostet also nichts. Der einzige Kostenpunkt sind der Agent und das Modell, die du mitbringst – und mit über ein Google-Konto authentifizierter Gemini CLI schöpfst du aus einem großen täglichen kostenlosen Kontingent. Im Video verbrauchten zwei Prototypen plus Iterationen rund 2 % des Tageskontingents, das sich täglich erneuert.

Welche Coding-Agenten werden unterstützt? Mehr als 21 Agenten, darunter Gemini, Claude Code, Codex, Cursor, GitHub Copilot und OpenCode. Open Design erkennt die bereits auf deinem Rechner installierten CLIs und lässt dich eine davon als Standard wählen.

Muss ich die Gemini CLI verwenden? Nein. Die Gemini CLI ist der Weg zu einem kostenlosen Setup mit hohem Kontingent, aber du kannst jeden unterstützten Agenten verbinden oder deinen eigenen API key für einen Agenten oder für Bild-, Video- und Audiomodelle einfügen.

Brauche ich ein Designsystem, bevor ich starten kann? Nein. Open Design liefert gebrandete Designsysteme und Vorlagen als Ausgangspunkte mit, und du kannst ein bestehendes Designsystem importieren oder sinnvolle Standardwerte herleiten lassen.

---

Diese schriftliche Anleitung basiert auf Sandeep Singhs praktischem Walkthrough. Sieh dir das vollständige Video oben an und abonniere Sandeep Singh für weitere praxisnahe Tutorials zu KI-Tools.