OpenDesign: Die quelloffene Alternative zu Claude Design

Website · Download · OpenDesign Cloud · Discord · @OpenDesignHQ folgen

English · Español · Português · Deutsch · Français · 简体中文 · 繁體中文 · 한국어 · 日本語 · العربية · Русский · Українська · Türkçe · ภาษาไทย

Home — Wählen Sie einen Artefakttyp, geben Sie ein Briefing ein und legen Sie Designsystem, Arbeitsverzeichnis und Modell fest, bevor Sie starten.

Plugins — Durchsuchen Sie offizielle Skills nach Kategorie, durchsuchen Sie den Katalog und starten Sie mit Try it einen Workflow.

Design System — Extrahieren und verfeinern Sie die visuelle Sprache einer Marke, prüfen Sie das Ergebnis in der Vorschau und gestalten Sie im selben Workspace damit weiter.

Prototyp — Generieren oder rekonstruieren Sie Web-Erlebnisse, prüfen Sie die gerenderte Seite und iterieren Sie direkt mit dem Agent.	Präsentation — Erstellen Sie mehrseitige Präsentationen, prüfen Sie Miniaturen und Sprechernotizen und exportieren Sie das fertige Ergebnis.
Mobile App — Generieren und verfeinern Sie mobile Oberflächen in einer Geräteansicht; Unterhaltung, Ausgabedateien und nächste Schritte bleiben daneben sichtbar.	Bild — Generieren Sie visuelle Assets aus der Projektunterhaltung, prüfen Sie das Ergebnis in voller Größe und laden oder öffnen Sie es anschließend.
Dokument — Erstellen Sie ausgefeilte mehrseitige Leitfäden und redaktionelle Dokumente, prüfen Sie das gerenderte Layout und exportieren oder teilen Sie das Ergebnis.	HyperFrame — Erstellen Sie codebasierte Motion Graphics, prüfen Sie die Animation im Studio und exportieren Sie das fertige Video.

