Open Design

Scope and currency

This is an architecture evaluation, not a deployment diary. In August 2026 we reviewed the official Open Design README (repo nexu-io/open-design, package 0.18.x at review), product tour assets, architecture section, platform compatibility table, and roadmap. We have not run Open Design in production. Desktop builds, runtime registry, plugin counts, and Open Design Cloud billing change; confirm current docs before a cutover. Editorial review: 2026-08-10.

Contrast with our Ankik notes (self-hosted Postgres): those are lived ops. This page is “what the design implies.” Same posture as Agentic Inbox and Buzz.

What it is

Upstream one-liner (package.json): a local-first design product that detects your installed code-agent CLI, runs design skills + design systems, and streams artifacts into a sandboxed preview.

README positioning is more specific:

• The open-source Claude Design alternative — same agent-native loop (brief → direction → stream artifact → critique → deliver), without Anthropic-only lock-in
• Figma alternative for the agent era — not a multi-cursor vector canvas; single-page artifacts in real CSS/fonts/components, export HTML / PDF / PPTX / MP4
• Apache 2.0 · product site open-design.ai · org Nexu (nexu-io)

Open Design does not ship its own coding agent. The CLIs already on your PATH (Claude Code, Codex, Cursor, OpenCode, Copilot, Hermes, Kimi, Antigravity, OpenClaw, …) are the design engine—or any OpenAI-compatible endpoint via BYOK. Your laptop is the studio; the team’s DESIGN.md is the brand contract.

Four composable planes (portable directories anyone can author):

Plane	Role (upstream)	Shipped surface (README review window)
Plugins	Runnable workflows / marketplace entries	277 official plugins + 183 remixable examples
Functional skills	Agent behavior (skills/, Agent Skills SKILL.md)	100+ functional skills
Design templates	Rendering blueprints (design-templates/)	Prototype, deck, image, video/HyperFrames, utility modes
Design systems	Brand packages centered on DESIGN.md	151 systems (legacy MD-only or manifest.json + tokens.css + components)

Outputs: web · desktop · mobile prototypes, live dashboards/artifacts, decks, images, video, HyperFrames (HeyGen OSS HTML→MP4). Preview is a sandboxed iframe; filesystem-backed CLI runs write real project files.

Official product tour Home (source: repo product assets).

A look inside (official screenshots)

Studio streams real files. Agent writes HTML/CSS into the project; iframe previews runnable output for handoff to engineering.

DESIGN.md as brand contract. Every render reads the active design-system package—drop a brand folder, the picker finds it.

Artifacts are code, not locked vectors. Export HTML (inlined), PDF (print), PPTX (agent-driven), ZIP, Markdown, MP4 (HyperFrames).

Multi-surface prototypes. Device frames live in shared assets; agent does not re-draw phone chrome every time.

Live artifacts. KPI walls / decision rooms with tweak manifests; iframe re-renders without full reload.

Architecture (from upstream README)

Exact topology documented in the Architecture section:

