Wie Open Design funktioniert — die selbst hostbare Bring-Your-Own-Key-Architektur

Dieser Leitfaden richtet sich an alle, die verstehen wollen, was sie tatsächlich betreiben: wie Open Design unter der Haube funktioniert, warum es auf jeder Ebene selbst hostbar und BYOK sein kann und warum seine Skills und Designsysteme einfach Dateien sind, die man forken kann. Er folgt dem architekturorientierten Walkthrough, den AI Stack Engineer in seinem vollständigen Video gibt, neu geschrieben und auf den aktuellen Release gebracht. Sieh dir das Video oben für den Live-Durchlauf an oder lies hier die Textfassung.

Der Plugin-Hub: durchsuche die Registry, importiere Plugins und bereite sie für dein Team vor.

Was ist Open Design?

Open Design ist ein vollständig quelloffener Ersatz für ein Cloud-Designtool: local-first, web-deploybar und BYOK auf jeder Ebene. „BYOK“ steht für bring your own key – bring deinen eigenen Schlüssel mit. Statt ein eigenes Modell oder einen eigenen Agenten mitzuliefern, durchsucht Open Design deine Maschine nach jeder Coding-CLI, die du bereits hast – Claude Code, Codex, Cursor, Gemini, OpenCode und mehr – und nutzt diese als Engine. Ist keine in deinem Pfad, gibt es einen Anthropic-API-Fallback. Die Lizenz ist Apache-2.0, du kannst es also forken, intern deployen und frei verändern.

Der Punkt, zu dem AI Stack Engineer immer wieder zurückkehrt: Ein Cloud-Designtool läuft nur auf dem Modell eines einzigen Anbieters, in dessen Cloud, hinter einem kostenpflichtigen Plan, ohne jede Self-Host-Option. Open Design dreht alle drei um – deine Maschine, dein Agent, dein Schlüssel.

Wie es gebaut ist (der Teil, der sich zu verstehen lohnt)

Die Architektur ist bewusst schlicht:

• Frontend – eine Vite-+-React-+-TypeScript-App.
• Backend – ein Node-+-Express-Daemon mit SQLite für Projekte, Konversationen, Nachrichten und Tabs.
• Der Daemon ist der einzige privilegierte Prozess. Er startet die von dir gewählte CLI, wobei das Arbeitsverzeichnis auf einen projektspezifischen Ordner unter einem versteckten .od-Verzeichnis gesetzt wird.

Dieser letzte Punkt macht Open Design zu mehr als einer Chatbox: Der Agent erhält echte Lese-/Schreib-/Bash-/Web-Fetch-Werkzeuge gegen ein echtes Dateisystem. Wenn er ein Artefakt erzeugt, schreibt er echte Dateien auf die Festplatte, die du öffnen, bearbeiten, versionieren und exportieren kannst – statt einen Klumpen in einem Chatfenster zurückzugeben.

Skills und Designsysteme sind einfach Dateien

Zwei Bausteine erledigen den Großteil der Arbeit, und beide sind schlichte Dateien, die dir gehören:

• Skills decken echte Oberflächen ab – Web-Prototyp, SaaS-Landingpage, Dashboard, Preisseite, Doku, Blog, Mobile App, Decks (samt einem Skill für magazinartige PPTs) – plus Arbeitsergebnis-Vorlagen wie PM-Specs, Wochenupdates, Besprechungsnotizen, Runbooks, Finanzberichte, Rechnungen, Kanban-Boards und OKRs. Jeder ist eine Datei, die du lesen, bearbeiten oder erweitern kannst.
• Designsysteme werden als schlichte Markdown-DESIGN.md-Dateien gespeichert. Jede definiert Farbe, Typografie, Abstände, Layout, Komponenten, Motion, Tonalität, Markenregeln und Anti-Patterns, abgeleitet von echten Marken.

Der Open Design-Arbeitsbereich: Beschreibe, was du erstellen willst, wähle einen Modus, und dein Agent erledigt den Rest.

Weil beide Dateien sind, wird dein gesamter Design-Workflow versionierbar und forkbar – ein Team kann seinen eigenen internen Skill und seine Marken-DESIGN.md in git halten und jeden beliebigen Agenten dagegen generieren lassen.

