Open Design: The open-source Claude Design alternative
🔥 Open Design 0.10.0 is here: the all-in-one Agentic design workspace. The whole craft now lives in one window — go from a vague idea to discovering references, gathering material, editing interactively, queuing comments, polishing motion, and handing off to an editor or a Code Agent — without leaving the app. With parallel sessions, it stops feeling like one assistant and starts feeling like a local design team working for you. Download 0.10.0 · Join the discussion ⚡ Open Design AMR (Agentic Model Router) — the official model service. One recharge to use GPT, Claude, Gemini, and DeepSeek inside Open Design: 20+ flagship models, zero config, billed by real token usage. Try AMR 🏅 The Open Design Fellow program is now open. If you also believe design should be open — become an Open Design Fellow, shape the product alongside the core team, and help more people take part in defining the future of design. Details → MAINTAINERS.md and Discord.
🔥 Open Design 0.10.0 is here: the all-in-one Agentic design workspace. The whole craft now lives in one window — go from a vague idea to discovering references, gathering material, editing interactively, queuing comments, polishing motion, and handing off to an editor or a Code Agent — without leaving the app. With parallel sessions, it stops feeling like one assistant and starts feeling like a local design team working for you. Download 0.10.0 · Join the discussion
⚡ Open Design AMR (Agentic Model Router) — the official model service. One recharge to use GPT, Claude, Gemini, and DeepSeek inside Open Design: 20+ flagship models, zero config, billed by real token usage. Try AMR
🏅 The Open Design Fellow program is now open. If you also believe design should be open — become an Open Design Fellow, shape the product alongside the core team, and help more people take part in defining the future of design. Details → MAINTAINERS.md and Discord.
Open Design: The open-source Claude Design alternative
🔥 Open Design 0.10.0 is here: the all-in-one Agentic design workspace. The whole craft now lives in one window — go from a vague idea to discovering references, gathering material, editing interactively, queuing comments, polishing motion, and handing off to an editor or a Code Agent — without leaving the app. With parallel sessions, it stops feeling like one assistant and starts feeling like a local design team working for you. Download 0.10.0 · Join the discussion ⚡ Open Design AMR (Agentic Model Router) — the official model service. One recharge to use GPT, Claude, Gemini, and DeepSeek inside Open Design: 20+ flagship models, zero config, billed by real token usage. Try AMR 🏅 The Open Design Fellow program is now open. If you also believe design should be open — become an Open Design Fellow, shape the product alongside the core team, and help more people take part in defining the future of design. Details → MAINTAINERS.md and Discord.
DESIGN.md
Open Design is what you get when the agent-native loop Anthropic shipped with Claude Design — discover the brief, lock the direction, stream the artifact, critique, deliver — stops being closed and becomes a filesystem of skills, design systems, and plugins that the coding agents already on your laptop can read, write, and remix. Your CLI becomes the design engine, your laptop becomes the studio, and your team's DESIGN.md becomes the brand contract.
DESIGN.md
It's also the Figma alternative for the agent era — instead of pushing pixels on a canvas, it delivers single-page artifacts in real CSS, real fonts, real components, exported straight to HTML / PDF / PPTX / MP4 — already shaped by your design system, already runnable inside the agent you use every day.
Product tour
A quick look at what Open Design is and what it does. Start from Home, orchestrate repeat workflows with Automation, distill a brand contract in Design System, and extend with Plugins and integrations; inside any project's Studio, the same design system streams out prototypes, live artifacts, HyperFrames, decks, and images.
Core pages
Home — the overview entry point. Pick a skill and a design system, type the brief, and kick off everything from one place.
Automation — orchestrate repetitive design workflows into reusable, schedulable automations. Design System — distill your team's DESIGN.md into a brand contract that shapes every output. Plugin — browse, install, and distribute workflow plugins to extend generation on demand. Integrations — connect external systems and MCP tools, and use Open Design from any IDE, script, or automation.
DESIGN.md
Studio — many artifact types in one project
Inside a project's Studio, the same design system streams out multiple artifact types:
Prototype — single-page HTML artifacts that read your design system and render in a sandboxed iframe, previewable instantly and downloadable as source. HyperFrame — programmatic motion and animated graphics, rendered to a real MP4 (e.g. 1920×1080 · 30fps). Deck — pitch decks you can page through, navigate by keyboard, and export to PPTX / PDF. Image — brand-grade images and visual assets, with high-resolution generation and download.
Platform Compatibility
Open Design ships as skills, a CLI, and an MCP server that mainstream coding agents consume natively. Once OD is installed, a single od mcp install wires the MCP server into that agent's config, and you call the same tools from inside any agent.
Open Design ships as skills, a CLI, and an MCP server that mainstream coding agents consume natively. Once OD is installed, a single od mcp install wires the MCP server into that agent's config, and you call the same tools from inside any agent.
od mcp install
Coding agent / platform Status One-line MCP server install Claude Code ✅ Supported od mcp install claude Codex CLI ✅ Supported od mcp install codex Cursor ✅ Supported od mcp install cursor VS Code + GitHub Copilot ✅ Supported od mcp install copilot GitHub Copilot CLI ✅ Supported od mcp install copilot Gemini CLI ✅ Supported od mcp install gemini OpenCode ✅ Supported od mcp install opencode OpenClaw ✅ Supported od mcp install openclaw Antigravity ✅ Supported od mcp install antigravity Cline ✅ Supported od mcp install cline Trae ✅ Supported od mcp install trae Kimi CLI ✅ Supported od mcp install kimi Pi Agent ✅ Supported od mcp install pi Mistral Vibe CLI ✅ Supported od mcp install vibe Hermes Agent ✅ Supported od mcp install hermes
od mcp install claude
od mcp install codex
od mcp install cursor
od mcp install copilot
od mcp install copilot
od mcp install gemini
od mcp install opencode
od mcp install openclaw
od mcp install antigravity
od mcp install cline
od mcp install trae
od mcp install kimi
od mcp install pi
od mcp install vibe
od mcp install hermes
od mcp install --print for a dry-run preview · --uninstall to remove · full list with od mcp install --help.
od mcp install --print
--uninstall
od mcp install --help
No CLI installed? The BYOK proxy at POST /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream gives you the same loop (no process spawn) — paste baseUrl + apiKey + model, with support for OpenAI, Anthropic, Azure OpenAI, Google Gemini, Ollama, LM Studio, vLLM, or any OpenAI-compatible endpoint. Per-target SSRF protection blocks internal IPs / link-local / CGNAT at the daemon edge.
POST /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream
baseUrl
apiKey
model
The adapter contract and stream parsers live in apps/daemon/src/agents.ts. Adding a new CLI is one entry — see docs/agent-adapters.md.
apps/daemon/src/agents.ts
docs/agent-adapters.md
Demo
Four core product categories, all rendered by a coding agent running on your laptop. Click a thumbnail to see the real example.
1 · Prototypes — web · desktop · mobile
The default output surface. Single-page HTML artifacts that read your DESIGN.md and render in a sandboxed iframe.
DESIGN.md
Entry view — pick a skill, pick a design system, type the brief. One surface for prototypes, dashboards, decks, mobile apps, magazine pages. Mobile prototype — pixel-accurate iPhone 15 Pro chrome, multi-screen flows. The agent never redraws the phone frame; shared device frames live in assets/frames/. Web prototype — an editorial dashboard with scrollbars, KPIs, and charts. Rendered straight from design-templates/dating-web/. Mobile app prototype — a three-screen gamified flow with XP ribbons and quest detail. Hand off straight to Cursor / Codex / Claude Code to turn into React/Next/Vue.
assets/frames/
design-templates/dating-web/
2 · Live artifacts & dashboards
Live dashboards, decision rooms, KPI walls — single-page artifacts that pull data through a tweaks panel and stay editable in place.
Live dashboard — an editable KPI wall whose tweaks panel surfaces the parameters worth nudging. The agent emits a manifest, and the iframe re-renders without a reload. Decision room — a multi-source briefing artifact for product / research / ops meetings. GitHub-style dashboard — repo metrics presented as a live artifact. Flow live-dashboard template — a domain-specific KPI template, branded through the active DESIGN.md.
Deck mode (guizang-ppt) — magazine layouts, WebGL hero, P0/P1/P2 checklists. Bundled verbatim from op7418/guizang-ppt-skill with its original license preserved. Swiss International-style deck — grid-anchored, monochrome accents. One of 15 deck templates and 36 themes under design-templates/html-ppt-*/.
op7418/guizang-ppt-skill
design-templates/html-ppt-*/
Every deck exports to HTML (single file, inlined assets), PDF (browser print, deck-aware), PPTX (agent-driven skill), ZIP (archive), or Markdown.
4 · Images — gpt-image-2, ImageRouter, custom API
gpt-image-2
Illustrated city food mapHand-drawn editorial travel poster Cinematic elevator sceneSingle-frame editorial still Cyberpunk portraitProfile avatar — neon face text 3D stone staircaseHewn-stone infographic Glamorous portraitEditorial studio shot
93 ready-to-replicate prompts live in prompt-templates/ — preview thumbnails, full prompt body, target model, aspect ratio, and source attribution. One click drops a brief into the composer.
prompt-templates/
5 · Video & HyperFrames — agent-native motion graphics
HyperFrames is HeyGen's open-source, agent-native video framework, integrated as a first-class citizen in Open Design. The agent writes HTML + CSS + GSAP, and HyperFrames renders it to a deterministic MP4 via headless Chrome + FFmpeg. Pair it with Seedance 2.0 for cinematic t2v / i2v, Veo 3 / Sora 2 / Kling 2 for routed model variants, and Suno v5 / Lyria 2 for the audio layer.
30s SaaS product promo · 16:9 · UI 3D reveals TikTok karaoke talking-head · 9:16 · TTS + word-synced captions 30s brand sizzle reel · 16:9 · audio-reactive kinetic type Bar chart race · 16:9 · NYT-style data infographic Flight map · 16:9 · Apple-style route reveal 4s cinematic logo outro · 16:9 · piece-by-piece assembly + bloom $0 → $10K money counter · 9:16 · Apple-style hype Website-to-video · 16:9 · captures the site at 3 viewports
In April 2026, Anthropic released Claude Design — the first time an LLM stopped writing prose and started delivering design artifacts directly. It went viral. But it stayed closed-source, paid-only, cloud-only, locked to Anthropic's model, Anthropic's skills, Anthropic's surface. No checkout, no self-host, no Vercel deploy, no swap-in-your-own-agent.
In April 2026, Anthropic released Claude Design — the first time an LLM stopped writing prose and started delivering design artifacts directly. It went viral. But it stayed closed-source, paid-only, cloud-only, locked to Anthropic's model, Anthropic's skills, Anthropic's surface. No checkout, no self-host, no Vercel deploy, no swap-in-your-own-agent.
Open Design (OD) is the open-source alternative. Same loop, same artifact-first mental model, none of the lock-in:
🤖 Agent-native, model-agnostic. We don't ship an agent. The claude / codex / cursor-agent / copilot / hermes / kimi already on your PATH are the design engine. Swap with one click.
claude
codex
cursor-agent
copilot
hermes
kimi
PATH
🧠 Brand-grade by default. Every render reads the active DESIGN.md — a 9-section schema covering palette, type, spacing, motion, voice, anti-patterns. 150 systems ship with the repo (Linear, Stripe, Vercel, Airbnb, Apple, Tesla, Notion, Anthropic, Cursor, Supabase, Figma…). Drop a folder in, the picker finds it.
DESIGN.md
🖥️ Local-first, BYOK at every layer. Native desktop apps for macOS (Apple Silicon + Intel) and Windows (x64). Linux AppImage on the optional release lane. SQLite at .od/app.sqlite, files at .od/projects//, no telemetry, no cloud round-trip.
.od/app.sqlite
.od/projects//
🌍 Composable on three planes. Plugins carry runnable workflows · skills carry the agent's design taste · design systems carry the brand. All three are plain files anyone can author, version, and publish.
🔁 Refresh an existing codebase. Hand a git repo + DESIGN.md to the agent and it refactors your real components to the brand spec. Dedicated plugins migrate Figma / Pencil workflows into React / Next.js / Vue code.
git
DESIGN.md
🔒 Privacy by conviction. Everything runs where your data lives — your laptop, your team's server, your Vercel project. When the network is needed, the BYOK proxy is SSRF-guarded.
Comparison
Claude Design Figma Lovable / v0 / Bolt Open Design Open source ❌ ❌ ❌ ✅ Apache-2.0 Self-host / desktop ❌ ❌ ❌ ✅ macOS + Windows + Vercel Agent-native (runs in your CLI) Anthropic only ❌ Cloud agent only ✅ 22 CLIs + BYOK Brand-grade DESIGN.md Proprietary Theme JSON Limited tokens ✅ 150 systems shipped Skills / plugins / templates Closed Plugin store Closed ✅ 100+ skills · 261 plugins HyperFrames (HTML→MP4) ❌ ❌ ❌ ✅ First-class Refresh an existing repo to brand ❌ ❌ ❌ ✅ via agent + DESIGN.md Minimum billing Pro / Max / Team Pro / Org Pro / Team BYOK · any compatible endpoint
DESIGN.md
DESIGN.md
Quick start
🖥️ Download the desktop app (recommended — zero config)
The fastest way to use Open Design. No Node, no pnpm, no clone.
After install: the app auto-detects every coding-agent CLI on your PATH, loads 100+ skills and 150 design systems, and lets you type a brief in the entry view.
PATH
🤖 Install into your coding agent (no UI)
You can use Open Design without ever opening the GUI — call it as a skill, plugin, or MCP server inside Claude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, Hermes, Kimi, and more.
One-line install into the agent you're using: curl -fsSL https://open-design.ai/install.sh | sh -s # = claude | codex | cursor | copilot | openclaw | antigravity | gemini # | pi | vibe | hermes | cline | kimi | trae | opencode
Then, inside the agent:
Use open-design to generate a landing page with the Linear design system
Use open-design to generate a landing page with the Linear design system
The agent reads skills/, picks the right SKILL.md, binds the DESIGN.md you named, and emits an previewable at http://localhost:7456.
skills/
SKILL.md
DESIGN.md
http://localhost:7456
🐳 Run with Docker
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
macOS users: If the web UI shows Authorization: Bearer required, Docker Desktop bridge networking is the cause. See Docker Desktop on macOS for the fix.
macOS users: If the web UI shows Authorization: Bearer required, Docker Desktop bridge networking is the cause. See Docker Desktop on macOS for the fix.
Authorization: Bearer required
🧑💻 Run from source
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 users, see docs/windows-troubleshooting.md. Full quickstart, env vars, Nix flake, and packaged build flow → QUICKSTART.md.
~24
10.33.x
docs/windows-troubleshooting.md
QUICKSTART.md
A full workflow — from brief to artifact
brief → plugin → direction → design system → artifact → handoff → memory
brief → plugin → direction → design system → artifact → handoff → memory
A PM submits a brief. The plugin picker offers landing page · pitch deck · dashboard · social post · PM spec · OKR scorecard…
A designer (or the agent) locks the direction. No brand? Pick from 5 curated directions. Have a brand? Drop a screenshot / URL → the agent connects GitHub, imports Figma, and codifies a reusable DESIGN.md.
DESIGN.md
The agent emits the first . Plugin + skill + DESIGN.md are bound. It streams into a sandboxed iframe, editable in place — not "regenerate from scratch."
DESIGN.md
Hand off to engineering. The artifact is real HTML/CSS — drop it into Cursor, Codex, or Claude Code to keep building as code. Or export PPTX / PDF / MP4 straight to marketing.
Open Design gets smarter as you use it. Your screenshots, fonts, palettes, and confirmed artifacts accumulate as defaults for the next session. Less rework, less drift.
Use Open Design from your coding agent
Open Design ships a stdio MCP server and per-agent install scripts. Any MCP-compatible agent in another repo can read files from your local Open Design projects directly — tokens CSS, JSX components, entry HTML — as a structured API queryable by name. The agent always sees the live file, not a stale export.
One-line install (16+ CLIs supported): curl -fsSL https://open-design.ai/install.sh | sh -s # Then the agent can: od search-files "primary button" # search files across projects od get-file design-systems/linear-app/DESIGN.md od get-artifact # latest rendered artifact od plugin run web-prototype --brief "..." od skill list --scenario marketing
Why MCP? Exporting and re-attaching a zip every iteration breaks flow. MCP exposes the design source directly — the agent always sees the live file.
For an agent starting from scratch, the installer places ~/.config//open-design.json (or the platform equivalent) plus a copy-paste MCP snippet. Cursor gets a one-click deeplink; Claude Code gets a claude mcp add-json one-liner; every other agent gets JSON in the schema its config expects. Full per-agent flow → Settings → MCP server in the desktop app, or docs/agent-adapters.md.
~/.config//open-design.json
claude mcp add-json
docs/agent-adapters.md
Security model. Read-only by default, the daemon binds to 127.0.0.1, and SSRF is blocked at the proxy edge. LAN exposure requires an explicit OD_BIND_HOST plus OD_ALLOWED_ORIGINS. Connector credentials and live-artifact preview routes stay loopback-only regardless.
127.0.0.1
OD_BIND_HOST
OD_ALLOWED_ORIGINS
Skills
100+ skills ship in the box — each is a folder under skills/ following the Claude Code SKILL.md convention, extended with an od: frontmatter (mode, platform, scenario, preview.type, design_system.requires, default_for, fidelity, example_prompt). Drop a folder in, restart the daemon, it appears in the picker.
skills/
SKILL.md
od:
mode
platform
scenario
preview.type
design_system.requires
default_for
fidelity
example_prompt
Two modes anchor the catalog: prototype (web/mobile/desktop single-page artifacts) and deck (horizontal-swipe presentations). Also image, video, audio, template, design-system, and utility modes. The scenario field groups them by audience: design · marketing · operation · engineering · product · finance · hr · sale · personal.
🔥 Open Design 0.10.0 is here: the all-in-one Agentic design workspace. The whole craft now lives in one window — go from a vague idea to discovering references, gathering material, editing interactively, queuing comments, polishing motion, and handing off to an editor or a Code Agent — without leaving the app. With parallel sessions, it stops feeling like one assistant and starts feeling like a local design team working for you. Download 0.10.0 · Join the discussion
⚡ Open Design AMR (Agentic Model Router) — the official model service. One recharge to use GPT, Claude, Gemini, and DeepSeek inside Open Design: 20+ flagship models, zero config, billed by real token usage. Try AMR
🏅 The Open Design Fellow program is now open. If you also believe design should be open — become an Open Design Fellow, shape the product alongside the core team, and help more people take part in defining the future of design. Details → MAINTAINERS.md and Discord.
English · Español · Português · Deutsch · Français · 简体中文 · 繁體中文 · 한국어 · 日本語 · العربية · Русский · Українська · Türkçe
What is Open Design
🎨 The local-first, open-source Claude Design alternative. 🖥️ Native desktop app for macOS and Windows. ⚡ 100+ skills · ✨ 150 brand-grade DESIGN.md systems · 📦 261 ready-to-use plugins. 🖼️ Generates web · desktop · mobile prototypes, live dashboards / artifacts, decks, images, video, plus HyperFrames motion graphics. 🔒 Sandboxed iframe preview · HTML / PDF / PPTX / MP4 export. 🤖 Runs on Claude Code · OpenClaw · Codex · Cursor · OpenCode · Qwen · Copilot · Amp · Hermes · Kimi · Antigravity and 22 local CLIs, or any OpenAI-compatible endpoint via BYOK.
DESIGN.md
Open Design is what you get when the agent-native loop Anthropic shipped with Claude Design — discover the brief, lock the direction, stream the artifact, critique, deliver — stops being closed and becomes a filesystem of skills, design systems, and plugins that the coding agents already on your laptop can read, write, and remix. Your CLI becomes the design engine, your laptop becomes the studio, and your team's DESIGN.md becomes the brand contract.
DESIGN.md
It's also the Figma alternative for the agent era — instead of pushing pixels on a canvas, it delivers single-page artifacts in real CSS, real fonts, real components, exported straight to HTML / PDF / PPTX / MP4 — already shaped by your design system, already runnable inside the agent you use every day.
Product tour
A quick look at what Open Design is and what it does. Start from Home, orchestrate repeat workflows with Automation, distill a brand contract in Design System, and extend with Plugins and integrations; inside any project's Studio, the same design system streams out prototypes, live artifacts, HyperFrames, decks, and images.
Core pages
Home — the overview entry point. Pick a skill and a design system, type the brief, and kick off everything from one place.
Automation — orchestrate repetitive design workflows into reusable, schedulable automations. Design System — distill your team's DESIGN.md into a brand contract that shapes every output. Plugin — browse, install, and distribute workflow plugins to extend generation on demand. Integrations — connect external systems and MCP tools, and use Open Design from any IDE, script, or automation.
DESIGN.md
Studio — many artifact types in one project
Inside a project's Studio, the same design system streams out multiple artifact types:
Prototype — single-page HTML artifacts that read your design system and render in a sandboxed iframe, previewable instantly and downloadable as source. HyperFrame — programmatic motion and animated graphics, rendered to a real MP4 (e.g. 1920×1080 · 30fps). Deck — pitch decks you can page through, navigate by keyboard, and export to PPTX / PDF. Image — brand-grade images and visual assets, with high-resolution generation and download.
Platform Compatibility
Open Design ships as skills, a CLI, and an MCP server that mainstream coding agents consume natively. Once OD is installed, a single od mcp install wires the MCP server into that agent's config, and you call the same tools from inside any agent.
Open Design ships as skills, a CLI, and an MCP server that mainstream coding agents consume natively. Once OD is installed, a single od mcp install wires the MCP server into that agent's config, and you call the same tools from inside any agent.
od mcp install
Coding agent / platform Status One-line MCP server install Claude Code ✅ Supported od mcp install claude Codex CLI ✅ Supported od mcp install codex Cursor ✅ Supported od mcp install cursor VS Code + GitHub Copilot ✅ Supported od mcp install copilot GitHub Copilot CLI ✅ Supported od mcp install copilot Gemini CLI ✅ Supported od mcp install gemini OpenCode ✅ Supported od mcp install opencode OpenClaw ✅ Supported od mcp install openclaw Antigravity ✅ Supported od mcp install antigravity Cline ✅ Supported od mcp install cline Trae ✅ Supported od mcp install trae Kimi CLI ✅ Supported od mcp install kimi Pi Agent ✅ Supported od mcp install pi Mistral Vibe CLI ✅ Supported od mcp install vibe Hermes Agent ✅ Supported od mcp install hermes
od mcp install claude
od mcp install codex
od mcp install cursor
od mcp install copilot
od mcp install copilot
od mcp install gemini
od mcp install opencode
od mcp install openclaw
od mcp install antigravity
od mcp install cline
od mcp install trae
od mcp install kimi
od mcp install pi
od mcp install vibe
od mcp install hermes
od mcp install --print for a dry-run preview · --uninstall to remove · full list with od mcp install --help.
od mcp install --print
--uninstall
od mcp install --help
No CLI installed? The BYOK proxy at POST /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream gives you the same loop (no process spawn) — paste baseUrl + apiKey + model, with support for OpenAI, Anthropic, Azure OpenAI, Google Gemini, Ollama, LM Studio, vLLM, or any OpenAI-compatible endpoint. Per-target SSRF protection blocks internal IPs / link-local / CGNAT at the daemon edge.
POST /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream
baseUrl
apiKey
model
The adapter contract and stream parsers live in apps/daemon/src/agents.ts. Adding a new CLI is one entry — see docs/agent-adapters.md.
apps/daemon/src/agents.ts
docs/agent-adapters.md
Demo
Four core product categories, all rendered by a coding agent running on your laptop. Click a thumbnail to see the real example.
1 · Prototypes — web · desktop · mobile
The default output surface. Single-page HTML artifacts that read your DESIGN.md and render in a sandboxed iframe.
DESIGN.md
Entry view — pick a skill, pick a design system, type the brief. One surface for prototypes, dashboards, decks, mobile apps, magazine pages. Mobile prototype — pixel-accurate iPhone 15 Pro chrome, multi-screen flows. The agent never redraws the phone frame; shared device frames live in assets/frames/. Web prototype — an editorial dashboard with scrollbars, KPIs, and charts. Rendered straight from design-templates/dating-web/. Mobile app prototype — a three-screen gamified flow with XP ribbons and quest detail. Hand off straight to Cursor / Codex / Claude Code to turn into React/Next/Vue.
assets/frames/
design-templates/dating-web/
2 · Live artifacts & dashboards
Live dashboards, decision rooms, KPI walls — single-page artifacts that pull data through a tweaks panel and stay editable in place.
Live dashboard — an editable KPI wall whose tweaks panel surfaces the parameters worth nudging. The agent emits a manifest, and the iframe re-renders without a reload. Decision room — a multi-source briefing artifact for product / research / ops meetings. GitHub-style dashboard — repo metrics presented as a live artifact. Flow live-dashboard template — a domain-specific KPI template, branded through the active DESIGN.md.
Deck mode (guizang-ppt) — magazine layouts, WebGL hero, P0/P1/P2 checklists. Bundled verbatim from op7418/guizang-ppt-skill with its original license preserved. Swiss International-style deck — grid-anchored, monochrome accents. One of 15 deck templates and 36 themes under design-templates/html-ppt-*/.
op7418/guizang-ppt-skill
design-templates/html-ppt-*/
Every deck exports to HTML (single file, inlined assets), PDF (browser print, deck-aware), PPTX (agent-driven skill), ZIP (archive), or Markdown.
4 · Images — gpt-image-2, ImageRouter, custom API
gpt-image-2
Illustrated city food mapHand-drawn editorial travel poster Cinematic elevator sceneSingle-frame editorial still Cyberpunk portraitProfile avatar — neon face text 3D stone staircaseHewn-stone infographic Glamorous portraitEditorial studio shot
93 ready-to-replicate prompts live in prompt-templates/ — preview thumbnails, full prompt body, target model, aspect ratio, and source attribution. One click drops a brief into the composer.
prompt-templates/
5 · Video & HyperFrames — agent-native motion graphics
HyperFrames is HeyGen's open-source, agent-native video framework, integrated as a first-class citizen in Open Design. The agent writes HTML + CSS + GSAP, and HyperFrames renders it to a deterministic MP4 via headless Chrome + FFmpeg. Pair it with Seedance 2.0 for cinematic t2v / i2v, Veo 3 / Sora 2 / Kling 2 for routed model variants, and Suno v5 / Lyria 2 for the audio layer.
30s SaaS product promo · 16:9 · UI 3D reveals TikTok karaoke talking-head · 9:16 · TTS + word-synced captions 30s brand sizzle reel · 16:9 · audio-reactive kinetic type Bar chart race · 16:9 · NYT-style data infographic Flight map · 16:9 · Apple-style route reveal 4s cinematic logo outro · 16:9 · piece-by-piece assembly + bloom $0 → $10K money counter · 9:16 · Apple-style hype Website-to-video · 16:9 · captures the site at 3 viewports
In April 2026, Anthropic released Claude Design — the first time an LLM stopped writing prose and started delivering design artifacts directly. It went viral. But it stayed closed-source, paid-only, cloud-only, locked to Anthropic's model, Anthropic's skills, Anthropic's surface. No checkout, no self-host, no Vercel deploy, no swap-in-your-own-agent.
In April 2026, Anthropic released Claude Design — the first time an LLM stopped writing prose and started delivering design artifacts directly. It went viral. But it stayed closed-source, paid-only, cloud-only, locked to Anthropic's model, Anthropic's skills, Anthropic's surface. No checkout, no self-host, no Vercel deploy, no swap-in-your-own-agent.
Open Design (OD) is the open-source alternative. Same loop, same artifact-first mental model, none of the lock-in:
🤖 Agent-native, model-agnostic. We don't ship an agent. The claude / codex / cursor-agent / copilot / hermes / kimi already on your PATH are the design engine. Swap with one click.
claude
codex
cursor-agent
copilot
hermes
kimi
PATH
🧠 Brand-grade by default. Every render reads the active DESIGN.md — a 9-section schema covering palette, type, spacing, motion, voice, anti-patterns. 150 systems ship with the repo (Linear, Stripe, Vercel, Airbnb, Apple, Tesla, Notion, Anthropic, Cursor, Supabase, Figma…). Drop a folder in, the picker finds it.
DESIGN.md
🖥️ Local-first, BYOK at every layer. Native desktop apps for macOS (Apple Silicon + Intel) and Windows (x64). Linux AppImage on the optional release lane. SQLite at .od/app.sqlite, files at .od/projects//, no telemetry, no cloud round-trip.
.od/app.sqlite
.od/projects//
🌍 Composable on three planes. Plugins carry runnable workflows · skills carry the agent's design taste · design systems carry the brand. All three are plain files anyone can author, version, and publish.
🔁 Refresh an existing codebase. Hand a git repo + DESIGN.md to the agent and it refactors your real components to the brand spec. Dedicated plugins migrate Figma / Pencil workflows into React / Next.js / Vue code.
git
DESIGN.md
🔒 Privacy by conviction. Everything runs where your data lives — your laptop, your team's server, your Vercel project. When the network is needed, the BYOK proxy is SSRF-guarded.
Comparison
Claude Design Figma Lovable / v0 / Bolt Open Design Open source ❌ ❌ ❌ ✅ Apache-2.0 Self-host / desktop ❌ ❌ ❌ ✅ macOS + Windows + Vercel Agent-native (runs in your CLI) Anthropic only ❌ Cloud agent only ✅ 22 CLIs + BYOK Brand-grade DESIGN.md Proprietary Theme JSON Limited tokens ✅ 150 systems shipped Skills / plugins / templates Closed Plugin store Closed ✅ 100+ skills · 261 plugins HyperFrames (HTML→MP4) ❌ ❌ ❌ ✅ First-class Refresh an existing repo to brand ❌ ❌ ❌ ✅ via agent + DESIGN.md Minimum billing Pro / Max / Team Pro / Org Pro / Team BYOK · any compatible endpoint
DESIGN.md
DESIGN.md
Quick start
🖥️ Download the desktop app (recommended — zero config)
The fastest way to use Open Design. No Node, no pnpm, no clone.
After install: the app auto-detects every coding-agent CLI on your PATH, loads 100+ skills and 150 design systems, and lets you type a brief in the entry view.
PATH
🤖 Install into your coding agent (no UI)
You can use Open Design without ever opening the GUI — call it as a skill, plugin, or MCP server inside Claude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, Hermes, Kimi, and more.
One-line install into the agent you're using: curl -fsSL https://open-design.ai/install.sh | sh -s # = claude | codex | cursor | copilot | openclaw | antigravity | gemini # | pi | vibe | hermes | cline | kimi | trae | opencode
Then, inside the agent:
Use open-design to generate a landing page with the Linear design system
Use open-design to generate a landing page with the Linear design system
The agent reads skills/, picks the right SKILL.md, binds the DESIGN.md you named, and emits an previewable at http://localhost:7456.
skills/
SKILL.md
DESIGN.md
http://localhost:7456
🐳 Run with Docker
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
macOS users: If the web UI shows Authorization: Bearer required, Docker Desktop bridge networking is the cause. See Docker Desktop on macOS for the fix.
macOS users: If the web UI shows Authorization: Bearer required, Docker Desktop bridge networking is the cause. See Docker Desktop on macOS for the fix.
Authorization: Bearer required
🧑💻 Run from source
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 users, see docs/windows-troubleshooting.md. Full quickstart, env vars, Nix flake, and packaged build flow → QUICKSTART.md.
~24
10.33.x
docs/windows-troubleshooting.md
QUICKSTART.md
A full workflow — from brief to artifact
brief → plugin → direction → design system → artifact → handoff → memory
brief → plugin → direction → design system → artifact → handoff → memory
A PM submits a brief. The plugin picker offers landing page · pitch deck · dashboard · social post · PM spec · OKR scorecard…
A designer (or the agent) locks the direction. No brand? Pick from 5 curated directions. Have a brand? Drop a screenshot / URL → the agent connects GitHub, imports Figma, and codifies a reusable DESIGN.md.
DESIGN.md
The agent emits the first . Plugin + skill + DESIGN.md are bound. It streams into a sandboxed iframe, editable in place — not "regenerate from scratch."
DESIGN.md
Hand off to engineering. The artifact is real HTML/CSS — drop it into Cursor, Codex, or Claude Code to keep building as code. Or export PPTX / PDF / MP4 straight to marketing.
Open Design gets smarter as you use it. Your screenshots, fonts, palettes, and confirmed artifacts accumulate as defaults for the next session. Less rework, less drift.
Use Open Design from your coding agent
Open Design ships a stdio MCP server and per-agent install scripts. Any MCP-compatible agent in another repo can read files from your local Open Design projects directly — tokens CSS, JSX components, entry HTML — as a structured API queryable by name. The agent always sees the live file, not a stale export.
One-line install (16+ CLIs supported): curl -fsSL https://open-design.ai/install.sh | sh -s # Then the agent can: od search-files "primary button" # search files across projects od get-file design-systems/linear-app/DESIGN.md od get-artifact # latest rendered artifact od plugin run web-prototype --brief "..." od skill list --scenario marketing
Why MCP? Exporting and re-attaching a zip every iteration breaks flow. MCP exposes the design source directly — the agent always sees the live file.
For an agent starting from scratch, the installer places ~/.config//open-design.json (or the platform equivalent) plus a copy-paste MCP snippet. Cursor gets a one-click deeplink; Claude Code gets a claude mcp add-json one-liner; every other agent gets JSON in the schema its config expects. Full per-agent flow → Settings → MCP server in the desktop app, or docs/agent-adapters.md.
~/.config//open-design.json
claude mcp add-json
docs/agent-adapters.md
Security model. Read-only by default, the daemon binds to 127.0.0.1, and SSRF is blocked at the proxy edge. LAN exposure requires an explicit OD_BIND_HOST plus OD_ALLOWED_ORIGINS. Connector credentials and live-artifact preview routes stay loopback-only regardless.
127.0.0.1
OD_BIND_HOST
OD_ALLOWED_ORIGINS
Skills
100+ skills ship in the box — each is a folder under skills/ following the Claude Code SKILL.md convention, extended with an od: frontmatter (mode, platform, scenario, preview.type, design_system.requires, default_for, fidelity, example_prompt). Drop a folder in, restart the daemon, it appears in the picker.
skills/
SKILL.md
od:
mode
platform
scenario
preview.type
design_system.requires
default_for
fidelity
example_prompt
Two modes anchor the catalog: prototype (web/mobile/desktop single-page artifacts) and deck (horizontal-swipe presentations). Also image, video, audio, template, design-system, and utility modes. The scenario field groups them by audience: design · marketing · operation · engineering · product · finance · hr · sale · personal.