← Leitfäden Vorschau: Kostenlose Claude-Design-Alternative? Open Design AI im Test
Details

Kostenlose Claude-Design-Alternative? Open Design AI im Test

Ein WordPress-Entwickler testet Open Design live als kostenlose Open-Source-Alternative zu Claude Design — mit seinem eigenen Coding-Agent-Abo baut er Markenrichtlinien und Quest-Kacheln fürs Klassenzimmer. Basierend auf Dan Davies' praktischem Stream.

Dan Davies 3. Juni 2026 54:54 YouTube ↗

Dies ist ein echter, unskriptierter Test von Open Design durch jemanden, der beruflich Websites baut und betreibt, sich selbst aber nicht als Designer versteht. Dan Davies liebte Claude Design bei dessen Launch, stieß dann aber sofort auf dessen niedrige Nutzungslimits — also suchte er nach einer Open-Source-Alternative, die er an sein eigenes KI-Abo anschließen konnte. Schau dir seinen kompletten Live-Walkthrough an oder lies die geschriebene Version unten.

Der lokal laufende Open-Design-Workspace. Der Open-Design-Workspace: Beschreibe, was du willst, wähle einen Modus, und lass den Coding-Agenten, den du ohnehin schon bezahlst, die Arbeit erledigen.

Was ist Open Design?

Open Design ist eine quelloffene, local-first Designplattform — eine agentennative Alternative zu Claude Design und Figma. Statt dich an das Modell und den festen Credit-Pool eines einzigen Anbieters zu binden, läuft es auf dem Coding-Agenten, den du bereits nutzt.

  • Open Source, Apache-2.0 — klone es, hoste es selbst, lies jede Zeile Code, oder lade einfach die Desktop-App herunter.
  • Local-first — deine Projekte liegen in deinen eigenen Ordnern auf deiner eigenen Maschine, nicht in der Cloud eines anderen.
  • Bring your own agent, nicht nur deinen eigenen key — verbinde Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode, Hermes und mehr; die CLI, die du verbindest, treibt die Generierung an.
  • Mehr als Prototypen — Markenrichtlinien, Marketing-Grafiken, folienartige Layouts und vollständige Webdesigns, alles aus einem einzigen Workspace.

Wenn du Claude Design schon genutzt hast, ist das Gefühl sofort vertraut. Wie Dan im Video sagt: „Es ist buchstäblich Claude Design — gleiches Layout, funktioniert genauso." Der Unterschied liegt darin, was darunter liegt, und wer dafür bezahlt.

Das Nutzungslimit-Problem, das Open Design löst

Dans Geschichte werden viele Leute wiedererkennen. Er war beim Launch von Claude Design wirklich beeindruckt — er mochte, was dabei herauskam — aber „die Nutzungslimits waren so niedrig, dass es nicht nachhaltig war, es weiter zu benutzen." Sobald man in ein echtes Projekt einsteigt und anfängt zu iterieren, stößt man schnell an die Obergrenze, und ausgerechnet dann, wenn man Schwung hat, wird das Tool still.

Genau diese eine Frustration hat ihn auf die Suche geschickt, und genau diese Lücke schließt Open Design. Weil Open Design Open Source ist und dir keinen separaten Modellzugang weiterverkauft, sitzt kein zusätzlicher Design-Tool-Credit-Zähler auf deiner Arbeit. Du bringst deinen eigenen Agenten mit, und deine Nutzung richtet sich nach dem Plan, den du mit diesem Agenten bereits hast — nicht nach einem Limit, das dir das Design-Tool auferlegt.

Für Dan, einen Entwickler, der eine WordPress-Agentur und eine Schulcommunity leitet, die WordPress unterrichtet, verändert das die Rechnung komplett. Design ist nicht mehr ein abgemessenes Luxusgut, sondern etwas, an dem er den ganzen Tag iterieren kann.

Bring your own agent, nicht deine eigene Rechnung

Das ist das Feature, auf das Dan immer wieder zurückkommt, und es lohnt sich, es klar zu verstehen. Open Design liefert kein eigenes Modell mit. In den Einstellungen erkennt es die auf deinem Rechner bereits installierten Coding-Agent-CLIs und lässt dich zwischen ihnen wechseln.

Auf Dans Setup fand es zwei: Claude Code auf der Kommandozeile und Hermes agent (das er mit einem ChatGPT-Abo betreibt). „Man kann im Grunde alles anschließen", stellt er fest — „nicht nur ein Modell, sondern einen Agenten." Willst du dein Claude-Abo nutzen, kannst du das; deinen Codex-Plan, auch; einen rohen API key, ebenfalls.

