Open Design is the open-source alternative to Claude Design. Local-first, BYOK at every layer — 19 composable skills and 71 brand-grade design systems, driven by the agent already on your laptop.
Composable Skills
Design Systems
Agent Runtimes
Visual Directions
Not another wrapper. A skill-driven design workflow that runs on your machine, deploys to Vercel, and stays yours.
The daemon scans your PATH for Claude Code, Codex, Cursor, Gemini CLI, OpenCode, or Qwen. Whichever it finds becomes the design engine. No lock-in.
Following Claude Code's SKILL.md convention — drop a folder into skills/, restart the daemon, it appears in the picker. No plugin API, no build step.
Portable Markdown, not theme JSON. Linear, Stripe, Vercel, Airbnb, Tesla, Notion, Apple, and 64 more — switch system, next render uses the new tokens.
Every fresh brief begins with a discovery form — surface, audience, tone, brand context. 30 seconds of radios beats 30 minutes of redirects.
The daemon spawns the CLI in your project folder. The agent gets real Read, Write, Bash, WebFetch against a real on-disk environment. Not a sandbox.
Discovery directives, identity charter, active DESIGN.md, active SKILL.md, metadata, side files — every layer is a file you can edit.
Type a prompt. The system handles the rest — no config, no boilerplate.
The agent emits a question form — surface, audience, tone, brand context, scale. Locks the brief before writing a single pixel.
No brand? Choose from 5 curated visual directions — Editorial, Modern Minimal, Tech Utility, Brutalist, or Soft Warm. One click, deterministic palette.
A TodoWrite plan streams into the UI. The agent reads skill assets, runs a 5-dimensional critique, and emits a production artifact.
The artifact renders in a sandboxed iframe. Download as HTML, PDF, PPTX, or ZIP. Edit in place via the file workspace.
Auto-detected from PATH on daemon boot. No configuration required — if it's installed, it works.
Adding a new CLI is one entry in daemon/agents.js. Streaming format is either claude-stream-json or plain.
Each skill is a folder — SKILL.md + assets + references. Drop one in, restart, it appears in the picker.
Single-page HTML — landings, marketing, hero pages
Hero, features, pricing, CTA marketing layout
Admin and analytics with sidebar + data-dense layout
Standalone pricing and comparison tables
iPhone 15 Pro / Pixel framed app screens
Three-column documentation layout
Editorial long-form articles
Magazine-style web PPT with WebGL hero backgrounds
Minimal horizontal-swipe deck
PM specification doc with TOC + decision log
Team weekly with progress, blockers, next steps
Meeting decision log
Incident runbook
Executive finance summary
Single-page invoice
Board snapshot
OKR scoresheet
Role onboarding plan
Multi-screen mobile onboarding flow
Portable Markdown, not theme JSON. Each is a 9-section DESIGN.md — color, typography, spacing, layout, components, motion, voice, brand, anti-patterns.
Claude, Cohere, Mistral, MiniMax, Together, Replicate, RunwayML, ElevenLabs, Ollama, x.AI
Cursor, Vercel, Linear, Framer, Expo, ClickHouse, MongoDB, Supabase, HashiCorp, PostHog, Sentry, Warp
Notion, Figma, Miro, Airtable, Superhuman, Intercom, Zapier, Cal, Clay, Raycast
Stripe, Coinbase, Binance, Kraken, Mastercard, Revolut, Wise
Shopify, Airbnb, Uber, Nike, Starbucks, Pinterest
Tesla, BMW, Ferrari, Lamborghini, Bugatti, Renault
A Vite + React SPA talks to a local Express daemon, which spawns your CLI agent in a real project folder.
┌─────────────────────────── browser ──────────────────────────────┐
│ │
│ Vite + React SPA (chat · file workspace · iframe preview) │
│ │
└───────────────┬────────────────────────────────────┬─────────────┘
│ /api/* (proxied in dev) │ direct (BYOK)
▼ ▼
┌──────────────────────┐ ┌──────────────────────┐
│ Local daemon │ │ Anthropic SDK │
│ (Express + SQLite) │ │ (browser fallback) │
│ │ └──────────────────────┘
│ /api/agents │
│ /api/skills │
│ /api/design-systems│
│ /api/chat (SSE) │
└──────────┬────────────┘
│ spawn(cli, [...], { cwd: .od/projects/<id> })
▼
┌──────────────────────────────────────────────────────────────┐
│ claude · codex · cursor · gemini · opencode · qwen │
│ reads SKILL.md + DESIGN.md, writes artifacts to disk │
└──────────────────────────────────────────────────────────────┘
Vite 5 + React 18 + TypeScript. Sandboxed iframe preview via srcdoc. Streaming artifact parser.
Node 18+ · Express · SSE streaming · better-sqlite3 for projects, conversations, messages, and tabs.
child_process.spawn with claude-stream-json parser for Claude Code, line-buffered stdout for others.
Clone, install, run. The daemon auto-detects your agent CLI, loads all skills and design systems, and creates the runtime folder.
# Clone the repo git clone https://github.com/nexu-io/open-design.git cd open-design # Install dependencies pnpm install # Start the daemon + dev server pnpm dev:all # Open http://localhost:5173
Scans PATH for installed agent CLIs and picks the best one automatically. No config file to write.
No od init step. The daemon creates .od/ with SQLite DB, project folders, and artifact storage on first boot.
No agent CLI installed? Paste an Anthropic API key in the welcome dialog and use the browser-side SDK path.
Runs locally with pnpm dev, deploys to Vercel, or runs as a single-process prod server with npm start.
Feature comparison with Claude Design and Open CoDesign — the two closest alternatives.
| Feature | Claude Design | Open CoDesign | Open Design |
|---|---|---|---|
| License | Closed | MIT | Apache-2.0 |
| Form factor | Web (claude.ai) | Electron desktop | Web + local daemon |
| Deploy to Vercel | ✗ | ✗ | ✓ |
| Agent runtime | Bundled (Opus) | Bundled (pi-ai) | Your existing CLI |
| Skills | Proprietary | 12 custom modules | 19 file-based SKILL.md |
| Design systems | Proprietary | Roadmap | 71 shipped |
| Init question form | ✗ | ✗ | ✓ Hard rule, turn 1 |
| Direction picker | ✗ | ✗ | ✓ 5 directions |
| 5-dim self-critique | ✗ | ✗ | ✓ Pre-emit gate |
| Export formats | Limited | HTML/PDF/PPTX/ZIP/MD | HTML/PDF/PPTX/ZIP/MD |
| Minimum billing | Pro / Max / Team | BYOK | BYOK |
Built-in guardrails that prevent the generic, forgettable output typical of AI design tools.
Turn 1 is always a discovery form — no thinking, no tools, no narration. The user locks decisions at radio speed.
When the user attaches a screenshot or URL, the agent runs a 5-step protocol before writing CSS. Never guesses brand colors from memory.
Before emitting, the agent scores its output across philosophy, hierarchy, execution, specificity, and restraint. Anything under 3/5 is fixed.
Every skill ships a checklist with hard P0 gates. The agent must pass P0 before emitting the artifact.
Purple gradients, generic emoji icons, rounded-card-with-left-border, hand-drawn SVG humans, Inter as display — explicitly forbidden.
When the agent doesn't have a real number, it writes — or a labelled grey block. Not "10× faster".
Issues, PRs, new skills, and new design systems are all welcome.
Drop a folder into skills/ following the SKILL.md convention. One folder, one Markdown file.
Drop a DESIGN.md into design-systems/<brand>/ using the 9-section schema.
One entry in daemon/agents.js — bin name, argv builder, streaming format.
Full walkthrough, bar-for-merging, and code style → CONTRIBUTING.md
Clone, install, run. Open source, local-first, no lock-in.