` den MCP-Server in die Konfiguration dieses Agents, und du rufst dieselben Tools aus jedem Agent heraus auf. | Coding-Agent / Plattform          | Status    | Einzeiler zur MCP-Server-Installation                    | |---|:---:|---| | [Claude Code](https://docs.anthropic.com/en/docs/claude-code) | ✅ Unterstützt | `od mcp install claude` | | [Codex CLI](https://github.com/openai/codex) | ✅ Unterstützt | `od mcp install codex` | | [DeepSeek Reasonix](https://github.com/esengine/DeepSeek-Reasonix) | ✅ Unterstützt | `od mcp install reasonix` | | [Raven](https://github.com/EverMind-AI/Raven) | ✅ Unterstützt | `od mcp install raven` | | [Cursor](https://www.cursor.com/cli) | ✅ Unterstützt | `od mcp install cursor` | | [VS Code + GitHub Copilot](https://github.com/features/copilot) | ✅ Unterstützt | `od mcp install copilot` | | [GitHub Copilot CLI](https://github.com/features/copilot/cli) | ✅ Unterstützt | `od mcp install copilot` | | [OpenCode](https://opencode.ai/) | ✅ Unterstützt | `od mcp install opencode` | | [OpenClaw](https://github.com/openclaw/openclaw) | ✅ Unterstützt | `od mcp install openclaw` | | [Antigravity](https://antigravity.google) | ✅ Unterstützt | `od mcp install antigravity` | | [Cline](https://github.com/cline/cline) | ✅ Unterstützt | `od mcp install cline` | | [Trae](https://www.trae.ai/) | ✅ Unterstützt | `od mcp install trae` | | [Kimi CLI](https://github.com/MoonshotAI/kimi-cli) | ✅ Unterstützt | `od mcp install kimi` | | [Kiro](https://kiro.dev) | ✅ Unterstützt | `od mcp install kiro` | | [Pi Agent](https://github.com/badlogic/pi-mono) | ✅ Unterstützt | `od mcp install pi` | | [Mistral Vibe CLI](https://github.com/mistralai/mistral-vibe) | ✅ Unterstützt | `od mcp install vibe` | | [Hermes Agent](https://github.com/nousresearch/hermes-agent) | ✅ Unterstützt | `od mcp install hermes` | `od mcp install --print` für eine Trockenlauf-Vorschau · `--uninstall` zum Entfernen · vollständige Liste mit `od mcp install --help`.

**Kein CLI installiert?** Der BYOK-Proxy unter `POST /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream` gibt dir dieselbe Schleife (ohne Prozess-Spawn) — füge `baseUrl` + `apiKey` + `model` ein, mit Unterstützung für OpenAI, Anthropic, Azure OpenAI, Google Gemini, Ollama, LM Studio, vLLM oder jeden OpenAI-kompatiblen Endpunkt. Pro-Ziel-SSRF-Schutz blockiert interne IPs / Link-Local / CGNAT am Daemon-Rand. Runtime-Definitionen liegen unter [`apps/daemon/src/runtimes/defs/`](../../apps/daemon/src/runtimes/defs/) und werden in `runtimes/registry.ts` registriert. Ein neuer Parser ist nur für ein neues Wire-Format nötig — siehe [`docs/agent-adapters.md`](../../docs/agent-adapters.md). --- ## Demo Vier zentrale Produktkategorien, alle von einem Coding-Agent gerendert, der auf deinem Laptop läuft. Klicke auf eine Miniaturansicht, um das echte Beispiel zu sehen. ### 1 · Prototypen — Web · Desktop · Mobile Die Standard-Ausgabefläche. Einseitige HTML-Artefakte, die deine `DESIGN.md` lesen und in einem Sandboxed iframe rendern.

Web-Prototyp — ein redaktionelles Dashboard mit Scrollbalken, KPIs und Diagrammen. Direkt aus design-templates/dating-web/ gerendert.

Mobile-App-Prototyp — ein dreibildschirmiger, gamifizierter Flow mit XP-Bändern und Quest-Detail. Direkt an Cursor / Codex / Claude Code übergeben, um ihn in React/Next/Vue umzuwandeln.

### 2 · Live-Artefakte & Dashboards Live-Dashboards, Entscheidungsräume, KPI-Wände — einseitige Artefakte, die Daten über ein Tweaks-Panel ziehen und an Ort und Stelle editierbar bleiben.

Live-Dashboard — eine editierbare KPI-Wand, deren Tweaks-Panel die Parameter offenlegt, die sich zu justieren lohnen. Der Agent gibt ein Manifest aus, und der iframe rendert ohne Neuladen neu.	Entscheidungsraum — ein Mehrquellen-Briefing-Artefakt für Produkt- / Forschungs- / Ops-Meetings.
Dashboard im GitHub-Stil — Repo-Metriken, präsentiert als Live-Artefakt.	Flow-Live-Dashboard-Vorlage — eine domänenspezifische KPI-Vorlage, gebrandet durch die aktive DESIGN.md.

### 3 · Präsentationen — Magazin-Decks, Wochen-Updates, Pitches

Deck-Modus (guizang-ppt) — Magazin-Layouts, WebGL-Hero, P0/P1/P2-Checklisten. Wortgetreu gebündelt aus op7418/guizang-ppt-skill unter Beibehaltung der ursprünglichen Lizenz.

Deck im Swiss-International-Stil — rasterverankert, monochrome Akzente. Eines von 15 Deck-Vorlagen und 36 Themes unter design-templates/html-ppt-*/.

Jedes Deck exportiert als **HTML** (einzelne Datei, eingebettete Assets), **PDF** (Browser-Druck, deck-bewusst), **PPTX** (agentengesteuerter Skill), **ZIP** (Archiv) oder **Markdown**. ### 4 · Bilder — `gpt-image-2`, ImageRouter, eigene API

Illustrierte Stadt-Food-Karte Handgezeichnetes redaktionelles Reiseplakat

Filmische Aufzugszene Redaktionelles Einzelbild-Still

Cyberpunk-Porträt Profil-Avatar — Neon-Gesichtstext

3D-Steintreppe Infografik aus behauenem Stein

Glamouröses Porträt Redaktionelle Studioaufnahme

**93 sofort reproduzierbare Prompts** liegen in [`prompt-templates/`](../../prompt-templates/) — Vorschau-Miniaturen, vollständiger Prompt-Text, Zielmodell, Seitenverhältnis und Quellenangabe. Ein Klick legt ein Briefing in den Composer. ### 5 · Video & HyperFrames — agent-native Motion-Graphics **[HyperFrames][hyperframes]** ist HeyGens quelloffenes, agent-natives Video-Framework, integriert als vollwertiger Bestandteil von OpenDesign. Der Agent schreibt HTML + CSS + GSAP, und HyperFrames rendert es über headless Chrome + FFmpeg zu einem deterministischen MP4. Kombiniere es mit **Seedance 2.0** für filmisches t2v / i2v, **Veo 3 / Sora 2 / Kling 2** für geroutete Modellvarianten und **Suno v5 / Lyria 2** für die Audioebene.

30s SaaS-Produkt-Promo · 16:9 · UI-3D-Reveals	TikTok-Karaoke-Talking-Head · 9:16 · TTS + wortsynchrone Untertitel	30s Brand-Sizzle-Reel · 16:9 · audioreaktive kinetische Typografie	Balkendiagramm-Rennen · 16:9 · Daten-Infografik im NYT-Stil
Flugkarte · 16:9 · Routen-Reveal im Apple-Stil	4s filmisches Logo-Outro · 16:9 · stückweise Montage + Bloom	$0 → $10K Geldzähler · 9:16 · Hype im Apple-Stil	Website-zu-Video · 16:9 · erfasst die Website in 3 Viewports

11 HyperFrames-Vorlagen + 39 Seedance-Prompts werden mit dem Repo ausgeliefert. Katalog-Miniaturen © HeyGen; das Framework ist Apache-2.0. Der OD-spezifische Render-Workflow (Kompositions-Cache, sandbox-exec-Workaround, MP4-als-Chip) ist in [`design-templates/hyperframes/`](../../design-templates/hyperframes/) detailliert beschrieben. [hyperframes]: https://github.com/heygen-com/hyperframes --- ## Warum OpenDesign > **Im April 2026 veröffentlichte Anthropic Claude Design — das erste Mal, dass ein LLM aufhörte, Prosa zu schreiben, und begann, Design-Artefakte direkt auszuliefern.** Es ging viral. Aber es blieb closed-source, nur kostenpflichtig, nur cloudbasiert, gebunden an Anthropics Modell, Anthropics Skills, Anthropics Oberfläche. Kein Checkout, kein Self-Hosting, kein Vercel-Deploy, kein eigener Agent zum Einsetzen. OpenDesign (OD) ist die quelloffene Alternative. Dieselbe Schleife, dasselbe artefakt-zentrierte mentale Modell, ohne den Lock-in: - 🤖 **Agent-native, modellunabhängig.** Wir liefern keinen Agent. Die `claude` / `codex` / `cursor-agent` / `copilot` / `hermes` / `kimi`, die bereits in deinem `PATH` liegen, sind die Design-Engine. Mit einem Klick wechseln. - 🧠 **Markenreif von Haus aus.** Jedes Rendering liest die `DESIGN.md` des aktiven Pakets als zentralen Markenvertrag. 151 Designsystem-Pakete werden mit dem Repo ausgeliefert; ältere Pakete können nur aus `DESIGN.md` bestehen, neuere zusätzlich `manifest.json`, `tokens.css`, Komponenten, Assets und Herkunftsangaben enthalten. Lege einen Ordner ab, der Picker findet ihn. - 🖥️ **Local-first, BYOK auf jeder Ebene.** Native Desktop-Apps bleiben local-first, ohne Cloud-Roundtrip. Bevor Sie Daemon-Datenpfade beschreiben, MÜSSEN Sie `AGENTS.md` im Repository-Stamm lesen, Abschnitt **Daemon data directory contract**. - 🌍 **Komponierbar auf vier Ebenen.** **Plugins** tragen lauffähige Workflows · funktionale **Skills** tragen Agent-Verhalten · **Designvorlagen** tragen Rendering-Blaupausen · **Designsysteme** tragen die Marke. Alle vier verwenden portable, versionierbare Verzeichnisse, die jeder erstellen und veröffentlichen kann. - 🔁 **Eine bestehende Codebasis auffrischen.** Übergib dem Agent ein `git`-Repo + `DESIGN.md`, und er refaktoriert deine echten Komponenten auf die Markenvorgabe. Dedizierte Plugins migrieren Figma- / Pencil-Workflows in React- / Next.js- / Vue-Code. - 🔒 **Datenschutz aus Überzeugung.** Alles läuft dort, wo deine Daten liegen — dein Laptop, der Server deines Teams, dein Vercel-Projekt. Wenn das Netzwerk gebraucht wird, ist der BYOK-Proxy SSRF-geschützt. ### Vergleich | | Claude Design | Figma | Lovable / v0 / Bolt | **OpenDesign** | |---|---|---|---|---| | Open Source | ❌ | ❌ | ❌ | **✅ Apache-2.0** | | Self-Hosting / Desktop | ❌ | ❌ | ❌ | **✅ macOS + Windows + Docker** | | Agent-native (läuft in deinem CLI) | Nur Anthropic | ❌ | Nur Cloud-Agent | **✅ 25 CLIs + BYOK** | | Markenreife `DESIGN.md` | Proprietär | Theme-JSON | Begrenzte Tokens | **✅ 151 Systeme ausgeliefert** | | Skills / Plugins / Vorlagen | Geschlossen | Plugin-Store | Geschlossen | **✅ 100+ funktionale Skills · separater Rendering-Vorlagenkatalog · 277 Plugins** | | HyperFrames (HTML→MP4) | ❌ | ❌ | ❌ | **✅ Vollwertig** | | Bestehendes Repo auf Marke auffrischen | ❌ | ❌ | ❌ | **✅ via Agent + `DESIGN.md`** | | Mindestabrechnung | Pro / Max / Team | Pro / Org | Pro / Team | **BYOK · jeder kompatible Endpunkt** | --- ## Schnellstart ### 🖥️ Die Desktop-App herunterladen (empfohlen — keine Konfiguration) Der schnellste Weg, OpenDesign zu nutzen. Kein Node, kein pnpm, kein Klonen. - **macOS** (Apple Silicon · Intel x64) → [**open-design.ai**](https://open-design.ai/) oder [GitHub Releases](https://github.com/nexu-io/open-design/releases) - **Windows** (x64) → [**open-design.ai**](https://open-design.ai/) oder [GitHub Releases](https://github.com/nexu-io/open-design/releases) - **Linux** (AppImage, optionale Spur) → [GitHub Releases](https://github.com/nexu-io/open-design/releases) Nach der Installation erkennt die App jedes Coding-Agent-CLI in deinem `PATH` und lädt 100+ funktionale Skills, den separaten Rendering-Vorlagenkatalog und 151 Designsystem-Pakete. ### 🤖 In deinen Coding-Agent installieren (keine UI) Du kannst OpenDesign nutzen, ohne jemals die GUI zu öffnen — rufe es als Skill, Plugin oder MCP-Server innerhalb von Claude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, Hermes, Kimi und mehr auf. ```bash # One-line install into the agent you're using: od mcp install # = claude | codex | reasonix | raven | cursor | copilot | openclaw | antigravity # | pi | vibe | hermes | cline | kimi | kiro | trae | opencode ``` Dann, innerhalb des Agents: ``` > Use open-design to generate a landing page with the Linear design system ``` In einem dateisystemgestützten lokalen CLI-Lauf kombiniert der Agent den gewählten funktionalen Skill oder die Designvorlage mit deiner `DESIGN.md`, schreibt die kanonischen Projektdateien und OpenDesign zeigt diese Dateien an. Ein BYOK-/Plain-API-Lauf ohne Dateisystemwerkzeuge gibt stattdessen genau einen vollständigen ``-Block zurück. ### 🐳 Mit Docker ausführen ```bash git clone https://github.com/nexu-io/open-design.git cd open-design/deploy cp .env.example .env echo "OD_API_TOKEN=$(openssl rand -hex 32)" >> .env docker compose up -d # open http://localhost:7456 ``` ### 🚀 Auf Sealos bereitstellen [](https://sealos.io/products/app-store/open-design/) Die Sealos-App-Store-Vorlage führt das veröffentlichte Open-Design-Docker-Image mit persistentem Workspace-Speicher und Basic Auth am öffentlichen Proxy aus. Folgen Sie für eigene öffentliche oder gemeinsam genutzte Docker-Deployments den Reverse-Proxy- und `OPEN_DESIGN_ALLOWED_ORIGINS`-Hinweisen in [`deploy/README.md`](../../deploy/README.md#local-compose). ### 🧑‍💻 Aus dem Quellcode ausführen ```bash git clone https://github.com/nexu-io/open-design.git cd open-design corepack enable && pnpm install pnpm tools-dev run web ``` Öffne die von `tools-dev` ausgegebene URL; Entwicklungsports werden dynamisch vergeben, sofern keine Port-Flags angegeben sind. Node `~24`, pnpm `10.33.x`. Windows-Nutzer, siehe [`docs/windows-troubleshooting.md`](../../docs/windows-troubleshooting.md). Vollständiger Schnellstart, Umgebungsvariablen, Nix-Flake und der gepackte Build-Ablauf → [`QUICKSTART.de.md`](QUICKSTART.de.md). ### Ein vollständiger Workflow — vom Briefing zum Artefakt `brief → plugin → direction → design system → artifact → handoff → memory` 1. **Ein PM reicht ein Briefing ein.** Der Plugin-Picker bietet Landingpage · Pitch-Deck · Dashboard · Social-Post · PM-Spec · OKR-Scorecard… 2. **Ein Designer (oder der Agent) legt die Richtung fest.** Keine Marke? Wähle aus 5 kuratierten Richtungen. Du hast eine Marke? Lege einen Screenshot / eine URL ab → der Agent verbindet GitHub, importiert Figma und kodifiziert eine wiederverwendbare `DESIGN.md`. 3. **Der Agent erstellt das erste Ergebnis.** Plugin + funktionaler Skill oder Designvorlage + `DESIGN.md` sind gebunden. Dateisystemgestützte CLI-Läufe schreiben kanonische Projektdateien; BYOK-/Plain-API-Läufe ohne Dateiwerkzeuge liefern einen vollständigen ``-Block. 4. **Übergabe an das Engineering.** Das Artefakt ist echtes HTML/CSS — lege es in Cursor, Codex oder Claude Code, um als Code weiterzubauen. Oder exportiere PPTX / PDF / MP4 direkt ins Marketing. 5. **OpenDesign wird mit der Nutzung klüger.** Deine Screenshots, Schriften, Farbpaletten und bestätigten Artefakte sammeln sich als Voreinstellungen für die nächste Sitzung an. Weniger Nacharbeit, weniger Drift. --- ## OpenDesign aus deinem Coding-Agent nutzen OpenDesign liefert einen **stdio-MCP-Server** und **Installationsskripte pro Agent** aus. Jeder MCP-kompatible Agent in einem anderen Repo kann Dateien aus deinen lokalen Open-Design-Projekten direkt lesen — Token-CSS, JSX-Komponenten, Einstiegs-HTML — als eine strukturierte, nach Namen abfragbare API. Der Agent sieht immer die Live-Datei, nicht einen veralteten Export. ```bash # One-line install (16+ CLIs supported): od mcp install # Then the agent can: od project list --json od files list --json od files read od plugin list --json od skills list --json ``` **Warum MCP?** Bei jeder Iteration ein ZIP zu exportieren und neu anzuhängen, bricht den Flow. MCP legt die Designquelle direkt offen — der Agent sieht immer die Live-Datei. **Für einen Agent, der bei null startet,** platziert der Installer `~/.config//open-design.json` (oder das Plattform-Äquivalent) plus ein Copy-Paste-MCP-Snippet. Cursor bekommt einen Ein-Klick-Deeplink; Claude Code bekommt einen `claude mcp add-json`-Einzeiler; jeder andere Agent bekommt JSON in dem Schema, das seine Konfiguration erwartet. Vollständiger Ablauf pro Agent → **Settings → MCP server** in der Desktop-App, oder [`docs/agent-adapters.md`](../../docs/agent-adapters.md). **Sicherheitsmodell.** Standardmäßig schreibgeschützt, der Daemon bindet an `127.0.0.1`, und SSRF wird am Proxy-Rand blockiert. LAN-Freigabe erfordert ein explizites `OD_BIND_HOST` plus `OD_ALLOWED_ORIGINS`. Connector-Anmeldedaten und Live-Artefakt-Vorschau-Routen bleiben unabhängig davon nur über Loopback erreichbar. --- ## Skills und Designvorlagen **100+ funktionale Skills liegen in [`skills/`](../../skills/)**. Sie folgen der Agent-Skills-Konvention [`SKILL.md`][skill] und liefern wiederverwendbares Agent-Verhalten, Referenzen oder Werkzeuge. Renderbare Starter liegen getrennt in [`design-templates/`](../../design-templates/); sie können ebenfalls `SKILL.md` verwenden, erscheinen aber im Designvorlagen-Katalog statt in der funktionalen Skill-Registry. Zwei **Modi** verankern den Designvorlagen-Katalog: `prototype` (einseitige Web-/Mobile-/Desktop-Artefakte) und `deck` (Präsentationen mit horizontalem Wischen). Weitere Vorlagen decken `image`, `video`, `audio` und Utility-Oberflächen ab. Das Feld **`scenario`** gruppiert sie nach Zielgruppe. | Designvorlage | Modus | Szenario | Was sie erzeugt | |---|---|---|---| | [`web-prototype`](../../design-templates/web-prototype/) | prototype | design | Standard-Landingpage / Hero | | [`saas-landing`](../../design-templates/saas-landing/) | prototype | marketing | Hero / Features / Pricing / CTA | | [`dashboard`](../../design-templates/dashboard/) | prototype | operation | Admin / Analytics (mit Sidebar) | | [`mobile-app`](../../design-templates/mobile-app/) | prototype | design | iPhone 15 Pro / Pixel-gerahmte App | | [`mobile-onboarding`](../../design-templates/mobile-onboarding/) | prototype | design | Splash · Value-Prop · Anmelde-Flow | | [`social-carousel`](../../design-templates/social-carousel/) | prototype | marketing | 3-Karten-1080×1080-Karussell | | [`email-marketing`](../../design-templates/email-marketing/) | prototype | marketing | Tabellen-fallback-sichere Marken-E-Mail | | [`magazine-poster`](../../design-templates/magazine-poster/) | prototype | marketing | Einseitiges Magazin-Layout | | [`motion-frames`](../../design-templates/motion-frames/) | prototype | marketing | Loopendes CSS-Motion-Hero | | [`sprite-animation`](../../design-templates/sprite-animation/) | prototype | marketing | 8-Bit-Pixel-animierter Explainer | | [`pm-spec`](../../design-templates/pm-spec/) | prototype | product | PM-Spec-Dokument (mit Inhaltsverzeichnis + Entscheidungsprotokoll) | | [`team-okrs`](../../design-templates/team-okrs/) | prototype | product | OKR-Scorecard | | [`eng-runbook`](../../design-templates/eng-runbook/) | prototype | engineering | Incident-Runbook | | [`finance-report`](../../design-templates/finance-report/) | prototype | finance | Finanz-Zusammenfassung für die Führungsebene | | [`hr-onboarding`](../../design-templates/hr-onboarding/) | prototype | hr | Rollen-Onboarding-Plan | | [`guizang-ppt`](../../design-templates/guizang-ppt/) | deck | marketing | Web-PPT im Magazin-Stil (Deck-Standard) | | [`html-ppt-*`](../../design-templates/) | deck | marketing | 15 Deck-Vorlagen × 36 Themes (Master-Vorlage in [`design-templates/html-ppt/`](../../design-templates/html-ppt/)) | | [`hyperframes`](../../design-templates/hyperframes/) | video | marketing | HTML → MP4 Motion-Graphics (HeyGen-OSS-Framework) | | [`critique`](../../design-templates/critique/) | utility | design | Fünfdimensionale Selbstkritik-Scorekarte | | [`tweaks`](../../design-templates/tweaks/) | utility | design | KI-ausgegebenes Tweaks-Panel-Manifest | Protokoll und Verzeichnisaufteilung → [`docs/skills-protocol.md`](../../docs/skills-protocol.md). Registry-Endpunkte: `GET /api/skills` für funktionale Skills und `GET /api/design-templates` für Rendering-Vorlagen. --- ## Designsysteme **151 markenreife Designsystem-Pakete mit `DESIGN.md` als Kern** werden mit dem Repo ausgeliefert. Legacy-Pakete können nur diesen Markdown-Vertrag enthalten; neuere Pakete können zusätzlich `manifest.json`, kompiliertes `tokens.css`, Komponenten-Fixtures, Assets und Provenienzbelege tragen. Der Katalog mischt aus Upstreams abgeleitete Systeme mit projekteigenen Ergänzungen; [`design-systems/README.md`](../../design-systems/README.md) dokumentiert Paketform und Herkunft.

