Open Design: Die quelloffene Alternative zu Claude Design

⚡ 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+ funktionale Skills + separater Rendering-Vorlagenkatalog · ✨ 151 markenreife Designsystem-Pakete · 📦 277 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 25 unterschiedlichen lokalen CLI-Programmen, 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 funktionalen Skills, Rendering-Designvorlagen, 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`
DeepSeek Reasonix	✅ Unterstützt	`od mcp install reasonix`
Raven	✅ Unterstützt	`od mcp install raven`
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`
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.

Runtime-Definitionen liegen unter apps/daemon/src/runtimes/defs/ und werden in runtimes/registry.ts registriert. Ein neuer Parser ist nur für ein neues Wire-Format nötig — siehe docs/agent-adapters.md.

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 DESIGN.md des aktiven Pakets als zentralen Markenvertrag. 151 Designsystem-Pakete werden mit dem Repo ausgeliefert; ältere Pakete können nur aus DESIGN.md bestehen, neuere zusätzlich manifest.json, tokens.css, Komponenten, Assets und Herkunftsangaben enthalten. Lege einen Ordner ab, der Picker findet ihn.
🖥️ Local-first, BYOK auf jeder Ebene. Native Desktop-Apps bleiben local-first, ohne Cloud-Roundtrip. Bevor Sie Daemon-Datenpfade beschreiben, MÜSSEN Sie AGENTS.md im Repository-Stamm lesen, Abschnitt Daemon data directory contract.
🌍 Komponierbar auf vier Ebenen. Plugins tragen lauffähige Workflows · funktionale Skills tragen Agent-Verhalten · Designvorlagen tragen Rendering-Blaupausen · Designsysteme tragen die Marke. Alle vier verwenden portable, versionierbare Verzeichnisse, die jeder erstellen und veröffentlichen kann.
🔁 Eine bestehende Codebasis auffrischen. Übergib dem Agent ein git-Repo + DESIGN.md, und er refaktoriert deine echten Komponenten auf die Markenvorgabe. Dedizierte Plugins migrieren Figma- / Pencil-Workflows in React- / Next.js- / Vue-Code.
🔒 Datenschutz aus Überzeugung. Alles läuft dort, wo deine Daten liegen — dein Laptop, der Server deines Teams, dein Vercel-Projekt. Wenn das Netzwerk gebraucht wird, ist der BYOK-Proxy SSRF-geschützt.

Vergleich

	Claude Design	Figma	Lovable / v0 / Bolt	Open Design
Open Source	❌	❌	❌	✅ Apache-2.0
Self-Hosting / Desktop	❌	❌	❌	✅ macOS + Windows + Docker
Agent-native (läuft in deinem CLI)	Nur Anthropic	❌	Nur Cloud-Agent	✅ 25 CLIs + BYOK
Markenreife `DESIGN.md`	Proprietär	Theme-JSON	Begrenzte Tokens	✅ 151 Systeme ausgeliefert
Skills / Plugins / Vorlagen	Geschlossen	Plugin-Store	Geschlossen	✅ 100+ funktionale Skills · separater Rendering-Vorlagenkatalog · 277 Plugins
HyperFrames (HTML→MP4)	❌	❌	❌	✅ Vollwertig
Bestehendes Repo auf Marke auffrischen	❌	❌	❌	✅ via Agent + `DESIGN.md`
Mindestabrechnung	Pro / Max / Team	Pro / Org	Pro / Team	BYOK · jeder kompatible Endpunkt

Schnellstart

🖥️ Die Desktop-App herunterladen (empfohlen — keine Konfiguration)

Der schnellste Weg, 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 erkennt die App jedes Coding-Agent-CLI in deinem PATH und lädt 100+ funktionale Skills, den separaten Rendering-Vorlagenkatalog und 151 Designsystem-Pakete.

🤖 In deinen Coding-Agent installieren (keine UI)

Du kannst 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 | reasonix | raven | cursor | copilot | openclaw | antigravity
#         | pi | vibe | hermes | cline | kimi | kiro | trae | opencode

Dann, innerhalb des Agents:

> Use open-design to generate a landing page with the Linear design system

In einem dateisystemgestützten lokalen CLI-Lauf kombiniert der Agent den gewählten funktionalen Skill oder die Designvorlage mit deiner DESIGN.md, schreibt die kanonischen Projektdateien und Open Design zeigt diese Dateien an. Ein BYOK-/Plain-API-Lauf ohne Dateisystemwerkzeuge gibt stattdessen genau einen vollständigen <artifact>-Block zurück.

