Open Design — die Open-Source-Alternative zu Claude Design

Warum es das gibt

Claude Design ging viral. Und blieb zu.

Anthropics Claude Design (Opus 4.7, April 2026) hat gezeigt, was passiert, wenn ein LLM aufhört, Prosa zu schreiben, und anfängt, Design-Artifacts auszuliefern. Es ging viral — und blieb closed-source, kostenpflichtig, cloud-only, an Anthropics Modell und Anthropics Skills gekettet. Open Design ist die Open-Source-Alternative. Derselbe Loop. Dasselbe Artifact-First-Modell. Ohne den Lock-in.

Geschlossen → offen

Apache-2.0, von oben bis unten.

Jeder Skill ist eine Datei. Jedes Design System ist eine Markdown-Datei. Jeder Prompt ist ein TypeScript-Modul, das Sie lesen und ändern können.

Mitgelieferter Agent → Ihrer

Nutzen Sie das CLI, das Sie schon haben.

16 Coding-Agent-CLIs werden automatisch in Ihrem PATH erkannt. Keins installiert? Beliebige OpenAI-kompatible baseUrl + apiKey einfügen.

Cloud → lokal

Läuft auf Ihrem Laptop. Deployt nach Vercel.

pnpm tools-dev für lokal. SQLite unter .od/. Optional Vercel-Deploy. Ihre Daten, Ihr Dateisystem, Ihre Entscheidung.

Wie aus einem Prompt ein Artifact wird

Vier Schritte. Keine Improvisation.

OD lässt das Modell keinen einzigen Pixel improvisieren. Jedes Briefing wird vor dem Rendern festgenagelt.

Erst das Frageformular

Surface · Zielgruppe · Tonalität · Marke · Skala. Dreißig Sekunden Radio-Buttons schlagen dreißig Minuten Korrekturschleifen.

Richtungswähler

Keine Markenvorgabe? Wählen Sie aus 5 kuratierten visuellen Richtungen — jede eine deterministische OKLch-Palette plus Font-Stack.

TodoWrite streamt

Der Plan des Agents kommt als Live-Karte rein. in_progress → completed updaten in Echtzeit. Kurskorrekturen kosten nichts, mitten im Lauf.

<artifact> rendert

Vorschau in einem sandboxed iframe. Direkt editierbar. Download als HTML, PDF, PPTX oder ZIP.

Was im Karton steckt

110 Skills × 141 Design Systems.

Jeder Skill ist ein Ordner. Jedes Design System ist eine Markdown-Datei mit 9 Sektionen. Ordner rein, Daemon neu starten, taucht im Picker auf. System wechseln, der nächste Render nutzt neue Tokens.

Alle 110 Skills durchsehen →

dating-web

personal

prototype

gamified-app

personal

prototype

web-prototype-taste-brutalist

design

prototype

social-carousel

marketing

prototype

email-marketing

marketing

prototype

sprite-animation

marketing

prototype

html-ppt-taste-editorial

design

prototype

motion-frames

marketing

prototype

Design-Systems-Bibliothek

141 portable DESIGN.md-Systeme →

Linear · Stripe · Vercel · Apple · Notion · Tesla · Airbnb · Cursor · Supabase · Figma · Spotify · 60+ weitere — jedes Produktsystem bringt seine 4-Farb-Signatur, seinen Typografie-Stack, Spacing-Tokens und Anti-Patterns mit.

Skill-Spotlight · html-ppt

Ein Skill. 36 Themes, 31 Layouts, 47 Animationen, 14 Deck-Vorlagen.

Der mitgelieferte html-ppt-Skill bringt jede Primitive mit, die ein Deck-Agent braucht: Presenter-Mode, Layout-Bibliothek, kinetisches Animationsset und 14 Vorlagen zum Forken. Ordner rein, Daemon neu starten — Sie haben eine PPT-Engine im Browser.

html-ppt animierte Übersicht — Slides, Layouts, Übergänge

36 eingebaute Themes — arctic-cool, brutalist, editorial, kami und 32 weitere