1. Shell — browser (Next.js 16 App Router) or Electron: chat, file workspace, iframe preview, settings, import, MCP
2. Daemon — local Express + SQLite (better-sqlite3, Node ~24): /api/skills, /api/design-templates, /api/plugins, /api/design-systems, /api/chat (SSE), /api/proxy/*, /api/projects/:id/files/…, /api/artifacts/{save,lint}, /api/import/claude-design, plus MCP stdio
3. BYOK edge — POST /api/proxy/{provider}/stream (SSE) to Anthropic / OpenAI / Azure / Google / Ollama / SenseAudio (and OpenAI-compatible presets incl. Atlas Cloud), SSRF-guarded (private/link-local/CGNAT blocked by default)
4. Runtimes — spawn(cli, […], { cwd: managed project cwd }) via apps/daemon/src/runtimes/ — 26 definitions / 25 distinct CLI executables (byok-opencode shares the OpenCode binary). Agent composes a functional skill or design template + DESIGN.md and writes files. See docs/agent-adapters.md.

No CLI installed? BYOK proxy alone still runs the loop (no process spawn)—paste baseUrl + apiKey + model.

Stack (from repo Architecture table)

Layer	Choices (upstream)
Frontend	Next.js 16 App Router + React 18 + TypeScript
Daemon	Node 24 · Express · SSE streaming · better-sqlite3
Desktop	Electron shell + sandboxed renderer + sidecar IPC
Preview	Filesystem runs → canonical project files; BYOK/plain-API runs → one complete <artifact> block in sandboxed srcdoc iframe
Export	HTML · PDF · PPTX · ZIP · Markdown · MP4 (HyperFrames)
Agent surface	od CLI + MCP stdio + od mcp install <agent>
Self-host	Desktop packages · Docker under deploy/ · Sealos App Store · README also lists Vercel web path
Lifecycle (dev)	pnpm tools-dev (start / stop / run / status / logs / inspect / check)

Features that matter for a stack decision

• Agent-native, model-agnostic — does not replace Claude Code/Codex/Cursor; wires them as the design engine (25 CLIs + BYOK)
• Brand-grade DESIGN.md by default — 151 design-system packages ship in-repo
• Four-plane composability — plugins · functional skills · design templates · design systems
• Claude Design ZIP import — /api/import/claude-design
• HyperFrames first-class — HeyGen open-source HTML+GSAP → MP4 (headless Chrome + FFmpeg)
• Optional Open Design Cloud — official multi-model service (token-billed; zero local key juggling)
• Refresh / migrate plugins — Figma/Pencil → React/Next/Vue and “refresh existing repo to brand” appear in README roadmap as alpha / in progress—do not assume production-ready migration tooling without checking current release notes

Maturity snapshot (upstream roadmap, review window)

Shipped (README ✅)	Still open / partial
Daemon + 26 runtimes / 25 CLIs + skill & design-template registries + 151 design systems	Comment-mode surgical edits (partial)
Web + Electron desktop + sidecar IPC	AI-emitted tweaks panel UX (not yet)
BYOK multi-provider proxy + SSRF guard	npx od init scaffold
Plugin marketplace infrastructure + Open Design Cloud	Plugin SDK publish flow still evolving on roadmap
Claude Design import, artifact lint, packaged builds	Figma/Pencil migration & refresh-codebase plugins (alpha / listed incomplete)

Treat incomplete roadmap items as non-negotiable reading before promising “replace Figma tomorrow.”

Cost breakdown

Path	Reference cost	What you get
Open Design self-host (desktop / Docker + BYOK)	$0/mo product license + your API/token spend	Full local studio; files and keys stay under your control
Open Design Cloud	Billed by real token usage (upstream “official model service”)	GPT / Claude / Gemini / DeepSeek-class access without per-provider key wrangling
Claude Design (managed)	Anthropic Pro / Max / Team	Closed, hosted, Anthropic-model design loop
Figma (managed canvas)	Pro from ~$12/editor/mo	Collaborative vector canvas; not the same artifact model
Lovable / v0 / Bolt (cloud agents)	Pro / Team tiers	Hosted codegen agents; not local BYOK + DESIGN.md filesystem

There is no seat tax for the OSS product—spend is model/provider usage (or Cloud tokens) plus your ops if you run Docker/Sealos.

The Good

• Honest product thesis — open Claude Design loop + agent-era Figma alternative, not “another AI image box”
• Does not invent a new agent — PATH CLIs and BYOK are first-class; swap engines without redesigning the brand system
• Filesystem-native craft — skills, templates, plugins, and DESIGN.md packages are directories you can version and review in git
• Serious daemon surface — Express + SQLite + MCP + SSRF-guarded proxy is a real local product, not a thin prompt UI
• HyperFrames + multi-export — motion and marketing surfaces beyond static HTML mocks
• Credible open scale — Apache 2.0, large public community signal at review time; desktop + Docker + Sealos paths documented

The Bad — what to know before adopting

1. Not a multiplayer vector canvas. Real-time path editing, design-ops handoff habits, and Figma’s ecosystem still matter for many teams—Open Design targets agent-generated artifacts, not Penpot/Figma feature parity.
2. Quality tracks the CLI/model. Weak agent or bad brief → weak HTML; the product amplifies the agent you bring.
3. PATH / od friction. macOS /usr/bin/od can shadow Open Design’s CLI; GUI may miss CLIs installed only in nvm/Homebrew shells until PATH is fixed.
4. Self-host is still ops. Docker/Sealos need tokens, reverse-proxy auth, allowed origins—not managed Figma SLAs.
5. Roadmap honesty applies to you. Migration plugins, surgical comment edits, and tweaks-panel UX are incomplete; plan around what is ✅ today.

When to use / When to skip

Use Open Design if:

• You want the Claude Design workflow without Anthropic-only hosting lock-in
• Your team already runs coding agents and wants design artifacts as files shaped by DESIGN.md
• Local-first privacy + BYOK (or Open Design Cloud tokens) fits better than another SaaS canvas
• You need prototypes, decks, live artifacts, and/or HyperFrames from one local studio

Skip if:

• You need classic Figma-style multiplayer vector editing as the daily driver
• Nobody will install a desktop app / daemon or maintain Docker
• You only need a hosted “type prompt → deploy Next app” cloud agent (Lovable/v0/Bolt may fit better—different product)

Prerequisites (official path)

• Desktop: macOS (Apple Silicon + Intel) or Windows x64 packages; Linux AppImage on optional lane
• Or Docker / source: Docker Compose; or Node ~24 + pnpm 10.33.x for pnpm tools-dev run web
• At least one of: supported agent CLI on PATH, or BYOK credentials, or Open Design Cloud
• Optional shared deploy: Sealos App Store template or custom reverse proxy per deploy/README.md

Setup checklist (official path)

Sources: README quick start · QUICKSTART.md · open-design.ai

1. Download desktop (recommended) — open-design.ai or GitHub Releases. Auto-detects CLIs on PATH, loads skills / templates / design systems.

2. Or agent-only (no GUI) — install MCP into the agent you already use:

   od mcp install claude     # Claude Code
   od mcp install cursor     # Cursor
   od mcp install codex      # Codex CLI
   # also: copilot | opencode | openclaw | antigravity | hermes | kimi | …
   # hosted wrapper: curl -fsSL https://open-design.ai/install.sh | sh -s <agent>

   On macOS desktop installs, prefer Settings → MCP server absolute-path snippets if bare od is Apple’s octal-dump.

3. Brand contract — pick a shipped design system or drop design-systems/<brand>/DESIGN.md (optionally with manifest.json / tokens.css).

4. Docker self-host (optional) —

   git clone https://github.com/nexu-io/open-design.git
   cd open-design/deploy
   cp .env.example .env
   # set OD_API_TOKEN=… then:
   docker compose up -d
   # open http://localhost:7456

5. One-click Sealos (optional) — same role as Railway for Buzz or Deploy-to-Cloudflare for Agentic Inbox:

   

   Still your ops surface—see deploy/README.md for OPEN_DESIGN_ALLOWED_ORIGINS and reverse-proxy guidance.

Our recommendation

Apply the same Keep / Configure / Replace / Build lens as every ReframeHub note:

• As a Claude Design alternative: strongest open reference we have seen for local, agent-driven artifact generation with a real DESIGN.md contract and multi-CLI support.
• As a Figma replacement: only for teams whose pain is agent-era production of HTML/deck/media files—not for orgs that live in collaborative vector files.
• As a stack decision: Keep Figma/Penpot for craft canvas work; Configure Open Design alongside coding agents for prototypes, decks, and motion; do not Replace managed design ops solely on star count.

Need help evaluating agent design tooling vs canvas SaaS? Book a Reframe audit for design stack ($199). Parallel architecture notes: Agentic Inbox, Buzz.