🐳 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

Öffne die von tools-dev ausgegebene URL; Entwicklungsports werden dynamisch vergeben, sofern keine Port-Flags angegeben sind.

Node ~24, pnpm 10.33.x. Windows-Nutzer, siehe docs/windows-troubleshooting.md. 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

Ein PM reicht ein Briefing ein. Der Plugin-Picker bietet Landingpage · Pitch-Deck · Dashboard · Social-Post · PM-Spec · OKR-Scorecard…
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.
Der Agent erstellt das erste Ergebnis. Plugin + funktionaler Skill oder Designvorlage + DESIGN.md sind gebunden. Dateisystemgestützte CLI-Läufe schreiben kanonische Projektdateien; BYOK-/Plain-API-Läufe ohne Dateiwerkzeuge liefern einen vollständigen <artifact>-Block.
Ü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.
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 project list --json
od files list <project-id> --json
od files read <project-id> <relative-path>
od plugin list --json
od skills list --json

Warum MCP? Bei jeder Iteration ein ZIP zu exportieren und neu anzuhängen, bricht den Flow. MCP legt die Designquelle direkt offen — der Agent sieht immer die Live-Datei.

Für einen Agent, der bei null startet, platziert der Installer ~/.config/<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 und Designvorlagen

100+ funktionale Skills liegen in skills/. Sie folgen der Agent-Skills-Konvention SKILL.md und liefern wiederverwendbares Agent-Verhalten, Referenzen oder Werkzeuge. Renderbare Starter liegen getrennt in design-templates/; sie können ebenfalls SKILL.md verwenden, erscheinen aber im Designvorlagen-Katalog statt in der funktionalen Skill-Registry.

Zwei Modi verankern den Designvorlagen-Katalog: prototype (einseitige Web-/Mobile-/Desktop-Artefakte) und deck (Präsentationen mit horizontalem Wischen). Weitere Vorlagen decken image, video, audio und Utility-Oberflächen ab. Das Feld scenario gruppiert sie nach Zielgruppe.

Designvorlage	Modus	Szenario	Was sie erzeugt
`web-prototype`	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

Protokoll und Verzeichnisaufteilung → docs/skills-protocol.md. Registry-Endpunkte: GET /api/skills für funktionale Skills und GET /api/design-templates für Rendering-Vorlagen.

Designsysteme

151 markenreife Designsystem-Pakete mit DESIGN.md als Kern werden mit dem Repo ausgeliefert. Legacy-Pakete können nur diesen Markdown-Vertrag enthalten; neuere Pakete können zusätzlich manifest.json, kompiliertes tokens.css, Komponenten-Fixtures, Assets und Provenienzbelege tragen. Der Katalog mischt aus Upstreams abgeleitete Systeme mit projekteigenen Ergänzungen; design-systems/README.md dokumentiert Paketform und Herkunft.

Vollständiger Katalog (zum Aufklappen klicken)

AI & LLM — claude · cohere · mistral-ai · minimax · together-ai · replicate · runwayml · elevenlabs · ollama · x-ai

Developer Tools — cursor · vercel · linear-app · framer · expo · clickhouse · mongodb · supabase · hashicorp · posthog · sentry · warp · webflow · sanity · mintlify · lovable · composio · opencode-ai · voltagent

Productivity — notion · figma · miro · airtable · superhuman · intercom · zapier · cal · clay · raycast

Fintech — stripe · coinbase · binance · kraken · mastercard · revolut · wise

E-commerce — shopify · airbnb · uber · nike · starbucks · pinterest

Media — spotify · playstation · wired · theverge · meta

Automotive — tesla · bmw · ferrari · lamborghini · bugatti · renault

Other — apple · ibm · nvidia · vodafone · resend · spacex

Starters — default (Neutral Modern) · warm-editorial

Importiere die Bibliothek erneut über scripts/sync-design-systems.ts. Eigene Marke hinzufügen → lege eine DESIGN.md in design-systems/<brand>/ ab. Vollständige Anleitung → design-systems/README.md.

Plugins

277 offizielle Plugins plus 183 remixbare Referenzbeispiele liegen in plugins/_official/. Jeder Eintrag ist ein portables Plugin-Verzeichnis mit open-design.json und dem typspezifischen Payload, etwa SKILL.md für Agent-Workflows, template.json für Medienvorlagen oder DESIGN.md für Designsystem-Einträge.