Die Unterscheidung, die er trifft, ist die entscheidende: Er meidet bewusst rohe API keys, weil Pay-per-Call-Credits bei iterativer Designarbeit schnell echtes Geld verbrennen. Open Design an ein Abo anzuschließen, das man ohnehin schon bezahlt — den Plan von Claude Code oder ChatGPT über Hermes — bedeutet, dass man keine zweite Rechnung obendrauf stapelt. Das ist mehr als alles andere der Grund, warum er es einem gehosteten Design-Tool mit eigenen Limits vorzieht.

Die eingebaute Bibliothek von Templates und Skills. Die Bibliothek aus Templates und Skills — darunter Dinge wie Figma-Migration und Export nach React oder Next.js —, sodass man nicht bei einer leeren Leinwand anfängt.

Er entdeckt auch früh die Erweiterungsfläche: einen Tutorials-Bereich mit Links zu echten Community-Videos, einen Plugin-Bereich voller fertiger Templates, die beim Hover animieren, sowie Skills wie Figma migration, export to React und export to Next.js. Er macht klar, dass er noch nicht den vollen Funktionsumfang erkundet hat — das hier ist ein erster praktischer Versuch —, aber die Struktur ist offensichtlich schon vorhanden.

Test eins: Markenrichtlinien aus einer groben Idee

Dans erste ernsthafte Aufgabe ist genau die Art von Sache, die normalerweise die Zeit eines professionellen Designers braucht: ein Markenrichtlinien-Dokument für seine WP-Odyssey-Schulcommunity. Er hatte keine klare Dokumentation seines Logos, seiner Icons, Schriften oder Farben, also bat er Open Design, eine zu erstellen.

Das Ergebnis beeindruckte ihn. Es erfasste die Marke als ein richtiges Richtlinien-Sheet — Logo-Nutzung, das Dreizack-„Identitätszeichen", das die Lernreise repräsentiert, auf die er seine Schüler mitnimmt, Freiraum-Regeln, Missbrauchsbeispiele, eine Bandbreite an Lila-Tönen bis hin zu einem fast schwarzen „Tinten"-Ton und die gewünschte Schrift. Es führte sogar einen Lila-Farbverlauf ein, den er mehr mochte als sein bestehendes flaches Lila, und legte ein „Pfad"-Motiv für die Reise durch seinen Kurs an.

Zwei Dinge stechen daran hervor, wie er es beschreibt. Erstens produzierte Open Design ein strukturiertes Ergebnis — keinen losen Haufen Assets, sondern ein vorzeigbares Dokument mit einer konsistenten Denkweise. Zweitens behandelte er es als lebendiges Artefakt: „Wir werden weiter daran arbeiten, es zu verbessern." Das ist der beabsichtigte Kreislauf — eine starke erste Version aus einer echten Marke generieren, dann verfeinern.

Nicht alles war perfekt. Ein früherer, knapperer Test — die Bitte, mit fast keinem Briefing die Website eines Kunden im Vermögensverwaltungsbereich zu „verbessern" — kam, in seinen Worten, wie generischer „AI-Slop" zurück. Sein eigenes Fazit ist fair und nützlich: „Es ist nicht immer das Tool, das das Problem ist", sagt er. „Es ist die Art, wie man es promptet."

Test zwei: die Quest-Kacheln gestalten

Das Herzstück ist ein wirklich kniffliges Designproblem. Dans Community hat 14 „Quest"-Kacheln, angeordnet zu drei pro Reihe, aufgeteilt auf die Stufen Standard, Premium und VIP, und er wollte, dass sich die Lila-Töne mit steigender Stufe verdunkeln, dass eine gestrichelte „Reise"-Linie über jede Reihe fließt und Kachel für Kachel ausgerichtet ist, und dass jede Kachel ein bisschen individuellen Charakter behält.

Er hatte das am Tag zuvor mit ChatGPT (via Hermes agent) versucht, und es lief schlecht — falsche Farben, kaputte Linien, Kacheln, die alle gleich aussahen, und an einem Punkt driftete es ganz von seiner Markenvorgabe ab und gab das erst zu, als er es darauf ansprach. Im Stream startete er daher ein sauberes neues Projekt, wechselte den Agenten zurück zu Claude Code und fütterte ihn ordentlich: sein exportiertes Markenrichtlinien-PDF, einen Screenshot des aktuellen Klassenzimmers als Referenz und eine einzelne Musterkachel, damit es nur die Kacheln neu gestaltet und nicht die ganze Seite.

Diesmal stellte der Agent gute Discovery-Fragen — finale Asset-Größen, Seitenverhältnis, wie das Lila dunkler werden soll (allmählicher, nach Stufe gestufter Verlauf), wie viele pro Reihe — und lieferte dann einen starken ersten Durchgang. Dans Urteil war unverblümt: „Es ist eine Million Mal besser als das, was ChatGPT gestern gemacht hat." Die Kacheln nutzten die richtigen Farben, und entscheidend war, dass die Reise-Linie sich automatisch über die Kacheln hinweg ausrichtete — etwas, worauf er sich vorbereitet hatte, es von Hand zu reparieren.