html-ppt SKILL.md lesen → Alle 14 html-ppt-*-Wrapper-Skills ansehen →

Taste-locked-Varianten

Dieselbe Engine, drei Geschmäcker.

html-ppt-taste-brutalist und html-ppt-taste-editorial werden als eigenständige „taste-locked"-Wrapper ausgeliefert — derselbe Skill, hartverdrahtete Ästhetik. Drei weitere für Web-Prototypen: web-prototype-taste-{brutalist,editorial,soft}.

html-ppt-taste-brutalist live

Brutalist Deck

html-ppt-taste-editorial live

Editorial Deck

Bring Your Own Agent

16 CLIs werden automatisch im PATH erkannt.

Was Sie installiert haben, wird zur möglichen Design-Engine. Per Klick im Modell-Picker umschaltbar.

claude

Claude Code

stream-json

codex

Codex CLI

json-event-stream

cursor-agent

Cursor Agent

json-event-stream

gemini

Gemini CLI

json-event-stream

opencode

OpenCode

json-event-stream

qwen

Qwen Code

plain

qoder

Qoder CLI

json-event-stream

copilot

GitHub Copilot CLI

stream-json

devin

Devin Terminal

ACP

hermes

Hermes

ACP

kimi

Kimi CLI

ACP

kiro-cli

Kiro CLI

ACP

kilo

Kilo

ACP

vibe-acp

Mistral Vibe

ACP

deepseek

DeepSeek TUI

stream-json

pi

Pi

stdio JSON-RPC

Kein CLI installiert? POST /api/proxy/stream nimmt jede OpenAI-, Azure- oder Google-kompatible baseUrl + apiKey + model. Anthropic-via-OpenAI-Shim, DeepSeek, Groq, OpenRouter, Azure OpenAI, Google Vertex, Ihr selbst gehostetes vLLM — alles derselbe Loop. SSRF-geschützt gegen Loopback-, Link-Local- und RFC1918-Ziele am Daemon-Rand.

Sieben tragende Ideen

Woran wir glauben, in sieben Zeilen.

01

Wir liefern keinen Agent mit. Ihrer reicht.

+

Der Daemon scannt Ihren PATH nach 16 bekannten Coding-Agent-CLIs. Was er findet, wird zur möglichen Design-Engine, angesteuert über stdio mit einem Adapter pro CLI.

02

Skills sind Dateien, keine Plugins.

+

Jeder Skill ist SKILL.md + assets/ + references/. Ordner in skills/ werfen, Daemon neu starten, schon ist er im Picker. Das mitgelieferte magazine-web-ppt liegt wortwörtlich im Repo, Lizenz erhalten.

03

Design Systems sind portables Markdown, kein Theme-JSON.

+

Das 9-Sektionen-DESIGN.md-Schema — Farbe, Typografie, Spacing, Layout, Komponenten, Motion, Voice, Marke, Anti-Patterns. Jedes Artifact liest aus dem aktiven System. System wechseln → der nächste Render nutzt neue Tokens.

04

Das interaktive Frageformular verhindert 80 % der Korrekturen.

+

Runde 1 ist nur ein <question-form> — kein Denken, keine Tools, keine Erzählung. Surface · Zielgruppe · Tonalität · Marke · Skala. Eine falsche Richtung kostet eine Chat-Runde, nicht ein fertiges Deck.

05

Der Daemon lässt den Agent so wirken, als säße er auf Ihrem Laptop.

+

Der Daemon spawnt das CLI mit cwd auf den Artifact-Ordner Ihres Projekts. Der Agent bekommt Read, Write, Bash, WebFetch — echte Tools auf einem echten Dateisystem. SQLite hält Projekte, Konversationen, Nachrichten und Tabs fest.

06

Der Prompt-Stack ist das Produkt.

+

Discovery-Direktiven + Identity-Charter + aktive DESIGN.md + aktive SKILL.md + Projekt-Metadaten + Skill-Side-Files. Jede Schicht ist komponierbar. Jede Schicht ist eine Datei, die Sie editieren können.

07

