nexu-io--open-design/docs/i18n/README.de.md

Open Design: Die quelloffene Alternative zu Claude Design

🔥 Open Design 0.13.0 — Stay in Flow ist da. Lange Design-Sitzungen scheiterten früher an jeder Unterbrechung — ein Lauf verlor seine Position, ein Modell-Picker ließ dich raten, ein Export brauchte noch einen Umweg. 0.13.0 hält die Sitzung am Leben: Setze Codex- / OpenCode- / Pi- / Open Design Cloud-Läufe über Runden hinweg fort, wähle schneller das richtige Modell und übergib per Screenshot gestützte PPTX / PDF, ohne die App zu verlassen. 0.13.0 herunterladen · Release Notes

⚡ Open Design Cloud — der offizielle Modell-Service. Einmal aufladen und GPT, Claude, Gemini und DeepSeek direkt in Open Design nutzen: 20+ Flaggschiff-Modelle, null Konfiguration, Abrechnung nach realem Token-Verbrauch. Open Design Cloud ausprobieren

🏅 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 und Discord.

Website · Download · Open Design Cloud · Discord · @OpenDesignHQ folgen

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

---

Was ist Open Design

🎨 Die local-first, quelloffene Alternative zu Claude Design.  🖥️ Native Desktop-App für macOS und Windows.  ⚡ 100+ Skills · ✨ 150 markenreife DESIGN.md-Systeme · 📦 261 sofort einsetzbare Plugins.  🖼️ 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.  🤖 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.

---

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

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.

Studio — viele Artefakttypen in einem Projekt

Im Studio eines Projekts streamt dasselbe Designsystem mehrere Artefakttypen heraus:

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.

---

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	Status	Einzeiler zur MCP-Server-Installation
Claude Code	✅ Unterstützt	od mcp install claude
Codex CLI	✅ Unterstützt	od mcp install codex
Cursor	✅ Unterstützt	od mcp install cursor
VS Code + GitHub Copilot	✅ Unterstützt	od mcp install copilot
GitHub Copilot CLI	✅ Unterstützt	od mcp install copilot
Gemini CLI	✅ Unterstützt	od mcp install gemini
OpenCode	✅ Unterstützt	od mcp install opencode
OpenClaw	✅ Unterstützt	od mcp install openclaw
Antigravity	✅ Unterstützt	od mcp install antigravity
Cline	✅ Unterstützt	od mcp install cline
Trae	✅ Unterstützt	od mcp install trae
Kimi CLI	✅ Unterstützt	od mcp install kimi
Kiro	✅ Unterstützt	od mcp install kiro
Pi Agent	✅ Unterstützt	od mcp install pi
Mistral Vibe CLI	✅ Unterstützt	od mcp install vibe
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.

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. Ein neues CLI hinzuzufügen ist ein einziger Eintrag — siehe 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/ — 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 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/ detailliert beschrieben.

---

Warum Open Design

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.

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	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 oder GitHub Releases
• Windows (x64) → open-design.ai oder GitHub Releases
• Linux (AppImage, optionale Spur) → GitHub 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.

# One-line install into the agent you're using:
od mcp install <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

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

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.

🧑‍💻 Aus dem Quellcode ausführen

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. Vollständiger Schnellstart, Umgebungsvariablen, Nix-Flake und der gepackte Build-Ablauf → 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.

