Mit welchem Coding-Agent solltest du Open Design betreiben?

Open Designs erste echte Entscheidung ist nicht, was du bauen willst — sondern welcher Coding-Agent es antreibt. Dieser Leitfaden konzentriert sich auf diese Wahl: die (lange) Liste der unterstützten Agents, wie man einen auswählt und wie man einrichtet und baut. Er folgt dem Walkthrough, den Tony Xhepa in seinem Video gibt, neu geschrieben und auf den aktuellen Release gebracht. Schau dir das Video oben an oder lies weiter für die schriftliche Version.

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

Warum der Agent die wichtige Entscheidung ist

Open Design bringt kein eigenes Modell mit — es ist eine quelloffene, lokal-orientierte Oberfläche, die auf jedem Coding-Agent läuft, den du bereits hast. Der Agent, den du wählst, ist also deine Design-Engine: Er bestimmt Qualität, Kosten und Geschwindigkeit. Das Schöne ist die Bandbreite. Tonys Liste der unterstützten Agents ist lang: Claude Code, Codex, Devin for Terminal, Cursor, Gemini, OpenCode, Qwen, GitHub Copilot CLI, Hermes, Kimi, Pi, Kiro — und mehr. Was auch immer du bereits nutzt, Open Design unterstützt es wahrscheinlich, und wenn du keinen installiert hast, kannst du stattdessen einen Anthropic- oder OpenAI-API-Schlüssel verwenden.

Wie man einen auswählt

Eine schnelle Art zu wählen:

• Zahlst du bereits für eine Coding-CLI? Nutze sie — Open Design setzt auf diesem Abo auf, es gibt also keine zweite Rechnung.
• Willst du die stärkste Design-Ausgabe? Richte es für den ersten Build auf ein Spitzenmodell aus (z. B. Claude Code auf einem leistungsfähigen Modell).
• Willst du es günstig oder kostenlos? Das kostenlose Kontingent der Gemini CLI oder die mitgelieferten Modelle von OpenCode funktionieren gut; du kannst auch deinen eigenen Schlüssel mitbringen.
• Legst du Wert auf Privatsphäre/lokal? Jede lokale CLI hält die Generierung auf Zugangsdaten, die deine Maschine nie verlassen.

Du bist nicht festgelegt — tausche den aktiven Agent später mit einem Klick aus.

Schritt 1 — Aus dem Quellcode installieren

Open Design ist eine Next.js-App; der Schnellstart besteht aus einer Handvoll Befehle:

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

Öffne dann die lokale URL, die es ausgibt (ein dynamischer Port — nicht fest verdrahten). Ein Hinweis, den Tony anspricht: Es braucht Node 24 — unter Node 22 siehst du eine „unsupported engine“-Warnung, installiere also zuerst Node 24. Kein Terminal gewünscht? Es gibt eine Desktop-App unter open-design.ai/download.

Schritt 2 — Ausführungsmodus konfigurieren (deinen Agent wählen)

Beim ersten Start legst du den Ausführungsmodus fest: lokale CLI, Anthropic API oder OpenAI API. Wähle lokale CLI, und Open Design zeigt, welche Agents es auf deiner Maschine erkannt hat — Tony hat Codex, Gemini, OpenCode und Pi installiert (Claude Code wird auf dieser Maschine als nicht installiert angezeigt). Wähle einen (er nimmt OpenCode), optional das Modell, und Get started.

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

Schritt 3 — Baue dein erstes Design

Erstelle einen Prototype, benenne ihn, wähle die Detailtreue (hoch) und starte von einem vorgeschlagenen Briefing (Tony wählt ein SaaS-Analytics-Dashboard). Open Design führt die Discovery-Fragen aus (Markenkontext, Datenquelle für Diagramme, visuelle Richtung), du antwortest, wählst eine Richtung, und es baut. Das fertige Artefakt hat eine Vorschau, eine Quellcode-Ansicht, Kommentare und ein Share-Menü — als PDF exportieren, herunterladen, eigenständiges HTML, als Vorlage speichern und mehr.

Die Plugin-Bibliothek: Installiere Skills direkt aus der Registry — inklusive Anti-Slop-Design-Skills.

Tipps

• Wähle den Agent, für den du bereits zahlst — kein zweites Abo, und er legt deine Qualität/Kosten fest.
• Installiere zuerst Node 24, um die Warnung wegen nicht unterstützter Engine zu vermeiden.
• Nutze den local CLI-Modus, damit Open Design deine installierten Agents automatisch erkennt.
• Tausche Agents jederzeit — die Wahl ist nicht endgültig; ändere sie mit einem Klick.
• Keine CLI? Nutze einen API-Schlüssel (Anthropic oder OpenAI) stattdessen.

FAQ

Welche Agents unterstützt Open Design? Viele — Claude Code, Codex, Cursor, Gemini, OpenCode, Qwen, GitHub Copilot CLI, Devin, Hermes, Kimi, Pi, Kiro und mehr. Es erkennt die auf deiner Maschine installierten automatisch.

Wie wähle ich einen aus? Nutze die CLI, für die du bereits zahlst; wähle für den ersten Build ein starkes Modell und für Iterationen ein günstigeres; oder nutze ein kostenloses Kontingent / deinen eigenen API-Schlüssel.

Warum die Node-24-Warnung? Open Design benötigt Node 24; unter Node 22 siehst du eine „unsupported engine“-Warnung. Installiere Node 24, um sie zu beseitigen.

Ist es kostenlos und quelloffen? Ja — Apache-2.0, lokal-orientiert. Betreibe es kostenlos; du zahlst nur für die Modellnutzung des jeweiligen Agents oder Schlüssels, den du verbindest.

---

Dieser schriftliche Leitfaden basiert auf Tony Xhepas Walkthrough. Schau dir das vollständige Video oben an und abonniere Tony Xhepa für weitere Open-Source-Dev-Tools.