Open Source Claude Design? Open Design in 5 Minuten erklärt — lokal, selbst gehostet, Multi-Agent

Hast du dir schon einmal vorgestellt, der KI einfach zu sagen: „Bau mir eine SaaS-Landingpage im klaren, eleganten Look von Stripe" — und echten, editierbaren Code zurückzubekommen, statt Figma Bild für Bild zu öffnen? Genau diese Idee erklärt dieses Video von 菲莉 AI 快報 in fünf Minuten: Open Design, das Tool, das dafür gebaut wurde. Dieser Artikel folgt dem Aufbau des Videos, basiert auf dessen Erklärung und wurde für die aktuelle Version überarbeitet.

Der Open-Design-Workspace: Beschreibe, was du willst, wähle einen Modus, und dein verbundener Agent baut es.

Was ist Open Design?

Wie das Video sagt, kann man sich Open Design als eine quelloffene Version von Claude Design vorstellen — aber es ist nicht einfach nur ein Bildgenerierungstool. Es verhält sich eher so, als hättest du Claude Code, Codex, Cursor oder Gemini CLI bereits auf deinem Rechner, erweitert zu einer local-first KI-Designumgebung.

• Open Source, Apache-2.0 — für Open Design selbst fällt keine Abogebühr an; der Code kann frei gelesen, selbst gehostet und verändert werden.
• Local-first und selbst hostbar — Desktop-App, Daemon und Projektdateien laufen möglichst in deiner eigenen Umgebung statt nur in fremden Clouds.
• Eigenen Agenten (Multi-Agent) oder eigenen Key mitbringen — es läuft auf Coding-Agenten, die du bereits nutzt, darunter Claude Code, Codex, Cursor, GitHub Copilot CLI und OpenCode; du kannst deinen eigenen Modell-API-Key verwenden oder den offiziellen Router nutzen und nach Tokenverbrauch bezahlen.
• Mehr als Prototypen — das Ergebnis ist nicht nur ein Bild. Es entstehen echte HTML-, PDF-, PPTX- und MP4-Artefakte, die du weitergeben und weiter bearbeiten kannst — kein einmaliger Screenshot.

Das Problem, das gelöst werden soll

Das Video beschreibt die Motivation hinter Open Design aus einer ingenieurtechnischen Perspektive: Wenn du bereits einen leistungsstarken Coding-Agenten hast, warum ihn nur aufs Codeschreiben beschränken? Open Design erweitert den Designprozess dieses Agenten — mit Vorlagen, Designsystemen und mehr —, sodass sich das Produkt von bloß „funktionsfähig" zu „sichtbar, lieferbar und modifizierbar" entwickelt. Es geht nicht darum, das Modell ein hübsches Bild malen zu lassen, sondern ein Designartefakt zu erzeugen, das handlungsfähig ist und weiter verändert werden kann.

Vier Highlights aus dem Video

1. Local-first, eigenen Agenten mitbringen. Desktop-App, Daemon und Projektdateien laufen möglichst in deiner Umgebung. Das Modell kann seinen eigenen API-Key nutzen oder den offiziellen Router. Die Kontrolle über die Daten zu behalten bedeutet, sie in der eigenen Hand zu halten — nicht alles der Cloud zu überlassen und zu hoffen.

2. Designsysteme. Ein zentrales Feature sind markenbasierte Designsysteme — Farben, Schriftarten, Komponenten und Tonalitätsregeln werden aus deiner bestehenden Markenwebsite, Figma-Datei, Screenshots oder Browser-Clips extrahiert und zu einem wiederverwendbaren Set zusammengefasst. Die KI improvisiert nicht mehr jedes Mal etwas Neues, sondern arbeitet nach einem konsistenten, extrahierten Regelwerk — eher so, als würde man zuverlässig dieselbe „Markenbox" öffnen statt jedes Mal eine Überraschungsbox.

Designsysteme: wiederverwendbare Farben, Schriftarten, Komponenten und Tonalität aus einer Marke extrahieren und darauf aufbauen.

3. Praktische Ausgabeformate. Landingpages, Dashboards, mobile App-Prototypen, Präsentationen, Bilder und Videos — alles kann aus demselben Workspace entstehen und als HTML, PDF, PPTX oder MP4 exportiert werden. Es geht nicht nur um ein „Wow, wie schön", sondern darum, etwas zu haben, mit dem man tatsächlich zum nächsten Arbeitsschritt übergehen kann.

4. Agentennativ statt eine weitere geschlossene KI. Statt eine eigene geschlossene KI aufzubauen, knüpft Open Design an die Tools an, die du bereits nutzt — Claude Code, Codex, Cursor, Copilot CLI, OpenCode und mehr. Es ist kein Maskottchen für Entwickler, sondern verhält sich wie ein Teamkollege, der Seite an Seite mit deinem bestehenden Agenten arbeitet.

Plugins und das größere Ökosystem

Neben Designsystemen bringt Open Design eine durchsuchbare Plugin- und Vorlagenbibliothek mit, die Prototypen, Foliensätze sowie Ausgangspunkte für Bild-/Videogenerierung abdeckt — du fängst also nicht jedes Mal bei einer leeren Leinwand an.

