Open Design — ein ehrlicher erster Eindruck (Bugs, Workarounds und Einrichtung mit beliebigem Modell)

Dieser Leitfaden ist ein bewusst ehrlicher erster Blick auf Open Design – die Dinge, die einfach funktionieren, und die rauen Kanten, auf die du stoßen wirst, live gezeigt statt herausgeschnitten. Außerdem geht es um einen wirklich nützlichen Kniff: jedes Modell günstig über einen OpenAI-kompatiblen Anbieter einzubinden. Er folgt dem praktischen Test, den Sasha (ИИШНЫЙ) in seinem Walkthrough aufzeichnet, für diesen Textbeitrag aufbereitet und auf den aktuellen Release gebracht. Sieh dir das Video oben für den Live-Durchlauf an oder lies weiter für die Textversion.

Der Open-Design-Arbeitsbereich: beschreibe, was du bauen möchtest, wähle einen Modus, und dein Agent erledigt den Rest.

Was ist Open Design?

Open Design ist eine quelloffene, local-first Designplattform — eine agent-native Alternative zu Claude Design. Das Problem des „lila KI-Einheitsbreis" (jede generierte UI sieht gleich aus) ist genau das, was Werkzeuge wie dieses zu lösen versuchen, und Open Designs Antwort ist, auf dem Coding-Agent zu laufen, den du ohnehin schon nutzt, statt ein eigenes Modell auszuliefern. Es erkennt Claude Code, Codex, Cursor, Gemini, OpenCode und mehr auf deinem Rechner und nutzt das als Engine. Sashas Einordnung: Es sammelte in der ersten Woche Zehntausende GitHub-Sterne, weil es kostenlos, offen und an keinen einzelnen Anbieter gebunden ist.

• Quelloffen, Apache-2.0 — klone es, lies es, hoste es selbst.
• Läuft lokal — deine Projekte sind Ordner auf deinem eigenen Rechner.
• Beliebiger Agent, beliebiges Modell — einschließlich deines eigenen API-Schlüssels über einen beliebigen OpenAI-kompatiblen Anbieter.
• Eine umfangreiche Bibliothek an Design-Skills und Designsystemen ist eingebaut.
• Mehr als nur Prototypen — Foliensätze, Bilder, sogar Video.

Schritt 1 — Installieren und konfigurieren

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web

Öffne die lokale URL, die es ausgibt (ein dynamischer Port — schreibe ihn nicht fest). Du bevorzugst null Einrichtung? Hol dir die Desktop-App von open-design.ai/download. Beim ersten Start erkennt die Einstellungsseite die Agent-CLIs auf deinem Rechner — Sasha nutzt Codex — und lässt dich ein Standardmodell festlegen, Medienanbieter hinzufügen (MiniMax, OpenAI GPT Image und mehr), Datenquellen verbinden, die Sprache wechseln und ein Theme wählen.

Schritt 2 — Ein beliebiges Modell über einen OpenAI-kompatiblen Anbieter nutzen

Das ist die nützlichste Erkenntnis in Sashas Test. Über die erkannten CLIs hinaus lässt dich Open Design deinen eigenen Schlüssel für jede OpenAI-kompatible API mitbringen — das heißt, du kannst über einen Aggregator wie OpenRouter routen und nahezu jedes Modell nutzen, oft günstiger:

1. Erstelle bei deinem Anbieter einen API-Schlüssel und kopiere ihn.
2. Wähle in den Open-Design-Einstellungen den Anbietertyp OpenAI (OpenRouter und ähnliche Aggregatoren sprechen die OpenAI API).
3. Füge den Schlüssel ein und — entscheidend — ändere die base URL auf den Endpunkt deines Anbieters (z. B. die OpenRouter base URL), und wähle dann das gewünschte Modell.
4. Speichern — die Generierung läuft nun über diesen Anbieter.

Ein Stolperstein, auf den Sasha trifft: Die Modellauswahl schaltet global um, nicht pro Projekt; wenn die Mediengenerierung nach dem Wechsel kaputtgeht, liegt das also daran, dass der Bildanbieter dem Modellwechsel gefolgt ist. Lege die Schlüssel deiner Medienanbieter ausdrücklich fest.

Schritt 3 — Einen Prototyp bauen (raue Kanten und alles)

Lege ein Projekt an, schreibe dein Briefing, wähle High Fidelity und sende ab. Open Design führt zuerst ein Discovery-Formular aus — es passt die Fragen an deinen Prompt an (Zielplattform, für wen, Tonalität, Animation, Einschränkungen), dann einen Auswahldialog für die visuelle Richtung (Typografie + Palette) und baut anschließend. Das Ergebnis ist ein lebendiger, interaktiver Prototyp mit eingebauten Steuerelementen — Sashas generierte App lässt dich Animationen umschalten und die Akzentfarbe direkt auf der Seite austauschen.

