agent ·

open-design

🎨 The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video — real files,

Open Design: The open-source Claude Design alternative

> ⚡ **Open Design Cloud — the official model service.** One recharge to use GPT, Claude, Gemini, and DeepSeek inside Open Design: 20+ flagship models, zero config, billed by real token usage. [Try Open Design Cloud](https://open-design.ai/cloud/?utm_source=github&utm_medium=referral&utm_content=readme_try_cloud) > > 🏅 **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/mHAjSMV6gz).

Open Design hero banner — the headline "The open-source Claude Design alternative" over a classical scene of columns and robed figures on a digital-code backdrop, with stat cards for design systems, plugins, coding agents, and media providers

Website · Download · Open Design Cloud · Discord · Follow @OpenDesignHQ

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

--- ## What is Open Design 🎨 **The open-source Claude Design alternative.** 🖥️ **Local-first native desktop app for macOS and Windows.** ⚡ **Composable skills, brand-grade `DESIGN.md` design systems, and 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 DeepSeek Harness (`dsh`) · Claude Code · OpenClaw · Codex · Cursor · OpenCode · Qwen · Copilot · Amp · Hermes · Kimi · Antigravity and 26 distinct local CLI executables**, 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 functional skills, rendering design templates, 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

_{Home — the overview entry point. Pick a skill and a design system, type the brief, and kick off everything from one place.}

_{Automation — orchestrate repetitive design workflows into reusable, schedulable automations.}	_{Design System — distill your team's DESIGN.md into a brand contract that shapes every output.}
_{Plugin — browse, install, and distribute workflow plugins to extend generation on demand.}	_{Integrations — connect external systems and MCP tools, and use Open Design from any IDE, script, or automation.}

### Studio — many artifact types in one project Inside a project's Studio, the same design system streams out multiple artifact types:

_{Prototype — single-page HTML artifacts that read your design system and render in a sandboxed iframe, previewable instantly and downloadable as source.}	_{HyperFrame — programmatic motion and animated graphics, rendered to a real MP4 (e.g. 1920×1080 · 30fps).}
_{Deck — pitch decks you can page through, navigate by keyboard, and export to PPTX / PDF.}	_{Image — brand-grade images and visual assets, with high-resolution generation and download.}

--- ## Platform Compatibility > Open Design connects to mainstream coding agents in two ways: **skills, CLI, and MCP** for agents that consume OD, plus **native runtime adapters** for agents that OD launches directly. DeepSeek Harness is a first-class native runtime through the official `dsh` CLI, with structured streaming, model discovery, cancellation, and session resume. | Coding agent / platform | Status | Quick setup | |---|:---:|---| | [Claude Code](https://docs.anthropic.com/en/docs/claude-code) | ✅ Supported | `od mcp install claude` | | [Claude Desktop](https://claude.ai/download) | ✅ Supported¹ | `od mcp install claude-desktop` | | [Codex CLI](https://github.com/openai/codex) | ✅ Supported | `od mcp install codex` | | [DeepSeek Reasonix](https://github.com/esengine/DeepSeek-Reasonix) | ✅ Supported | `od mcp install reasonix` | | [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness) | ✅ Native runtime | `od agent setup deepseek-harness` | | [Raven](https://github.com/EverMind-AI/Raven) | ✅ Supported | `od mcp install raven` | | [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` | | [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](https://github.com/MoonshotAI/kimi-cli) | ✅ Supported | `od mcp install kimi` | | [Kiro](https://kiro.dev) | ✅ Supported | `od mcp install kiro` | | [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` | For DeepSeek Harness, install the official `dsh` CLI first, then select it in Open Design or run `od agent setup deepseek-harness` to install/repair OD's connection component. For MCP integrations: `od mcp install --print` for a dry-run preview · `--uninstall` to remove · full list with `od mcp install --help`. ¹ Automatic MCP configuration for Claude Desktop is currently supported on macOS and Windows only.

The 26 coding-agent CLIs Open Design supports — DeepSeek Harness · Claude Code · Codex · OpenCode · Hermes · Antigravity · Vela · Grok Build · Kimi · Cursor Agent · Qwen · Qoder · GitHub Copilot · Pi · Kiro · Kilo · Mistral Vibe · DeepSeek · Reasonix · Aider · Amp · CodeBuddy · Mimo · AtomCode · Devin · Trae

**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 presets for OpenAI, Atlas Cloud, Anthropic, Azure OpenAI, Google Gemini, Ollama, LM Studio, vLLM, or any OpenAI-compatible endpoint. Atlas Cloud uses `https://api.atlascloud.ai/v1` with your own key and OpenAI-compatible model ids such as `qwen/qwen3.5-flash`. Per-target SSRF protection blocks internal IPs / link-local / CGNAT at the daemon edge. Runtime definitions live in [`apps/daemon/src/runtimes/defs/`](apps/daemon/src/runtimes/defs/), with registration and shared stream handling under [`apps/daemon/src/runtimes/`](apps/daemon/src/runtimes/). See [`docs/agent-adapters.md`](docs/agent-adapters.md) for the adapter contract. --- ## 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.

_{Entry view — pick a skill, pick a design system, type the brief. One surface for prototypes, dashboards, decks, mobile apps, magazine pages.}	_{Mobile prototype — pixel-accurate iPhone 15 Pro chrome, multi-screen flows. The agent never redraws the phone frame; shared device frames live in assets/frames/.}
_{Web prototype — an editorial dashboard with scrollbars, KPIs, and charts. Rendered straight from design-templates/dating-web/.}	_{Mobile app prototype — a three-screen gamified flow with XP ribbons and quest detail. Hand off straight to Cursor / Codex / Claude Code to turn into React/Next/Vue.}

### 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.

_{Live dashboard — an editable KPI wall whose tweaks panel surfaces the parameters worth nudging. The agent emits a manifest, and the iframe re-renders without a reload.}	_{Decision room — a multi-source briefing artifact for product / research / ops meetings.}
_{GitHub-style dashboard — repo metrics presented as a live artifact.}	_{Flow live-dashboard template — a domain-specific KPI template, branded through the active DESIGN.md.}

### 3 · Decks — magazine decks, weekly updates, pitches

_{Deck mode (guizang-ppt) — magazine layouts, WebGL hero, P0/P1/P2 checklists. Bundled verbatim from op7418/guizang-ppt-skill with its original license preserved.} _{Swiss International-style deck — grid-anchored, monochrome accents. One of 15 deck templates and 36 themes under design-templates/html-ppt-*/.}

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

_{Illustrated city food map
Hand-drawn editorial travel poster}

_{Cinematic elevator scene
Single-frame editorial still}

_{Cyberpunk portrait
Profile avatar — neon face text}

_{3D stone staircase
Hewn-stone infographic}

_{Glamorous portrait
Editorial studio shot}

**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][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.

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

原始来源：https://github.com/nexu-io/open-design#readme