--- name: open-design summary: "Open Design is a local-first, open-source desktop app that turns the coding agents already on your machine (Claude Code, Codex, Cursor, Copilot, etc.) into a design engine, generating brand-grade artifacts — prototypes, dashboards, decks, images and motion graphics — from a filesystem of skills, plugins, and DESIGN.md design systems. It positions itself as an agent-era alternative to Claude Design and Figma, exported to HTML/PDF/PPTX/MP4." language: TypeScript license: Apache-2.0 repo: https://github.com/nexu-io/open-design source: https://opensources.dev/resource/open-design health: 100 --- # open-design Open Design is a local-first, open-source desktop app that turns the coding agents already on your machine (Claude Code, Codex, Cursor, Copilot, etc.) into a design engine, generating brand-grade artifacts — prototypes, dashboards, decks, images and motion graphics — from a filesystem of skills, plugins, and DESIGN.md design systems. It positions itself as an agent-era alternative to Claude Design and Figma, exported to HTML/PDF/PPTX/MP4. > 🔥 **Open Design 0.9.0 is here: create without the setup.** The [official Model Router](https://open-design.ai/amr) is built right into the app — no extra configuration, no CLI to install, no API key to prepare. Just open the app, sign in, and start designing and creating right away. [Download 0.9.0](https://github.com/nexu-io/open-design/releases) · [Join the discussion](https://github.com/nexu-io/open-design/discussions/3524) > 🏅 **The Open Design Fellow program is now open.** If you also believe design should be open — become an Open Design Fellow, shape the product alongside the core team, and help more people take part in defining the future of design. Details → [`MAINTAINERS.md`](MAINTAINERS.md) and [Discord](https://discord.gg/qhbcCH8Am4). --- ## What is Open Design 🎨 **The local-first, open-source ****Claude Design**** alternative.** 🖥️ **Native desktop app for macOS and Windows.** ⚡ **100+ skills** · ✨ **150 brand-grade **`DESIGN.md`** systems** · 📦 **261 ready-to-use plugins.** 🖼️ Generates **web · desktop · mobile prototypes**, **live dashboards / artifacts**, **decks**, **images**, **video**, plus **HyperFrames** motion graphics. 🔒 Sandboxed iframe preview · HTML / PDF / PPTX / MP4 export. 🤖 **Runs on Claude Code · OpenClaw · Codex · Cursor · OpenCode · Qwen · Copilot · Hermes · Kimi · Antigravity and 21 local CLIs**, or any OpenAI-compatible endpoint via BYOK. Open Design is what you get when the **agent-native** loop Anthropic shipped with Claude Design — discover the brief, lock the direction, stream the artifact, critique, deliver — stops being closed and becomes a **filesystem of skills, design systems, and plugins** that the coding agents already on your laptop can read, write, and remix. Your CLI becomes the design engine, your laptop becomes the studio, and your team's `DESIGN.md` becomes the brand contract. It's also the **Figma alternative for the agent era** — instead of pushing pixels on a canvas, it delivers single-page artifacts in real CSS, real fonts, real components, exported straight to HTML / PDF / PPTX / MP4 — already shaped by your design system, already runnable inside the agent you use every day. --- ## Product tour A quick look at what Open Design is and what it does. Start from **Home**, orchestrate repeat workflows with **Automation**, distill a brand contract in **Design System**, and extend with **Plugins** and **integrations**; inside any project's **Studio**, the same design system streams out prototypes, live artifacts, HyperFrames, decks, and images. ### Core pages ### Studio — many artifact types in one project Inside a project's Studio, the same design system streams out multiple artifact types: --- ## Platform Compatibility > Open Design ships as **skills, a CLI, and an MCP server** that mainstream coding agents consume natively. Once OD is installed, a single `od mcp install ` wires the MCP server into that agent's config, and you call the same tools from inside any agent. Coding agent / platform Status One-line MCP server install [Claude Code](https://docs.anthropic.com/en/docs/claude-code)✅ Supported`od mcp install claude`[Codex CLI](https://github.com/openai/codex)✅ Supported`od mcp install codex`[Cursor](https://www.cursor.com/cli)✅ Supported`od mcp install cursor`[VS Code + GitHub Copilot](https://github.com/features/copilot)✅ Supported`od mcp install copilot`[GitHub Copilot CLI](https://github.com/features/copilot/cli)✅ Supported`od mcp install copilot`Gemini CLI✅ Supported`od mcp install gemini`[OpenCode](https://opencode.ai/)✅ Supported`od mcp install opencode`[OpenClaw](https://github.com/openclaw/openclaw)✅ Supported`od mcp install openclaw`[Antigravity](https://antigravity.google)✅ Supported`od mcp install antigravity`[Cline](https://github.com/cline/cline)✅ Supported`od mcp install cline`[Trae](https://www.trae.ai/)✅ Supported`od mcp install trae`Kimi CLI✅ Supported`od mcp install kimi`[Pi Agent](https://github.com/badlogic/pi-mono)✅ Supported`od mcp install pi`[Mistral Vibe CLI](https://github.com/mistralai/mistral-vibe)✅ Supported`od mcp install vibe`[Hermes Agent](https://github.com/nousresearch/hermes-agent)✅ Supported`od mcp install hermes` `od mcp install --print` for a dry-run preview · `--uninstall` to remove · full list with `od mcp install --help`. **No CLI installed?** The BYOK proxy at `POST /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream` gives you the same loop (no process spawn) — paste `baseUrl` + `apiKey` + `model`, with support for OpenAI, Anthropic, Azure OpenAI, Google Gemini, Ollama, LM Studio, vLLM, or any OpenAI-compatible endpoint. Per-target SSRF protection blocks internal IPs / link-local / CGNAT at the daemon edge. The adapter contract and stream parsers live in [`apps/daemon/src/agents.ts`](apps/daemon/src/agents.ts). Adding a new CLI is one entry — see [`docs/agent-adapters.md`](docs/agent-adapters.md). --- ## Demo Four core product categories, all rendered by a coding agent running on your laptop. Click a thumbnail to see the real example. ### 1 · Prototypes — web · desktop · mobile The default output surface. Single-page HTML artifacts that read your `DESIGN.md` and render in a sandboxed iframe. ### 2 · Live artifacts & dashboards Live dashboards, decision rooms, KPI walls — single-page artifacts that pull data through a tweaks panel and stay editable in place. ### 3 · Decks — magazine decks, weekly updates, pitches Every deck exports to **HTML** (single file, inlined assets), **PDF** (browser print, deck-aware), **PPTX** (agent-driven skill), **ZIP** (archive), or **Markdown**. ### 4 · Images — `gpt-image-2`, ImageRouter, custom API **93 ready-to-replicate prompts** live in [`prompt-templates/`](prompt-templates/) — preview thumbnails, full prompt body, target model, aspect ratio, and source attribution. One click drops a brief into the composer. ### 5 · Video & HyperFrames — agent-native motion graphics **HyperFrames** is HeyGen's open-source, agent-native video framework, integrated as a first-class citizen in Open Design. The agent writes HTML + CSS + GSAP, and 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 layer. 11 HyperFrames templates + 39 Seedance prompts ship with the repo. Catalog thumbnails © HeyGen; the framework is Apache-2.0. The OD-specific render workflow (composition cache, sandbox-exec workaround, MP4-as-chip) is detailed in [`design-templates/hyperframes/`](design-templates/hyperframes/). --- ## Why Open Design > **In April 2026, Anthropic released ****Claude Design**** — the first time an LLM stopped writing prose and started delivering design artifacts directly.** It went viral. But it 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, model-agnostic.** We don't ship an agent. The `claude` / `codex` / `cursor-agent` / `copilot` / `hermes` / `kimi` already on your `PATH` are the design engine. Swap with one click. - 🧠 **Brand-grade by default.** Every render reads the active `DESIGN.md` — a 9-section schema covering palette, type, spacing, motion, voice, anti-patterns. 150 systems ship with the repo (Linear, Stripe, Vercel, Airbnb, Apple, Tesla, Notion, Anthropic, Cursor, Supabase, Figma…). Drop a folder in, the picker finds it. - 🖥️ **Local-first, BYOK at every layer.** Native desktop apps for macOS (Apple Silicon + Intel) and Windows (x64). Linux AppImage on the optional release lane. SQLite at `.od/app.sqlite`, files at `.od/projects//`, 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 publish. - 🔁 **Refresh an existing codebase.** Hand a `git` repo + `DESIGN.md` to the agent and it refactors your real components to the brand spec. Dedicated plugins migrate Figma / Pencil workflows into React / Next.js / Vue code. - 🔒 **Privacy by conviction.** Everything runs where your data lives — your laptop, your team's server, your Vercel project. When the network is needed, the BYOK proxy is SSRF-guarded. ### Comparison Claude DesignFigmaLovable / 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**✅ 21 CLIs + BYOK**Brand-grade `DESIGN.md`ProprietaryTheme JSONLimited tokens**✅ 150 systems shipped**Skills / plugins / templatesClosedPlugin storeClosed**✅ 100+ skills · 261 plugins**HyperFrames (HTML→MP4)❌❌❌**✅ First-class**Refresh an existing repo to brand❌❌❌**✅ via agent + **`DESIGN.md`Minimum billingPro / Max / TeamPro / OrgPro / Team**BYOK · any compatible endpoint** --- ## Quick start ### 🖥️ Download the desktop app (recommended — zero config) The fastest way to use Open Design. No Node, no pnpm, no clone. - **macOS** (Apple Silicon · Intel x64) → [**open-design.ai**](https://open-design.ai/) or [GitHub Releases](https://github.com/nexu-io/open-design/releases) - **Windows** (x64) → [**open-design.ai**](https://open-design.ai/) or [GitHub Releases](https://github.com/nexu-io/open-design/releases) - **Linux** (AppImage, optional lane) → [GitHub Releases](https://github.com/nexu-io/open-design/releases) After install: the app auto-detects every coding-agent CLI on your `PATH`, loads 100+ skills and 150 design systems, and lets you type a brief in the entry view. ### 🤖 Install into your coding agent (no UI) You can use Open Design without ever opening the GUI — call it as a skill, plugin, or MCP server inside Claude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, Hermes, Kimi, and more. ```bash # One-line install into the agent you're using: curl -fsSL https://open-design.ai/install.sh | sh -s # = claude | codex | cursor | copilot | openclaw | antigravity | gemini # | pi | vibe | hermes | cline | kimi | trae | opencode ``` Then, inside the agent: ```tsx > 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 an `` previewable at `http://localhost:7456`. ### 🐳 Run with Docker ```bash 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 ``` > **macOS users:** If the web UI shows `Authorization: Bearer required`, Docker Desktop bridge networking is the cause. See [Docker Desktop on macOS](deploy/README.md#docker-desktop-on-macos) for the fix. ### 🧑‍💻 Run from source ```bash git clone https://github.com/nexu-io/open-design.git cd open-design corepack enable && pnpm install pnpm tools-dev run web ``` Node `~24`, pnpm `10.33.x`. Windows users, see [`docs/windows-troubleshooting.md`](docs/windows-troubleshooting.md). Full quickstart, env vars, Nix flake, and packaged build flow → [`QUICKSTART.md`](QUICKSTART.md). ### A full workflow — from brief to artifact `brief → plugin → direction → design system → artifact → handoff → memory` 1. **A PM submits a brief.** The plugin picker offers landing page · pitch deck · dashboard · social post · PM spec · OKR scorecard… 2. **A designer (or the agent) locks the direction.** No brand? Pick from 5 curated directions. Have a brand? Drop a screenshot / URL → the agent connects GitHub, imports Figma, and codifies a reusable `DESIGN.md`. 3. **The agent emits the first **``**.** Plugin + skill + `DESIGN.md` are bound. It streams into a sandboxed iframe, editable in place — not "regenerate from scratch." 4. **Hand off to engineering.** The artifact is real HTML/CSS — drop it into Cursor, Codex, or Claude Code to keep building as code. Or export PPTX / PDF / MP4 straight to marketing. 5. **Open Design gets smarter as you use it.** Your screenshots, fonts, palettes, and confirmed artifacts accumulate as defaults for the next session. Less rework, less drift. --- ## Use Open Design from your coding agent Open Design ships a **stdio MCP server** and 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. ```bash # One-line install (16+ CLIs supported): curl -fsSL https://open-design.ai/install.sh | sh -s # Then the agent can: od search-files "primary button" # search files across projects od get-file design-systems/linear-app/DESIGN.md od get-artifact # 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 an agent starting from scratch,** the installer places `~/.config//open-design.json` (or the platform equivalent) plus a copy-paste MCP snippet. Cursor gets a one-click deeplink; Claude Code gets a `claude mcp add-json` one-liner; every other agent gets JSON in the schema its config expects. Full per-agent flow → **Settings → MCP server** in the desktop app, or [`docs/agent-adapters.md`](docs/agent-adapters.md). **Security model.** Read-only by default, the daemon binds to `127.0.0.1`, and SSRF is blocked at the proxy edge. LAN exposure requires an explicit `OD_BIND_HOST` 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/`](skills/) following the Claude Code `SKILL.md` convention, extended with an `od:` frontmatter (`mode`, `platform`, `scenario`, `preview.type`, `design_system.requires`, `default_for`, `fidelity`, `example_prompt`). Drop a folder in, 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). Also `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`. SkillModeScenarioWhat it produces[`web-prototype`](design-templates/web-prototype/)prototypedesignDefault landing page / hero[`saas-landing`](design-templates/saas-landing/)prototypemarketingHero / features / pricing / CTA[`dashboard`](design-templates/dashboard/)prototypeoperationAdmin / analytics (with sidebar)[`mobile-app`](design-templates/mobile-app/)prototypedesigniPhone 15 Pro / Pixel framed app[`mobile-onboarding`](design-templates/mobile-onboarding/)prototypedesignSplash · value-prop · sign-in flow[`social-carousel`](design-templates/social-carousel/)prototypemarketing3-card 1080×1080 carousel[`email-marketing`](design-templates/email-marketing/)prototypemarketingTable-fallback-safe brand email[`magazine-poster`](design-templates/magazine-poster/)prototypemarketingSingle-page magazine layout[`motion-frames`](design-templates/motion-frames/)prototypemarketingLooping CSS motion hero[`sprite-animation`](design-templates/sprite-animation/)prototypemarketing8-bit pixel animated explainer[`pm-spec`](design-templates/pm-spec/)prototypeproductPM spec doc (with TOC + decision log)[`team-okrs`](design-templates/team-okrs/)prototypeproductOKR scorecard[`eng-runbook`](design-templates/eng-runbook/)prototypeengineeringIncident runbook[`finance-report`](design-templates/finance-report/)prototypefinanceExec finance summary[`hr-onboarding`](design-templates/hr-onboarding/)prototypehrRole onboarding plan[`guizang-ppt`](design-templates/guizang-ppt/)deckmarketingMagazine-style web PPT (deck default)[`html-ppt-*`](design-templates/)deckmarketing15 deck templates × 36 themes (master template in [`design-templates/html-ppt/`](design-templates/html-ppt/))[`hyperframes`](design-templates/hyperframes/)videomarketingHTML → MP4 motion graphics (HeyGen OSS framework)[`critique`](design-templates/critique/)utilitydesignFive-dimensional self-critique scoresheet[`tweaks`](design-templates/tweaks/)utilitydesignAI-emitted tweaks-panel manifest Full skill protocol → [`docs/skills-protocol.md`](docs/skills-protocol.md). Skill registry endpoint: `GET /api/skills`. --- ## Design Systems **150 brand-grade **`DESIGN.md`** systems** ship with the repo — each 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 a system → the next render uses the new tokens. No theme JSON. **AI & LLM** — `claude` · `cohere` · `mistral-ai` · `minimax` · `together-ai` · `replicate` · `runwayml` · `elevenlabs` · `ollama` · `x-ai` **Developer Tools** — `cursor` · `vercel` · `linear-app` · `framer` · `expo` · `clickhouse` · `mongodb` · `supabase` · `hashicorp` · `posthog` · `sentry` · `warp` · `webflow` · `sanity` · `mintlify` · `lovable` · `composio` · `opencode-ai` · `voltagent` **Productivity** — `notion` · `figma` · `miro` · `airtable` · `superhuman` · `intercom` · `zapier` · `cal` · `clay` · `raycast` **Fintech** — `stripe` · `coinbase` · `binance` · `kraken` · `mastercard` · `revolut` · `wise` **E-commerce** — `shopify` · `airbnb` · `uber` · `nike` · `starbucks` · `pinterest` **Media** — `spotify` · `playstation` · `wired` · `theverge` · `meta` **Automotive** — `tesla` · `bmw` · `ferrari` · `lamborghini` · `bugatti` · `renault` **Other** — `apple` · `ibm` · `nvidia` · `vodafone` · `resend` · `spacex` **Starters** — `default` (Neutral Modern) · `warm-editorial` Re-import the library via [`scripts/sync-design-systems.ts`](scripts/sync-design-systems.ts). Add your own brand → drop a `DESIGN.md` into `design-systems//`. Full guide → [`design-systems/README.md`](design-systems/README.md). --- ## Plugins **261 official plugins** live in [`plugins/_official/`](plugins/_official/). Each plugin is a **portable agent-skill folder** — a `SKILL.md` (readable by any agent that supports Agent Skills), plus an optional `open-design.json` manifest that gives Open Design marketplace metadata, inputs, previews, pipelines, and capability declarations. Jump straight to a category: CategoryCountContents[`scenarios/`](plugins/_official/scenarios/)11Complete design scenarios — [`od-default`](plugins/_official/scenarios/od-default/), [`od-design-refine`](plugins/_official/scenarios/od-design-refine/), [`od-figma-migration`](plugins/_official/scenarios/od-figma-migration/), [`od-code-migration`](plugins/_official/scenarios/od-code-migration/), [`od-react-export`](plugins/_official/scenarios/od-react-export/), [`od-nextjs-export`](plugins/_official/scenarios/od-nextjs-export/), [`od-vue-export`](plugins/_official/scenarios/od-vue-export/), [`od-media-generation`](plugins/_official/scenarios/od-media-generation/), [`od-new-generation`](plugins/_official/scenarios/od-new-generation/), [`od-tune-collab`](plugins/_official/scenarios/od-tune-collab/), [`od-plugin-authoring`](plugins/_official/scenarios/od-plugin-authoring/)[`image-templates/`](plugins/_official/image-templates/)45One-shot image prompts — editorial, cinematic, product, portrait[`video-templates/`](plugins/_official/video-templates/)50HyperFrames / Seedance / Veo motion templates[`design-systems/`](plugins/_official/design-systems/)142Brand `DESIGN.md` wrapped as plugins[`atoms/`](plugins/_official/atoms/)13Reusable UI fragments (buttons, heroes, KPI cards)[`examples/`](plugins/_official/examples/)140Remixable reference outputs Also [`plugins/community/`](plugins/community/) for community plugins and [`plugins/registry/`](plugins/registry/) for the publishing flow. ### What plugins can do - 🤖 **Run in any coding agent** — [Claude Code](docs/agent-adapters.md), Codex, Cursor, Copilot, [OpenClaw](https://github.com/openclaw/openclaw), [Antigravity](https://antigravity.google), Hermes, Kimi… through the same skill protocol the agent already knows. - 🔁 **Migrate Figma / Pencil workflows** → React, Next.js, or Vue source. See [`od-figma-migration`](plugins/_official/scenarios/od-figma-migration/). - 🛠️ **Refresh an existing codebase to a brand spec** — point a plugin at a `git` repo + `DESIGN.md`, get a PR. See [`od-code-migration`](plugins/_official/scenarios/od-code-migration/). - 💾 **Persist custom workflows** — your team's reusable templates sit next to the shipped ones. ### Using plugins Plugins are at full parity across the **web UI** and the `od`** CLI** — same `/api/plugins` endpoints, pick whichever fits. **In the desktop / web app:** open the **Plugin** page to browse the marketplace and click **Install**; inside a project's Studio, plugins appear as composer chips you click to apply (with the inputs they declare). **On the command line** (runs without a UI — this is the path external agents use): ```bash od plugin list # list installed plugins (--task-kind / --mode / --tag filters) od plugin search "landing page" # search by keyword od plugin info od-default # inspect a plugin's metadata, inputs, capabilities od plugin install od-figma-migration # install from a registry; also accepts ./local-folder or an https://… link od plugin apply od-default --input brief="a one-page pitch for our seed round" od plugin upgrade od-default # upgrade od plugin uninstall od-default # uninstall ``` Every command supports `--json`, so you can pipe it through `jq` / `xargs` into automation. ### Building a plugin A plugin **needs only a **`SKILL.md`** at minimum**; to list it in the Open Design marketplace, add an `open-design.json`: ```tsx my-plugin/ ├── SKILL.md ← required: YAML frontmatter (name · description) + trigger phrasing + workflow (aim for < 500 lines) ├── open-design.json ← needed to list: marketplace metadata + inputs + pipeline + capabilities ├── README.md ← optional: usage, install, registry links ├── preview/ ← optional: index.html / poster.png (strongly recommended for visual plugins) └── examples/ ← optional: concrete use cases ``` Core `open-design.json` fields: `specVersion` (currently `1.0.0`), `name` (stable ID), `version` (semver), `compat.agentSkills[].path` (points at `./SKILL.md`), `od.kind` (`skill` / `scenario` / `atom` / `bundle`), `od.taskKind` (`new-generation` / `figma-migration` / `code-migration` / `tune-collab`), `od.mode` (the output surface, e.g. `prototype` / `deck` / `live-artifact` / `image` / `video` / `hyperframes` / `audio` / `design-system` / `scenario`), `od.capabilities[]` (**declare the minimum** — a restricted install grants only `prompt:inject` by default), `od.inputs[]` (apply-time parameters). Scaffold + validate locally: ```bash od plugin scaffold --id my-plugin --title "My Plugin" # generate the skeleton od plugin validate ./my-plugin # check manifest / file layout pnpm guard && pnpm --filter @open-design/plugin-runtime typecheck ``` Full field set and runtime contract → [`plugins/spec/SPEC.md`](plugins/spec/SPEC.md); developing a plugin with a coding agent → [`plugins/spec/AGENT-DEVELOPMENT.md`](plugins/spec/AGENT-DEVELOPMENT.md); copy-paste minimal templates → [`plugins/spec/examples/`](plugins/spec/examples/). ### Contributing a plugin 1. Drop the plugin folder into [`plugins/community/`](plugins/community/) (third-party plugins), or — to ship it bundled with Open Design — into the matching tier of [`plugins/_official/`](plugins/_official/). 2. Pass validation: `od plugin validate`, `pnpm guard`, `pnpm --filter @open-design/plugin-runtime typecheck`. 3. Fill the PR using the template in [`plugins/spec/CONTRIBUTING.md`](plugins/spec/CONTRIBUTING.md) (ID, version, lane, mode, capabilities, trigger examples; attach a screenshot / preview for visual plugins). 4. To publish to an external registry (skills.sh / ClawHub / standalone GitHub) → [`plugins/spec/PUBLISHING-REGISTRIES.md`](plugins/spec/PUBLISHING-REGISTRIES.md). Plugin registry endpoint: `GET /api/plugins`. Directory overview → [`plugins/README.md`](plugins/README.md) ([简体中文](plugins/README.zh-CN.md)). --- ## Architecture ```tsx ┌────────────────── browser (Next.js 16) / Electron shell ──────────────┐ │ chat · file workspace · iframe preview · settings · import · 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/ }) ▼ ┌──────────────────────────────────────────────────────────────────┐ │ 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 at `.od/projects//` + SQLite at `.od/app.sqlite` + `media-config.json` (gitignored, auto-created). `OD_DATA_DIR` relocates everything. | | Preview | Sandboxed `srcdoc` iframe + streaming `` parser | | Export | HTML (inlined) · PDF (browser print) · PPTX (agent-driven) · ZIP · Markdown · MP4 (HyperFrames) | | Desktop | Electron shell + 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 → [`docs/architecture.md`](docs/architecture.md). Skill protocol → [`docs/skills-protocol.md`](docs/skills-protocol.md). Agent adapter contract → [`docs/agent-adapters.md`](docs/agent-adapters.md). --- ## Roadmap - Daemon + 21 coding-agent CLI adapters + skill registry + design-system catalog - Web app + chat + question form + 5-direction picker + todo progress + sandboxed preview - 100+ skills · 150 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`) + SSRF guard - Claude Design ZIP import (`/api/import/claude-design`) - Sidecar protocol + Electron desktop + IPC automation - Artifact lint API + 5-dim self-critique pre-emit gate - **0.8.0** — plugin marketplace infrastructure (261 official plugins, manifest spec, per-agent install scripts) - **0.9.0** — Open Design AMR (official Model Router built into the app: zero config, one-click sign-in) - Packaged Electron builds — macOS (Apple Silicon + Intel) + Windows (x64) + Linux AppImage (optional lane) - Comment-mode surgical edits — partially shipped; reliable targeted patching in progress - AI-emitted tweaks panel UX — not yet implemented - `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-existing-codebase plugin (point at a git repo + `DESIGN.md`) Phased delivery → [`docs/roadmap.md`](docs/roadmap.md). --- ## Community Real people behind every channel. - 💬 **Discord** — daily chat, plugin sharing, questions → [**discord.gg/qhbcCH8Am4**](https://discord.gg/qhbcCH8Am4) - 🐦 **X / Twitter** — release notes, milestones, behind the scenes → [**@nexudotio**](https://x.com/nexudotio) - 🗣️ **GitHub Discussions** — deep Q&A, RFCs, "show your work" → [**Discussions**](https://github.com/nexu-io/open-design/discussions) - 🐛 **GitHub Issues** — bug reports, feature requests → [**Issues**](https://github.com/nexu-io/open-design/issues) The [`good-first-issue`](https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) and [`help-wanted`](https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22) labels are the easiest way in. --- ## Contributing Open Design keeps moving because contributors — designers, engineers, prompt authors — keep showing up. Many of the most-used skills, design systems, and plugins were written by people outside the core team. ### 🎯 Where to start (max leverage, min change) Want to ship…HowWhereA new **skill**Drop a folder with `SKILL.md` + `assets/` + `references/`[`skills/`](skills/) · spec in [`docs/skills-protocol.md`](docs/skills-protocol.md)A new **design system**Drop a `DESIGN.md` using the 9-section schema[`design-systems//`](design-systems/)A new **plugin**Drop `open-design.json` + manifest under a category folder[`plugins/community/`](plugins/community/) · spec in [`plugins/spec/SPEC.md`](plugins/spec/SPEC.md) · agent dev guide in [`plugins/spec/AGENT-DEVELOPMENT.md`](plugins/spec/AGENT-DEVELOPMENT.md)Support a new **coding-agent CLI**One adapter entry + stream parser[`apps/daemon/src/agents.ts`](apps/daemon/src/agents.ts)Fix a bug or polish UIBrowse the [`good-first-issue`](https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) label[Issues →](https://github.com/nexu-io/open-design/issues)Translate the docsUpdate the `README..md` files[`TRANSLATIONS.md`](TRANSLATIONS.md) ### 🤖 Contributing as an agent If *you are the agent reading this*, the fastest path is: ```bash # 1. Boot 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 assign yourself gh issue list --label "good first issue" --state open --limit 20 gh issue develop # create a branch and worktree # 3. Make the change, run the checks pnpm guard && pnpm typecheck pnpm --filter @open-design/ test # 4. Open the PR gh pr create --fill ``` Full agent-friendly contribution flow, code style, and PR bar → [`CONTRIBUTING.md`](CONTRIBUTING.md) ([Deutsch](docs/i18n/CONTRIBUTING.de.md) · [Français](docs/i18n/CONTRIBUTING.fr.md) · [简体中文](docs/i18n/CONTRIBUTING.zh-CN.md) · [日本語](docs/i18n/CONTRIBUTING.ja-JP.md) · [Português](docs/i18n/CONTRIBUTING.pt-BR.md)). ### 🏅 Open Design Fellow program We're recruiting **Open Design Fellows** around the world — Fellows shape the product alongside the core team, represent Open Design officially in their region, and grow the community locally, backed by funded support ($1,000 / MR), free LLM credits, and a direct review track. Details → [`MAINTAINERS.md`](MAINTAINERS.md) and the announcement on [Discord](https://discord.gg/qhbcCH8Am4). --- ## Maintainers They carry a lot of the load — daily maintenance, review, and community support. Maintainer rules, promotion criteria, and the exit protocol → [`MAINTAINERS.md`](MAINTAINERS.md) (also [Deutsch](docs/i18n/MAINTAINERS.de.md) · [Français](docs/i18n/MAINTAINERS.fr.md) · [简体中文](docs/i18n/MAINTAINERS.zh-CN.md) · [日本語](docs/i18n/MAINTAINERS.ja-JP.md) · [Português](docs/i18n/MAINTAINERS.pt-BR.md)). ## Contributors Thanks to everyone who has taken part — code, docs, feedback, a sharp issue, a new skill, a new design system. --- ## Repository activity The SVG above is regenerated daily by [`.github/workflows/metrics.yml`](.github/workflows/metrics.yml) using [`lowlighter/metrics`](https://github.com/lowlighter/metrics). --- ## Star us If this saved you thirty minutes, give it a ★. Stars don't pay rent — but they tell the next designer, agent, and contributor that this experiment is worth their attention. One click, three seconds, a real signal. --- ## References & lineage ProjectRoleClaude DesignThe closed-source product this repo is the open-source alternative to.[`alchaincyf/huashu-design`](https://github.com/alchaincyf/huashu-design)The design-philosophy compass — junior-designer workflow, brand-asset protocol, anti-AI-slop checklist, five-dimensional critique.[`op7418/guizang-ppt-skill`](https://github.com/op7418/guizang-ppt-skill)The magazine-style web PPT skill, bundled verbatim under [`design-templates/guizang-ppt/`](design-templates/guizang-ppt/). Default for deck mode.[`lewislulu/html-ppt-skill`](https://github.com/lewislulu/html-ppt-skill)The HTML PPT Studio family — 15 deck templates, 36 themes, 31 page layouts, animation runtime, magnetic-card presenter mode.[`OpenCoworkAI/open-codesign`](https://github.com/OpenCoworkAI/open-codesign)The first open-source Claude Design alternative; UX patterns we borrow (streaming-artifact loop, sandboxed iframe, live agent panel).[`multica-ai/multica`](https://github.com/multica-ai/multica)The daemon + adapter architecture — PATH-scan agent detection, local daemon as the only privileged process.[`VoltAgent/awesome-design-md`](https://github.com/VoltAgent/awesome-design-md)Source of the 9-section `DESIGN.md` schema and 70 product systems.[`bergside/awesome-design-skills`](https://github.com/bergside/awesome-design-skills)Source of the 57 design skills added under `design-systems/`.[`heygen-com/hyperframes`](https://github.com/heygen-com/hyperframes)The HTML→MP4 motion-graphics framework, integrated as the first-class `hyperframes-html` in Open Design.Claude Code skillsThe `SKILL.md` convention we adopt verbatim. Detailed provenance → [`docs/references.md`](docs/references.md). ## License Apache-2.0. The bundled `design-templates/guizang-ppt/` retains its original [LICENSE](design-templates/guizang-ppt/LICENSE) (MIT, [@op7418](https://github.com/op7418)). The bundled `design-templates/html-ppt/` retains its original [LICENSE](design-templates/html-ppt/LICENSE) (MIT, [@lewislulu](https://github.com/lewislulu)).