> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aihubmix.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Open Design
> Mit einem einzigen AIHubMix Key die quelloffene Claude-Design-Alternative in ein lokales KI-Design-Studio verwandeln
[Open Design](https://open-design.ai/) (offizielle Website; Open-Source-Repository [`nexu-io/open-design`](https://github.com/nexu-io/open-design)) ist eine **quelloffene, lokal-orientierte „Claude-Design-Alternative"**. Es bringt selbst kein Modell mit, sondern nutzt die von Ihnen angebundene KI als Design-Engine und erzeugt direkt Web-/Desktop-/Mobile-Prototypen, interaktive Dashboards, Präsentationen, Bilder und Videos – exportierbar als HTML / PDF / PPTX / MP4. Geliefert werden lauffähige Artefakte aus echtem CSS und echten Komponenten, nicht Pixel auf einer Leinwand. Apache-2.0-lizenziert, und alle Projektdaten bleiben auf Ihrem Rechner.
**AIHubMix ist jetzt ein in Open Design integriertes BYOK-Gateway**: Wählen Sie im API-(BYOK-)Modus AIHubMix aus, und ein einziger Key treibt zugleich Chat, Bildgenerierung, Videoerstellung und Sprachausgabe an. Dieser Artikel zeigt, wie Sie es anbinden und nutzen.
Open Design bietet zwei Ausführungsmodi (Settings → Execution mode):
* **Local CLI** – ruft einen lokal installierten CLI-Agenten (Claude Code / Codex usw.) als Design-Engine auf und kann Projekt-Codedateien direkt lesen und schreiben.
* **API provider (BYOK, eigener Schlüssel)** – ohne jede CLI-Installation, zeigt direkt auf einen OpenAI-/Anthropic-kompatiblen Endpunkt. **Dieser Artikel nutzt AIHubMix über diesen Weg.**
## Warum AIHubMix als Antrieb
Ein einziger Key, und Chat, Bildgenerierung, Videoerstellung und Sprachausgabe sind durchgängig verbunden. Die native Mediengenerierung von Open Design erfordert oft die separate Anbindung verschiedener Anbieter – für Bilder, Videos und Sprache müssten Sie womöglich Keys mehrerer Anbieter einrichten.
[AIHubMix](https://aihubmix.com) ist ein **OpenAI-API-kompatibles Aggregations-Gateway**: Hinter einem einzigen Key sind zugleich OpenAI / Anthropic / Google Gemini / DeepSeek sowie die gängigen Bild-, Video- und Sprachmodelle angebunden. Open Design **wählt anhand des Modellnamens den passenden nativen Protokoll-Endpunkt von AIHubMix** – `claude*` läuft über Anthropic, `gemini*` / `imagen*` über Gemini, der Rest über die OpenAI-kompatible Schnittstelle. So bleiben die Gedankenkette von Claude und die native Bildgenerierung von Gemini ungeschmälert, und Sie verwalten nur einen einzigen Key.
### Vergleich mit gängigen Tools
Die Dimensionen der folgenden Tabelle stammen aus der [Comparison-Tabelle des offiziellen Open-Design-README](https://github.com/nexu-io/open-design#comparison):
| Dimension | Closed-Source-Tools wie Claude Design / Figma / Lovable / v0 | Open Design + AIHubMix |
| ------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------ |
| Open Source | ❌ | ✅ Apache-2.0 |
| Self-Hosting / Desktop | ❌ | ✅ macOS · Windows · Vercel |
| Läuft auf eigenem Agent, mit eigenem Key (BYOK) | ❌ an das jeweilige Backend gebunden | ✅ 22 CLIs + BYOK |
| Claude / GPT / Gemini / DeepSeek mit einem Key mischen | ❌ | ✅ |
| Designsystem `DESIGN.md` | proprietär / eingeschränkt | ✅ 150 integrierte Vorlagen |
| Skills / Plugins | geschlossen | ✅ 100+ Skills · 261 Plugins |
| HyperFrames (HTML→MP4-Animation) | ❌ | ✅ |
| Abrechnung | Abonnement (Pro / Team) | BYOK, nach Nutzung je Anbietermodell |
Vergleichsdimensionen und Wettbewerber-Kennzeichnungen richten sich nach der Comparison-Tabelle des offiziellen Open-Design-README; Wettbewerber sind nach ihrer Closed-Source-/Abonnement-Form in einer Spalte zusammengefasst. Die einzelnen Produkte ändern sich schnell – maßgeblich ist der jeweils aktuelle offizielle Stand.
## Anbindung in drei Schritten
### Voraussetzung: AIHubMix Key beschaffen
Melden Sie sich bei [aihubmix.com](https://aihubmix.com) an und erstellen Sie in der Konsole auf der Seite **Keys** einen API Key (im Format `sk-...`). Kopieren und speichern Sie ihn direkt nach dem Erstellen – sobald das Pop-up geschlossen ist, sehen Sie den vollständigen Klartext nicht mehr. Es empfiehlt sich, etwas Guthaben einzuzahlen – die spätere Bild- und Videogenerierung verbraucht Guthaben (Videos besonders).
### Schritt 1: Ausführungsmodus und Protokoll wählen
Öffnen Sie Open Design, klicken Sie oben rechts auf das Zahnrad und gehen Sie zu **Settings → Execution mode → wählen Sie BYOK**. Wählen Sie anschließend in der Zeile **Gateways** den Eintrag **AIHubMix**.
### Schritt 2: Key einfügen (Adresse ist fest, keine manuelle Eingabe nötig)
Fügen Sie im selben Pop-up wie oben im Feld **API key** Ihren Key ein (Platzhalter ist `sk-...`) und klicken Sie auf **Test**, um die Verbindung zu prüfen (im Screenshot erscheint `Connected. Replied in … 'ok'`).
Anders als bei anderen Providern gilt: **AIHubMix ist ein Gateway mit einem festen, einzigen Eingang. Die Adresse (`https://aihubmix.com/v1`) ist bereits integriert und im Formular vor Ihnen verborgen** – Sie müssen und können sie nicht manuell eintragen, also ein potenziell fehleranfälliges Feld weniger.
### Schritt 3: Modell wählen und eines zum Loslegen auswählen
Chat-, Bild-, Video- und Sprachmodelle wählen Sie alle in diesem BYOK-Panel: Das **Chat-Modell** im Dropdown **Model** (nach erfolgreicher Key-Prüfung lässt sich der Echtzeit-Katalog von AIHubMix durchsuchen; Standard ab Werk ist `gpt-5.5`), die **Bild-/Video-/Sprachmodelle** in den entsprechenden Auswahlfeldern unterhalb des Panels. Sie können sich an den [Arena-Ranglisten der einzelnen Bereiche](https://arena.ai/) je nach Einsatzzweck orientieren – die unten genannten Modelle sind als bei AIHubMix verfügbar bestätigt.
**① Chat / Generierung von Web-Prototypen (Hauptaufgabe)** · siehe [Code/WebDev Arena](https://arena.ai/leaderboard/code) (menschliche Abstimmung zur Generierung von Web-UIs, am nächsten an Open Design), [Agent Arena](https://arena.ai/leaderboard/agent) (Tool-Orchestrierung)
| Einsatzzweck | Empfohlenes Modell |
| -------------------------------------------------- | -------------------------------------------------------------------------------------- |
| Design-Reasoning / Web-Prototyp (Hauptaufgabe) | `gpt-5.5`, `claude-opus-4-8`, `claude-fable-5` |
| Strikte Anweisungsbefolgung / stabile Tool-Aufrufe | `claude-fable-5` (Spitzenreiter bei Steerability), `kimi-k2.6` (wenig Halluzinationen) |
| Geschwindigkeit / Batch / Kosten sparen | `gpt-4o-mini`, `claude-haiku-4-5`, `deepseek-v4-flash` |
> **Mediengenerierung läuft über Tool-Aufrufe**: Bilder/Videos/Sprache im Chat sind vom Modell ausgelöste Function Calls. Wählen Sie als Hauptmodell vorzugsweise eines, das **Function Calling** unterstützt (`gpt-5.5`, die Claude-Opus-Reihe ist am stabilsten) – sonst „chattet es normal, erzeugt aber kein Bild". `claude-fable-5` liegt sowohl in der WebDev- als auch in der Agent-Rangliste vorn, ist im Katalog aber derzeit als bei seinem offiziellen Kanal zugriffsbeschränkt markiert – **maßgeblich ist die tatsächliche Verfügbarkeit**.
**② Bildmodelle** · siehe [Text-to-Image Arena](https://arena.ai/leaderboard/text-to-image)
Weit oben in der Rangliste und bei AIHubMix verfügbar: `gpt-image-2`, `gemini-3.1-flash-image` (also nano-banana-2), `gemini-3-pro-image` (nano-banana-pro).
**③ Videomodelle** · siehe [Video Arena](https://arena.ai/leaderboard/text-to-video)
Weit oben in der Rangliste und bei AIHubMix verfügbar: `doubao-seedance-2-0-260128`, `happyhorse-1.0-i2v` (Standard von Open Design), `veo-3.1-generate-preview`, `wan2.7-i2v`.
> Ranglisten und verfügbare Modelle ändern sich schnell: **Maßgeblich für die Rangliste ist der aktuelle Stand der [Arena](https://arena.ai/), für die Modell-ID der Echtzeit-Katalog von AIHubMix** (einfach direkt im Dropdown suchen).
## Was Sie nach der Anbindung von AIHubMix tun können
Nach der Anbindung treibt AIHubMix sowohl die Kernfunktion von Open Design an – die Generierung von Prototypen und Design-Artefakten über das Chat-Modell – als auch zusätzlich die drei Medienkategorien Bild, Video und Sprache.
### Design- und Prototyp-Generierung (Kernfunktion)
Das ist die Paradedisziplin von Open Design. Das von Ihnen gewählte Chat-Modell versteht die Anforderungen und erzeugt **Web-/Desktop-/Mobile-Prototypen, interaktive Dashboards, Präsentationen / Decks**, schreibt Designsysteme und überarbeitet Entwürfe – geliefert werden lauffähige Artefakte aus echtem CSS und echten Komponenten. In der Sitzung können Sie das Modell jederzeit in der Kopfleiste wechseln und mit demselben Key nahtlos den Anbieter tauschen.
**Grenzen des BYOK-Modus**: Im API-(BYOK-)Modus stehen Chat sowie Bild-/Video-/Sprachgenerierung vollständig zur Verfügung, aber die KI **liest, schreibt oder bearbeitet Ihre Projekt-Codedateien nicht direkt** – sie erzeugt nur Artefakte. Wenn der Agent lokalen Code direkt ändern soll, wechseln Sie in den Modus **Local CLI**.
### Bild-/Video-/Sprachgenerierung (begleitende Medien)
Über Prototypen hinaus ermöglicht AIHubMix Open Design, direkt Bilder zu erzeugen, Videos zu produzieren und Sprache zu vertonen. Diese drei Medienmodell-Kategorien werden alle **innerhalb des BYOK-Panels** eingestellt, wobei für jede bereits ein als `Default` markiertes Standardmodell vorausgewählt ist (konkrete Modellempfehlungen siehe oben „Schritt 3: Modell wählen").
#### Bildgenerierung
Schalten Sie im Chat den Modus auf **Image** und beschreiben Sie einfach Ihre Anforderung, etwa „Generate an image of the Dragon Boat Festival". Das Modell ruft das integrierte Tool `generate_image` auf und erzeugt das Bild, unterstützt verschiedene Seitenverhältnisse (1:1, 16:9, 9:16 usw.). Die Gemini-/Imagen-Reihe läuft automatisch über die native Bildgenerierungs-Schnittstelle von Gemini.
#### Videogenerierung
Die Video-Familie umfasst unter anderem **Seedance (Doubao), Wan (Tongyi Wanxiang), Veo (Google), Sora (OpenAI)** (Modellempfehlungen siehe oben „Schritt 3: Modell wählen"; die konkrete Unterstützung von Text-zu-Video / Bild-zu-Video, Dauer, Seitenverhältnis und Vertonung richtet sich nach dem Echtzeit-Katalog und dem jeweiligen offiziellen Anbieter).
Schalten Sie im Chat den Modus auf **Video**, eine kurze Beschreibung genügt, um `generate_video` auszulösen; Dauer und Seitenverhältnis lassen sich festlegen. Bild-zu-Video-Modelle (i2v) benötigen ein Referenzbild – **wenn Sie keines angeben, verwendet die Anwendung automatisch das neueste Bild im Projekt** (für präzise Kontrolle geben Sie das Referenzbild explizit an), was den Ablauf „erst Bild, dann Video" sehr flüssig macht. Videos werden asynchron generiert; die Anwendung pollt automatisch und bettet das Ergebnis nach Fertigstellung direkt in den Dialog ein.
#### Sprache / Vertonung
Auch das **Sprachmodell** und die **Stimme** sind im BYOK-Panel bereits als Standard vorausgewählt (Stimme standardmäßig `alloy`, zur Auswahl stehen außerdem `echo` / `fable` / `onyx` / `nova` / `shimmer`). So können Sie im Chat mit `generate_speech` beliebige Texte in Vertonung umwandeln – direkt für Prototyp-Demos oder Video-Sprecherspuren.
## Häufige Fragen (FAQ)
Local CLI (Aufruf eines lokal installierten Agenten) kann lokalen Code direkt ändern, setzt aber voraus, dass Sie die passende CLI bereits installiert haben. Der API-(BYOK-)Modus installiert keine CLI: Mit einem AIHubMix Key erhalten Sie sofort das komplette Paket aus Chat + Bild / Video / Sprache und kommen am schnellsten in Gang. Beide Modi lassen sich nach Bedarf wechseln.
Nein. Im BYOK-Modus erzeugt die KI nur Artefakte und liest oder bearbeitet keine Projektdateien. Wenn der Agent lokalen Code direkt ändern soll, wechseln Sie in den Local-CLI-Modus. Chat sowie Bild-/Video-/Sprachgenerierung unterliegen dieser Einschränkung nicht.
Keine manuelle Eingabe nötig. AIHubMix ist in Open Design ein Gateway mit einem festen, einzigen Eingang; die Adresse (`https://aihubmix.com/v1`) ist bereits integriert und im Formular vor Ihnen verborgen. Sie tragen nur den API Key ein – die Adresse ist eindeutig festgelegt, also ein potenziell fehleranfälliges Feld weniger.
Nach erfolgreicher Key-Verbindung können Sie im Dropdown **Model** den Echtzeit-Modellkatalog von AIHubMix durchsuchen (mehrere Hundert Modelle). Das Dropdown enthält außerdem einige gängige Flaggschiff-Modelle für den schnellen Einstieg. Solange AIHubMix den jeweiligen Modellnamen unterstützt, lässt er sich auswählen; maßgeblich für die aktuell verfügbaren Modelle ist der Echtzeit-Katalog.
* **Test schlägt fehl, keine Verbindung**: Prüfen Sie, ob der API Key korrekt eingetragen ist, ob das AIHubMix-Konto Guthaben hat und ob Ihr Rechner `aihubmix.com` erreichen kann.
* **Chat funktioniert, aber kein Bild / Video**: Meist hat das aktuelle Chat-Modell keinen Tool-Aufruf ausgelöst. Wechseln Sie zu einem Modell, das **Function Calling** unterstützt (z. B. `gpt-5.5`, `claude-opus-4-8`); erst dann wird die Mediengenerierung ausgelöst.
* **Hinweis, dass ein Modell nicht unterstützt wird**: Maßgeblich sind die Modelle, die sich im Echtzeit-Katalog von AIHubMix finden lassen.
Nein. Open Design wählt anhand des Modellnamens den passenden nativen Protokoll-Endpunkt von AIHubMix: `claude*` läuft über Anthropic, `gemini*` / `imagen*` über Gemini, der Rest über die OpenAI-kompatible Schnittstelle. Das native Protokoll bleibt originalgetreu, sodass die Gedankenkette, die native Bildgenerierung und weitere exklusive Fähigkeiten voll zur Geltung kommen.
Open Design ist eine lokal-orientierte Anwendung: API Key und Projektdaten werden auf Ihrem Rechner gespeichert (lokales SQLite, Projektdateien unter `.od/projects/`). Telemetrie ist standardmäßig deaktiviert und optional aktivierbar (opt-in). Anfragen werden vom lokalen Daemon an AIHubMix weitergeleitet, und AIHubMix übernimmt lediglich das Routing der Modellanfragen.
## Jetzt loslegen
1. Registrieren Sie sich auf [aihubmix.com](https://aihubmix.com), erstellen Sie in der Konsole einen `sk-`-Key und zahlen Sie etwas Guthaben ein (wird für Bild-/Videogenerierung benötigt)
2. Wählen Sie in Open Design → Settings → Execution mode → API provider(BYOK) den Eintrag **AIHubMix** und fügen Sie den Key ein
3. Wählen Sie im Model-Dropdown ein Modell aus und lassen Sie es eine Landingpage + ein Key Visual erstellen – los geht's
Open Design herunterladen: [open-design.ai](https://open-design.ai/).