Kategorie	Anzahl	Inhalt
`scenarios/`	13	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`, `od-share-to-community`, `od-web-effect-extractor`
`image-templates/`	45	One-Shot-Bild-Prompts — redaktionell, filmisch, Produkt, Porträt
`video-templates/`	63	HyperFrames- / Seedance- / Veo-Motion-Vorlagen
`design-systems/`	143	Marken-`DESIGN.md` als Plugins verpackt
`atoms/`	13	Wiederverwendbare UI-Fragmente (Buttons, Heroes, KPI-Karten)
`examples/`	183	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 Open-Design-Plugin benötigt open-design.json plus den Payload seines Typs. Workflow-Skills und Szenarien enthalten zusätzlich SKILL.md; andere Plugin-Typen verwenden ihren eigenen Payload:

my-plugin/
├── open-design.json    ← required: marketplace metadata + inputs + pipeline + capabilities
├── SKILL.md            ← required for agent-skill/scenario entries; omit for other plugin types
├── README.md           ← optional: usage, install, registry links
├── preview/            ← optional: index.html / poster.png (strongly recommended for visual plugins)
└── examples/           ← optional: concrete use cases

Zentrale open-design.json-Felder sind specVersion, name, version, das optionale compat.agentSkills[].path für Einträge, die einen Agent Skill bereitstellen, sowie od.kind, od.taskKind, od.mode, od.capabilities[] und od.inputs[].

Lokal scaffolden + validieren:

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

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/.
Bestehe die Validierung: od plugin validate, pnpm guard, pnpm --filter @open-design/plugin-runtime typecheck.
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).
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/design-templates    /api/plugins    │
   │  /api/design-systems            │
   │  /api/chat (SSE)   /api/proxy/* │
   │  /api/projects/:id/files/...    │
   │  /api/artifacts/{save,lint}     │
   │  /api/import/claude-design      │
   │  MCP stdio server                │
   └─────────┬───────────────────────┘
             │ spawn(cli, [...], { cwd: managed project cwd })
             ▼
   ┌──────────────────────────────────────────────────────────────────┐
   │  Local runtime definitions come from runtimes/registry.ts;                 │
   │  the base registry has 26 definitions (including byok-opencode),           │
   │  backed by 25 distinct local CLI executables because byok-opencode shares │
   │  the OpenCode executable. See docs/agent-adapters.md.                     │
   │  composes a functional skill or design template + DESIGN.md; writes files │
   └──────────────────────────────────────────────────────────────────┘

Ebene	Stack
Frontend	Next.js 16 App Router + React 18 + TypeScript
Daemon	Node 24 · Express · SSE-Streaming · `better-sqlite3`
Speicher	Bevor Sie Daemon-Speicherpfade ändern oder dokumentieren, MÜSSEN Sie `AGENTS.md` im Repository-Stamm lesen, Abschnitt Daemon data directory contract. Dieses README DARF ihn NICHT wiederholen.
Vorschau	Dateisystemläufe rendern kanonische Projektdateien; BYOK-/Plain-API-Läufe parsen einen vollständigen `<artifact>`-Block in ein Sandbox-`srcdoc`-iframe
Export	HTML (eingebettet) · PDF (Browser-Druck) · PPTX (agentengesteuert) · ZIP · Markdown · MP4 (HyperFrames)
Desktop	Electron-Shell + Sandboxed Renderer + Sidecar-IPC (STATUS · EVAL · SCREENSHOT · CONSOLE · CLICK · SHUTDOWN)
Lebenszyklus	Ein Einstiegspunkt: `pnpm tools-dev` (start / stop / run / status / logs / inspect / check)

Vollständige Architektur → docs/architecture.md. Skill-Protokoll → docs/skills-protocol.md. Agent-Adapter-Vertrag → docs/agent-adapters.md.

Roadmap

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 ein Paket mit `DESIGN.md` als Kern ab; ergänze bei Bedarf `manifest.json`, `tokens.css`, Komponenten, Assets oder Herkunftsangaben	`design-systems/<brand>/`
Ein neues Plugin	Lege `open-design.json` + den typspezifischen Payload 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	Runtime-Definition + Registry-Eintrag; Parser nur bei neuem Wire-Format	`apps/daemon/src/runtimes/defs/`
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`	Historische Quelle des ursprünglichen 9-teiligen `DESIGN.md`-Schemas und von 70 upstream-abgeleiteten Systemen; heutige Pakete können diese Basis erweitern.
`bergside/awesome-design-skills`	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).

Uh oh!

FilesExpand file tree

README.de.md

Latest commit

History