Vollständiger Katalog (zum Aufklappen klicken)

**AI & LLM** — `claude` · `cohere` · `mistral-ai` · `minimax` · `together-ai` · `replicate` · `runwayml` · `elevenlabs` · `ollama` · `x-ai` **Developer Tools** — `cursor` · `vercel` · `linear-app` · `framer` · `expo` · `clickhouse` · `mongodb` · `supabase` · `hashicorp` · `posthog` · `sentry` · `warp` · `webflow` · `sanity` · `mintlify` · `lovable` · `composio` · `opencode-ai` · `voltagent` **Productivity** — `notion` · `figma` · `miro` · `airtable` · `superhuman` · `intercom` · `zapier` · `cal` · `clay` · `raycast` **Fintech** — `stripe` · `coinbase` · `binance` · `kraken` · `mastercard` · `revolut` · `wise` **E-commerce** — `shopify` · `airbnb` · `uber` · `nike` · `starbucks` · `pinterest` **Media** — `spotify` · `playstation` · `wired` · `theverge` · `meta` **Automotive** — `tesla` · `bmw` · `ferrari` · `lamborghini` · `bugatti` · `renault` **Other** — `apple` · `ibm` · `nvidia` · `vodafone` · `resend` · `spacex` **Starters** — `default` (Neutral Modern) · `warm-editorial`

