面向 OpenDesign（nexu-io/open-design）的一键贡献流程——即便你不会写代码也可以使用。在四张卡片中选择一项（发布你用 OD 制作的 Skill 或 Design System；翻译文档；修复笔误/撰写博客；上报 Bug），代理会完成校验并为你创建 PR（或 Issue）。触发词：contribute to open design、ship my OD skill、ship my OD design system、translate OD docs、report an OD bug、od-contribute。
OpenDesign: The 1st Collaborative AI Design Agent Workspace
✨ Celebrating 100K GitHub stars with OpenDesign Go — Go credits are doubled: $8 for your first month, with up to $120 in monthly credits for eligible Design Plan models. Use them across 10+ models, including GPT-6 Luna, DeepSeek V4.1 Flash, GLM-5.3 Flash-X, and MiMo V2.6 Flash. All personal plans include API access for Codex, Claude Code, DSH, OpenCode, and more.
OpenDesign is the 1st collaborative AI design agent workspace. Start with a brief, then use your coding agent or OpenDesign Cloud to create a prototype that follows your design system. Share it with your team for feedback, and let your agent refine it in the same project.
That workflow is open and extensible. OpenDesign is licensed under Apache 2.0 and gives teams skills, design templates, design systems, and plugins they can inspect and adapt to their own process.
Product tour
Core pages
Home — start with a brief or an example.
All projects — revisit design systems, media, and prototypes.
Design Systems — inspect brand assets and refine them with an agent.
Plugins — find skills and launch them with Try it.
Studio — create and refine in one project
Prototype — build and refine interactive web experiences with your agent and live preview.
Slides — create decks, review slides and speaker notes, and export when ready.
Image — generate visual assets from the conversation, inspect the result, then download or open it.
HyperFrames — create motion graphics with your agent and export to MP4. Watch the video.
Platform Compatibility
OpenDesign 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.
For DeepSeek Harness, install the official dsh CLI first, then select it in OpenDesign or run od agent setup deepseek-harness to install/repair OD's connection component. For MCP integrations: od mcp install <agent> --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.
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.
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.
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.
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/ — 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 OpenDesign. 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.
🤖 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 package's DESIGN.md as the core brand contract. 151 design-system packages ship with the repo; legacy packages may be DESIGN.md-only, while newer packages can add manifest.json, tokens.css, components, assets, and provenance. 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 desktop users can currently run OpenDesign from source; the latest official release does not include a prebuilt Linux artifact. Product analytics and session replay are consent-gated; scrubbed safety and reliability telemetry is always on. Before describing daemon data paths, contributors and operators MUST read AGENTS.md → Daemon data directory contract. This README MUST NOT restate it.
🌍 Composable on four planes.Plugins carry runnable workflows · functional skills carry agent behavior · design templates carry rendering blueprints · design systems carry the brand. All four use portable, versionable directories that anyone can author 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.
🔒 Privacy by conviction. Projects can run locally or in your own deployment. Cloud model and OpenDesign Cloud requests are sent to the corresponding services. The BYOK proxy includes SSRF safeguards.
Quick start
🖥️ Download the desktop app (recommended — zero config)
The fastest way to use OpenDesign. No Node, no pnpm, no clone.
Linux → No prebuilt Linux artifact is currently published in the official releases. For now, run OpenDesign from source; Linux release work is tracked in #4368.
After install: the app auto-detects every coding-agent CLI on your PATH, loads 100+ functional skills, the separate rendering-template catalog, and 151 design systems, and lets you type a brief in the entry view.
🤖 Install into your coding agent (no UI)
You can use OpenDesign 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.
If you installed the macOS desktop app via the DMG or Homebrew cask, your shell
may still resolve od to Apple's built-in /usr/bin/od octal-dump utility. In
that case, open Settings → MCP server in the desktop app and copy the
client-specific snippet; it uses absolute paths and does not rely on the bare
od command.
# One-line install into the agent you're using:
od mcp install <agent>
# <agent> = claude | codex | reasonix | raven | cursor | copilot | openclaw
# | antigravity | pi | vibe | hermes | cline | kimi | kiro
# | trae | opencode
# Hosted equivalent for curl-based setup:
curl -fsSL https://open-design.ai/install.sh | sh -s <agent>
install.sh is a thin shell wrapper around od mcp install; it exists so the
hosted URL returns shell instead of the landing-page HTML fallback and fails
fast if your shell resolves a non-Open-Design od binary.
macOS / WSL2 users:/usr/bin/od is a system octal-dump command and can
shadow OpenDesign's od command. Desktop-app users should prefer the
Settings → MCP server snippet; WSL2 users should follow the
WSL2 setup guide first.
Then, inside the agent:
> Use open-design to generate a landing page with the Linear design system
In a filesystem-backed local CLI run, the agent composes the selected functional skill or design template with your DESIGN.md, writes the canonical project files, and OpenDesign previews those files. A BYOK/plain-API run without filesystem tools instead returns one complete <artifact> block.
🐳 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://127.0.0.1:7456
If the browser asks for credentials, use open-design as the username and the
OD_API_TOKEN value from deploy/.env as the password. This keeps Docker bridge
traffic authenticated without requiring host networking. API clients can keep
using Authorization: Bearer <OD_API_TOKEN>.
🚀 Deploy on Sealos
The Sealos App Store template runs the published OpenDesign Docker image with persistent workspace storage and Basic Auth on the public proxy. For custom public or shared Docker deployments, follow the reverse-proxy and OPEN_DESIGN_ALLOWED_ORIGINS guidance in deploy/README.md.
🧑💻 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
Open the URL printed by tools-dev; development ports are allocated dynamically unless you pass explicit port flags.
brief → plugin → direction → design system → artifact → handoff → memory
A PM submits a brief. The plugin picker offers landing page · pitch deck · dashboard · social post · PM spec · OKR scorecard…
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 and codifies a reusable DESIGN.md.
The agent creates the first deliverable. Plugin + functional skill or design template + DESIGN.md are bound. Filesystem-backed CLI runs write canonical project files and the preview follows them; BYOK/plain-API runs without file tools return one complete <artifact> block.
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.
OpenDesign 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 OpenDesign from your coding agent
OpenDesign ships a stdio MCP server and per-agent install scripts. Any MCP-compatible agent in another repo can read files from your local OpenDesign 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 install (16+ CLIs supported):
od mcp install <agent>
# Then the agent can:
od project list --json
od files list <project-id> --json
od files read <project-id> <relative-path>
od plugin list --json
od skills list --json
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/<agent>/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. On macOS desktop installs, prefer that Settings snippet over typing bare od mcp install <agent> in Terminal, because /usr/bin/od may win on PATH. Full per-agent flow → Settings → MCP server in the desktop app, or 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.
Internally-hosted model endpoints. To prevent SSRF, the daemon blocks provider base URLs that resolve to private/internal address ranges (RFC1918, link-local, CGNAT, and cloud-metadata IPs) by default, surfacing Internal IPs blocked. If you run an internally-hosted gateway (e.g. LiteLLM or Ollama on a VPN-only 10.x/192.168.x address), opt that host out with OD_ALLOWED_INTERNAL_HOSTS=<host1>,<host2>,... — a comma- or whitespace-separated list of bare hostnames or IPs (10.0.0.5, litellm.internal.corp; a host:port or full URL is accepted and reduced to its hostname; IPv6 must be bracketed, e.g. [fd00::1]). The allowlist is strict opt-in (empty by default), exact-host (no subdomain/substring matching), and applies only to provider endpoints you configure (connection test, model discovery, BYOK chat). It deliberately does not relax the guard on download URLs returned inside upstream responses, which stay blocked. A malformed entry — or CIDR notation, which is not supported — is dropped with a warning rather than silently trusted, so a typo never quietly widens (or fails to widen) the guard. Allowlisting a hostname trusts whatever it resolves to (like OD_ALLOWED_ORIGINS); allowlist the resolved IP instead if you want the DNS-resolved address re-checked.
Skills and design templates
100+ functional skills ship in skills/. Each follows the Agent Skills SKILL.md convention and supplies reusable agent behavior, references, or utilities. Renderable starters live separately in design-templates/; they may also use SKILL.md, but they populate the design-template catalog rather than the functional-skill registry.
Two modes anchor the design-template catalog: prototype (web/mobile/desktop single-page artifacts) and deck (horizontal-swipe presentations). Other templates cover image, video, audio, and utility surfaces. The scenario field groups templates by audience: design · marketing · operation · engineering · product · finance · hr · sale · personal.
Full protocol and directory split → docs/skills-protocol.md. Registry endpoints: GET /api/skills for functional skills and GET /api/design-templates for rendering templates.
Design Systems
151 brand-grade design-system packages centered on DESIGN.md ship with the repo. Legacy packages may contain only that Markdown contract; newer packages can also carry manifest.json, compiled tokens.css, component fixtures, assets, and provenance evidence. The catalog mixes upstream-derived systems with project-owned additions; design-systems/README.md records the package shape and provenance. Switch a system → the next render uses the new tokens.
277 official plugins plus 183 remixable reference examples live in plugins/_official/. Each entry is a portable plugin directory anchored by open-design.json plus the payload required by its type: for example SKILL.md for agent workflows, template.json for media templates, or DESIGN.md for design-system entries. Jump straight to a category:
🤖 Run in any coding agent — Claude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, 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.
🛠️ Refresh an existing codebase to a brand spec — point a plugin at a git repo + DESIGN.md, get a PR. See 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):
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-default # 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
An OpenDesign plugin requires open-design.json plus the payload required by its type. A workflow skill or scenario also includes SKILL.md; manifest-only template and design-system entries use their own payloads instead:
Drop the plugin folder into plugins/community/ (third-party plugins), or — to ship it bundled with OpenDesign — into the matching tier of plugins/_official/.
Fill the PR using the template in plugins/spec/CONTRIBUTING.md (ID, version, lane, mode, capabilities, trigger examples; attach a screenshot / preview for visual plugins).
OpenDesign 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…
How
Where
A new functional skill
Drop a folder with SKILL.md + optional assets/ + references/
If you are the agent reading this, the fastest path is:
# 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 <number> # create a branch and worktree
# 3. Make the change, run the checks
pnpm guard && pnpm typecheck
pnpm --filter @open-design/<package> test
# 4. Open the PR
gh pr create --fill
We're recruiting OpenDesign Fellows around the world — Fellows shape the product alongside the core team, represent OpenDesign 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 and the announcement on Discord.
Maintainers
They carry a lot of the load — daily maintenance, review, and community support.
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.
Apache-2.0. Bundled skills and templates with their own LICENSE files retain those licenses, including design-templates/guizang-ppt/ (MIT, @op7418), design-templates/html-ppt/ (MIT, @lewislulu), and skills/web-clone/ (MIT, @Jane-xiaoer).
面向 OpenDesign（nexu-io/open-design）的一键贡献流程——即便你不会写代码也可以使用。在四张卡片中选择一项（发布你用 OD 制作的 Skill 或 Design System；翻译文档；修复笔误/撰写博客；上报 Bug），代理会完成校验并为你创建 PR（或 Issue）。触发词：contribute to open design、ship my OD skill、ship my OD design system、translate OD docs、report an OD bug、od-contribute。
