Open Design: Die KOSTENLOSE quelloffene Claude-Design-Alternative

Open Design nimmt eine Idee und macht daraus Prototypen, Websites, Slides und sogar HTML-Videos — alles läuft lokal auf deinem eigenen Rechner. In dieser Demo installiert Code A Program die Desktop-App, verbindet einen Coding-Agenten und baut eine hochwertige Landingpage für ein KI-Schreibtool namens Draft, um sie dann zu verfeinern und zu deployen, ohne den Workspace zu verlassen. Sieh dir den kompletten Durchlauf im Video von Code A Program an oder folge der schriftlichen Anleitung unten.

Open Design lokal ausgeführt: ein quelloffener, agentennativer Design-Workspace, den du vollständig kontrollierst — nicht an ein einziges Modell gebunden.

Was ist Open Design?

Open Design ist eine quelloffene, local-first Designplattform — eine kostenlose Alternative zu Claude Design und Figma. Statt dich an einen Modellanbieter zu binden, läuft sie auf dem Coding-Agenten, den du bereits nutzt, sodass du deinen eigenen Agenten und deinen eigenen key mitbringst.

• Open Source, Apache-2.0 — lies jede Zeile, hoste es selbst oder lade einfach die Desktop-App herunter.
• Läuft lokal — Projekte liegen in deinen eigenen Ordnern auf deinem Rechner, nicht in fremder Cloud.
• Bring deinen eigenen Agenten mit — 21+ Coding-Agenten werden unterstützt, darunter Claude Code, Codex, Cursor, Gemini, OpenCode und mehr; du wählst, welche CLI die Generierung antreibt.
• Mehr als Prototypen — Websites, Prototypen, Slide-Decks, Bildgenerierung und sogar HTML-Video, alles aus einem Workspace.
• Alles inklusive — 129 eingebaute Designsysteme und 460+ Plugins, damit du nie mit einer leeren Leinwand beginnst.

Wenn du Claude Design genutzt hast, wirkt es sofort vertraut — Open Design behält dasselbe ruhige Erlebnis und legt dann dein gewähltes Modell oben drauf.

Schritt 1 — Wähle deinen Agenten und dein Modell

Lade die Desktop-App von open-design.ai herunter, installiere sie und beantworte die kurzen Onboarding-Fragen. Das bringt dich direkt in die Haupt-Chat-Oberfläche.

Wähle oben rechts deinen KI-Agenten-Anbieter. Als lokale CLI-Anbieter kannst du Claude Code, Codex CLI, Gemini CLI (mit kostenlosen Nutzungslimits), OpenCode und andere wählen. In der Demo nutzt Code A Program OpenCode mit dem Modell GLM 5.2, weil es bei Frontend-Arbeit stark war — der entscheidende Punkt ist aber die Flexibilität: Du bist nicht auf ein Modell oder eine Plattform festgelegt.

Schritt 2 — Schreibe deinen Prompt

Der Chat hat eine Option Datei anhängen für Referenzmaterial sowie einen Bereich Plugins. Open Design bringt 460+ Plugins mit, die Build- und Test-Helfer, 3D-Mockups, mobile und Desktop-Geräterahmen und mehr abdecken — wenn du also 3D-Elemente oder eine Gerätehülle brauchst, fügst du das Plugin hinzu, statt mit dem Prompt zu ringen.

Die Plugin-Bibliothek: 460+ Plugins für Bauen, Testen, 3D-Mockups, Geräterahmen und mehr — füge hinzu, was dein Design braucht.

Jetzt fügst du ein Briefing ein. Der Demo-Prompt verlangt eine hochwertige Landingpage für einen KI-Schreibassistenten namens Draft, mit einer zurückhaltenden Palette aus Schieferschwarz, Elfenbein und Elektrik-Orange, einem markanten redaktionellen Hero mit einer Live-Textgenerierungs-Animation, einer interaktiven Schreib-Canvas, einem dreistufigen Workflow, einem Ergebnisbereich, einer zweistufigen Preistabelle, einem FAQ und einem starken abschließenden Call to Action — während Cards, Verläufe, Glasmorphismus und generische Roboter-Bilder ausdrücklich vermieden werden.

Es gibt noch einen Hebel, den man kennen sollte: Du kannst ein Design auf einem beliebten Designsystem von Marken wie Apple, Airbnb, BMW, IBM oder Spotify aufbauen. Code A Program überspringt das für diesen Durchlauf, aber es steht bereit, wenn du einen bestimmten Look treffen willst.

Schritt 3 — Sieh beim Bauen und Selbstprüfen zu

Sende den Prompt ab, und Open Design beginnt, das Projekt vorzubereiten. Nach etwa einer Minute stellt es vielleicht ein paar Rückfragen — beantworte sie für bessere Ergebnisse oder klicke alle überspringen und lass es weitermachen.

In der Demo ist die Landingpage selbst nach etwa sechs Minuten fertig. Open Design verbringt die restliche Zeit dann mit Selbstprüfungen — es verifiziert die Struktur, überprüft das Layout, kontrolliert Animationen und behebt kleine Probleme, bevor es den Build als fertig markiert. Wenn es soweit ist, klicke auf das Präsentationssymbol, um die Seite in einem neuen Tab zu öffnen.

Das generierte Ergebnis: ein redaktioneller Hero mit Live-Tippanimation, Workflow, Ergebnisse, Preise, FAQ und Footer — responsiv über Tablet und Mobil hinweg.