Installieren und selbst hosten

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install   # das zieht viele Abhängigkeiten — gib ihm eine Minute
pnpm tools-dev run web

Öffne die lokale URL, die es ausgibt (ein dynamischer Port – nicht fest verdrahten). Lieber kein Setup? Die Desktop-App unter open-design.ai/download überspringt Node und pnpm. Beim ersten Start scannt sie deinen PATH und listet die gefundenen Agenten auf; wähle einen (AI Stack Engineer testet den Nicht-Claude-Pfad mit OpenCode) oder nutze die Anthropic-BYOK-Option.

Zwei clevere Details im Prompt-Stack, die man kennen sollte: ein Discovery-Formular (es fragt vor dem Schreiben nach Oberfläche, Zielgruppe, Tonalität, Marke, Umfang – 30 Sekunden Radio-Buttons sparen 30 Minuten Nachkorrektur) und ein Direction-Picker (fünf kuratierte visuelle Richtungen mit deterministischen Paletten, damit das Modell die Stimmung nicht frei improvisiert).

Folien-Modus: Wähle eine Deck-Kategorie und forke ein Beispiel als Ausgangspunkt.

Wenn du fertig bist, exportiere nach HTML, PDF oder ZIP – oder deploye. Da es web-deploybar und local-first ist, muss nichts die Cloud eines Dritten berühren.

Das ehrliche Fazit

AI Stack Engineer urteilt ausgewogen: Ein ausgefeiltes Cloud-Tool, das auf ein Spitzenmodell abgestimmt ist, gewinnt beim Out-of-the-box-Feinschliff und der Export-Breite weiterhin. Open Design gewinnt bei den Dingen, die vielen Menschen wichtig sind – es ist kostenlos und Apache-2.0, du bringst deinen eigenen Agenten und Schlüssel mit, und Modellflexibilität ist eine stille Superkraft: Erhöht ein Anbieter die Preise oder willst du vergleichen, wie zwei Modelle ein Layout handhaben, wechselst du den Agenten im Dropdown und führst es erneut aus. Ein paar ehrliche Anmerkungen: Es ist im frühen Research-Preview-Stadium; Claude Code bekommt das reichhaltigste Streaming (strukturiertes stream-JSON), während andere CLIs zeilengepuffert sind; die Ausgabequalität hängt stark von dem Modell ab, auf das du zeigst; und manche Funktionen wie chirurgische Edits im Kommentarmodus stehen noch auf der Roadmap.

Tipps

• Verstehe den .od-Projektordner – deine Artefakte sind dort echte Dateien; sichere sie / committe sie.
• Halte Skills und DESIGN.md in git für einen versionierten, im Team teilbaren Workflow.
• Nutze eine lokale CLI, damit die Generierung auf einem Abo läuft, das du ohnehin bezahlst.
• Wähle die Engine bewusst – ein schwaches Modell liefert auch mit einem großartigen Designsystem schwache Ergebnisse.
• Selbst hosten / deployen, wenn du Privatsphäre oder Kontrolle brauchst – nichts muss deine Maschine verlassen.

FAQ

Was bedeutet „BYOK auf jeder Ebene“? Du bringst deine eigene Agent-CLI und deinen eigenen Modellschlüssel mit. Open Design liefert die Designoberfläche, die Skills und die Designsysteme; das Modell und seine Kosten bleiben auf deiner Seite.

Wo liegt meine Arbeit eigentlich? Auf deiner Maschine, in einem projektspezifischen Ordner unter .od, verwaltet vom lokalen Daemon (SQLite + echte Dateien). Es ist selbst hostbar und web-deploybar.

Kann ich die Skills und Designsysteme anpassen? Ja – es sind schlichte Dateien (Skills als Ordner, Designsysteme als DESIGN.md). Bearbeite sie, füge eigene hinzu und halte sie in der Versionskontrolle.

Ist es kostenlos? Die App ist quelloffen unter Apache-2.0 und lokal kostenlos zu betreiben. Du zahlst nur für die Modellnutzung des Agenten und Schlüssels, die du anbindest.

---

Dieser Textleitfaden basiert auf dem vollständigen Walkthrough von AI Stack Engineer. Sieh dir oben das ganze Video an und abonniere AI Stack Engineer für mehr praxisnahe AI-Stack-Analysen.