<h1 align="center">Open Design: Die quelloffene Alternative zu Claude Design</h1>

> 🔥 **Open Design 0.9.0 ist da: gestalten ohne Einrichtung.** Der [offizielle Model Router](https://open-design.ai/amr) ist direkt in die App integriert — keine zusätzliche Konfiguration, kein zu installierendes CLI, kein vorzubereitender API-Schlüssel. Einfach die App öffnen, anmelden und sofort mit dem Gestalten und Erstellen loslegen. [0.9.0 herunterladen](https://github.com/nexu-io/open-design/releases) · [An der Diskussion teilnehmen](https://github.com/nexu-io/open-design/discussions/3524)
>
> 🏅 **Das Open Design Fellow-Programm ist jetzt offen.** Wenn auch du glaubst, dass Design offen sein sollte — werde Open Design Fellow, gestalte das Produkt gemeinsam mit dem Kernteam und hilf mehr Menschen dabei, die Zukunft des Designs mitzubestimmen. Details → [`MAINTAINERS.md`](../../MAINTAINERS.md) und [Discord](https://discord.gg/qhbcCH8Am4).

<p align="center">
  <img src="https://repo-assets.open-design.ai/resources/images/hero.png" alt="Open Design — The open-source Claude Design alternative · 150 Design Systems · 261 Plugins · 21 Coding Agents · 14 Media Providers" width="100%" />
</p>

<p align="center">
  <a href="https://open-design.ai/">Website</a> ·
  <a href="https://open-design.ai/">Download</a> ·
  <a href="https://discord.gg/qhbcCH8Am4">Discord</a> ·
  <a href="https://x.com/nexudotio">@nexudotio folgen</a>
</p>

<p align="center">
  <a href="https://github.com/nexu-io/open-design/releases"><img alt="release" src="https://img.shields.io/github/v/release/nexu-io/open-design?style=flat&color=blueviolet&label=release&include_prereleases&display_name=tag" /></a>
  <a href="../../LICENSE"><img alt="license" src="https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat" /></a>
  <a href="https://discord.gg/qhbcCH8Am4"><img alt="discord" src="https://img.shields.io/discord/1479002485040480266?style=flat&logo=discord&logoColor=white&label=discord&color=5865F2&cacheSeconds=3600" /></a>
  <a href="QUICKSTART.de.md"><img alt="quickstart" src="https://img.shields.io/badge/quickstart-3%20commands-green?style=flat" /></a>
</p>

<p align="center"><a href="../../README.md">English</a> · <a href="README.es.md">Español</a> · <a href="README.pt-BR.md">Português</a> · <b>Deutsch</b> · <a href="README.fr.md">Français</a> · <a href="README.zh-CN.md">简体中文</a> · <a href="README.zh-TW.md">繁體中文</a> · <a href="README.ko.md">한국어</a> · <a href="README.ja-JP.md">日本語</a> · <a href="README.ar.md">العربية</a> · <a href="README.ru.md">Русский</a> · <a href="README.uk.md">Українська</a> · <a href="README.tr.md">Türkçe</a></p>

---

## Was ist Open Design

🎨 **Die local-first, quelloffene Alternative zu [Claude Design][cd].** &nbsp;🖥️ **Native Desktop-App für macOS und Windows.** &nbsp;⚡ **100+ Skills** · ✨ **150 markenreife `DESIGN.md`-Systeme** · 📦 **261 sofort einsetzbare Plugins.** &nbsp;🖼️ Erzeugt **Web- · Desktop- · Mobile-Prototypen**, **Live-Dashboards / Artefakte**, **Präsentationen**, **Bilder**, **Videos** sowie **HyperFrames**-Motion-Graphics. 🔒 Sandboxed iframe-Vorschau · Export als HTML / PDF / PPTX / MP4. &nbsp;🤖 **Läuft auf Claude Code · OpenClaw · Codex · Cursor · OpenCode · Qwen · Copilot · Hermes · Kimi · Antigravity und 21 lokalen CLIs**, oder über BYOK an jedem OpenAI-kompatiblen Endpunkt.

Open Design ist das, was entsteht, wenn die **agent-native** Schleife, die Anthropic mit Claude Design eingeführt hat — das Briefing erkunden, die Richtung festlegen, das Artefakt streamen, kritisieren, ausliefern — nicht länger geschlossen ist und zu einem **Dateisystem aus Skills, Designsystemen und Plugins** wird, das die Coding-Agents, die schon auf deinem Laptop liegen, lesen, schreiben und neu kombinieren können. Dein CLI wird zur Design-Engine, dein Laptop zum Studio und die `DESIGN.md` deines Teams zum Markenvertrag.

Es ist außerdem die **Figma-Alternative für das Agent-Zeitalter** — statt Pixel auf einer Leinwand zu schieben, liefert es einseitige Artefakte in echtem CSS, echten Schriften, echten Komponenten, direkt exportiert als HTML / PDF / PPTX / MP4 — bereits durch dein Designsystem geformt, bereits lauffähig in dem Agent, den du jeden Tag verwendest.

[cd]: https://x.com/claudeai/status/2045156267690213649

---

## Produkt-Rundgang

Ein kurzer Blick darauf, was Open Design ist und was es kann. Starte auf **Home**, orchestriere wiederkehrende Workflows mit **Automation**, destilliere einen Markenvertrag im **Design System** und erweitere mit **Plugins** und **Integrationen**; im **Studio** eines beliebigen Projekts streamt dasselbe Designsystem Prototypen, Live-Artefakte, HyperFrames, Präsentationen und Bilder heraus.

### Kernseiten

<table>
<tr>
<td valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/home.png" alt="Home page" /><br/>
<sub><b>Home</b> — der zentrale Einstiegspunkt. Wähle einen Skill und ein Designsystem, tippe das Briefing und starte alles von einem Ort aus.</sub>
</td>
</tr>
</table>

<table>
<tr>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/automation.png" alt="Automation page" /><br/>
<sub><b>Automation</b> — orchestriere sich wiederholende Design-Workflows zu wiederverwendbaren, planbaren Automatisierungen.</sub>
</td>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/design-system.png" alt="Design System page" /><br/>
<sub><b>Design System</b> — destilliere die <code>DESIGN.md</code> deines Teams zu einem Markenvertrag, der jede Ausgabe formt.</sub>
</td>
</tr>
<tr>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/plugin.png" alt="Plugin page" /><br/>
<sub><b>Plugin</b> — durchsuche, installiere und verteile Workflow-Plugins, um die Generierung bei Bedarf zu erweitern.</sub>
</td>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/integrations.png" alt="Integrations page" /><br/>
<sub><b>Integrationen</b> — verbinde externe Systeme und MCP-Tools und nutze Open Design aus jeder IDE, jedem Skript oder jeder Automatisierung.</sub>
</td>
</tr>
</table>

### Studio — viele Artefakttypen in einem Projekt

Im Studio eines Projekts streamt dasselbe Designsystem mehrere Artefakttypen heraus:

<table>
<tr>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/studio-prototype.png" alt="Prototype" /><br/>
<sub><b>Prototyp</b> — einseitige HTML-Artefakte, die dein Designsystem lesen und in einem Sandboxed iframe rendern, sofort vorschaubar und als Quellcode herunterladbar.</sub>
</td>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/studio-hyperframe.png" alt="HyperFrame" /><br/>
<sub><b>HyperFrame</b> — programmatische Bewegung und animierte Grafiken, gerendert zu einem echten MP4 (z. B. 1920×1080 · 30fps).</sub>
</td>
</tr>
<tr>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/studio-ppt.png" alt="Deck" /><br/>
<sub><b>Präsentation</b> — Pitch-Decks, durch die du blättern, per Tastatur navigieren und als PPTX / PDF exportieren kannst.</sub>
</td>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/studio-image.png" alt="Image" /><br/>
<sub><b>Bild</b> — markenreife Bilder und visuelle Assets, mit hochauflösender Generierung und Download.</sub>
</td>
</tr>
</table>

---

## Plattform-Kompatibilität

> Open Design wird als **Skills, ein CLI und ein MCP-Server** ausgeliefert, die gängige Coding-Agents nativ konsumieren. Sobald OD installiert ist, verdrahtet ein einziges `od mcp install <agent>` den MCP-Server in die Konfiguration dieses Agents, und du rufst dieselben Tools aus jedem Agent heraus auf.

| Coding-Agent / Plattform &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | Status &nbsp;&nbsp; | Einzeiler zur MCP-Server-Installation &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; |
|---|:---:|---|
| [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 | ✅ 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 | ✅ 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 <agent> --print` für eine Trockenlauf-Vorschau · `--uninstall` zum Entfernen · vollständige Liste mit `od mcp install --help`.

<p align="center">
  <img src="https://repo-assets.open-design.ai/resources/images/coding-agents.png" alt="The 21 coding-agent CLIs Open Design supports — Claude Code · Codex · OpenCode · Hermes · Antigravity · Gemini · Grok Build · Kimi · Cursor Agent · Qwen · Qoder · GitHub Copilot · Pi · Kiro · Kilo · Mistral Vibe · DeepSeek · Reasonix · Aider · Devin · Trae" width="100%" />
</p>

**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.

<table>
<tr>
<td width="50%" valign="top">
<img src="../../docs/screenshots/01-entry-view.png" alt="Entry view" /><br/>
<sub><b>Einstiegsansicht</b> — wähle einen Skill, wähle ein Designsystem, tippe das Briefing. Eine Fläche für Prototypen, Dashboards, Präsentationen, Mobile-Apps, Magazinseiten.</sub>
</td>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/mobile-onboarding.png" alt="Mobile onboarding" /><br/>
<sub><b>Mobile-Prototyp</b> — pixelgenaues iPhone 15 Pro-Chrome, mehrbildschirmige Flows. Der Agent zeichnet den Telefonrahmen nie neu; geteilte Geräterahmen liegen in <code>assets/frames/</code>.</sub>
</td>
</tr>
<tr>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/dating-web.png" alt="Web prototype dating-web" /><br/>
<sub><b>Web-Prototyp</b> — ein redaktionelles Dashboard mit Scrollbalken, KPIs und Diagrammen. Direkt aus <code>design-templates/dating-web/</code> gerendert.</sub>
</td>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/gamified-app.png" alt="Gamified app" /><br/>
<sub><b>Mobile-App-Prototyp</b> — 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.</sub>
</td>
</tr>
</table>

### 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.

<table>
<tr>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/live-dashboard.png" alt="Live dashboard" /><br/>
<sub><b>Live-Dashboard</b> — 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.</sub>
</td>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/research-decision-room.png" alt="Decision room" /><br/>
<sub><b>Entscheidungsraum</b> — ein Mehrquellen-Briefing-Artefakt für Produkt- / Forschungs- / Ops-Meetings.</sub>
</td>
</tr>
<tr>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/github-dashboard.png" alt="GitHub dashboard" /><br/>
<sub><b>Dashboard im GitHub-Stil</b> — Repo-Metriken, präsentiert als Live-Artefakt.</sub>
</td>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/flowai-live-dashboard-template.png" alt="Flow live dashboard" /><br/>
<sub><b>Flow-Live-Dashboard-Vorlage</b> — eine domänenspezifische KPI-Vorlage, gebrandet durch die aktive <code>DESIGN.md</code>.</sub>
</td>
</tr>
</table>

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

<table>
<tr>
<td width="50%" valign="top">
<img src="../../docs/screenshots/07-magazine-deck.png" alt="Magazine deck (guizang-ppt)" /><br/>
<sub><b>Deck-Modus (guizang-ppt)</b> — Magazin-Layouts, WebGL-Hero, P0/P1/P2-Checklisten. Wortgetreu gebündelt aus <a href="https://github.com/op7418/guizang-ppt-skill"><code>op7418/guizang-ppt-skill</code></a> unter Beibehaltung der ursprünglichen Lizenz.</sub>
</td>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/deck-swiss-international.png" alt="Swiss deck" /><br/>
<sub><b>Deck im Swiss-International-Stil</b> — rasterverankert, monochrome Akzente. Eines von <b>15 Deck-Vorlagen</b> und <b>36 Themes</b> unter <code>design-templates/html-ppt-*/</code>.</sub>
</td>
</tr>
</table>

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

<table>
<tr>
<td width="20%" valign="top"><img src="https://cms-assets.youmind.com/media/1776662673014_nf0taw_HGRMNDybsAAGG88.jpg" alt="Illustrated city food map" /><br/><sub><b>Illustrierte Stadt-Food-Karte</b><br/>Handgezeichnetes redaktionelles Reiseplakat</sub></td>
<td width="20%" valign="top"><img src="https://cms-assets.youmind.com/media/1777453149026_gd2k50_HHCSvymboAAVscc.jpg" alt="Cinematic elevator scene" /><br/><sub><b>Filmische Aufzugszene</b><br/>Redaktionelles Einzelbild-Still</sub></td>
<td width="20%" valign="top"><img src="https://cms-assets.youmind.com/media/1777453164993_mt5b69_HHDoWfeaUAEA6Vt.jpg" alt="Cyberpunk anime portrait" /><br/><sub><b>Cyberpunk-Porträt</b><br/>Profil-Avatar — Neon-Gesichtstext</sub></td>
<td width="20%" valign="top"><img src="https://cms-assets.youmind.com/media/1776661968404_8a5flm_HGQc_KOaMAA2vt0.jpg" alt="3D stone staircase evolution" /><br/><sub><b>3D-Steintreppe</b><br/>Infografik aus behauenem Stein</sub></td>
<td width="20%" valign="top"><img src="https://cms-assets.youmind.com/media/1777453184257_vb9hvl_HG9tAkOa4AAuRrn.jpg" alt="Glamorous portrait" /><br/><sub><b>Glamouröses Porträt</b><br/>Redaktionelle Studioaufnahme</sub></td>
</tr>
</table>

**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.

<table>
<tr>
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-saas-product-promo-30s.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.png" alt="SaaS promo" /></a><br/><sub><b>30s SaaS-Produkt-Promo</b> · 16:9 · UI-3D-Reveals</sub></td>
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-tiktok-karaoke-talking-head.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.png" alt="TikTok karaoke" /></a><br/><sub><b>TikTok-Karaoke-Talking-Head</b> · 9:16 · TTS + wortsynchrone Untertitel</sub></td>
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-brand-sizzle-reel.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png" alt="Brand sizzle reel" /></a><br/><sub><b>30s Brand-Sizzle-Reel</b> · 16:9 · audioreaktive kinetische Typografie</sub></td>
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-data-bar-chart-race.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png" alt="Bar chart race" /></a><br/><sub><b>Balkendiagramm-Rennen</b> · 16:9 · Daten-Infografik im NYT-Stil</sub></td>
</tr>
<tr>
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-flight-map-route.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.png" alt="Flight map" /></a><br/><sub><b>Flugkarte</b> · 16:9 · Routen-Reveal im Apple-Stil</sub></td>
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-logo-outro-cinematic.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png" alt="Logo outro" /></a><br/><sub><b>4s filmisches Logo-Outro</b> · 16:9 · stückweise Montage + Bloom</sub></td>
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-money-counter-hype.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.png" alt="Money counter" /></a><br/><sub><b>$0 → $10K Geldzähler</b> · 9:16 · Hype im Apple-Stil</sub></td>
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-website-to-video-promo.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.png" alt="Website to video" /></a><br/><sub><b>Website-zu-Video</b> · 16:9 · erfasst die Website in 3 Viewports</sub></td>
</tr>
</table>

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 für macOS (Apple Silicon + Intel) und Windows (x64). Linux-AppImage auf der optionalen Release-Spur. SQLite unter `.od/app.sqlite`, Dateien unter `.od/projects/<id>/`, keine Telemetrie, kein Cloud-Roundtrip.
- 🌍 **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:
curl -fsSL https://open-design.ai/install.sh | sh -s <agent>
# <agent> = 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 `<artifact>` 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
```

### 🧑‍💻 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 `<artifact>` 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):
curl -fsSL https://open-design.ai/install.sh | sh -s <agent>

# 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 <slug>                # 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/<agent>/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.

<details>
<summary><b>Vollständiger Katalog (zum Aufklappen klicken)</b></summary>

**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`

</details>

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/<brand>/` 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: .od/projects/<id> })
             ▼
   ┌──────────────────────────────────────────────────────────────────┐
   │  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 | Dateien unter `.od/projects/<id>/` + SQLite unter `.od/app.sqlite` + `media-config.json` (gitignored, automatisch erstellt). `OD_DATA_DIR` verschiebt alles. |
| Vorschau | Sandboxed `srcdoc`-iframe + Streaming-`<artifact>`-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/qhbcCH8Am4**](https://discord.gg/qhbcCH8Am4)
- 🐦 **X / Twitter** — Release-Notes, Meilensteine, Hinter-den-Kulissen → [**@nexudotio**](https://x.com/nexudotio)
- 🗣️ **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/<brand>/`](../../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.<lang>.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 <number>   # create a branch and worktree

# 3. Make the change, run the checks
pnpm guard && pnpm typecheck
pnpm --filter @open-design/<package> 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/qhbcCH8Am4).

---

## Maintainer

Sie tragen einen Großteil der Last — tägliche Wartung, Review und Community-Unterstützung.

<table>
  <tr>
    <td align="center" valign="top" width="200">
      <a href="https://github.com/Nagendhra-web">
        <img src="https://github.com/Nagendhra-web.png" width="96" alt="@Nagendhra-web" /><br/>
        <sub><b>@Nagendhra-web</b></sub>
      </a><br/>
      <sub>Maintainer</sub>
    </td>
    <td align="center" valign="top" width="200">
      <a href="https://github.com/Sid-Qin">
        <img src="https://github.com/Sid-Qin.png" width="96" alt="@Sid-Qin" /><br/>
        <sub><b>@Sid-Qin</b></sub>
      </a><br/>
      <sub>Maintainer</sub>
    </td>
  </tr>
</table>

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.

<a href="https://github.com/nexu-io/open-design/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=nexu-io/open-design&max=500&columns=20&anon=1&cache_bust=2026-05-30" alt="Open Design contributors" />
</a>

---

## Repository-Aktivität

<picture>
  <img alt="Open Design — repository metrics" src="https://repo-assets.open-design.ai/resources/images/github-metrics.svg" />
</picture>

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

<p align="center">
  <a href="https://github.com/nexu-io/open-design"><img src="https://repo-assets.open-design.ai/resources/images/star-us.png" alt="Star Open Design on GitHub — github.com/nexu-io/open-design" width="100%" /></a>
</p>

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.

<a href="https://star-history.com/#nexu-io/open-design&Date">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=nexu-io/open-design&type=Date&theme=dark&cache_bust=2026-05-28" />
    <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=nexu-io/open-design&type=Date&cache_bust=2026-05-28" />
    <img alt="Open Design star history" src="https://api.star-history.com/svg?repos=nexu-io/open-design&type=Date&cache_bust=2026-05-28" />
  </picture>
</a>

---

## 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)).