Importiere die Bibliothek erneut über [`scripts/sync-design-systems.ts`](../../scripts/sync-design-systems.ts). Eigene Marke hinzufügen → lege eine `DESIGN.md` in `design-systems//` ab. Vollständige Anleitung → [`design-systems/README.md`](../../design-systems/README.md). [acd2]: https://github.com/VoltAgent/awesome-design-md --- ## Plugins **277 offizielle Plugins plus 183 remixbare Referenzbeispiele** liegen in [`plugins/_official/`](../../plugins/_official/). Jeder Eintrag ist ein portables Plugin-Verzeichnis mit `open-design.json` und dem typspezifischen Payload, etwa `SKILL.md` für Agent-Workflows, `template.json` für Medienvorlagen oder `DESIGN.md` für Designsystem-Einträge. | Kategorie | Anzahl | Inhalt | |---|---|---| | [`scenarios/`](../../plugins/_official/scenarios/) | 13 | Vollständige Design-Szenarien — [`od-default`](../../plugins/_official/scenarios/od-default/), [`od-design-refine`](../../plugins/_official/scenarios/od-design-refine/), [`od-figma-migration`](../../plugins/_official/scenarios/od-figma-migration/), [`od-code-migration`](../../plugins/_official/scenarios/od-code-migration/), [`od-react-export`](../../plugins/_official/scenarios/od-react-export/), [`od-nextjs-export`](../../plugins/_official/scenarios/od-nextjs-export/), [`od-vue-export`](../../plugins/_official/scenarios/od-vue-export/), [`od-media-generation`](../../plugins/_official/scenarios/od-media-generation/), [`od-new-generation`](../../plugins/_official/scenarios/od-new-generation/), [`od-tune-collab`](../../plugins/_official/scenarios/od-tune-collab/), [`od-plugin-authoring`](../../plugins/_official/scenarios/od-plugin-authoring/), [`od-share-to-community`](../../plugins/_official/scenarios/od-share-to-community/), [`od-web-effect-extractor`](../../plugins/_official/scenarios/od-web-effect-extractor/) | | [`image-templates/`](../../plugins/_official/image-templates/) | 45 | One-Shot-Bild-Prompts — redaktionell, filmisch, Produkt, Porträt | | [`video-templates/`](../../plugins/_official/video-templates/) | 63 | HyperFrames- / Seedance- / Veo-Motion-Vorlagen | | [`design-systems/`](../../plugins/_official/design-systems/) | 143 | Marken-`DESIGN.md` als Plugins verpackt | | [`atoms/`](../../plugins/_official/atoms/) | 13 | Wiederverwendbare UI-Fragmente (Buttons, Heroes, KPI-Karten) | | [`examples/`](../../plugins/_official/examples/) | 183 | Neu kombinierbare Referenz-Ausgaben | Außerdem [`plugins/community/`](../../plugins/community/) für Community-Plugins und [`plugins/registry/`](../../plugins/registry/) für den Veröffentlichungsablauf. ### Was Plugins können - 🤖 **In jedem Coding-Agent laufen** — [Claude Code](../../docs/agent-adapters.md), Codex, Cursor, Copilot, [OpenClaw](https://github.com/openclaw/openclaw), [Antigravity](https://antigravity.google), Hermes, Kimi… über dasselbe Skill-Protokoll, das der Agent bereits kennt. - 🔁 **Figma- / Pencil-Workflows migrieren** → React-, Next.js- oder Vue-Quellcode. Siehe [`od-figma-migration`](../../plugins/_official/scenarios/od-figma-migration/). - 🛠️ **Eine bestehende Codebasis auf eine Markenvorgabe auffrischen** — richte ein Plugin auf ein `git`-Repo + `DESIGN.md`, erhalte einen PR. Siehe [`od-code-migration`](../../plugins/_official/scenarios/od-code-migration/). - 💾 **Eigene Workflows beibehalten** — die wiederverwendbaren Vorlagen deines Teams liegen neben den mitgelieferten. ### Plugins verwenden Plugins sind im **Web-UI** und im **`od`-CLI** voll gleichwertig — dieselben `/api/plugins`-Endpunkte, wähle, was passt. **In der Desktop- / Web-App:** öffne die **Plugin**-Seite, um den Marktplatz zu durchsuchen, und klicke auf **Install**; im Studio eines Projekts erscheinen Plugins als Composer-Chips, die du zum Anwenden klickst (mit den von ihnen deklarierten Eingaben). **Auf der Kommandozeile** (läuft ohne UI — dies ist der Weg, den externe Agents nutzen): ```bash od plugin list # list installed plugins (--task-kind / --mode / --tag filters) od plugin search "landing page" # search by keyword od plugin info od-default # inspect a plugin's metadata, inputs, capabilities od plugin install od-figma-migration # install from a registry; also accepts ./local-folder or an https://… link od plugin apply od-default --input brief="a one-page pitch for our seed round" od plugin upgrade od-default # upgrade od plugin uninstall od-default # uninstall ``` Jeder Befehl unterstützt `--json`, sodass du ihn über `jq` / `xargs` in Automatisierungen leiten kannst. ### Ein Plugin bauen Ein Open-Design-Plugin benötigt `open-design.json` plus den Payload seines Typs. Workflow-Skills und Szenarien enthalten zusätzlich `SKILL.md`; andere Plugin-Typen verwenden ihren eigenen Payload: ``` my-plugin/ ├── open-design.json ← required: marketplace metadata + inputs + pipeline + capabilities ├── SKILL.md ← required for agent-skill/scenario entries; omit for other plugin types ├── README.md ← optional: usage, install, registry links ├── preview/ ← optional: index.html / poster.png (strongly recommended for visual plugins) └── examples/ ← optional: concrete use cases ``` Zentrale `open-design.json`-Felder sind `specVersion`, `name`, `version`, das optionale `compat.agentSkills[].path` für Einträge, die einen Agent Skill bereitstellen, sowie `od.kind`, `od.taskKind`, `od.mode`, `od.capabilities[]` und `od.inputs[]`. Lokal scaffolden + validieren: ```bash od plugin scaffold --id my-plugin --title "My Plugin" # generate the skeleton od plugin validate ./my-plugin # check manifest / file layout pnpm guard && pnpm --filter @open-design/plugin-runtime typecheck ``` Vollständiger Feldsatz und Laufzeitvertrag → [`plugins/spec/SPEC.md`](../../plugins/spec/SPEC.md); ein Plugin mit einem Coding-Agent entwickeln → [`plugins/spec/AGENT-DEVELOPMENT.md`](../../plugins/spec/AGENT-DEVELOPMENT.md); minimale Copy-Paste-Vorlagen → [`plugins/spec/examples/`](../../plugins/spec/examples/). ### Ein Plugin beitragen 1. Lege den Plugin-Ordner in [`plugins/community/`](../../plugins/community/) (Drittanbieter-Plugins) ab, oder — um es gebündelt mit OpenDesign auszuliefern — in die passende Stufe von [`plugins/_official/`](../../plugins/_official/). 2. Bestehe die Validierung: `od plugin validate`, `pnpm guard`, `pnpm --filter @open-design/plugin-runtime typecheck`. 3. Fülle den PR mithilfe der Vorlage in [`plugins/spec/CONTRIBUTING.md`](../../plugins/spec/CONTRIBUTING.md) (ID, Version, Spur, Modus, Capabilities, Trigger-Beispiele; füge für visuelle Plugins einen Screenshot / eine Vorschau bei). 4. Um in einer externen Registry zu veröffentlichen (skills.sh / ClawHub / eigenständiges GitHub) → [`plugins/spec/PUBLISHING-REGISTRIES.md`](../../plugins/spec/PUBLISHING-REGISTRIES.md). Plugin-Registry-Endpunkt: `GET /api/plugins`. Verzeichnisübersicht → [`plugins/README.md`](../../plugins/README.md) ([简体中文](../../plugins/README.zh-CN.md)). --- ## Architektur ``` ┌────────────────── browser (Next.js 16) / Electron shell ──────────────┐ │ chat · file workspace · iframe preview · settings · import · MCP │ └──────────────┬─────────────────────────────────────┬─────────────────┘ │ /api/* │ ▼ ▼ ┌─────────────────────────────────┐ /api/proxy/{provider}/stream (SSE) │ local daemon (Express+SQLite) │ ─→ any OpenAI-compatible BYOK, │ │ SSRF-guarded at the edge │ /api/skills /api/design-templates /api/plugins │ │ /api/design-systems │ │ /api/chat (SSE) /api/proxy/* │ │ /api/projects/:id/files/... │ │ /api/artifacts/{save,lint} │ │ /api/import/claude-design │ │ MCP stdio server │ └─────────┬───────────────────────┘ │ spawn(cli, [...], { cwd: managed project cwd }) ▼ ┌──────────────────────────────────────────────────────────────────┐ │ Local runtime definitions come from runtimes/registry.ts; │ │ the base registry has 26 definitions (including byok-opencode), │ │ backed by 25 distinct local CLI executables because byok-opencode shares │ │ the OpenCode executable. See docs/agent-adapters.md. │ │ composes a functional skill or design template + DESIGN.md; writes files │ └──────────────────────────────────────────────────────────────────┘ ``` | Ebene | Stack | |---|---| | Frontend | Next.js 16 App Router + React 18 + TypeScript | | Daemon | Node 24 · Express · SSE-Streaming · `better-sqlite3` | | Speicher | Bevor Sie Daemon-Speicherpfade ändern oder dokumentieren, MÜSSEN Sie `AGENTS.md` im Repository-Stamm lesen, Abschnitt **Daemon data directory contract**. Dieses README DARF ihn NICHT wiederholen. | | Vorschau | Dateisystemläufe rendern kanonische Projektdateien; BYOK-/Plain-API-Läufe parsen einen vollständigen ``-Block in ein Sandbox-`srcdoc`-iframe | | Export | HTML (eingebettet) · PDF (Browser-Druck) · PPTX (agentengesteuert) · ZIP · Markdown · MP4 (HyperFrames) | | Desktop | Electron-Shell + Sandboxed Renderer + Sidecar-IPC (STATUS · EVAL · SCREENSHOT · CONSOLE · CLICK · SHUTDOWN) | | Lebenszyklus | Ein Einstiegspunkt: `pnpm tools-dev` (start / stop / run / status / logs / inspect / check) | Vollständige Architektur → [`docs/architecture.md`](../../docs/architecture.md). Skill-Protokoll → [`docs/skills-protocol.md`](../../docs/skills-protocol.md). Agent-Adapter-Vertrag → [`docs/agent-adapters.md`](../../docs/agent-adapters.md). --- ## Roadmap - [x] Daemon + 26 Runtime-Definitionen über 25 unterschiedliche Coding-Agent-CLI-Programme + Skill-/Designvorlagen-Registries + Designsystem-Katalog - [x] Web-App + Chat + Frageformular + 5-Richtungs-Picker + To-do-Fortschritt + Sandboxed Vorschau - [x] 100+ funktionale Skills · separater Rendering-Vorlagenkatalog · 151 Designsystem-Pakete · 5 visuelle Richtungen · 5 Geräterahmen - [x] SQLite-gestützte Projekte · Konversationen · Nachrichten · Tabs · Vorlagen - [x] Multi-Provider-BYOK-Proxy (`/api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream`) + SSRF-Schutz - [x] Claude Design ZIP-Import (`/api/import/claude-design`) - [x] Sidecar-Protokoll + Electron-Desktop + IPC-Automatisierung - [x] Artefakt-Lint-API + 5-dimensionales Selbstkritik-Pre-Emit-Gate - [x] **0.8.0** — Plugin-Marktplatz-Infrastruktur (261 offizielle Plugins, Manifest-Spezifikation, Installationsskripte pro Agent) - [x] **0.9.0** — OpenDesign Cloud (offizieller Model Router in die App integriert: keine Konfiguration, Ein-Klick-Anmeldung) - [x] Gepackte Electron-Builds — macOS (Apple Silicon + Intel) + Windows (x64) + Linux-AppImage (optionale Spur) - [ ] Kommentar-Modus für chirurgische Bearbeitungen — teilweise ausgeliefert; zuverlässiges gezieltes Patchen in Arbeit - [ ] KI-ausgegebenes Tweaks-Panel-UX — noch nicht implementiert - [ ] `npx od init` zum Scaffolden eines Projekts mit `DESIGN.md` - [ ] Plugin-SDK + `od plugin {add,list,remove,test,publish}`-CLI - [ ] Figma- / Pencil- → React- / Next- / Vue-Migrations-Plugins (Alpha) - [ ] Plugin zum Auffrischen einer bestehenden Codebasis (auf ein git-Repo + `DESIGN.md` gerichtet) Phasenweise Auslieferung → [`docs/roadmap.md`](../../docs/roadmap.md). --- ## Community Hinter jedem Kanal stehen echte Menschen. - 💬 **Discord** — täglicher Chat, Plugin-Sharing, Fragen → [**discord.gg/mHAjSMV6gz**](https://discord.gg/mHAjSMV6gz) - 🐦 **X / Twitter** — Release-Notes, Meilensteine, Hinter-den-Kulissen → [**@OpenDesignHQ**](https://x.com/OpenDesignHQ) - 🗣️ **GitHub Discussions** — tiefe Q&A, RFCs, „show your work" → [**Discussions**](https://github.com/nexu-io/open-design/discussions) - 🐛 **GitHub Issues** — Fehlerberichte, Feature-Wünsche → [**Issues**](https://github.com/nexu-io/open-design/issues) Die Labels [`good-first-issue`](https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) und [`help-wanted`](https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22) sind der einfachste Einstieg. --- ## Mitwirken OpenDesign kommt voran, weil Mitwirkende — Designer, Ingenieure, Prompt-Autoren — immer wieder auftauchen. Viele der meistgenutzten Skills, Designsysteme und Plugins wurden von Menschen außerhalb des Kernteams geschrieben. ### 🎯 Wo anfangen (maximaler Hebel, minimale Änderung) | Du willst … ausliefern | Wie | Wo | |---|---|---| | Einen neuen **Skill** | Lege einen Ordner mit `SKILL.md` + `assets/` + `references/` ab | [`skills/`](../../skills/) · Spezifikation in [`docs/skills-protocol.md`](../../docs/skills-protocol.md) | | Ein neues **Designsystem** | Lege ein Paket mit `DESIGN.md` als Kern ab; ergänze bei Bedarf `manifest.json`, `tokens.css`, Komponenten, Assets oder Herkunftsangaben | [`design-systems//`](../../design-systems/) | | Ein neues **Plugin** | Lege `open-design.json` + den typspezifischen Payload unter einem Kategorie-Ordner ab | [`plugins/community/`](../../plugins/community/) · Spezifikation in [`plugins/spec/SPEC.md`](../../plugins/spec/SPEC.md) · Agent-Entwicklungsleitfaden in [`plugins/spec/AGENT-DEVELOPMENT.md`](../../plugins/spec/AGENT-DEVELOPMENT.md) | | Ein neues **Coding-Agent-CLI** unterstützen | Runtime-Definition + Registry-Eintrag; Parser nur bei neuem Wire-Format | [`apps/daemon/src/runtimes/defs/`](../../apps/daemon/src/runtimes/defs/) | | Einen Fehler beheben oder die UI verfeinern | Durchsuche das Label [`good-first-issue`](https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) | [Issues →](https://github.com/nexu-io/open-design/issues) | | Die Dokumentation übersetzen | Aktualisiere die `README..md`-Dateien | [`TRANSLATIONS.md`](../../TRANSLATIONS.md) | ### 🤖 Als Agent mitwirken Wenn *du der Agent bist, der dies liest*, ist der schnellste Weg: ```bash # 1. Boot locally git clone https://github.com/nexu-io/open-design.git cd open-design && corepack enable && pnpm install pnpm tools-dev run web # 2. Find a good-first-issue and assign yourself gh issue list --label "good first issue" --state open --limit 20 gh issue develop # create a branch and worktree # 3. Make the change, run the checks pnpm guard && pnpm typecheck pnpm --filter @open-design/ test # 4. Open the PR gh pr create --fill ``` Vollständiger agentenfreundlicher Beitragsablauf, Code-Stil und PR-Maßstab → [English](../../CONTRIBUTING.md) ([Deutsch](CONTRIBUTING.de.md) · [Français](CONTRIBUTING.fr.md) · [简体中文](CONTRIBUTING.zh-CN.md) · [日本語](CONTRIBUTING.ja-JP.md) · [Português](CONTRIBUTING.pt-BR.md)). ### 🏅 OpenDesign Fellow-Programm Wir rekrutieren weltweit **OpenDesign Fellows** — Fellows gestalten das Produkt gemeinsam mit dem Kernteam, vertreten OpenDesign offiziell in ihrer Region und lassen die Community vor Ort wachsen, unterstützt durch finanzielle Förderung ($1,000 / MR), kostenlose LLM-Credits und einen direkten Review-Track. Details → [`MAINTAINERS.md`](../../MAINTAINERS.md) und die Ankündigung auf [Discord](https://discord.gg/mHAjSMV6gz). --- ## Maintainer Sie tragen einen Großteil der Last — tägliche Wartung, Review und Community-Unterstützung.