Ein echter generierter Prototyp, in der Vorschau gerendert — eine dunkle, cineastische Agentur-Landingpage.

Ehrliche Vorbehalte, die Sasha vor der Kamera zeigt (und wie man damit umgeht):

• Es wählt vielleicht standardmäßig den falschen Skill. Wenn es einen „checkpoint/blog" zu bauen beginnt, während du eine Mobile-App wolltest, sag es ihm ausdrücklich: „nutze den mobile-app / front-end Skill." Lege den Skill fest, bevor du generierst.
• Inspect benötigt data-oid-Tags. Das Inspect-Werkzeug auf der Leinwand braucht ein getaggtes Artefakt; wenn es meldet, dass es keine Elemente auswählen kann, bitte den Agent, „den Prototyp mit data-oid-Tags neu zu bauen", und lade dann neu.
• Es ist jung und liefert schnell aus. Rechne mit gelegentlichen Aussetzern (Navigation verschwindet nach einer Bearbeitung usw.) — das Projekt aktualisiert sich fast täglich, also zieh oft erneut.

Schritt 4 — Die Werkzeuge auf der Leinwand (das eigentliche Highlight)

Sobald getaggt, ist die Bearbeitungsschleife das Herausragende. Mit Inspect kannst du über jedes Element fahren und Farbe, Größe und Stil direkt anpassen. Mit Edit kannst du Text inline umschreiben (kein Hin und Her zum Chat für eine Änderung an einem Wort). Mit Comment/picker kannst du einen Bereich auswählen, zeichnen und dem Agent eine Notiz schicken („mach aus diesem Menü ein scrollendes Karussell mit Fortschrittsbalken"). Es ist die schnelle, visuelle Feedbackschleife, die sich mit einem schlichten Agent im Terminal nur umständlich nachbilden lässt.

Der Plugin-Hub: durchstöbere die Registry, importiere Plugins und mache sie für dein Team bereit.

Wenn du fertig bist, exportiert Share nach PDF, PPTX, eigenständigem HTML oder markdown — oder deployt mit einem Klick auf Vercel. Sashas ehrliches Fazit: Für Präsentationen und Lead-Magnet-Seiten ist es bereits ein praktischer Mini-Builder; für komplexes App-/Site-Prototyping rechne mit echter Iteration. Da es erst eine Woche alt ist und ständig aktualisiert wird, ist das Fundament stark.

Tipps

• Binde OpenRouter (oder einen beliebigen OpenAI-kompatiblen Anbieter) an, um günstigere oder andere Modelle zu nutzen — denk daran, die base URL zu ändern.
• Lege den Skill ausdrücklich fest, bevor du generierst, damit es nicht standardmäßig die falsche Vorlage wählt.
• Fordere data-oid-Tags an, wenn Inspect keine Elemente auswählen kann, und lade dann neu.
• Setze auf Inspect/Edit/Comment für schnelle visuelle Anpassungen, statt im Chat neu zu prompten.
• Zieh oft erneut — das Projekt liefert fast täglich Fehlerbehebungen aus.

FAQ

Kann ich ein anderes Modell als Claude nutzen — und weniger zahlen? Ja. Richte Open Design auf eine beliebige erkannte CLI aus oder bring deinen eigenen Schlüssel für einen beliebigen OpenAI-kompatiblen Anbieter (z. B. OpenRouter) mit, indem du Schlüssel und base URL setzt — das eröffnet nahezu jedes Modell.

Inspect/Edit wählt keine Elemente aus — warum? Das Artefakt benötigt data-oid-Tags. Bitte den Agent, den Prototyp damit neu zu bauen, und lade dann die Vorschau neu.

Ist es produktionsreif? Es ist früh dran und iteriert schnell. Für Decks und Lead-Magnet-Seiten ist es bereits großartig; bei komplexen Apps behandle das Ergebnis als starken Entwurf, den du verfeinerst.

Ist es kostenlos? Die App ist quelloffen unter Apache-2.0 und kostenlos lokal nutzbar. Du zahlst nur für die Modell- und Mediennutzung des jeweiligen Agents und Anbieters, den du verbindest.

---

Diese geschriebene Anleitung basiert auf dem praxisnahen Test von Sasha (ИИШНЫЙ). Sieh dir oben das vollständige Video an und abonniere ИИШНЫЙ für weitere ehrliche, ungeschnittene Tests von KI-Werkzeugen.