Open Design — Mach aus dem Agenten, den du schon hast, eine Design-Engine
Ein praktischer Leitfaden zu dem Teil von Open Design, den die meisten Tutorials überspringen: das Modell dahinter zu wählen und auszutauschen. Dein Coding-Agent ist die Engine; das Modell, auf das du ihn richtest, ist der Qualitätsregler. Installiere es, binde Gemini CLI oder Claude an und lerne, das Modell zur Aufgabe passen zu lassen. Auf Basis von Codedigipts praktischem Walkthrough.
Dieser Leitfaden konzentriert sich auf den Teil von Open Design, über den die meisten Walkthroughs hinweggehen: die Engine. Open Design selbst ist die Design-Oberfläche — die eigentliche Generierung erledigt der Coding-Agent und das Modell, auf das du es richtest, und genau diese Wahl ist der größte Hebel für die Ausgabequalität. Er folgt dem Setup, das Codedigipt in seinem praktischen Walkthrough verwendet, neu geschrieben und auf den aktuellen Release gebracht. Sieh dir das Video oben für den Live-Durchlauf an oder lies hier die schriftliche Fassung.
Der Open Design-Arbeitsbereich: Beschreibe, was du erstellen willst, wähle einen Modus, und dein Agent erledigt den Rest.
Was ist Open Design?
Open Design ist eine quelloffene, lokal-zuerst arbeitende Design-Plattform, die auf dem Coding-Agenten läuft, den du ohnehin nutzt. Sie bringt kein eigenes Modell mit — sie durchsucht deinen Rechner nach den CLIs, die du bereits hast (Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode und ein paar Dutzend mehr), und nutzt diesen Agenten als Design-Engine. So läuft die Arbeit über das Abo oder die Gratis-Credits, die du schon hast, statt über eine zweite Design-Rechnung.
- Quelloffen, Apache-2.0 — klone es, hoste es selbst, lies jede Zeile.
- Läuft lokal — deine Projekte sind Ordner auf deinem eigenen Rechner.
- Bring deine eigene Engine mit — jede unterstützte CLI oder dein eigener API-Schlüssel.
- Eine umfangreiche Bibliothek an Designsystemen und Skills eingebaut, damit du nicht vor einer leeren Leinwand startest.
- Mehr als Prototypen — Prototypen, Foliendecks, Bildgenerierung und Video.
Die Kernidee: Das Modell ist der Qualitätsregler
Hier ist das mentale Modell, bei dem Codedigipt landet, und es ist das Nützlichste zum Verinnerlichen: Die Ausgabequalität von Open Design folgt dem Modell, das du wählst. Open Design liefert die Struktur — Skills, Designsysteme, den Discovery-Flow —, doch das eigentliche Design-Urteil kommt von der Engine. Lass es auf einem schnellen, billigen Modell laufen und du bekommst einen schnellen, billigen Entwurf; lass es auf einem Spitzenmodell laufen und du bekommst aus demselben Prompt und Designsystem ein weitaus polierteres Ergebnis.
Das ist ein Feature, keine Einschränkung. Es bedeutet, dass du pro Projekt Kosten gegen Qualität abwägen und jederzeit die Engine austauschen kannst.
Schritt 1 — Open Design installieren
Drei Wege hinein:
| 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 |
Der schnellste Weg ist die Desktop-App von open-design.ai/download — sie erkennt deine installierten Agent-CLIs automatisch. Um aus dem Quellcode auszuführen (Codedigipts Weg):
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run webÖffne die ausgegebene lokale URL — sie löst einen dynamischen Port auf, also kodiere keinen fest. Eine Stolperfalle, auf die Codedigipt aus Erfahrung hinweist: Du brauchst Node 24. Auf Node 22 ließ es sich bei ihm nicht starten; installiere zuerst Node 24 LTS. Corepack wählt die festgelegte pnpm-Version.
Schritt 2 — Wähle deine Engine
Das ist der Schritt, auf den es ankommt. Öffne die Einstellungen (Ausführungsmodus konfigurieren) und wähle aus den CLIs, die Open Design auf deinem Rechner erkannt hat, den Agenten, der die Generierung antreiben soll. Alles Nicht-Installierte erscheint deaktiviert.
- Gemini CLI — Codedigipts Wahl für die Designphase: starker Design-Instinkt, und die Credits der Gratis-Stufe reichen weit. Die Generierung läuft über diese Credits.
- Claude Code — richte es auf ein designfähiges Modell (Sonnet oder Opus) für die höchste Ausgabetreue.
- OpenCode — bringt fähige Standardmodelle mit (z. B. MiniMax, GLM), falls du lieber gar nichts konfigurieren willst.
- Anthropic API (BYOK) — keine CLI? Trage einen API-Schlüssel ein und wähle das Modell direkt. So nutzt du Claude-Qualität ohne separates Claude-Design-Abo — du bringst den Schlüssel, Open Design bringt die Design-Oberfläche.
Schritt 3 — Generiere, dann beurteile nach Engine
Lege ein Projekt an, gib ihm einen Namen, wähle hohe Detailtreue und schreibe dein Briefing (Codedigipt baut eine Landingpage für eine „auth-as-a-service“-API). Bevor irgendetwas geschrieben wird, liefert Open Design ein kurzes Discovery-Formular — Ausgabeformat, primäre Oberfläche, Zielgruppe, visueller Ton, Markenrichtung —, damit der Agent die richtige Richtung festlegt, statt zu raten. Beantworte es, wähle eine visuelle Richtung, und es baut.
Ein echter generierter Prototyp in der Vorschau – eine dunkle, cineastische Agentur-Landingpage.
Das Ergebnis auf einem schnellen Modell (Codedigipt nutzt eine Gemini-flash-Preview) ist ein sauberer, brauchbarer erster Wurf in Sekunden. Der ehrliche Vorbehalt, den er wiederholt: Du bekommst Ausgabe auf dem Niveau des Modells, das du gewählt hast. Du willst Opus-Politur? Stelle die Engine auf Claude mit Opus um und lass dasselbe Briefing erneut laufen — gleicher Skill, gleiches Designsystem, schärferes Ergebnis.
Die Plugin-Bibliothek: installiere Skills direkt aus der Registry – einschließlich Anti-Slop-Design-Skills.
Wenn du zufrieden bist, exportiert das Teilen-Menü nach PDF, PPTX, eigenständigem HTML oder einem ZIP — oder deployt direkt auf Vercel. Die vollständige Plugin-Bibliothek kannst du unter open-design.ai/plugins durchstöbern.
Tipps
- Passe das Modell zur Aufgabe an. Billiges/schnelles Modell für rasche Entwürfe und Iteration; Spitzenmodell für den finalen, kundengerichteten Durchlauf.
- Nutze eine lokale CLI, damit die Generierung über ein Abo oder Gratis-Credits läuft, die du schon hast.
- BYOK für Claude-Qualität ohne Claude-Design-Plan — trage einen Anthropic-Schlüssel in die Einstellungen ein und wähle das Modell.
- Schiebe ein schwaches Modell nicht dem Werkzeug in die Schuhe. Ein gutes Designsystem kann eine schwache Engine nicht retten; wirkt die Ausgabe dünn, rüste das Modell auf, bevor du den Prompt umschreibst.
- Beantworte das Discovery-Formular vollständig — so legt die Engine beim ersten Versuch die Richtung fest.
FAQ
Ändert das Modell, das ich wähle, die Ausgabe wirklich so stark? Ja — es ist der größte Hebel. Open Design liefert die Skills und Designsysteme, aber das Design-Urteil kommt von der Engine. Dasselbe Briefing auf Opus gegenüber einem schnellen Preview-Modell erzeugt spürbar unterschiedliche Politur.
Kann ich Claude-Qualität nutzen, ohne für Claude Design zu zahlen? Ja. Richte Open Design auf Claude Code oder trage einen Anthropic-API-Schlüssel in die Einstellungen ein (BYOK) und wähle das Modell. Du bekommst die Ausgabe ohne separates Claude-Design-Abo.
Kann ich Modelle mitten im Projekt wechseln? Ja — ändere Agent/Modell in den Einstellungen und lass es erneut laufen. Gleicher Skill und gleiches Designsystem, eine andere Engine dahinter.
Ist es kostenlos? Die App ist unter Apache-2.0 quelloffen und lokal kostenlos ausführbar. Du zahlst nur für das Modell bzw. die Credits des jeweils verbundenen Agenten.
Dieser schriftliche Leitfaden basiert auf Codedigipts praktischem Walkthrough. Sieh dir oben das ganze Video an und abonniere Codedigipt für mehr praktische Setups von KI-Tools.