@Nagendhra-web Maintainer

@Sid-Qin Maintainer

Maintainer-Regeln, Beförderungskriterien und das Ausstiegsprotokoll → [`MAINTAINERS.md`](../../MAINTAINERS.md) (auch [Deutsch](MAINTAINERS.de.md) · [Français](MAINTAINERS.fr.md) · [简体中文](MAINTAINERS.zh-CN.md) · [日本語](MAINTAINERS.ja-JP.md) · [Português](MAINTAINERS.pt-BR.md)). ## Mitwirkende Dank an alle, die teilgenommen haben — Code, Doku, Feedback, ein scharfsinniges Issue, einen neuen Skill, ein neues Designsystem. --- ## Repository-Aktivität Das obige SVG wird täglich von [`.github/workflows/metrics.yml`](../../.github/workflows/metrics.yml) mit [`lowlighter/metrics`](https://github.com/lowlighter/metrics) neu generiert. --- ## Gib uns einen Stern

Wenn dir das dreißig Minuten gespart hat, gib ihm ein ★. Sterne zahlen keine Miete — aber sie sagen dem nächsten Designer, Agent und Mitwirkenden, dass dieses Experiment ihre Aufmerksamkeit wert ist. Ein Klick, drei Sekunden, ein echtes Signal. --- ## Referenzen & Herkunft | Projekt | Rolle | |---|---| | Claude Design | Das Closed-Source-Produkt, zu dem dieses Repo die quelloffene Alternative ist. | | [`alchaincyf/huashu-design`](https://github.com/alchaincyf/huashu-design) | Der Design-Philosophie-Kompass — Junior-Designer-Workflow, Markenasset-Protokoll, Anti-AI-Slop-Checkliste, fünfdimensionale Kritik. | | [`op7418/guizang-ppt-skill`](https://github.com/op7418/guizang-ppt-skill) | Der Web-PPT-Skill im Magazin-Stil, wortgetreu gebündelt unter [`design-templates/guizang-ppt/`](../../design-templates/guizang-ppt/). Standard für den Deck-Modus. | | [`lewislulu/html-ppt-skill`](https://github.com/lewislulu/html-ppt-skill) | Die HTML-PPT-Studio-Familie — 15 Deck-Vorlagen, 36 Themes, 31 Seitenlayouts, Animations-Runtime, Magnetic-Card-Presenter-Modus. | | [`OpenCoworkAI/open-codesign`](https://github.com/OpenCoworkAI/open-codesign) | Die erste quelloffene Claude-Design-Alternative; UX-Muster, die wir übernehmen (Streaming-Artefakt-Schleife, Sandboxed iframe, Live-Agent-Panel). | | [`multica-ai/multica`](https://github.com/multica-ai/multica) | Die Daemon- + Adapter-Architektur — PATH-Scan-Agent-Erkennung, lokaler Daemon als einziger privilegierter Prozess. | | [`VoltAgent/awesome-design-md`](https://github.com/VoltAgent/awesome-design-md) | Historische Quelle des ursprünglichen 9-teiligen `DESIGN.md`-Schemas und von 70 upstream-abgeleiteten Systemen; heutige Pakete können diese Basis erweitern. | | [`bergside/awesome-design-skills`](https://github.com/bergside/awesome-design-skills) | Quelle der 57 Design-Skills, die unter `design-systems/` hinzugefügt wurden. | | [`heygen-com/hyperframes`](https://github.com/heygen-com/hyperframes) | Das HTML→MP4-Motion-Graphics-Framework, integriert als vollwertiges `hyperframes-html` in OpenDesign. | | [Claude Code skills][skill] | Die `SKILL.md`-Konvention, die wir wortgetreu übernehmen. | Detaillierte Herkunft → [`docs/references.md`](../../docs/references.md). [skill]: https://docs.anthropic.com/en/docs/claude-code/skills ## Lizenz Apache-2.0. Das gebündelte `design-templates/guizang-ppt/` behält seine ursprüngliche [LICENSE](../../design-templates/guizang-ppt/LICENSE) (MIT, [@op7418](https://github.com/op7418)). Das gebündelte `design-templates/html-ppt/` behält seine ursprüngliche [LICENSE](../../design-templates/html-ppt/LICENSE) (MIT, [@lewislulu](https://github.com/lewislulu)).