Open Design: Die quelloffene Alternative zu Claude Design

Website · Download · Model Router · Discord · @OpenDesignHQ folgen

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

Home — der zentrale Einstiegspunkt. Wähle einen Skill und ein Designsystem, tippe das Briefing und starte alles von einem Ort aus.

Automation — orchestriere sich wiederholende Design-Workflows zu wiederverwendbaren, planbaren Automatisierungen.	Design System — destilliere die DESIGN.md deines Teams zu einem Markenvertrag, der jede Ausgabe formt.
Plugin — durchsuche, installiere und verteile Workflow-Plugins, um die Generierung bei Bedarf zu erweitern.	Integrationen — verbinde externe Systeme und MCP-Tools und nutze Open Design aus jeder IDE, jedem Skript oder jeder Automatisierung.

Prototyp — einseitige HTML-Artefakte, die dein Designsystem lesen und in einem Sandboxed iframe rendern, sofort vorschaubar und als Quellcode herunterladbar.	HyperFrame — programmatische Bewegung und animierte Grafiken, gerendert zu einem echten MP4 (z. B. 1920×1080 · 30fps).
Präsentation — Pitch-Decks, durch die du blättern, per Tastatur navigieren und als PPTX / PDF exportieren kannst.	Bild — markenreife Bilder und visuelle Assets, mit hochauflösender Generierung und Download.