# One-line install (16+ CLIs supported):
od mcp install <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.

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/, der der Claude Code SKILL.md-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	prototype	design	Standard-Landingpage / Hero
saas-landing	prototype	marketing	Hero / Features / Pricing / CTA
dashboard	prototype	operation	Admin / Analytics (mit Sidebar)
mobile-app	prototype	design	iPhone 15 Pro / Pixel-gerahmte App
mobile-onboarding	prototype	design	Splash · Value-Prop · Anmelde-Flow
social-carousel	prototype	marketing	3-Karten-1080×1080-Karussell
email-marketing	prototype	marketing	Tabellen-fallback-sichere Marken-E-Mail
magazine-poster	prototype	marketing	Einseitiges Magazin-Layout
motion-frames	prototype	marketing	Loopendes CSS-Motion-Hero
sprite-animation	prototype	marketing	8-Bit-Pixel-animierter Explainer
pm-spec	prototype	product	PM-Spec-Dokument (mit Inhaltsverzeichnis + Entscheidungsprotokoll)
team-okrs	prototype	product	OKR-Scorecard
eng-runbook	prototype	engineering	Incident-Runbook
finance-report	prototype	finance	Finanz-Zusammenfassung für die Führungsebene
hr-onboarding	prototype	hr	Rollen-Onboarding-Plan
guizang-ppt	deck	marketing	Web-PPT im Magazin-Stil (Deck-Standard)
html-ppt-*	deck	marketing	15 Deck-Vorlagen × 36 Themes (Master-Vorlage in design-templates/html-ppt/)
hyperframes	video	marketing	HTML → MP4 Motion-Graphics (HeyGen-OSS-Framework)
critique	utility	design	Fünfdimensionale Selbstkritik-Scorekarte
tweaks	utility	design	KI-ausgegebenes Tweaks-Panel-Manifest

Vollständiges Skill-Protokoll → 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. 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. Eigene Marke hinzufügen → lege eine DESIGN.md in design-systems/<brand>/ ab. Vollständige Anleitung → design-systems/README.md.

---

Plugins

261 offizielle Plugins liegen in 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/	11	Vollständige Design-Szenarien — od-default, od-design-refine, od-figma-migration, od-code-migration, od-react-export, od-nextjs-export, od-vue-export, od-media-generation, od-new-generation, od-tune-collab, od-plugin-authoring
image-templates/	45	One-Shot-Bild-Prompts — redaktionell, filmisch, Produkt, Porträt
video-templates/	50	HyperFrames- / Seedance- / Veo-Motion-Vorlagen
design-systems/	142	Marken-DESIGN.md als Plugins verpackt
atoms/	13	Wiederverwendbare UI-Fragmente (Buttons, Heroes, KPI-Karten)
examples/	140	Neu kombinierbare Referenz-Ausgaben

Außerdem plugins/community/ für Community-Plugins und plugins/registry/ für den Veröffentlichungsablauf.

Was Plugins können

• 🤖 In jedem Coding-Agent laufen — Claude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, 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.
• 🛠️ Eine bestehende Codebasis auf eine Markenvorgabe auffrischen — richte ein Plugin auf ein git-Repo + DESIGN.md, erhalte einen PR. Siehe 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):

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:

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; ein Plugin mit einem Coding-Agent entwickeln → plugins/spec/AGENT-DEVELOPMENT.md; minimale Copy-Paste-Vorlagen → plugins/spec/examples/.

Ein Plugin beitragen

