On April 17, 2026, Anthropic dropped Claude Design — a tool that turns a single sentence into a fully interactive HTML prototype, slide deck, or one-pager. It went viral within hours. Then people noticed the fine print: paid plans only, cloud-only, locked to Anthropic’s models, no self-hosting.
Exactly five days later, the open-source community shipped a free alternative. In the week that followed, it pulled in 18,200+ GitHub stars. Developers called it “the Claude Design killer you can actually own.”
It’s called Open Design — and this guide walks you through exactly what it is, what it can do, and how to get it running on your machine in under 10 minutes.
Open Design — At a Glance
What Is Open Design, Exactly?
Open Design is a local-first, open-source design tool built by Tom Huang and the nexu-io team. It replicates the core magic of Claude Design — describe something in plain language, get back a fully interactive HTML artifact — but with none of the lock-in.
The key architectural difference: Open Design doesn’t ship its own AI agent. Instead, it detects the coding-agent CLIs you already have installed (Claude Code, Codex, Cursor, Gemini CLI, and 9 more) and uses them as the design engine. You bring your own API key. Your data stays on your machine. You can swap models freely.
| Feature | Claude Design | Open Design |
|---|---|---|
| Cost | Paid plans only (Pro/Max/Team) | Free (BYOK — pay only for API tokens) |
| Source code | Closed-source | Apache-2.0 open-source |
| Where it runs | Anthropic’s cloud only | Local-first (+ optional Vercel deploy) |
| Models supported | Claude Opus 4.7 only | Claude, Codex, Gemini, DeepSeek, GPT, Ollama, + more |
| Data privacy | Uploaded to Anthropic cloud | Stays on your machine |
| Export formats | Limited | HTML, PDF, PPTX, ZIP, MP4 |
| MCP integration | None | Full MCP server (od mcp) |
What You Can Actually Build With It
What You Can Actually Build With ItOpen Design ships with 19 composable skills and 71 brand-grade design systems out of the box. Each skill is a folder — readable, editable, and swappable. Here’s a practical breakdown:
🌐 Web Prototypes
Landing pages, SaaS dashboards, pricing pages, docs pages, blog posts, mobile onboarding flows. Single-page HTML artifacts with sandboxed preview — editable in-place and exportable.
📊 Slide Decks
Magazine-style presentations with WebGL hero backgrounds. Single-file HTML output with PDF export. The deck mode uses the guizang-ppt skill. Great for pitch decks, sales presentations, and investor updates.
📱 Mobile Prototypes
Pixel-accurate iPhone 15 Pro chrome complete with Dynamic Island, status bar SVGs, and home indicator. Multi-screen flows use shared assets so the agent never redraws the phone frame.
🎨 Marketing Assets
Email marketing templates, social carousels, magazine posters, motion frames (CSS animations), sprite animations, infographics, illustrated maps. Outputs as PNG, MP4, or HTML.
🔴 Live Artifacts (New in v0.4)
Designs connected to real data via the Composio connector catalog — hundreds of SaaS integrations. Your prototype updates when your data changes, not just when you prompt it.
The 13 AI Agents It Supports
Open Design doesn’t ship its own model — it auto-detects whichever coding-agent CLI you already have installed on your PATH. At daemon boot, it scans for these 13 tools and surfaces them in the interface with one-click switching:
Codex CLI
Cursor Agent
Gemini CLI
OpenCode
Qwen Code
GitHub Copilot CLI
Kilo Code
Devin for Terminal
Hermes (ACP)
Kimi CLI (ACP)
Pi (RPC)
Kiro CLI (ACP)
No CLI installed? The BYOK proxy accepts any OpenAI-compatible baseUrl + apiKey — works with Anthropic-via-OpenAI, DeepSeek, Groq, OpenRouter, self-hosted vLLM, or any other provider.
Step-by-Step Setup Guide (Under 10 Minutes)
Step-by-Step Setup Guide (Under 10 Minutes)The quick summary online says “clone, install, done.” In practice it’s a few more steps — here’s the full sequence so you don’t get stuck.
Before You Start — Check These Prerequisites
✅ Node.js ~v24 — Check with node --version. Install from nodejs.org if needed.
✅ pnpm v10.33+ — Install with npm install -g pnpm
✅ Git — Most machines already have this. Check with git --version
✅ At least one AI agent CLI or API key — Claude Code, Codex, Gemini CLI, or any OpenAI-compatible key
Clone the repository
Open your terminal and run:
git clone https://github.com/nexu-io/open-design.git
cd open-design
Install dependencies
This installs all required packages. First run may take 1–2 minutes:
pnpm install
Start the local dev server
This launches both the daemon (local SQLite + tool server) and the web UI simultaneously:
pnpm tools-dev run web
The app opens automatically at localhost:3000. The daemon creates a local .od/ folder for SQLite and per-project artifacts. No init step needed.
Connect your AI agent or API key
Open Design checks your PATH for installed CLIs automatically. On the welcome screen you’ll see which agents were detected. Two options:
Option A — CLI auto-detect (preferred)
If Claude Code, Codex, Gemini CLI, or Cursor Agent is installed, it appears automatically. Click to activate.
Option B — BYOK Proxy
No CLI? Enter your API key directly: baseUrl + apiKey + model name. Works with Anthropic, OpenAI, DeepSeek, Groq, OpenRouter, self-hosted vLLM, or any OpenAI-compatible endpoint.
Run your first design
Pick a skill from the entry view (e.g., web-prototype or saas-landing), select a design system, and type your brief. The tool runs a discovery form first — locking in your audience, tone, brand context, and scale before a single pixel gets generated. Then it streams a live task list and renders a sandboxed preview.
“Make me a magazine-style pitch deck for our seed round”
The MCP Integration: Why This Is More Than a Design Tool
Version 0.4.0 added a full MCP server — od mcp. This is the feature that separates Open Design from every other design tool in the category.
Once you drop the MCP config into your editor or agent, Claude Code, Cursor, VS Code, Zed, and Windsurf can all read your Open Design files directly. No more screenshotting designs into Cursor. Your agent sees your actual design artifacts.
Add Open Design MCP to Claude Code
Add this to your Claude Code MCP config (~/.claude/mcp_config.json):
{
“mcpServers”: {
“open-design”: {
“command”: “od”,
“args”: [“mcp”]
}
}
}
The same stdio MCP server works in Cursor, VS Code, Zed, and Windsurf via their respective MCP config formats. Check the official README for editor-specific examples.
Already Have Claude Design Projects? Import Them.
If you’ve been using Claude Design on an Anthropic subscription and want to move your work over, Open Design has a direct import path. Export your project as a ZIP from Claude Design, then drag it onto the Open Design welcome dialog.
The endpoint POST /api/import/claude-design parses the ZIP into a real .od/projects/<id>/ folder, opens the entry file as a tab, and stages a “continue-where-Anthropic-left-off” prompt for your local agent.
What Does “Free” Actually Mean? The Real Cost Breakdown.
Open Design itself is free. But to generate designs, your chosen AI agent makes API calls — which have a cost. Here’s the honest breakdown:
| Model / Route | Quality | Approx. Cost per Design |
|---|---|---|
| Claude Opus 4.7 (API) | Same as Claude Design | ~$0.10–$0.40 per prototype |
| Claude Sonnet / GPT-4o | Slightly lower (5–10%) | ~$0.02–$0.08 per prototype |
| DeepSeek V4 / Gemini Flash | 15–25% drop on consistency | ~$0.005–$0.02 per prototype |
| Local Ollama (32B) | Noticeable gap on complex layouts | Free (GPU cost only) |
The smart strategy: draft on a cheap model (DeepSeek, Gemini Flash, or local Ollama) to iterate quickly, then polish final deliverables on Claude Opus only when it matters. This is the workflow you literally cannot do with Claude Design.
⚠️ Honest Heads-Up Before You Dive In
Open Design is 5 days old at time of writing. The core workflow is solid, but comment-mode surgical edits and the AI-emitted tweaks panel are still on the roadmap. Some edge cases in packaging and MCP config have hotfixes pending (v0.4.1 planned for May 6, 2026). It’s production-ready for early adopters, not yet as polished as a mature commercial tool.
Also: this requires Node ~v24, not just any recent Node. If you get errors on install, check your Node version first — it’s the most common setup issue.
Try Open Design Now
Local-first · Apache-2.0 · 18,200+ stars · Your API key, your data
Written by the MindWiredAI team. Information verified against the Open Design GitHub repository (nexu-io/open-design), opendesigner.io, and the v0.4.0 release notes. GitHub star counts as of May 5, 2026. Open Design is not affiliated with or endorsed by Anthropic. Claude Design is a trademark of Anthropic. Cost estimates sourced from pasqualepillitteri.it/en/news/1518 benchmarks. The Apache-2.0 license is confirmed in the official repo.