Open Design ist kein Silo. Ihre anderen Agents lesen mit.

+

`od mcp` öffnet das Projekt als stdio MCP-Server. Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf — alles, was MCP spricht — liest Ihre Artifacts, Dateien und Metadaten direkt. Read-only an der Kante: Datei-Reads, Search, Metadaten. Keine Schreibfläche, keine externen Calls.

Der Prompt-Stack

DISCOVERY directives  (turn-1 form, turn-2 brand branch, TodoWrite, 5-dim critique)
  + identity charter   (OFFICIAL_DESIGNER_PROMPT, anti-AI-slop, junior-pass)
  + active DESIGN.md   (141 systems available)
  + active SKILL.md    (110 skills available)
  + project metadata   (kind, fidelity, speakerNotes, animations, inspiration ids)
  + skill side files   (auto-injected pre-flight: read assets/template.html + references/*.md)
  + (deck kind, no skill seed) DECK_FRAMEWORK_DIRECTIVE   (nav / counter / scroll / print)

Jede Schicht ist komponierbar. Jede Schicht ist eine Datei, die Sie editieren können.

Vergleich

Open Design im direkten Vergleich.

Ein geschlossenes Cloud-Produkt, ein offener Desktop-Peer, eine offene Web-App. Wir borgen großzügig bei open-codesign und nennen das Projekt auf /about — anderer Form-Faktor, anderer Prompt-Stack, derselbe Nordstern.

	Claude Design	Open CoDesign	Open Design
Lizenz & Kosten
Lizenz	geschlossen	MIT	Apache-2.0
Mindestabrechnung	Pro / Max / Team	BYOK	BYOK — beliebige OpenAI-kompatible URL
Form-Faktor
Form-Faktor	Web (claude.ai)	Desktop (Electron)	Web-App + lokaler Daemon
Vercel-deploybar	—	—	ja
KI-Runtime & Flow
Agent-Runtime	mitgeliefert (Opus 4.7)	mitgeliefert (pi-ai)	Ihr vorhandenes CLI
Provider-Flexibilität	nur Anthropic	7+ via pi-ai	16 CLI + BYOK-Proxy
Frageformular (Runde 1)	—	—	harte Regel
5 visuelle Richtungen	—	—	ja
5-Dim-Selbstkritik	—	—	Pre-Emit-Gate
Skills, Systeme & Migration
Skills	proprietär	12 TS-Module	110 ablegbare SKILL.md-Pakete
Design Systems	proprietär	DESIGN.md (v0.2)	141 ausgelieferte Systeme
Claude-Design-ZIP-Import	n/v	—	ja — weiterarbeiten, wo Anthropic aufgehört hat

Claude Design ist eine Marke von Anthropic. Open Design ist weder mit Anthropic verbunden noch von Anthropic empfohlen.

Mehr als nur Chat

Bild, Video, Audio — dieselbe Oberfläche.

Der Chat, der <artifact>-HTML produziert, treibt auch Bild-, Video- und Audio-Generierung. Jeder Render landet als echte .png oder .mp4 in Ihrem Projekt-Workspace. 95 fertig nachbaubare Prompts unter prompt-templates/.

01

gpt-image-2

Poster · Avatare · illustrierte Karten · Infografiken · Magazin-Social-Cards · Game-UI · Narrative Game-Stills

gpt-image-2

Illustrierte Stadt-Food-Karte

gpt-image-2

Anime-Fighting-Game — Captain Ryuuga vs. Kaze Renshin

gpt-image-2

Three Kingdoms — Guanyu erschlägt Yanliang

gpt-image-2

Three Kingdoms — Lyubu beim Yuanmen-Bogenschuss

gpt-image-2

Three Kingdoms — Zhaoyuns Cradle-Flucht

gpt-image-2

Open-World-MMO-HUD im alten China

gpt-image-2

Wachsmalstift-Kinderzeichnung → fotorealistisch

gpt-image-2

Otaku-Tanz-Choreografie — 16 Panels

gpt-image-2

Sensational Girl Dance Storyboard — 8 Shots

02