open-design

Open Design is the open-source answer to Claude Design — a local-first, agent-native design workspace that runs entirely on your machine without requiring any cloud subscription or Anthropic account. Instead of bundling its own AI engine, it detects and orchestrates whatever coding agent CLI you already have installed: Claude Code, Codex, Cursor, Copilot, Gemini CLI, and 20+ others. Your CLI becomes the design engine; Open Design provides the structured skills, brand systems, and output surfaces around it.

The product ships as a native Electron desktop app for macOS and Windows alongside a Next.js web interface, both backed by a locally-running Node.js daemon. The daemon spawns the coding agent as a child process, composes system prompts infused with the active DESIGN.md brand contract, streams the result through SSE into a sandboxed iframe preview, and exports finished artifacts to HTML, PDF, PPTX, or MP4. All project data, transcripts, and artifacts live on your filesystem in a SQLite database — nothing leaves your machine unless you opt into the AMR model router or connect BYOK cloud endpoints.

The skills system is the heart of Open Design. Each skill is a self-contained folder with a prompt template, optional reference assets, and metadata. The 259+ bundled skills cover prototypes, landing pages, mobile screens, editorial layouts, decks, video HyperFrames, and brand images. The 142+ DESIGN.md systems encode real brand contracts from companies like Linear, Stripe, Vercel, Airbnb, Apple, and Anthropic — structured 9-section Markdown files that the agent reads to constrain every render’s palette, typography, spacing, and motion.

Open Design also ships a plugin marketplace with 261 ready-to-use plugins, a workflow Automation page for scheduling repeatable design jobs, a Design System editor for authoring DESIGN.md files visually, and an MCP server that wires the entire toolchain into any agent’s context via a single od mcp install <agent> command. The project is under Apache-2.0 and welcomes contributions — adding a new agent adapter is roughly ten lines of code.

What You Get

• Native desktop app — Electron builds for macOS (Apple Silicon + Intel), Windows x64, and optional Linux AppImage; all project data stays local in SQLite
• 259+ design skills — self-contained prompt templates covering web prototypes, mobile screens, editorial layouts, pitch decks, HyperFrame animations, and brand images
• 142+ DESIGN.md brand systems — structured 9-section brand contracts for Linear, Stripe, Vercel, Airbnb, Apple, Anthropic, Notion, and more, consumed by the agent at render time
• 261 plugins — official marketplace of workflow plugins installable per-project with per-agent install scripts
• 20+ agent integrations — wires into Claude Code, Codex, Cursor, Copilot, Gemini CLI, OpenCode, Kimi, Hermes, and others via a one-command MCP server install
• Multi-format export — HTML source, PDF, PPTX slides, and real MP4 video (e.g. 1920×1080 at 30fps HyperFrames) from the same design session
• Automation page — orchestrate repeatable design workflows into schedulable automations that run agent sessions in sequence
• BYOK proxy — OpenAI-compatible pass-through to Anthropic, OpenAI, Azure, Google Gemini, Ollama, LM Studio, and vLLM with SSRF protection at the daemon edge

Common Use Cases

• Rapid prototyping — drop a brief and a DESIGN.md into the Studio and have a coding agent render a pixel-accurate mobile or web prototype in seconds without touching Figma
• Brand-consistent marketing assets — select the Stripe or Airbnb design system and generate on-brand landing pages, social images, or pitch decks that a design team can refine
• AI-agent design pipelines — wire Open Design’s MCP server into Claude Code or Cursor so the agent can generate, preview, and export UI artifacts directly inside the IDE chat
• Motion graphics and video — author HyperFrame skills that produce MP4 sequences from programmatic animations, useful for product demos, social content, or presentation transitions
• Design system authorship — use the Design System editor to capture a new brand’s palette, type scale, spacing, and motion rules into a DESIGN.md that constrains future agent renders
• Automated design workflows — use the Automation page to schedule multi-step design jobs (generate hero, generate social variants, export all) that run unattended overnight

Under The Hood

