🎨 Local-first, open-source alternative to Anthropic's Claude Design. 19 Skills · 71 brand-grade Design Systems 🖼 Generate web · desktop · mobile prototypes · slides · images · videos · HyperFrames 📦 Sandboxed preview · HTML/PDF/PPTX/MP4 export 🤖 Runs on Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen / Copilot / Hermes / Kimi CLI.
Find a file
2026-05-30 18:55:20 +08:00
.github Add release-beta-s self-hosted workflow placeholder (#3150) 2026-05-28 03:44:52 +00:00
.vaunt feat: enable Vaunt contributor recognition with 5-tier system (#908) 2026-05-08 17:44:12 +08:00
apps fix(daemon): reconcile missing artifact manifests on run end (#2893) (#3110) 2026-05-28 03:54:48 +00:00
assets fix(frames): resolve relative screen= against embedder URL (#2316) 2026-05-20 10:03:01 +08:00
charts/open-design MVP Helm chart (#2140) 2026-05-24 14:37:25 +00:00
craft refine typography-hierarchy craft docs — clarify edge cases and make lint measurable (#979) 2026-05-09 08:13:35 +08:00
deploy fix(docker): fix container startup crash due to missing OD_API_TOKEN (#2928) 2026-05-26 06:15:48 +00:00
design-systems fix(design-systems): align mission-control success and danger tokens (#3036) 2026-05-27 04:45:10 +00:00
design-templates feat(tweaks): bind toolbar toggle to artifact panel (#2348) 2026-05-20 18:00:49 +08:00
docs docs: add product tour section with page and Studio screenshots 2026-05-30 18:55:20 +08:00
e2e Add social sharing for template previews (#2924) 2026-05-27 10:21:35 +00:00
nix chore(nix): streamline pnpm deps hash maintenance (#2919) 2026-05-26 07:35:38 +00:00
packages Add tracking for Automations, Plugin Detail & Loop (#3103) 2026-05-27 16:48:41 +00:00
plugins feat(landing-page): localize plugins library across 18 locales (#3010) 2026-05-27 09:30:59 +00:00
prompt-templates fix home example prompt presets 2026-05-21 17:25:09 +08:00
scripts fix(ci): run fork visual reports from trusted code (#2935) 2026-05-26 06:17:04 +00:00
skills skills: fix GSAP review follow-ups (#3111) 2026-05-27 11:27:47 +00:00
specs docs: add media execution policy proposal (#3096) 2026-05-28 04:03:05 +00:00
story Refactor project name from "Open Claude Design" to "Open Design" (#1) 2026-04-28 16:03:35 +08:00
templates add otd-operations-brief live-artifact template (#794) 2026-05-08 12:53:24 +08:00
tools feat(pack): add Windows portable zip target alongside NSIS installer (#2937) 2026-05-26 06:14:44 +00:00
.dockerignore Add Docker Compose deployment workflow (#65) 2026-05-08 11:51:51 +08:00
.gitignore feat(landing-page): replicate #2469 SEO content with deploy + regression fixes (#2605) 2026-05-22 00:59:11 +08:00
.node-version add support for VP_HOME environment variable in agent resolution (#859) 2026-05-08 15:14:37 +08:00
AGENTS.md chore(nix): streamline pnpm deps hash maintenance (#2919) 2026-05-26 07:35:38 +00:00
CHANGELOG.md chore(changelog): refresh 0.8.0 entry for auto-update + remove resume conversation 2026-05-22 19:49:17 +08:00
CLAUDE.md docs: add git commit co-author policy (#131) 2026-04-30 15:08:22 +08:00
CONTEXT.md Implement Home audio essential workflow (#2104) 2026-05-18 23:14:03 +08:00
CONTRIBUTING.de.md docs: add Maintainer rules (MAINTAINERS.md + CONTRIBUTING entry-point) (#1290) 2026-05-11 20:19:55 +08:00
CONTRIBUTING.fr.md docs: add Maintainer rules (MAINTAINERS.md + CONTRIBUTING entry-point) (#1290) 2026-05-11 20:19:55 +08:00
CONTRIBUTING.ja-JP.md docs: add Maintainer rules (MAINTAINERS.md + CONTRIBUTING entry-point) (#1290) 2026-05-11 20:19:55 +08:00
CONTRIBUTING.md docs(pr): require user-perspective description and surface area (#1520) 2026-05-13 15:28:05 +08:00
CONTRIBUTING.pt-BR.md docs: add Maintainer rules (MAINTAINERS.md + CONTRIBUTING entry-point) (#1290) 2026-05-11 20:19:55 +08:00
CONTRIBUTING.zh-CN.md docs: add Maintainer rules (MAINTAINERS.md + CONTRIBUTING entry-point) (#1290) 2026-05-11 20:19:55 +08:00
edited_image.png feat(editorial-collage): introduce Atelier Zero style landing page as… (#366) 2026-05-04 13:39:58 +08:00
flake.lock feat(nix): Add official flake with home-manager and NixOS support (#402) 2026-05-09 23:50:16 +08:00
flake.nix chore(nix): streamline pnpm deps hash maintenance (#2919) 2026-05-26 07:35:38 +00:00
LICENSE Refactor project name from "Open Claude Design" to "Open Design" (#1) 2026-04-28 16:03:35 +08:00
MAINTAINERS.de.md docs: add Maintainer rules (MAINTAINERS.md + CONTRIBUTING entry-point) (#1290) 2026-05-11 20:19:55 +08:00
MAINTAINERS.fr.md docs: add Maintainer rules (MAINTAINERS.md + CONTRIBUTING entry-point) (#1290) 2026-05-11 20:19:55 +08:00
MAINTAINERS.ja-JP.md docs: add Maintainer rules (MAINTAINERS.md + CONTRIBUTING entry-point) (#1290) 2026-05-11 20:19:55 +08:00
MAINTAINERS.md docs: add Maintainer rules (MAINTAINERS.md + CONTRIBUTING entry-point) (#1290) 2026-05-11 20:19:55 +08:00
MAINTAINERS.pt-BR.md docs: add Maintainer rules (MAINTAINERS.md + CONTRIBUTING entry-point) (#1290) 2026-05-11 20:19:55 +08:00
MAINTAINERS.zh-CN.md docs: add Maintainer rules (MAINTAINERS.md + CONTRIBUTING entry-point) (#1290) 2026-05-11 20:19:55 +08:00
package.json chore(nix): streamline pnpm deps hash maintenance (#2919) 2026-05-26 07:35:38 +00:00
pnpm-lock.yaml chore(deps): upgrade express 4 -> 5 in daemon (#2311) 2026-05-26 03:16:48 +00:00
pnpm-workspace.yaml chore: patch qs advisory (#2833) 2026-05-25 05:49:33 +00:00
PRIVACY.md improve privacy consent modal: policy link, clearer CTAs, mobile layout (#1921) 2026-05-17 20:24:15 +08:00
QUICKSTART.de.md docs: add Traditional Chinese QUICKSTART and fix Chinese doc links (#753) 2026-05-09 21:19:08 +08:00
QUICKSTART.fr.md docs: add Traditional Chinese QUICKSTART and fix Chinese doc links (#753) 2026-05-09 21:19:08 +08:00
QUICKSTART.ja-JP.md docs: add Traditional Chinese QUICKSTART and fix Chinese doc links (#753) 2026-05-09 21:19:08 +08:00
QUICKSTART.md fix(docker): fix container startup crash due to missing OD_API_TOKEN (#2928) 2026-05-26 06:15:48 +00:00
QUICKSTART.pt-BR.md docs: add Traditional Chinese QUICKSTART and fix Chinese doc links (#753) 2026-05-09 21:19:08 +08:00
QUICKSTART.zh-CN.md docs: add Traditional Chinese QUICKSTART and fix Chinese doc links (#753) 2026-05-09 21:19:08 +08:00
QUICKSTART.zh-TW.md docs: add Traditional Chinese QUICKSTART and fix Chinese doc links (#753) 2026-05-09 21:19:08 +08:00
README.ar.md docs(readme): refresh contributors wall (#3077) 2026-05-27 10:06:48 +00:00
README.de.md docs(readme): refresh contributors wall (#3077) 2026-05-27 10:06:48 +00:00
README.es.md docs(readme): refresh contributors wall (#3077) 2026-05-27 10:06:48 +00:00
README.fr.md docs(readme): refresh contributors wall (#3077) 2026-05-27 10:06:48 +00:00
README.ja-JP.md docs(readme): refresh contributors wall (#3077) 2026-05-27 10:06:48 +00:00
README.ko.md docs(readme): refresh contributors wall (#3077) 2026-05-27 10:06:48 +00:00
README.md docs: surface plugin authoring + add X/Discord badges to README 2026-05-29 00:26:49 +08:00
README.pt-BR.md docs(readme): refresh contributors wall (#3077) 2026-05-27 10:06:48 +00:00
README.ru.md docs(readme): refresh contributors wall (#3077) 2026-05-27 10:06:48 +00:00
README.tr.md docs(readme): refresh contributors wall (#3077) 2026-05-27 10:06:48 +00:00
README.uk.md docs(readme): refresh contributors wall (#3077) 2026-05-27 10:06:48 +00:00
README.zh-CN.md docs: add product tour section with page and Studio screenshots 2026-05-30 18:55:20 +08:00
README.zh-TW.md docs(readme): refresh contributors wall (#3077) 2026-05-27 10:06:48 +00:00
TRANSLATIONS.md docs(i18n): add RTL_LOCALES UI guidance and fix Spanish es-ES alignment (#1908) 2026-05-16 21:45:15 +08:00
vercel.json fix(web): keep Vercel static builds writing to out (#2946) 2026-05-26 03:37:27 +00:00

Open Design

Open Design

The open-source Claude Design alternative.
Agent-native, local-first product-design platform. Native desktop app for macOS & Windows.

⬇ Download for macOS ⬇ Download for Windows ⬇ Download for Linux Follow on X Join Discord

Website · All releases · Quickstart · Architecture · Discord · X / Twitter

Important

🔥 Open Design 0.8.0 is here. Design's old world ends here. Help us build the new one.

One folder upgrades anything — Plugins, Skills, Design Systems — into a reusable, agent-runnable artifact. New Skill registry, refreshed DESIGN.md Design Systems, brand-grade templates, and a clean upgrade path for 0.7.x projects.

🧩 Call for plugin authors. 0.8.0 lands the plugin marketplace foundation with 400+ official plugins across scenarios, image templates, video templates, atoms, design systems and examples. A plugin can:

Author your own → spec at plugins/spec/SPEC.md · agent-dev guide at plugins/spec/AGENT-DEVELOPMENT.md · contributing guide at plugins/spec/CONTRIBUTING.md. Drop a folder under plugins/_official/ or plugins/community/, open a PR — your plugin ships in the next release.

Read the announcement & changelog · 0.8.0 release · runs side-by-side with your current 0.7.

Open Design — the open-source Claude Design alternative · 129 Design Systems · 16 Coding Agents · 14 Media Providers · 400+ Plugins

Stars Forks Issues PRs Contributors Last commit

Download Latest release License Agents DESIGN.md Skills Plugins Discord X

English · Español · Português · Deutsch · Français · 简体中文 · 繁體中文 · 한국어 · 日本語 · العربية · Русский · Українська · Türkçe


What is Open Design

🎨 Local-first, open-source Claude Design alternative.  🖥️ Native desktop app for macOS & Windows.   100+ Skills · 100+ brand-grade DESIGN.md systems · 📦 400+ ready-to-use Plugins.  🖼️ Generate web · desktop · mobile prototypes, live dashboards / artifacts, slides, images, videos, and HyperFrames motion graphics. 🔒 Sandboxed iframe preview · HTML / PDF / PPTX / MP4 export.  🤖 Runs on Claude Code · OpenClaw · Codex · Cursor · OpenCode · Qwen · Copilot · Hermes · Kimi · Antigravity & 17+ local CLIs, or BYOK with any OpenAI-compatible endpoint.

Open Design is what happens when the agent-native loop Anthropic shipped with Claude Design — discover the brief, lock the direction, stream the artifact, critique, ship — stops being closed and starts being a filesystem of skills, design systems, and plugins the coding agent already on your laptop can read, write, and remix. Your CLI becomes the design engine. Your laptop becomes the workshop. Your team's DESIGN.md becomes the brand contract.

It is also the Figma alternative for the agent era — instead of pixel-pushing in a canvas, you ship a single-page artifact with real CSS, real fonts, real components, and real export to HTML / PDF / PPTX / MP4 — already shaped by your design system, already runnable inside the agents you use every day.


Platform Compatibility

Open Design ships as Skills, CLIs, and an MCP server that mainstream coding agents consume natively. Install once, then invoke open-design (or od) from inside any of the agents below — same loop, no UI re-tooling.

Platform Status Install method
Claude Code Native Plugin marketplace · claude plugin install open-design
Cursor Supported Auto-discovery from PATH · Cursor deeplink in Settings → MCP server
VS Code + GitHub Copilot Supported Auto-discovery from PATH
GitHub Copilot CLI Supported od plugin install copilot
Codex CLI Supported curl -fsSL https://open-design.ai/install.sh | sh -s codex
OpenCode Supported curl -fsSL https://open-design.ai/install.sh | sh -s opencode
OpenClaw Supported curl -fsSL https://open-design.ai/install.sh | sh -s openclaw
Antigravity Supported curl -fsSL https://open-design.ai/install.sh | sh -s antigravity
Gemini CLI Supported curl -fsSL https://open-design.ai/install.sh | sh -s gemini
Pi Agent Supported curl -fsSL https://open-design.ai/install.sh | sh -s pi
Mistral Vibe CLI Supported curl -fsSL https://open-design.ai/install.sh | sh -s vibe
Hermes Agent Supported curl -fsSL https://open-design.ai/install.sh | sh -s hermes
Cline Supported curl -fsSL https://open-design.ai/install.sh | sh -s cline
Kimi CLI Supported curl -fsSL https://open-design.ai/install.sh | sh -s kimi
Trae Supported curl -fsSL https://open-design.ai/install.sh | sh -s trae
Devin for Terminal · Qwen Code · Qoder CLI · Kiro · Kilo · DeepSeek TUI Supported auto-detected on PATH, no setup

No CLI installed? The BYOK proxy at POST /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream is the same loop minus the spawn — paste a baseUrl + apiKey + model for OpenAI, Anthropic, Azure OpenAI, Google Gemini, Ollama, LM Studio, vLLM, or any OpenAI-compatible endpoint. Per-target SSRF guard blocks internal IPs / link-local / CGNAT at the daemon edge.

Adapter contracts and stream parsers live in apps/daemon/src/agents.ts. Adding a new CLI is one entry — see docs/agent-adapters.md.


Demo

Four core product categories, all rendered by a coding agent running on your laptop. Click any thumbnail for the live example.

1 · Prototype — web · desktop · mobile

The default surface. Single-page HTML artifacts that read your DESIGN.md and render in a sandboxed iframe.

Entry view
Entry view — pick a Skill, pick a Design System, type the brief. One surface for prototypes, dashboards, decks, mobile apps, magazine pages.
Mobile onboarding
Mobile prototype — pixel-accurate iPhone 15 Pro chrome, multi-screen flow. The agent never re-draws a phone; shared device frames under assets/frames/.
Web prototype dating-web
Web prototype — editorial dashboards with ticker bars, KPIs, charts. Renders straight from skills/dating-web/.
Gamified app
Mobile app prototype — three-frame gamified flow with XP ribbons, quest detail. Hand-off ready for Cursor / Codex / Claude Code to wire as React/Next/Vue.

2 · Live Artifacts & Dashboards

Real-time dashboards, decision rooms, KPI walls — single-page artifacts that pull data through the tweaks panel and stay editable in place.

Live dashboard
Live dashboard — editable KPI wall, tweaks panel surfaces the parameters worth nudging. The agent emits a manifest the iframe re-renders without a reload.
Decision room
Decision room — multi-source briefing artifact for product / research / ops calls.
GitHub dashboard
GitHub-flavored dashboard — repo metrics laid out as a real-time artifact.
Flow live dashboard
Flow live dashboard template — domain-specific KPI template, branded via active DESIGN.md.

3 · Slides — magazine decks, weekly updates, pitch

Magazine deck (guizang-ppt)
Deck mode (guizang-ppt) — magazine layouts, WebGL hero, P0/P1/P2 checklist. Bundled from op7418/guizang-ppt-skill with license preserved.
Swiss deck
Swiss International deck — grid-anchored, single-color accent. One of 15 deck templates and 36 themes shipped under skills/html-ppt-*/.

Export every deck as HTML (one file, inline assets), PDF (browser print, deck-aware), PPTX (agent-driven via skill), ZIP (archive) or Markdown.

4 · Images — gpt-image-2, ImageRouter, Custom API

Illustrated City Food Map
Illustrated City Food Map
Editorial hand-drawn travel poster
Cinematic Elevator Scene
Cinematic Elevator
Single-frame editorial still
Cyberpunk Anime Portrait
Cyberpunk Portrait
Profile avatar — neon face text
3D Stone Staircase Evolution
3D Stone Staircase
Hewn-stone infographic
Glamorous Portrait
Glamorous Portrait
Editorial studio shot

93 ready-to-replicate prompts ship under prompt-templates/ — preview thumbnails, the prompt verbatim, target model, aspect ratio, and source attribution. One click drops the brief into the composer.

5 · Videos & HyperFrames — agent-native motion graphics

HyperFrames is HeyGen's open-source agent-native video framework, shipped first-class in Open Design. The agent writes HTML + CSS + GSAP, 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 bed.

SaaS promo
30s SaaS product promo · 16:9 · UI 3D reveals
TikTok karaoke
TikTok karaoke talking-head · 9:16 · TTS + word-synced captions
Brand sizzle
30s brand sizzle reel · 16:9 · audio-reactive kinetic type
Bar chart race
Bar-chart race · 16:9 · NYT-style data infographic
Flight map
Flight map · 16:9 · Apple-style route reveal
Logo outro
4s cinematic logo outro · 16:9 · piece-by-piece + bloom
Money counter
$0 → $10K money counter · 9:16 · Apple-style hype
Website to video
Website-to-video · 16:9 · captures site at 3 viewports

11 HyperFrames templates + 39 Seedance prompts ship in-tree. Catalog block thumbnails © HeyGen, framework Apache-2.0. See skills/hyperframes/ for the OD-specific render workflow (composition cache, sandbox-exec workaround, MP4-as-chip).


Why Open Design

2026-04, Anthropic shipped Claude Design — the first time an LLM stopped writing prose and started shipping design artifacts. It went viral. It also 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, not model-bound. We don't ship an agent. Your claude / codex / cursor-agent / copilot / hermes / kimi already on PATH becomes the design engine. Swap with one click.
  • 🧠 Brand-grade by default. Every render reads the active DESIGN.md — 9-section schema with palette, typography, motion, voice, anti-patterns. 129 systems ship in-tree (Linear, Stripe, Vercel, Airbnb, Apple, Tesla, Notion, Anthropic, Cursor, Supabase, Figma…). Drop a folder, the picker picks it up.
  • 🖥️ Local-first, BYOK at every layer. Native desktop app for macOS (Apple Silicon + Intel) and Windows (x64). Linux AppImage in the optional release lane. SQLite at .od/app.sqlite, files in .od/projects/<id>/, no telemetry, no cloud round-trip.
  • 🌍 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 ship.
  • 🔁 Refresh existing codebases. Hand the agent a git repo + a DESIGN.md and it can refactor your real components to the brand. Plugins exist specifically to migrate Figma / Pencil workflows into React / Next.js / Vue code.
  • 🔒 Privacy mantra. Everything runs in the environment that holds your data — your laptop, your team's box, your Vercel project. SSRF-guarded BYOK proxy when you do need the network.

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 16 CLIs + BYOK
Brand-grade DESIGN.md Proprietary Theme JSON Limited tokens 129 systems shipped
Skills / Plugins / Templates Closed Plugin store Closed 100+ Skills · 400+ Plugins
HyperFrames (HTML→MP4) first-class
Refresh existing repo to brand via agent + DESIGN.md
Min. billing Pro / Max / Team Pro / Org Pro / Team BYOK · any compatible endpoint

Quick start

The fastest way to use Open Design. No Node, no pnpm, no clone.

Once installed: the app auto-detects every coding-agent CLI on your PATH, loads 100+ Skills and 129 Design Systems, and opens with the entry view ready to type a brief into.

🤖 Install into your coding agent (zero-UI)

You can use Open Design without ever opening the GUI — invoke it as a Skill, Plugin, or MCP server inside Claude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, Hermes, Kimi…

# Install OD into whichever agent you're already using:
curl -fsSL https://open-design.ai/install.sh | sh -s <agent>
# <agent> = 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

The agent reads skills/, picks the right SKILL.md, binds the DESIGN.md you named, and emits a single <artifact> you can preview at 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

🧑‍💻 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 and pnpm 10.33.x. Windows users: see docs/windows-troubleshooting.md. Full quickstart, env vars, Nix flake, and packaged build flow → QUICKSTART.md.

One full workflow — from brief to artifact

Brief → Plugin → Direction → Design System → Artifact → Handoff → Memory

  1. PM drops a brief. Plugin picker offers landing page · pitch deck · dashboard · social post · PM spec · OKR scorecard…
  2. Designer (or agent) locks the direction. No brand? Pick one of 5 curated directions. Have a brand? Drop a screenshot / URL → agent connects GitHub, imports Figma, codifies a reusable DESIGN.md.
  3. Agent emits the first <artifact>. Plugin + Skill + DESIGN.md are bound. Streamed into a sandboxed iframe, editable in place, not "regenerate from scratch."
  4. Handoff to engineering. The artifact is real HTML/CSS — drop into Cursor, Codex, or Claude Code and continue as code. Or export PPTX / PDF / MP4 directly to marketing.
  5. Open Design gets smarter every time. Your screenshots, fonts, palettes, and OK-ed artifacts compound into the next session's defaults. Less repeat work, less drift.

Use Open Design from your coding agent

Open Design ships a stdio MCP server plus 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 agent install (any of 16+ supported CLIs):
curl -fsSL https://open-design.ai/install.sh | sh -s <agent>

# Then, the agent can:
od search-files "primary button"      # search across project files
od get-file design-systems/linear-app/DESIGN.md
od get-artifact <slug>                # 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 agents starting from scratch, the installer drops a ~/.config/<agent>/open-design.json (or platform equivalent) plus a copy-paste MCP snippet. Cursor gets a one-click deeplink; Claude Code gets a claude mcp add-json one-liner; everyone else gets the JSON in the schema their config expects. Full per-agent flow → Settings → MCP server in the desktop app, or docs/agent-adapters.md.

Security model. Read-only by default, daemon binds to 127.0.0.1, SSRF blocked at the proxy edge. LAN exposure requires OD_BIND_HOST opt-in plus OD_ALLOWED_ORIGINS. Connector-credentials and live-artifact preview routes stay loopback-only regardless.


Skills

100+ skills ship in the box — each is a folder under skills/ following the Claude Code SKILL.md convention with an extended od: frontmatter (mode, platform, scenario, preview.type, design_system.requires, default_for, fidelity, example_prompt). Drop a folder, restart the daemon, it appears in the picker.

Two modes anchor the catalog: prototype (web/mobile/desktop single-page artifacts) and deck (horizontal-swipe presentations). Plus 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.

Skill Mode Scenario What it produces
web-prototype prototype design Default landing / hero page
saas-landing prototype marketing Hero / features / pricing / CTA
dashboard prototype operation Admin / analytics with sidebar
mobile-app prototype design iPhone 15 Pro / Pixel framed app
mobile-onboarding prototype design Splash · value-prop · sign-in flow
social-carousel prototype marketing 3-card 1080×1080 carousel
email-marketing prototype marketing Table-fallback safe brand email
magazine-poster prototype marketing Single-page magazine layout
motion-frames prototype marketing Looping CSS motion hero
sprite-animation prototype marketing 8-bit pixel animated explainer
pm-spec prototype product PM spec doc with TOC + decision log
team-okrs prototype product OKR scoresheet
eng-runbook prototype engineering Incident runbook
finance-report prototype finance Exec finance summary
hr-onboarding prototype hr Role onboarding plan
guizang-ppt deck marketing Magazine-style web PPT (default for deck)
html-ppt-* deck marketing 15 deck templates × 36 themes (master in skills/html-ppt/)
hyperframes video marketing HTML → MP4 motion graphics (HeyGen OSS framework)
critique utility design Five-dim self-critique scoresheet
tweaks utility design AI-emitted tweaks panel manifest

Full skills protocol → docs/skills-protocol.md. Skills registry endpoint: GET /api/skills.


Design Systems

129 brand-grade DESIGN.md systems ship in-tree — every system is a single Markdown file with a 9-section schema (color, typography, spacing, layout, components, motion, voice, brand, anti-patterns) from VoltAgent/awesome-design-md. Switch system → next render uses the new tokens. Zero theme JSON.

Full catalog (click to expand)

AI & LLMclaude · cohere · mistral-ai · minimax · together-ai · replicate · runwayml · elevenlabs · ollama · x-ai

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

Productivitynotion · figma · miro · airtable · superhuman · intercom · zapier · cal · clay · raycast

Fintechstripe · coinbase · binance · kraken · mastercard · revolut · wise

E-Commerceshopify · airbnb · uber · nike · starbucks · pinterest

Mediaspotify · playstation · wired · theverge · meta

Automotivetesla · bmw · ferrari · lamborghini · bugatti · renault

Otherapple · ibm · nvidia · vodafone · resend · spacex

Startersdefault (Neutral Modern) · warm-editorial

Re-import the library via scripts/sync-design-systems.ts. Add your own brand → drop a DESIGN.md into design-systems/<brand>/. Full guide → design-systems/README.md.


Plugins

400+ plugins ship under plugins/_official/. Each plugin is a folder with plugin.json + manifest + bundled assets — jump straight to a category to browse:

Category Count What's in it
scenarios/ 11 Full design briefs — 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
image-templates/ 45 One-shot image prompts — editorial, cinematic, product, portrait
video-templates/ 50 HyperFrames / Seedance / Veo motion templates
design-systems/ 142 Brand DESIGN.md bundles wrapped as plugins
atoms/ 13 Reusable UI fragments (button, hero, KPI tile)
examples/ 140 Reference outputs to remix

Plus plugins/community/ for community-authored plugins and plugins/registry/ for the registry-publish flow.

What a plugin can do

  • 🤖 Run inside any coding agentClaude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, Hermes, Kimi… via the same Skill protocol the agent already knows.
  • 🔁 Migrate Figma / Pencil workflows → React, Next.js, or Vue source. See od-figma-migration.
  • 🛠️ Refresh an existing codebase to a brand — point the plugin at a git repo + DESIGN.md, get a PR. See od-code-migration.
  • 💾 Persist custom workflows — your team's reusable templates live next to the shipped ones.

Author your own

Read these in order:

  1. plugins/spec/SPEC.md — manifest schema, file layout, runtime contract.
  2. plugins/spec/AGENT-DEVELOPMENT.md — building a plugin with a coding agent.
  3. plugins/spec/CONTRIBUTING.md — the PR bar for a new plugin.
  4. plugins/spec/PUBLISHING-REGISTRIES.md — publishing to the official / community registry.
  5. plugins/spec/examples/ — minimum-viable templates to copy.

Then drop a folder under plugins/community/, open a PR. Plugin registry endpoint: GET /api/plugins. Plugin readme (catalog overview) → plugins/README.md (简体中文).


Architecture

┌────────────────────── browser (Next.js 16) / Electron shell ─────────────┐
│  chat · file workspace · iframe preview · settings · imports · MCP       │
└──────────────┬─────────────────────────────────────┬─────────────────────┘
               │ /api/*                              │
               ▼                                     ▼
   ┌─────────────────────────────────┐   /api/proxy/{provider}/stream (SSE)
   │  Local daemon (Express+SQLite)  │   ─→ any OpenAI-compatible BYOK,
   │                                  │       SSRF-guarded at the edge
   │  /api/skills    /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: .od/projects/<id> })
             ▼
   ┌──────────────────────────────────────────────────────────────────────┐
   │  claude · codex · cursor-agent · copilot · openclaw · antigravity ·  │
   │  gemini · opencode · qwen · qoder · hermes (ACP) · kimi (ACP) ·      │
   │  pi (RPC) · kiro · kilo · vibe (ACP) · cline · trae · deepseek       │
   │  reads SKILL.md + DESIGN.md, writes artifacts to disk                │
   └──────────────────────────────────────────────────────────────────────┘
Layer Stack
Frontend Next.js 16 App Router + React 18 + TypeScript
Daemon Node 24 · Express · SSE streaming · better-sqlite3
Storage Files in .od/projects/<id>/ + SQLite at .od/app.sqlite + media-config.json (gitignored, auto-created). OD_DATA_DIR relocates everything.
Preview Sandboxed srcdoc iframe + streaming <artifact> parser
Export HTML (inline) · PDF (browser print) · PPTX (agent-driven) · ZIP · Markdown · MP4 (HyperFrames)
Desktop Electron shell with sandboxed renderer + sidecar IPC (STATUS · EVAL · SCREENSHOT · CONSOLE · CLICK · SHUTDOWN)
Lifecycle One entry point: pnpm tools-dev (start / stop / run / status / logs / inspect / check)

Full architecture write-up → docs/architecture.md. Skills protocol → docs/skills-protocol.md. Agent adapter contract → docs/agent-adapters.md.


Roadmap

  • Daemon + 16 coding-agent CLI adapters + Skill registry + Design-system catalog
  • Web app + chat + question form + 5-direction picker + todo progress + sandboxed preview
  • 100+ Skills · 129 Design Systems · 5 visual directions · 5 device frames
  • SQLite-backed projects · conversations · messages · tabs · templates
  • Multi-provider BYOK proxy (/api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream) with SSRF guard
  • Claude Design ZIP import (/api/import/claude-design)
  • Sidecar protocol + Electron desktop with IPC automation
  • Artifact lint API + 5-dim self-critique pre-emit gate
  • 0.8.0 — Plugin marketplace foundation (400+ official plugins, manifest spec, per-agent install scripts)
  • Packaged Electron build — macOS (Apple Silicon + Intel) + Windows (x64) + Linux AppImage (optional lane)
  • Comment-mode surgical edits — partial shipped, reliable targeted patching in progress
  • AI-emitted tweaks panel UX — not implemented yet
  • npx od init to scaffold a project with DESIGN.md
  • Plugin SDK + od plugin {add,list,remove,test,publish} CLI
  • Figma / Pencil → React / Next / Vue migration plugins (alpha)
  • Refresh-an-existing-codebase plugin (point at git repo + DESIGN.md)

Phased delivery → docs/roadmap.md.


Community

Real people on the other end of every channel.

  • 💬 Discord — daily chat, plugin shares, asks → discord.gg/qhbcCH8Am4
  • 🐦 X / Twitter — release notes, milestones, behind-the-scenes → @nexudotio
  • 🗣️ GitHub Discussions — long-form Qs, RFCs, "show your build" → Discussions
  • 🐛 GitHub Issues — bug reports, feature requests → Issues

The good-first-issue and help-wanted labels are the easiest way in.


Contributing

Open Design moves because contributors — designers, engineers, prompt authors — keep showing up. Many of the most-used Skills, Design Systems, and Plugins were authored by people outside the Core Team.

🎯 Where to start (highest-leverage, smallest diff)

Want to ship… What to do Where
A new Skill Drop a folder with SKILL.md + assets/ + references/ skills/ · spec at docs/skills-protocol.md
A new Design System Drop DESIGN.md using the 9-section schema design-systems/<brand>/
A new Plugin Drop plugin.json + manifest under a category folder plugins/community/ · spec at plugins/spec/SPEC.md · agent-dev guide at plugins/spec/AGENT-DEVELOPMENT.md
Support a new coding-agent CLI One adapter entry + stream parser apps/daemon/src/agents.ts
Fix a bug or polish UI Browse the good-first-issue label Issues →
Translate the docs Update one of the README.<lang>.md files TRANSLATIONS.md

🤖 Contributing as an agent

If you are the agent reading this, the cheapest fast path is:

# 1. Spin up 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 self-assign
gh issue list --label "good first issue" --state open --limit 20
gh issue develop <number>   # creates a branch and worktree

# 3. Make the change, run the gates
pnpm guard && pnpm typecheck
pnpm --filter @open-design/<package> test

# 4. Open the PR
gh pr create --fill

Full agent-friendly contribution loop, code style, and PR bar → CONTRIBUTING.md (Deutsch · Français · 简体中文 · 日本語 · Português).

🏅 Open Design Fellow program

We're recruiting Open Design Fellows around the world — paid maintainers, $1,000 / MR free LLM credits, official authorization to drive growth in your region, and a core-team review track. Details → MAINTAINERS.md and the announcement on Discord.


Maintainers

External Maintainers run reviews, triage, and community work shoulder-to-shoulder with the Core Team. Their day-to-day work is a huge share of why this project ships.

Jinlong Yang — External Maintainer
Jinlong Yang

External Maintainer · Review · Plugins
Joey Li — External Maintainer
Joey Li

External Maintainer · Review · Product

Maintainer rules, promotion criteria, and step-down protocol → MAINTAINERS.md (also in Deutsch · Français · 简体中文 · 日本語 · Português).

Contributors

Thanks to everyone — code, docs, feedback, a sharp issue, a new Skill, a new Design System.

Open Design contributors

Repository activity

Open Design — repository metrics

The SVG above is regenerated daily by .github/workflows/metrics.yml using lowlighter/metrics.


Star us

Star Open Design on GitHub — github.com/nexu-io/open-design

If this saved you thirty minutes, give it a ★. Stars don't pay rent — they tell the next designer, agent, and contributor this experiment is worth their attention. One click, three seconds, real signal.

Open Design star history

References & lineage

Project Role
Claude Design The closed product this repo is the open-source alternative to.
alchaincyf/huashu-design Design-philosophy compass — Junior-Designer workflow, brand-asset protocol, anti-AI-slop checklist, 5-dim critique.
op7418/guizang-ppt-skill Magazine-web-PPT skill, bundled verbatim under skills/guizang-ppt/. Default for deck mode.
lewislulu/html-ppt-skill HTML PPT Studio family — 15 deck templates, 36 themes, 31 page layouts, animation runtime, magnetic-card presenter mode.
OpenCoworkAI/open-codesign First open-source Claude Design alternative; UX patterns we borrowed (streaming artifact loop, sandboxed iframe, live agent panel).
multica-ai/multica Daemon + adapter architecture — PATH-scan agent detection, local daemon as the only privileged process.
VoltAgent/awesome-design-md Source of the 9-section DESIGN.md schema and 70 product systems.
bergside/awesome-design-skills Source of 57 design skills added under design-systems/.
heygen-com/hyperframes The HTML→MP4 motion-graphics framework, first-class in Open Design as hyperframes-html.
Claude Code skills The SKILL.md convention adopted verbatim.

Long-form provenance → docs/references.md.

License

Apache-2.0. The bundled skills/guizang-ppt/ retains its original LICENSE (MIT, @op7418). The bundled skills/html-ppt/ retains its original LICENSE (MIT, @lewislulu).