Der Plugin-Hub: installierbare Skills und Vorlagen durchstöbern, die erweitern, was dein verbundener Agent generieren kann.

Anwendungsfälle aus der Praxis

Das Video listet konkrete, alltägliche Szenarien auf: ein unabhängiger Entwickler baut eine Produktseite, ein Projektmanager stellt ein vierteljährliches KPI-Dashboard zusammen, Kreative erzeugen ein Karussell oder ein Kurzvideo-Storyboard für Social Media, und ein Frontend-Team dokumentiert die eigene Markenwebsite als DESIGN.md. Wie das Video sagt, ist Open Design eher wie eine Barista-Maschine für Designer — die Bohnen (deine Richtung, Markenregeln und dein Geschmack) musst du dir immer noch selbst aussuchen.

Erste Schritte

Es gibt zwei schnelle Wege, es auszuprobieren. Normale Nutzer laden die Desktop-App herunter; Entwickler können es über Docker oder aus dem Quellcode ausführen. Um es in einen Coding-Agenten einzubinden, nutze od mcp install codex (oder cursor, claude und andere) und sag dann einfach direkt zum Agenten: „Baue mir mit einem linearen Stil eine SaaS-Landingpage."

Im Vergleich

• vs. Claude Design — Open Designs Vorteil liegt darin, quelloffen, selbst hostbar und Multi-Agent-fähig zu sein; der Kompromiss, den das Video nennt, ist, dass es bei der Gesamtreife möglicherweise noch aufholt.
• vs. v0, Lovable und Bolt — Open Design tendiert eher zu lokalem Agent plus Designsystem plus mehreren Ausgabeformaten statt zu einem einzelnen gehosteten Generierungs-Flow.
• vs. Midjourney — hier geht es nicht um ein einzelnes Bild, sondern um einen Workflow, der ein lieferbares Artefakt erzeugt.

Für wen es geeignet ist

Das Video empfiehlt Open Design vier Gruppen: Entwicklern, die bereits Coding-Agenten nutzen, Produktmanagern, die schnelle Demos brauchen, angehenden Erstellern von Social-Media-Grafiken und Präsentationen, sowie allen, die neugierig auf agentennative Design-Workflows und Datenkontrolle sind. Wenn du nur mit null Konfiguration eine Webseite öffnen und dir etwas ansehen willst, ersetzt das vielleicht nicht dein gewohntes Tool dafür.

Einschränkungen, die man kennen sollte

Das Video nennt auch zwei ehrliche Einschränkungen: Erstens ist es kein völlig technikfreies Tool — etwas Vertrautheit mit lokaler Installation, API-Keys und Daemons hilft. Zweitens hängt die Ausgabequalität stark vom Modell, vom Prompt, vom eingespeisten Designsystem und von deinem eigenen ästhetischen Urteilsvermögen ab — erwarte nicht, mit einem Klick einen leitenden Design-Direktor herbeizuzaubern. Für ausgereifte Zusammenarbeit mehrerer Personen, detaillierte Vektorbearbeitung und umfassende Lieferspezifikationen ist laut Video derzeit Figma die stabilere Wahl; Open Design ähnelt eher einer Arbeitsumgebung, die von der KI generiert und bereitgestellt wird — zuerst legst du Richtung, Layout und Markenregeln fest, dann gibst du es zur weiteren Verfeinerung an einen Agenten oder Designer zurück.

FAQ

Ist Open Design wirklich quelloffen? Ja — es basiert auf der Apache-2.0-Lizenz, für das Tool selbst fällt keine Abogebühr an.

Muss ich trotzdem für irgendetwas bezahlen? Die Modellkosten verschwinden nicht. Bring-your-own-key funktioniert mit Anbietern wie OpenAI, Anthropic und Google; die Nutzung des offiziellen Routers wird stattdessen nach Tokenverbrauch abgerechnet.

Mit welchen Coding-Agenten funktioniert es? Das Video nennt unter anderem Claude Code, Codex, Cursor, GitHub Copilot CLI und OpenCode — es ist darauf ausgelegt, sich mit Agenten zu verbinden, die du bereits nutzt, statt sie zu ersetzen.

Ist das ein Ersatz für Figma? Nein. Wie das Video abschließend feststellt, ist Open Design kein perfekter Figma-Ersatz und kein magischer Ein-Klick-Designer. Es zeigt eine andere Richtung: Zukünftige Designwerkzeuge sind vielleicht nicht nur Leinwände, sondern ein Workflow aus KI-Agent, Designsystem, Vorlagen und Plugins zusammen.

Erzeugt es nur Bilder? Nein — die Ausgabe kann HTML, Präsentationen, PDFs und Videos sein, und es kann auch genutzt werden, um eine Marke über ein Designsystem zu erweitern, sodass Ergebnisse nicht jedes Mal von Grund auf neu erfunden werden müssen.

---

Diese schriftliche Anleitung basiert auf dem Überblick von 菲莉 AI 快報 zu Open Design. Sieh dir das vollständige Video oben an und abonniere 菲莉 AI 快報 für weitere KI-Tool-Erklärungen.