Architecture Open Design is structured as a three-topology distributed desktop product: a fully local mode where a Next.js web UI talks over HTTP to a long-running Node.js daemon that spawns coding-agent CLIs as child processes; a hybrid mode where the web layer is deployed to Vercel while the daemon runs on the user’s machine and exposes itself via a tunnel; and a degraded direct-API mode with no daemon at all. The daemon is the system’s nerve center — it composes system prompts infused with the active DESIGN.md brand contract, routes completions through SSE to the browser, manages per-project SQLite transcripts and artifact manifests, enforces an artifact lint and self-critique gate before emitting results, and brokers multi-provider BYOK proxying with SSRF guards. The web layer communicates with the daemon through a typed transport abstraction that dispatches to daemon SSE, a direct API path, or a browser-local path depending on which topology is active. The plugin and skills registries are pure filesystem conventions, enabling contributions without framework knowledge.

Tech Stack The server runtime is Node.js 24 with TypeScript 5.9 in ES module mode, using Express for HTTP routing and better-sqlite3 for synchronous, transactional project storage. The web frontend is Next.js with React, Framer Motion for animation, and a custom SSE transport layer for real-time artifact streaming. The desktop shell is Electron with a sidecar IPC protocol defined in protobuf (via launher-proto and sidecar-proto packages). The monorepo is managed with pnpm workspaces and bundled with esbuild. Agent adapter integration is handled through a spawned child-process contract with per-agent launch environment configuration. End-to-end tests run in Playwright; unit and integration tests use Vitest. The build pipeline supports Electron packaging for macOS universal, Windows NSIS installer, and Linux AppImage via electron-winstaller.

Code Quality The codebase has comprehensive Vitest unit and integration tests across the daemon — covering ACP protocol handling, session resume, agent runtime environments, SSRF guards, authentication analytics, and finalize-design locking semantics — alongside a full Playwright end-to-end suite with visual regression configs. TypeScript strict mode is enforced project-wide, with typed contracts shared across packages via a dedicated @open-design/contracts workspace package. The monorepo enforces cross-app import isolation, style policy, and product-neutrality checks through a guard script that runs Node’s native test runner against policy enforcement modules. ESLint and Prettier are configured with automated CI enforcement. The daemon’s inline comment density is extensive, with particularly detailed comments in performance-sensitive or protocol-boundary modules explaining design rationale, edge cases, and known limitations.

What Makes It Unique Open Design’s genuinely novel contribution is the agent-routing and skills filesystem architecture: rather than shipping its own model or prompt engine, it treats any coding agent CLI already installed on the developer’s machine as a swappable backend, wiring it through a structured DESIGN.md brand contract system that constrains every render without requiring the user to encode brand rules in every prompt. The HyperFrames surface — which renders programmatic motion graphics to real MP4 — is an uncommon capability for an open-source design tool. The MCP server integration means the entire skill and design-system library is available as first-class tools inside any MCP-compatible agent, collapsing the boundary between design tooling and coding assistants. The multi-topology deployment model (fully local, hybrid tunnel, degraded direct-API) is architecturally deliberate and rare in local-first desktop products.

Self-Hosting

Open Design is released under the Apache License 2.0, a permissive open-source license that allows free commercial use, modification, and distribution without requiring derivative works to be open-sourced. There is no copyleft implication — you can embed Open Design in a commercial product, deploy it inside your company’s network, or build paid services on top of it. Attribution and preservation of the license notice are the only formal obligations.

Running Open Design yourself requires Node.js 24 and pnpm 10 on your development machine, plus at least one supported coding-agent CLI (Claude Code, Codex, Cursor, etc.) already installed and on your PATH. The daemon is a long-running Node process that stores all state in SQLite on disk — you are responsible for process supervision, restarts after crashes, and any backup of the local database. For team deployments using Topology B (web on Vercel, daemon on user machines), each developer runs their own daemon and exposes it via a tunnel; there is no shared server component. Scaling and HA are not architectural goals — this is a local-first tool, not a multi-tenant SaaS backend.

The optional AMR (Agentic Model Router) is a paid, managed model service offered by the team at open-design.ai that provides one-click access to GPT, Claude, Gemini, and DeepSeek inside the app, billed per real token usage. Self-hosters who bring their own API keys via BYOK get the full feature set without AMR. Compared to using the closed Claude Design product from Anthropic, self-hosting Open Design gives you model flexibility and data locality but requires you to manage your own infrastructure, supply your own API keys, and accept that some features (such as Comment-mode surgical edits and the AI-emitted tweaks panel) are listed as not yet fully implemented.