1. Lege den Plugin-Ordner in plugins/community/ (Drittanbieter-Plugins) ab, oder — um es gebündelt mit Open Design auszuliefern — in die passende Stufe von 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 (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.

Plugin-Registry-Endpunkt: GET /api/plugins. Verzeichnisübersicht → plugins/README.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-<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. Skill-Protokoll → docs/skills-protocol.md. Agent-Adapter-Vertrag → docs/agent-adapters.md.

---

Roadmap

• Daemon + 21 Coding-Agent-CLI-Adapter + Skill-Registry + Designsystem-Katalog
• Web-App + Chat + Frageformular + 5-Richtungs-Picker + To-do-Fortschritt + Sandboxed Vorschau
• 100+ Skills · 150 Designsysteme · 5 visuelle Richtungen · 5 Geräterahmen
• SQLite-gestützte Projekte · Konversationen · Nachrichten · Tabs · Vorlagen
• Multi-Provider-BYOK-Proxy (/api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream) + SSRF-Schutz
• Claude Design ZIP-Import (/api/import/claude-design)
• Sidecar-Protokoll + Electron-Desktop + IPC-Automatisierung
• Artefakt-Lint-API + 5-dimensionales Selbstkritik-Pre-Emit-Gate
• 0.8.0 — Plugin-Marktplatz-Infrastruktur (261 offizielle Plugins, Manifest-Spezifikation, Installationsskripte pro Agent)
• 0.9.0 — Open Design Cloud (offizieller Model Router in die App integriert: keine Konfiguration, Ein-Klick-Anmeldung)
• 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.

---

Community

Hinter jedem Kanal stehen echte Menschen.

• 💬 Discord — täglicher Chat, Plugin-Sharing, Fragen → discord.gg/mHAjSMV6gz
• 🐦 X / Twitter — Release-Notes, Meilensteine, Hinter-den-Kulissen → @OpenDesignHQ
• 🗣️ GitHub Discussions — tiefe Q&A, RFCs, „show your work" → Discussions
• 🐛 GitHub Issues — Fehlerberichte, Feature-Wünsche → Issues

Die Labels good-first-issue und help-wanted 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/ · Spezifikation in docs/skills-protocol.md
Ein neues Designsystem	Lege eine DESIGN.md mit dem 9-teiligen Schema ab	design-systems/<brand>/
Ein neues Plugin	Lege open-design.json + Manifest unter einem Kategorie-Ordner ab	plugins/community/ · Spezifikation in plugins/spec/SPEC.md · Agent-Entwicklungsleitfaden in plugins/spec/AGENT-DEVELOPMENT.md
Ein neues Coding-Agent-CLI unterstützen	Ein Adapter-Eintrag + Stream-Parser	apps/daemon/src/agents.ts
Einen Fehler beheben oder die UI verfeinern	Durchsuche das Label good-first-issue	Issues →
Die Dokumentation übersetzen	Aktualisiere die README.<lang>.md-Dateien	TRANSLATIONS.md

🤖 Als Agent mitwirken

Wenn du der Agent bist, der dies liest, ist der schnellste Weg:

# 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 (Deutsch · Français · 简体中文 · 日本語 · Português).

🏅 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 und die Ankündigung auf Discord.

---

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 (auch Deutsch · Français · 简体中文 · 日本語 · Português).

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 mit 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	Der Design-Philosophie-Kompass — Junior-Designer-Workflow, Markenasset-Protokoll, Anti-AI-Slop-Checkliste, fünfdimensionale Kritik.
op7418/guizang-ppt-skill	Der Web-PPT-Skill im Magazin-Stil, wortgetreu gebündelt unter design-templates/guizang-ppt/. Standard für den Deck-Modus.
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	Die erste quelloffene Claude-Design-Alternative; UX-Muster, die wir übernehmen (Streaming-Artefakt-Schleife, Sandboxed iframe, Live-Agent-Panel).
multica-ai/multica	Die Daemon- + Adapter-Architektur — PATH-Scan-Agent-Erkennung, lokaler Daemon als einziger privilegierter Prozess.
VoltAgent/awesome-design-md	Quelle des 9-teiligen DESIGN.md-Schemas und von 70 Produktsystemen.
bergside/awesome-design-skills	Quelle der 57 Design-Skills, die unter design-systems/ hinzugefügt wurden.
heygen-com/hyperframes	Das HTML→MP4-Motion-Graphics-Framework, integriert als vollwertiges hyperframes-html in Open Design.
Claude Code skills	Die SKILL.md-Konvention, die wir wortgetreu übernehmen.

Detaillierte Herkunft → docs/references.md.

Lizenz

Apache-2.0. Das gebündelte design-templates/guizang-ppt/ behält seine ursprüngliche LICENSE (MIT, @op7418). Das gebündelte design-templates/html-ppt/ behält seine ursprüngliche LICENSE (MIT, @lewislulu).