` 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` | | [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` | | [Gemini CLI](https://github.com/google-gemini/gemini-cli) | ✅ Unterstützt | `od mcp install gemini` | | [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` | | [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. Der Adapter-Vertrag und die Stream-Parser liegen in [`apps/daemon/src/agents.ts`](../../apps/daemon/src/agents.ts). Ein neues CLI hinzuzufügen ist ein einziger Eintrag — 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.

Einstiegsansicht — wähle einen Skill, wähle ein Designsystem, tippe das Briefing. Eine Fläche für Prototypen, Dashboards, Präsentationen, Mobile-Apps, Magazinseiten.	Mobile-Prototyp — pixelgenaues iPhone 15 Pro-Chrome, mehrbildschirmige Flows. Der Agent zeichnet den Telefonrahmen nie neu; geteilte Geräterahmen liegen in assets/frames/.
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 Open Design. 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 Open Design > **Im April 2026 veröffentlichte Anthropic [Claude Design][cd] — 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. Open Design (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 aktive `DESIGN.md` — ein 9-teiliges Schema, das Farbpalette, Typografie, Abstände, Bewegung, Stimme und Anti-Patterns abdeckt. 150 Systeme werden mit dem Repo ausgeliefert (Linear, Stripe, Vercel, Airbnb, Apple, Tesla, Notion, Anthropic, Cursor, Supabase, Figma…). 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 drei Ebenen.** **Plugins** tragen lauffähige Workflows · **Skills** tragen den Design-Geschmack des Agents · **Designsysteme** tragen die Marke. Alle drei sind einfache Dateien, die jeder erstellen, versionieren 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][cd] | Figma | Lovable / v0 / Bolt | **Open Design** | |---|---|---|---|---| | Open Source | ❌ | ❌ | ❌ | **✅ Apache-2.0** | | Self-Hosting / Desktop | ❌ | ❌ | ❌ | **✅ macOS + Windows + Vercel** | | Agent-native (läuft in deinem CLI) | Nur Anthropic | ❌ | Nur Cloud-Agent | **✅ 21 CLIs + BYOK** | | Markenreife `DESIGN.md` | Proprietär | Theme-JSON | Begrenzte Tokens | **✅ 150 Systeme ausgeliefert** | | Skills / Plugins / Vorlagen | Geschlossen | Plugin-Store | Geschlossen | **✅ 100+ Skills · 261 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, Open Design 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: Die App erkennt automatisch jedes Coding-Agent-CLI in deinem `PATH`, lädt 100+ Skills und 150 Designsysteme und lässt dich in der Einstiegsansicht ein Briefing eintippen. ### 🤖 In deinen Coding-Agent installieren (keine UI) Du kannst Open Design 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 | cursor | copilot | openclaw | antigravity | gemini # | pi | vibe | hermes | cline | kimi | trae | opencode ``` Dann, innerhalb des Agents: ``` > Use open-design to generate a landing page with the Linear design system ``` Der Agent liest `skills/`, wählt die passende `SKILL.md`, bindet die von dir benannte `DESIGN.md` und gibt ein `` aus, das unter `http://localhost:7456` vorschaubar ist. ### 🐳 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 ``` 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 gibt das erste `` aus.** Plugin + Skill + `DESIGN.md` sind gebunden. Es streamt in einen Sandboxed iframe, an Ort und Stelle editierbar — nicht „von Grund auf neu generieren". 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. **Open Design 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. --- ## Open Design aus deinem Coding-Agent nutzen Open Design 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 search-files "primary button" # search files across projects od get-file design-systems/linear-app/DESIGN.md od get-artifact # latest rendered artifact od plugin run web-prototype --brief "..." od skill list --scenario marketing ``` **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 **100+ Skills sind direkt enthalten** — jeder ist ein Ordner unter [`skills/`](../../skills/), der der Claude Code [`SKILL.md`][skill]-Konvention folgt, erweitert um ein `od:`-Frontmatter (`mode`, `platform`, `scenario`, `preview.type`, `design_system.requires`, `default_for`, `fidelity`, `example_prompt`). Lege einen Ordner ab, starte den Daemon neu, und er erscheint im Picker. Zwei **Modi** verankern den Katalog: `prototype` (einseitige Web-/Mobile-/Desktop-Artefakte) und `deck` (Präsentationen mit horizontalem Wischen). Außerdem die Modi `image`, `video`, `audio`, `template`, `design-system` und `utility`. Das Feld **`scenario`** gruppiert sie nach Zielgruppe: `design` · `marketing` · `operation` · `engineering` · `product` · `finance` · `hr` · `sale` · `personal`. | Skill | Modus | Szenario | Was er 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 | Vollständiges Skill-Protokoll → [`docs/skills-protocol.md`](../../docs/skills-protocol.md). Skill-Registry-Endpunkt: `GET /api/skills`. --- ## Designsysteme **150 markenreife `DESIGN.md`-Systeme** werden mit dem Repo ausgeliefert — jedes eine einzelne Markdown-Datei mit einem 9-teiligen Schema (Farbe, Typografie, Abstände, Layout, Komponenten, Bewegung, Stimme, Marke, Anti-Patterns), aus [`VoltAgent/awesome-design-md`][acd2]. Wechsle ein System → das nächste Rendering nutzt die neuen Tokens. Kein Theme-JSON.

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 **261 offizielle Plugins** liegen in [`plugins/_official/`](../../plugins/_official/). Jedes Plugin ist ein **portabler Agent-Skill-Ordner** — eine `SKILL.md` (von jedem Agent lesbar, der Agent Skills unterstützt), plus ein optionales `open-design.json`-Manifest, das Open Design Marktplatz-Metadaten, Eingaben, Vorschauen, Pipelines und Capability-Deklarationen liefert. Springe direkt zu einer Kategorie: | Kategorie | Anzahl | Inhalt | |---|---|---| | [`scenarios/`](../../plugins/_official/scenarios/) | 11 | 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/) | | [`image-templates/`](../../plugins/_official/image-templates/) | 45 | One-Shot-Bild-Prompts — redaktionell, filmisch, Produkt, Porträt | | [`video-templates/`](../../plugins/_official/video-templates/) | 50 | HyperFrames- / Seedance- / Veo-Motion-Vorlagen | | [`design-systems/`](../../plugins/_official/design-systems/) | 142 | Marken-`DESIGN.md` als Plugins verpackt | | [`atoms/`](../../plugins/_official/atoms/) | 13 | Wiederverwendbare UI-Fragmente (Buttons, Heroes, KPI-Karten) | | [`examples/`](../../plugins/_official/examples/) | 140 | 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 Plugin **braucht mindestens nur eine `SKILL.md`**; um es im Open-Design-Marktplatz zu listen, füge eine `open-design.json` hinzu: ``` my-plugin/ ├── SKILL.md ← required: YAML frontmatter (name · description) + trigger phrasing + workflow (aim for < 500 lines) ├── open-design.json ← needed to list: marketplace metadata + inputs + pipeline + capabilities ├── 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: `specVersion` (aktuell `1.0.0`), `name` (stabile ID), `version` (semver), `compat.agentSkills[].path` (zeigt auf `./SKILL.md`), `od.kind` (`skill` / `scenario` / `atom` / `bundle`), `od.taskKind` (`new-generation` / `figma-migration` / `code-migration` / `tune-collab`), `od.mode` (die Ausgabefläche, z. B. `prototype` / `deck` / `live-artifact` / `image` / `video` / `hyperframes` / `audio` / `design-system` / `scenario`), `od.capabilities[]` (**deklariere das Minimum** — eine eingeschränkte Installation gewährt standardmäßig nur `prompt:inject`), `od.inputs[]` (Parameter zur Anwendungszeit). 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 Open Design 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/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 }) ▼ ┌──────────────────────────────────────────────────────────────────┐ │ claude · codex · cursor-agent · copilot · openclaw · antigravity ·│ │ gemini · opencode · qwen · qoder · hermes (ACP) · kimi (ACP) · │ │ pi (RPC) · kiro · kilo · vibe (ACP) · cline · trae · deepseek │ │ reads SKILL.md + DESIGN.md, writes artifacts to disk │ └──────────────────────────────────────────────────────────────────┘ ``` | 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 | Sandboxed `srcdoc`-iframe + Streaming-``-Parser | | 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 + 21 Coding-Agent-CLI-Adapter + Skill-Registry + Designsystem-Katalog - [x] Web-App + Chat + Frageformular + 5-Richtungs-Picker + To-do-Fortschritt + Sandboxed Vorschau - [x] 100+ Skills · 150 Designsysteme · 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** — Open Design AMR (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/9ptkbbqRu**](https://discord.gg/9ptkbbqRu) - 🐦 **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 Open Design 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 eine `DESIGN.md` mit dem 9-teiligen Schema ab | [`design-systems//`](../../design-systems/) | | Ein neues **Plugin** | Lege `open-design.json` + Manifest 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 | Ein Adapter-Eintrag + Stream-Parser | [`apps/daemon/src/agents.ts`](../../apps/daemon/src/agents.ts) | | 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)). ### 🏅 Open Design Fellow-Programm Wir rekrutieren weltweit **Open Design Fellows** — Fellows gestalten das Produkt gemeinsam mit dem Kernteam, vertreten Open Design 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/9ptkbbqRu). --- ## 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][cd] | 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) | Quelle des 9-teiligen `DESIGN.md`-Schemas und von 70 Produktsystemen. | | [`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 Open Design. | | [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)).