Das Ergebnis trägt einen Hero mit KI-Tippanimation, sanfte Scroll-Effekte, einen interaktiven Editor-Bereich, einen Workflow-Streifen, einen Kundenergebnis-Bereich, monatliche/jährliche Preise, ein FAQ und einen aufgeräumten Footer. Wechsle in die Tablet- und Mobil-Ansicht, um zu bestätigen, dass das responsive Design hält.

Schritt 4 — Verfeinern mit der Toolbar auf der Canvas

Die rechte Toolbar ist der Ort, an dem du polierst, ohne Tokens für triviale Änderungen zu verbrennen:

• Screenshot — mach ein Bild der Seite.
• Comment — wähle ein beliebiges Element (etwa die Hero-Überschrift) und beschreibe eine Änderung, zum Beispiel ein Wort in der orangen Themenfarbe umzufärben. Bündle mehrere Kommentare und sende sie auf einmal ab oder schicke einen direkt in den Chat.
• Marker — hebe einen beliebigen Bereich der Seite hervor und teile ihn mit dem Agenten.
• Element edit — ändere Schriften, Breite, Farben und mehr direkt an einem ausgewählten Element, sodass einfache Feinheiten nie eine komplette Neugenerierung brauchen.

Du bekommst außerdem Zoom-Steuerungen und eine Übersicht aller offenen Kommentare. In der Demo färbt sich der Text „actually“ direkt dort in der Toolbar orange um.

Schritt 5 — Exportieren und deployen

Über der Toolbar liegt die Option Herunterladen — exportiere das Projekt als PDF, Bild, ZIP oder HTML. Es gibt auch als Vorlage speichern, sodass du dieses Design als Ausgangspunkt für künftige Projekte wiederverwenden kannst.

Der interessante Teil ist das Menü Teilen. Von dort aus kannst du:

• mit einem Klick auf Vercel deployen — verbinde dein Vercel-Konto mit einem Access-Token und klicke auf Deploy.
• auf dieselbe Weise auf Cloudflare deployen.
• in einem Editor öffnen wie Cursor oder VS Code, oder in CLI-Tools wie Gemini CLI, Codex und Claude Code. Open Design übergibt das generierte HTML samt seinem Skills-Ordner, sodass du das Design in ein Next.js-Projekt — oder ein beliebiges Framework — umwandeln kannst.

Unter Einstellungen kannst du globale Regeln hinzufügen (zum Beispiel „immer TypeScript verwenden“), nützliche Memories speichern wie bei Claudes Memory-Funktion und Medienanbieter konfigurieren — einen ElevenLabs-key für Stimme und Sound sowie Nano Banana, OpenAI oder OpenRouter für die Bildgenerierung. Du kannst außerdem Skills hinzufügen (es gibt einen agent-browser-Skill zum Automatisieren von Browser-Aufgaben und mehrere Frontend-Skills), MCP-Server anbinden und den Standard-Speicherort für Projekte ändern.

Tipps, um mehr herauszuholen

• Kostenlose Modelle reichen für den Anfang. Die gesamte Demo-Seite wurde mit einer kostenlosen Gemini-Stufe generiert und sieht trotzdem großartig aus; greif zu einem bezahlten Modell, wenn du bei echter Arbeit höhere Qualität willst.
• Füge Plugins vor dem Prompten hinzu, wenn du weißt, dass du 3D-Mockups oder Geräterahmen brauchst.
• Nutze das richtige Werkzeug für die Änderung — der Element-Editor und Kommentare erledigen kleine Feinheiten ohne kompletten Neuaufbau.
• Speichere gelungene Layouts als Vorlagen, damit dein nächstes Projekt einen Vorsprung hat.

FAQ

Ist Open Design kostenlos? Ja — es ist quelloffen unter Apache-2.0 und läuft lokal kostenlos. Du zahlst nur für die Modell-/API-Nutzung des jeweiligen Agenten und der Medienanbieter, die du verbindest, und du kannst kostenlose Stufen wie die von Gemini nutzen.

Welche Coding-Agenten werden unterstützt? 21+ Agenten, darunter Claude Code, Codex CLI, Cursor, Gemini CLI und OpenCode. Den Anbieter wählst du über das Menü oben rechts.

Wie unterscheidet es sich von Claude Design? Dasselbe vertraute Gefühl, aber quelloffen, local-first und agenten-steckbar — du bist nicht an ein Modell oder eine Plattform gebunden und kannst dein Projekt exportieren oder deployen, wie du willst.

Kann ich deployen, ohne die App zu verlassen? Ja — das Teilen-Menü deployt mit einem Klick auf Vercel oder Cloudflare (du lieferst das Access-Token des Anbieters) oder übergibt den Code an Cursor, VS Code oder einen CLI-Agenten.

Muss ich für gute Ergebnisse ein bezahltes Modell verwenden? Nein — für die meisten Landingpages und Frontend-Designs sind kostenlose Modelle bereits leistungsfähig genug; wechsle nur dann zu einem bezahlten Modell, wenn du fortgeschrittenere Ergebnisse willst.

---

Diese schriftliche Anleitung basiert auf der Demo von Code A Program. Sieh dir das vollständige Video oben an und abonniere Code A Program für weitere praxisnahe KI-Tool-Videos.