Ein echter, in Open Design generierter Prototyp. Open Design neigt dazu, generierte Arbeit als echtes, strukturiertes Artefakt zu präsentieren — hier ein vollständig gerendertes Design in der Vorschau — statt als losen Haufen von Dateien.

Es war nicht makellos — die Lila-Töne der Standard-Stufe kamen dunkler heraus, als er wollte, ein Logo wurde wiederholt, wo er lieber Abwechslung gehabt hätte —, aber das sind genau die Anmerkungen, die man in den nächsten Prompt zurückspeist. Er nannte auch einen ehrlichen Kosten-Datenpunkt: Die Generierung dieser Kachel-Charge verbrauchte etwa 50 % der Nutzung seines 20-Dollar-Claude-Plans. Design-Iteration ist nicht frei von Modellkosten; sie ist nur frei von einer zweiten Design-Tool-Rechnung.

Warum das Modell, das du anschließt, wichtig ist

Die klarste Erkenntnis aus Dans Session ist, dass die Ausgabequalität mit dem angeschlossenen Agenten mitgeht. Dieselbe Aufgabe, im selben Tool, wurde mit einem Agenten zu einem verwirrenden Durcheinander und mit einem stärkeren zu einem sauberen ersten Entwurf. Open Design ist der Workspace und die Struktur; das Modell ist der Motor.

Er zieht auch einen schönen Vergleich zu einfachen Bildtools: Er hatte ähnliche Aufgaben in einem generischen Bildgenerator versucht, und der „hatte Mühe", während Open Design „scheinbar etwas mehr Struktur in das legt, was es liefert". Als er nach Grafiken fragte, baute es eine kleine Webseite, um sie anzuzeigen und herunterzuladen — ein vorzeigbares Ergebnis, nicht nur roher Output.

Sein Plan von hier aus verrät, wo dieses Tool in einen echten Workflow passt: die Kacheln weiter verfeinern, dann zum Bau von Website-Homepages übergehen, das Ergebnis oben rechts an VS Code übergeben und schließlich editierbare WordPress-Templates generieren, damit Kunden weiterhin die Vorteile eines echten CMS behalten. Das ist der praktische Bogen — von Marketing-Assets zu ausgelieferten Websites —, den ein offenes, agentenanschließbares Design-Tool für ein technisches Team ohne Vollzeit-Designer erreichbar macht.

FAQ

Ist Open Design wirklich kostenlos? Die Software ist unter der Apache-2.0-Lizenz Open Source und kostenlos lokal zu betreiben. Du zahlst Open Design nichts. Du zahlst nur für die Nutzung des jeweiligen Coding-Agenten, den du anschließt — und wenn du ein Abo anschließt, das du bereits hast (wie den Plan von Claude Code), gibt es keine zusätzliche Design-Tool-Rechnung obendrauf.

Wie unterscheidet es sich von Claude Design? Gleiches vertrautes Gefühl, aber Open Source, local-first und mit austauschbarem Agenten. Statt eines einzigen gehosteten Modells mit festem, niedrigem Credit-Pool bringst du deinen eigenen Agenten mit, und deine Nutzung folgt deinem bestehenden Plan. Wie Dans Session zeigt, entfernt das die Nutzungslimit-Wand, die Claude Design bei intensiver Iteration schwer durchhaltbar machte.

Muss ich einen API key verwenden? Nein — das ist der Punkt, den Dan am stärksten betont. Open Design erkennt die Agent-CLIs auf deinem Rechner und lässt dich ein Abo statt Pay-per-Call-API-Credits nutzen, was seiner Erfahrung nach bei iterativer Arbeit schnell Geld verbrennt.

Welchen Agenten sollte ich anschließen? Welchen auch immer, der für deine Aufgabe die besten Ergebnisse liefert — die Ausgabequalität hängt am Modell. Im Video ging derselbe Kachel-Design-Job von einem Durcheinander mit einem Agenten zu einem sauberen ersten Entwurf nach dem Wechsel zu Claude Code, also greif zu einem leistungsfähigen Agenten, wenn das Ergebnis zählt.

Können Nicht-Designer tatsächlich gute Ergebnisse erzielen? Ja, mit den richtigen Inputs. Dan ist Entwickler, kein Designer, und bekam brauchbare Markenrichtlinien und Klassenzimmer-Kacheln — aber seine eigene Lektion ist, dass dünne Prompts „AI-Slop” liefern. Gib ihm eine echte Markenvorgabe, Referenzbilder und klare Constraints, und iteriere dann.


Dieser geschriebene Guide basiert auf Dan Davies' Live-Test von Open Design. Sieh dir die vollständige Session oben an und abonniere Dan Davies für weitere praktische WordPress- und KI-Tooling-Streams.