nexu-io /

open-design

趋势观察中

The 1st Collaborative AI Design Agent Workspace. Local-first and open source. Create motion, prototypes, websites, apps, dashboards, presentations, images, and videos with your team and AI agents. Share work, exchange feedback, and iterate together in one workspace.

原始仓库简介 · 中文摘要待补充 · agent-skills / ai-design / byok / claude-code-for-design / claude-design / codex-design

GitHub 仓库 ↗项目主页 ↗

README / 项目原文

README.md ↗抓取于 2026/10/28 13:59:03

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: The 1st Collaborative AI Design Agent Workspace

Website · Download · OpenDesign Cloud · Discord · Follow @OpenDesignHQ

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

What is OpenDesign

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.

Coding agent / platform	Status	Quick setup
Claude Code	✅ Supported	`od mcp install claude`
Claude Desktop	✅ Supported¹	`od mcp install claude-desktop`
Codex CLI	✅ Supported	`od mcp install codex`
DeepSeek Reasonix	✅ Supported	`od mcp install reasonix`
DeepSeek Harness	✅ Native runtime	`od agent setup deepseek-harness`
Raven	✅ Supported	`od mcp install raven`
Cursor	✅ Supported	`od mcp install cursor`
VS Code + GitHub Copilot	✅ Supported	`od mcp install copilot`
GitHub Copilot CLI	✅ Supported	`od mcp install copilot`
OpenCode	✅ Supported	`od mcp install opencode`
OpenClaw	✅ Supported	`od mcp install openclaw`
Antigravity	✅ Supported	`od mcp install antigravity`
Cline	✅ Supported	`od mcp install cline`
Trae	✅ Supported	`od mcp install trae`
Kimi CLI	✅ Supported	`od mcp install kimi`
Kiro	✅ Supported	`od mcp install kiro`
Pi Agent	✅ Supported	`od mcp install pi`
Mistral Vibe CLI	✅ Supported	`od mcp install vibe`
Hermes Agent	✅ Supported	`od mcp install hermes`

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.

The 26 coding-agent CLIs OpenDesign 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/, with registration and shared stream handling under apps/daemon/src/runtimes/. See 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.

_{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/ — 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.

_{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}	_{Website-to-video · 16:9 · captures the site at 3 viewports}

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

Why OpenDesign

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

macOS (Apple Silicon · Intel x64) → open-design.ai or GitHub Releases
Windows (x64) → open-design.ai or GitHub Releases
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.

Node ~24, pnpm 10.33.x. WSL2 users, see docs/wsl-setup.md; native Windows users, see docs/windows-troubleshooting.md. Full quickstart, env vars, and packaged build flow → QUICKSTART.md.

A full workflow — from brief to artifact

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.

Design template	Mode	Scenario	What it produces
`web-prototype`	prototype	design	Default landing page / hero
`saas-landing`	prototype	marketing	Hero / features / pricing / CTA
`dashboard`	prototype	operation	Admin / analytics (with sidebar)
`mobile-app`	prototype	design	iPhone 15 Pro / Pixel framed app
`mobile-onboarding`	prototype	design	Splash · value-prop · sign-in flow
`social-carousel`	prototype	marketing	3-card 1080×1080 carousel
`email-marketing`	prototype	marketing	Table-fallback-safe brand email
`magazine-poster`	prototype	marketing	Single-page magazine layout
`motion-frames`	prototype	marketing	Looping CSS motion hero
`sprite-animation`	prototype	marketing	8-bit pixel animated explainer
`pm-spec`	prototype	product	PM spec doc (with TOC + decision log)
`team-okrs`	prototype	product	OKR scorecard
`eng-runbook`	prototype	engineering	Incident runbook
`finance-report`	prototype	finance	Exec finance summary
`hr-onboarding`	prototype	hr	Role onboarding plan
`guizang-ppt`	deck	marketing	Magazine-style web PPT (deck default)
`html-ppt-*`	deck	marketing	15 deck templates × 36 themes (master template in `design-templates/html-ppt/`)
`hyperframes`	video	marketing	HTML → MP4 motion graphics (HeyGen OSS framework)
`critique`	utility	design	Five-dimensional self-critique scoresheet
`tweaks`	utility	design	AI-emitted tweaks-panel manifest

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.

Full catalog (click to expand)

AI & LLM — claude · cohere · mistral-ai · minimax · together-ai · replicate · runwayml · elevenlabs · ollama · x-ai

Developer Tools — cursor · vercel · linear-app · expo · clickhouse · mongodb · supabase · hashicorp · posthog · sentry · warp · sanity · mintlify · composio · opencode-ai · voltagent

Productivity — notion · 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. Add your own brand → drop a DESIGN.md into design-systems/<brand>/. Full guide → design-systems/README.md.

Plugins

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:

Category	Count	Contents
`scenarios/`	13	Complete design scenarios — `od-default`, `od-design-refine`, `od-figma-migration`, `od-code-migration`, `od-react-export`, `od-nextjs-export`, `od-vue-export`, `od-media-generation`, `od-new-generation`, `od-tune-collab`, `od-plugin-authoring`, `od-share-to-community`, `od-web-effect-extractor`
`image-templates/`	45	One-shot image prompts — editorial, cinematic, product, portrait
`video-templates/`	63	HyperFrames / Seedance / Veo motion templates
`design-systems/`	143	Brand `DESIGN.md` wrapped as plugins
`atoms/`	13	Reusable UI fragments (buttons, heroes, KPI cards)
`examples/`	183	Remixable reference outputs

Also plugins/community/ for community plugins and plugins/registry/ for the publishing flow.

What plugins can do

🤖 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:

my-plugin/
├── open-design.json    ← required: marketplace metadata + inputs + pipeline + capabilities
├── SKILL.md            ← required for agent-skill/scenario entries; omitted for other plugin types
├── 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), optional compat.agentSkills[].path (points at ./SKILL.md when the entry exposes an Agent Skill), 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:

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; developing a plugin with a coding agent → plugins/spec/AGENT-DEVELOPMENT.md; copy-paste minimal templates → plugins/spec/examples/.

Contributing a plugin

Drop the plugin folder into plugins/community/ (third-party plugins), or — to ship it bundled with OpenDesign — into the matching tier of plugins/_official/.
Pass validation: od plugin validate, pnpm guard, pnpm --filter @open-design/plugin-runtime typecheck.
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).
To publish to an external registry (skills.sh / ClawHub / standalone GitHub) → plugins/spec/PUBLISHING-REGISTRIES.md.

Plugin registry endpoint: GET /api/plugins. Directory overview → plugins/README.md (简体中文).

Architecture

┌────────────────── 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/design-templates    /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: managed project cwd })
             ▼
   ┌──────────────────────────────────────────────────────────────────┐
   │  Local runtime definitions come from runtimes/registry.ts;                 │
   │  the base registry has 27 definitions (including byok-opencode),           │
   │  backed by 26 distinct local CLI executables because byok-opencode shares │
   │  the OpenCode executable. See docs/agent-adapters.md.                     │
   │  composes a functional skill or design template + DESIGN.md; writes files │
   └──────────────────────────────────────────────────────────────────┘

Layer	Stack
Frontend	Next.js 16 App Router + React 18 + TypeScript
Daemon	Node 24 · Express · SSE streaming · `better-sqlite3`
Storage	Before changing or documenting daemon storage paths, you MUST read `AGENTS.md` → Daemon data directory contract. This README MUST NOT restate it.
Preview	Filesystem runs render canonical project files; BYOK/plain-API runs parse one complete `<artifact>` block into a sandboxed `srcdoc` iframe
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. Skill protocol → docs/skills-protocol.md. Agent adapter contract → docs/agent-adapters.md.

Roadmap

Daemon + 27 runtime definitions across 26 distinct coding-agent CLI executables + skill/design-template registries + design-system catalog
Web app + chat + question form + 5-direction picker + todo progress + sandboxed preview
100+ functional skills · separate rendering-template catalog · 151 design-system packages · 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) with OpenAI-compatible presets including Atlas Cloud + 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 — OpenDesign Cloud (official model service built into the app: zero config, one-click sign-in)
0.10.0 — the all-in-one design workspace: the whole craft loop in one window (references → material → interactive editing → motion → handoff)
0.11.0 — The Bazaar: built in the open — a community marketplace of plugins and design systems anyone can pick from and contribute to
0.12.0 — Brand-backed Design System: turn the brand you already own into a reusable, portable DESIGN.md system
0.13.0 — Stay in Flow: native session resume, faster model picking, and export straight to screenshot-backed PPTX / PDF
Published desktop releases — macOS (Apple Silicon + Intel) + Windows (x64)
Published Linux desktop release (optional lane) — tracked in #4368
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.

Community

Real people behind every channel.

💬 Discord — daily chat, plugin sharing, questions → discord.gg/mHAjSMV6gz
🐦 X / Twitter — release notes, milestones, behind the scenes → @OpenDesignHQ
🗣️ GitHub Discussions — deep Q&A, RFCs, "show your work" → Discussions
🐛 GitHub Issues — bug reports, feature requests → Issues

The good-first-issue and help-wanted labels are the easiest way in.

Contributing

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/`	`skills/` · spec in `docs/skills-protocol.md`
A new rendering design template	Add a renderable `SKILL.md` bundle	`design-templates/`
A new design system	Drop a package centered on `DESIGN.md`; add `manifest.json`, `tokens.css`, components, assets, or provenance when needed	`design-systems/<brand>/`
A new plugin	Drop `open-design.json` + the type-specific payload under a category folder	`plugins/community/` · spec in `plugins/spec/SPEC.md` · agent dev guide in `plugins/spec/AGENT-DEVELOPMENT.md`
Support a new coding-agent CLI	One runtime definition + registry entry; add a parser only for a new wire format	`apps/daemon/src/runtimes/defs/`
Fix a bug or polish UI	Browse the `good-first-issue` label	Issues →
Translate the docs	Update the `README.<lang>.md` files	`TRANSLATIONS.md`

🤖 Contributing as an agent

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

Full agent-friendly contribution flow, code style, and PR bar → CONTRIBUTING.md (Deutsch · Français · 简体中文 · 日本語 · 한국어 · Português · ภาษาไทย).

🏅 OpenDesign Fellow program

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.

_{@Nagendhra-web}
_Maintainer

_@Sid-Qin
_Maintainer

_@YOMXXX
_Maintainer

Maintainer rules, promotion criteria, and the exit protocol → MAINTAINERS.md (also Deutsch · Français · 简体中文 · 日本語 · 한국어 · Português · ภาษาไทย).

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 using 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

Project	Role
`alchaincyf/huashu-design`	The design-philosophy compass — junior-designer workflow, brand-asset protocol, anti-AI-slop checklist, five-dimensional critique.
`op7418/guizang-ppt-skill`	The magazine-style web PPT skill, bundled verbatim under `design-templates/guizang-ppt/`. Default for deck mode.
`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`	UX patterns we borrow (streaming-artifact loop, sandboxed iframe, live agent panel).
`multica-ai/multica`	The daemon + adapter architecture — PATH-scan agent detection, local daemon as the only privileged process.
`VoltAgent/awesome-design-md`	Historical source of the original 9-section `DESIGN.md` schema and 70 upstream-derived systems; current packages may extend that baseline.
`bergside/awesome-design-skills`	Source of the 57 design skills added under `design-systems/`.
`heygen-com/hyperframes`	The HTML→MP4 motion-graphics framework, integrated as the first-class `hyperframes-html` in OpenDesign.
Claude Code skills	The `SKILL.md` convention we adopt verbatim.

Detailed provenance → docs/references.md.

License

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

docs/i18n/README.zh-CN.md ↗抓取于 2026/10/28 13:59:03

OpenDesign：首个协作式 AI 设计 Agent 工作台

✨ 庆祝 GitHub 100K Star，OpenDesign Go 额度翻倍。首月仅需 8 美元，指定 Design Plan 模型每月最高可享 120 美元使用额度，可用于 GPT-6 Luna、DeepSeek V4.1 Flash、GLM-5.3 Flash-X、MiMo V2.6 Flash 等 10 多款模型。所有个人套餐均提供 API 接入，可用于 Codex、Claude Code、DSH、OpenCode 等工具。

OpenDesign：首个协作式 AI 设计 Agent 工作台

官网 · 下载 · OpenDesign Cloud · Discord · 关注 @OpenDesignHQ

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

什么是 OpenDesign

OpenDesign 是首个协作式 AI 设计 Agent 工作台。从需求描述出发，使用你熟悉的编程 Agent 或 OpenDesign Cloud，创建符合设计系统的原型。与团队分享并收集反馈，再让 Agent 在同一个项目中继续完善。

这套工作流开放且可扩展。OpenDesign 采用 Apache 2.0 许可证；团队可以查看并按自己的流程调整技能、设计模板、设计系统和插件。

产品速览

核心页面

_{Home — 从需求描述或示例开始。}	_{All projects — 重新打开设计系统、媒体和原型项目。}
_{Design Systems — 查看品牌素材，并与 Agent 一起完善。}	_{Plugins — 查找技能，通过 Try it 启动。}

Studio——在同一个项目中创作和完善

_{Prototype — 与 Agent 一起构建和迭代交互式网页，并实时预览。}	_{Slides — 制作演示文稿、查看幻灯片和演讲者备注，完成后导出。}
_{Image — 从对话中生成视觉素材，查看结果，再下载或打开。}	_{HyperFrames — 与 Agent 一起制作动态图形并导出 MP4。观看视频.}

平台兼容性

OpenDesign 通过两种方式连接主流编码 Agent：可由 Agent 调用的技能、CLI 和 MCP，以及由 OD 直接启动 Agent 的原生运行时适配器。DeepSeek Harness 通过官方 dsh CLI 作为一等原生运行时，支持结构化流式输出、模型发现、取消与会话恢复。

编码 Agent / 平台	状态	快速接入
Claude Code	✅ 支持	`od mcp install claude`
Claude Desktop	✅ 支持¹	`od mcp install claude-desktop`
Codex CLI	✅ 支持	`od mcp install codex`
DeepSeek Reasonix	✅ 支持	`od mcp install reasonix`
DeepSeek Harness	✅ 原生运行时	`od agent setup deepseek-harness`
Raven	✅ 支持	`od mcp install raven`
Cursor	✅ 支持	`od mcp install cursor`
VS Code + GitHub Copilot	✅ 支持	`od mcp install copilot`
GitHub Copilot CLI	✅ 支持	`od mcp install copilot`
OpenCode	✅ 支持	`od mcp install opencode`
OpenClaw	✅ 支持	`od mcp install openclaw`
Antigravity	✅ 支持	`od mcp install antigravity`
Cline	✅ 支持	`od mcp install cline`
Trae	✅ 支持	`od mcp install trae`
Kimi CLI	✅ 支持	`od mcp install kimi`
Kiro	✅ 支持	`od mcp install kiro`
Pi Agent	✅ 支持	`od mcp install pi`
Mistral Vibe CLI	✅ 支持	`od mcp install vibe`
Hermes Agent	✅ 支持	`od mcp install hermes`

使用 DeepSeek Harness 时，请先安装官方 dsh CLI，再在 OpenDesign 中选择它，或运行 od agent setup deepseek-harness 安装/修复 OD 连接组件。MCP 集成可用 od mcp install <agent> --print 干跑预览 · --uninstall 卸载 · 完整清单 od mcp install --help。

¹ Claude Desktop 的自动 MCP 配置目前仅在 macOS 和 Windows 上支持。

OpenDesign 支持的 26 个编码 Agent CLI — 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

未安装任何 CLI？ POST /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream 的 BYOK 代理提供同样的循环（无需 spawn 进程）——粘贴 baseUrl + apiKey + model，支持 OpenAI、Anthropic、Azure OpenAI、Google Gemini、Ollama、LM Studio、vLLM 或任何 OpenAI 兼容端点。每个目标的 SSRF 防护在守护进程边缘拦截内网 IP / link-local / CGNAT。

运行时定义位于 apps/daemon/src/runtimes/defs/，并在 runtimes/registry.ts 注册；只有新的 wire format 才需要增加 parser——参见 docs/agent-adapters.md。

演示

四大核心产品类别，全部由笔记本电脑上运行的编码 Agent 渲染。点击缩略图查看实际示例。

1 · 原型——Web · 桌面 · 移动端

默认输出面。读取你的 DESIGN.md 并在沙箱 iframe 中渲染的单页 HTML 工件。

_{Web 原型——带滚动条、KPI、图表的编辑类仪表盘。直接从 design-templates/dating-web/ 渲染。} _{移动端应用原型——三屏游戏化流程，含 XP 绶带和任务详情。可直接交付给 Cursor / Codex / Claude Code 转为 React/Next/Vue。}

2 · 实时工件与仪表盘

实时仪表盘、决策室、KPI 大屏——单页工件通过调参面板拉取数据，原地可编辑。

_{实时仪表盘——可编辑的 KPI 大屏，调参面板暴露值得调整的参数。Agent 输出一份 manifest，iframe 无需刷新即可重新渲染。}	_{决策室——面向产品 / 研究 / 运营会议的多源简报工件。}
_{GitHub 风格仪表盘——以实时工件形式展示仓库指标。}	_{Flow 实时仪表盘模板——领域专属 KPI 模板，通过当前激活的 DESIGN.md 品牌化。}

3 · 演示文稿——杂志 Deck、周报、路演

_{Deck 模式 (guizang-ppt)——杂志版式、WebGL 主视觉、P0/P1/P2 清单。从 op7418/guizang-ppt-skill 完整打包，保留原始许可证。} _{瑞士国际风格 Deck——网格锚定、单色强调。15 套 Deck 模板和 36 个主题之一，位于 design-templates/html-ppt-*/。}

每套 Deck 均可导出为 HTML（单文件，内联资源）、PDF（浏览器打印，Deck 感知）、PPTX（Agent 驱动的技能）、ZIP（归档）或 Markdown。

4 · 图片——`gpt-image-2`、ImageRouter、自定义 API

_{城市美食地图插画
手绘编辑风格旅行海报}

_{电影级电梯场景
单帧编辑级静态画面}

_{赛博朋克肖像
个人头像——霓虹面部文字}

_{3D 石质阶梯
石刻信息图}

_{魅力人像
编辑级棚拍}

93 个可复刻提示词位于 prompt-templates/——预览缩略图、完整提示词、目标模型、宽高比和来源归属。一键将需求放入编辑器。

5 · 视频与 HyperFrames——Agent 原生动态图形

HyperFrames 是 HeyGen 的开源 Agent 原生视频框架，在 OpenDesign 中作为一等公民集成。Agent 编写 HTML + CSS + GSAP，HyperFrames 通过 headless Chrome + FFmpeg 渲染为确定性 MP4。搭配 Seedance 2.0 实现影视级 t2v / i2v，Veo 3 / Sora 2 / Kling 2 提供路由模型变体，Suno v5 / Lyria 2 提供音频底座。

_{30 秒 SaaS 产品宣传片 · 16:9 · UI 3D 展示}	_{TikTok 卡拉OK 真人出镜 · 9:16 · TTS + 逐字字幕}	_{30 秒品牌精彩集锦 · 16:9 · 音频驱动动态字体}	_{柱状图竞赛 · 16:9 · NYT 风格数据信息图}
_{航线图 · 16:9 · Apple 风格路线展示}	_{4 秒电影级 Logo 片尾 · 16:9 · 逐块拼合 + 光晕}	_{$0 → $10K 金额计数器 · 9:16 · Apple 风格高燃}	_{网站转视频 · 16:9 · 三视口截取网站}

11 个 HyperFrames 模板 + 39 个 Seedance 提示词随仓库一起发布。目录缩略图 © HeyGen，框架 Apache-2.0。OD 专属渲染流程（合成缓存、sandbox-exec 变通方案、MP4-as-chip）详见 design-templates/hyperframes/。

为什么选择 OpenDesign

🤖 Agent 原生，不绑定模型。 我们不发布 Agent。你 PATH 上已有的 claude / codex / cursor-agent / copilot / hermes / kimi 就是设计引擎。一键切换。
🧠 默认品牌级。 每次渲染都把当前包的 DESIGN.md 作为核心品牌契约读取。仓库随附 151 个设计系统包；旧包可以仅含 DESIGN.md，新包还可加入 manifest.json、tokens.css、组件、资产和来源信息。放入文件夹，选择器自动识别。
🖥️ 本地优先，每一层都可 BYOK。 原生桌面应用保持本地优先。产品分析和会话回放需经用户同意；经清理的安全与可靠性遥测始终开启。在描述 daemon 数据路径之前，必须阅读仓库根目录 AGENTS.md 中的 Daemon data directory contract。
🌍 四个平面上可组合。 插件承载可运行的工作流 · 功能技能承载 Agent 行为 · 设计模板承载渲染蓝图 · 设计系统承载品牌。四者都采用可移植、可版本控制的目录，任何人都可以编写和发布。
🔁 刷新现有代码库。 将 git 仓库 + DESIGN.md 交给 Agent，它就能将你的真实组件重构到品牌规范。
🔒 隐私信条。 项目可在本地或自行部署的环境中运行。使用云端模型或 OpenDesign Cloud 时，相关请求会发送至相应服务。BYOK 代理包含 SSRF 防护。

快速开始

🖥️ 下载桌面应用（推荐——零配置）

使用 OpenDesign 最快的方式。无需 Node、pnpm 或克隆仓库。

macOS（Apple Silicon · Intel x64）→ open-design.ai 或 GitHub Releases
Windows（x64）→ open-design.ai 或 GitHub Releases
Linux（AppImage，可选通道）→ GitHub Releases

安装后：应用自动检测 PATH 上的所有编码 Agent CLI，加载 100+ 功能技能、独立渲染模板目录和 151 个设计系统包，打开后即可在入口视图中输入需求。

🤖 安装到你的编码 Agent（无 UI）

你可以在完全不打开 GUI 的情况下使用 OpenDesign——在 Claude Code、Codex、Cursor、Copilot、OpenClaw、Antigravity、Hermes、Kimi 等中作为技能、插件或 MCP 服务器调用。

# 一行命令安装到你正在使用的 Agent：
od mcp install <agent>
# <agent> = claude | codex | reasonix | raven | cursor | copilot | openclaw | antigravity
#         | pi | vibe | hermes | cline | kimi | kiro | trae | opencode

然后在 Agent 内：

> Use open-design to generate a landing page with the Linear design system

在有文件系统的本地 CLI 运行中，Agent 会将选中的功能技能或设计模板与 DESIGN.md 组合，写入规范项目文件，OpenDesign 直接预览这些文件。没有文件系统工具的 BYOK/纯 API 运行则返回一个完整的 <artifact> 块。

🐳 使用 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
# 打开 http://localhost:7456

🚀 部署到 Sealos

Sealos App Store 模板会运行已发布的 OpenDesign Docker 镜像，提供持久化工作区存储，并在公网代理层启用 Basic Auth。自定义公开或共享 Docker 部署请遵循 deploy/README.md 中的反向代理和 OPEN_DESIGN_ALLOWED_ORIGINS 指引。

🧑‍💻 从源码运行

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web

打开 tools-dev 打印的 URL；除非显式传入端口参数，开发端口会动态分配。

Node ~24，pnpm 10.33.x。Windows 用户请参见 docs/windows-troubleshooting.md。完整的快速开始指南、环境变量和打包构建流程 → QUICKSTART.zh-CN.md。

一个完整的工作流——从需求到工件

需求 → 插件 → 方向 → 设计系统 → 工件 → 交付 → 记忆

PM 提交需求。 插件选择器提供落地页 · 路演 Deck · 仪表盘 · 社交媒体帖 · PM 规范 · OKR 记分卡……
设计师（或 Agent）锁定方向。 没有品牌？从 5 个精选方向中选择。有品牌？放入截图 / URL → Agent 连接 GitHub、编纂可复用的 DESIGN.md。
Agent 创建首个交付物。 插件 + 功能技能或设计模板 + DESIGN.md 已绑定。有文件系统的 CLI 运行写入规范项目文件，预览随文件更新；没有文件工具的 BYOK/纯 API 运行返回一个完整的 <artifact> 块。
交付给工程团队。 工件是真实的 HTML/CSS——放入 Cursor、Codex 或 Claude Code 中继续作为代码开发。或直接导出 PPTX / PDF / MP4 交给营销团队。
OpenDesign 越用越聪明。 你的截图、字体、色板和已确认的工件会累积为下次会话的默认值。更少的重复劳动，更少的偏差。

从你的编码 Agent 使用 OpenDesign

OpenDesign 提供 stdio MCP 服务器和逐 Agent 的安装脚本。任何位于其他仓库的 MCP 兼容 Agent 都可以直接读取你本地 OpenDesign 项目的文件——token CSS、JSX 组件、入口 HTML——作为按名称查询的结构化 API。Agent 始终看到实时文件，而非过期的导出。

# 一行命令安装（支持 16+ CLI）：
od mcp install <agent>

# 然后，Agent 可以：
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

为什么选择 MCP？ 每次迭代都导出并重新附加 zip 会打断流程。MCP 直接暴露设计源文件——Agent 始终看到实时文件。

对于从零开始的 Agent，安装器会放置 ~/.config/<agent>/open-design.json（或平台等效路径）以及可复制粘贴的 MCP 代码片段。Cursor 获得一键深层链接；Claude Code 获得 claude mcp add-json 一行命令；其他所有 Agent 获得其配置所需 schema 格式的 JSON。完整的逐 Agent 流程 → 桌面应用中的设置 → MCP 服务器，或 docs/agent-adapters.md。

安全模型。 默认只读，守护进程绑定到 127.0.0.1，SSRF 在代理边缘拦截。局域网暴露需要 OD_BIND_HOST 显式启用加 OD_ALLOWED_ORIGINS。连接器凭证和实时工件预览路由无论如何都保持仅本地回环。

技能与设计模板

100+ 个功能技能位于 skills/。它们遵循 Agent Skills SKILL.md 约定，提供可复用的 Agent 行为、参考资料或工具。可渲染的启动模板单独位于 design-templates/；它们也可以使用 SKILL.md，但进入设计模板目录，而不是功能技能注册中心。

两种模式构成设计模板目录主线：prototype（Web/移动端/桌面单页工件）和 deck（横向滑动演示文稿）。其他模板覆盖 image、video、audio 与 utility 表面。scenario 字段按受众分组：design · marketing · operation · engineering · product · finance · hr · sale · personal。

设计模板	模式	场景	产出物
`web-prototype`	prototype	design	默认落地页 / 主视觉
`saas-landing`	prototype	marketing	主视觉 / 功能 / 定价 / CTA
`dashboard`	prototype	operation	管理后台 / 数据分析（带侧边栏）
`mobile-app`	prototype	design	iPhone 15 Pro / Pixel 外框应用
`mobile-onboarding`	prototype	design	启动页 · 价值主张 · 登录流程
`social-carousel`	prototype	marketing	3 卡 1080×1080 轮播图
`email-marketing`	prototype	marketing	表格降级安全的品牌邮件
`magazine-poster`	prototype	marketing	单页杂志版面
`motion-frames`	prototype	marketing	循环 CSS 动效主视觉
`sprite-animation`	prototype	marketing	8-bit 像素动画讲解
`pm-spec`	prototype	product	PM 规范文档（含目录 + 决策日志）
`team-okrs`	prototype	product	OKR 记分表
`eng-runbook`	prototype	engineering	事故应急手册
`finance-report`	prototype	finance	高管财务摘要
`hr-onboarding`	prototype	hr	角色入职计划
`guizang-ppt`	deck	marketing	杂志风格 Web PPT（deck 默认）
`html-ppt-*`	deck	marketing	15 套 Deck 模板 × 36 个主题（主模板在 `design-templates/html-ppt/`）
`hyperframes`	video	marketing	HTML → MP4 动态图形（HeyGen OSS 框架）
`critique`	utility	design	五维自评记分表
`tweaks`	utility	design	AI 输出的调参面板 manifest

完整协议与目录分工 → docs/skills-protocol.md。注册端点：功能技能使用 GET /api/skills，渲染模板使用 GET /api/design-templates。

设计系统

151 个以 DESIGN.md 为核心的品牌级设计系统包随仓库发布。旧包可以只有这份 Markdown 契约；新包还可包含 manifest.json、编译后的 tokens.css、组件样例、资源和来源证据。目录同时包含基于上游整理的系统与项目自有补充；design-systems/README.md 记录了包结构与来源。切换系统 → 下次渲染即使用新 token。

完整目录（点击展开）

AI 与 LLM — claude · cohere · mistral-ai · minimax · together-ai · replicate · runwayml · elevenlabs · ollama · x-ai

开发者工具 — cursor · vercel · linear-app · expo · clickhouse · mongodb · supabase · hashicorp · posthog · sentry · warp · sanity · mintlify · composio · opencode-ai · voltagent

生产力 — notion · miro · airtable · superhuman · intercom · zapier · cal · clay · raycast

金融科技 — stripe · coinbase · binance · kraken · mastercard · revolut · wise

电商 — shopify · airbnb · uber · nike · starbucks · pinterest

媒体 — spotify · playstation · wired · theverge · meta

汽车 — tesla · bmw · ferrari · lamborghini · bugatti · renault

其他 — apple · ibm · nvidia · vodafone · resend · spacex

入门模板 — default（中性现代）· warm-editorial

通过 scripts/sync-design-systems.ts 重新导入库。添加自有品牌 → 将 DESIGN.md 放入 design-systems/<brand>/。完整指南 → design-systems/README.md。

插件

277 个官方插件和 183 个可混搭参考示例位于 plugins/_official/。每个条目都是以 open-design.json 为核心的可移植插件目录，并带有类型所需的载荷，例如 Agent 工作流的 SKILL.md、媒体模板的 template.json，或设计系统条目的 DESIGN.md。直接跳转到分类浏览：

分类	数量	内容
`scenarios/`	13	完整设计方案——`od-default`、`od-design-refine`、`od-figma-migration`、`od-code-migration`、`od-react-export`、`od-nextjs-export`、`od-vue-export`、`od-media-generation`、`od-new-generation`、`od-tune-collab`、`od-plugin-authoring`, `od-share-to-community`, `od-web-effect-extractor`
`image-templates/`	45	一次性图片提示词——编辑、电影、产品、人像
`video-templates/`	63	HyperFrames / Seedance / Veo 动态模板
`design-systems/`	143	品牌 `DESIGN.md` 包装为插件
`atoms/`	13	可复用 UI 片段（按钮、主视觉、KPI 卡片）
`examples/`	183	可混搭的参考输出

另有 plugins/community/ 社区插件和 plugins/registry/ 注册发布流程。

插件能做什么

🤖 在任何编码 Agent 中运行——Claude Code、Codex、Cursor、Copilot、OpenClaw、Antigravity、Hermes、Kimi……通过 Agent 已知的同一套技能协议。
🔁 迁移 Figma / Pencil 工作流 → React、Next.js 或 Vue 源码。参见 od-figma-migration。
🛠️ 将现有代码库刷新到品牌规范——将插件指向 git 仓库 + DESIGN.md，获得一个 PR。参见 od-code-migration。
💾 持久化自定义工作流——你团队的可复用模板与发布的模板并列。

使用插件

插件在 Web UI 和 od CLI 两条路上完全对等——同一套 /api/plugins 端点，挑顺手的用。

在桌面 / Web 应用里：打开 Plugin 页浏览 marketplace，点 Install；进入项目 Studio 后，插件以 composer chip 的形式出现，点击即应用（带上它声明的输入参数）。

在命令行里（不打开 UI 也能跑，外部 Agent 走的就是这条）：

od plugin list                       # 列出已安装插件（--task-kind / --mode / --tag 过滤）
od plugin search "landing page"      # 按关键词搜
od plugin info od-default            # 看某个插件的元数据、输入、权限
od plugin install od-default        # 从注册中心装；也支持 ./本地文件夹 或 https://… 直链
od plugin apply od-default --input brief="给我们的种子轮做一页 pitch"
od plugin upgrade od-default         # 升级
od plugin uninstall od-default       # 卸载

所有命令都支持 --json，方便用 jq / xargs 串进自动化脚本。

构建插件

OpenDesign 插件必须包含 open-design.json 以及其类型所需的载荷。工作流技能或场景还包含 SKILL.md；仅 manifest 的模板与设计系统条目则使用各自的载荷：

my-plugin/
├── open-design.json    ← 必需：marketplace 元数据 + 输入 + 流水线 + 权限
├── SKILL.md            ← Agent Skill/场景条目必需；其他插件类型可省略
├── README.md           ← 可选：用法、安装、注册中心链接
├── preview/            ← 可选：index.html / poster.png（视觉类强烈建议）
└── examples/           ← 可选：具体用例

open-design.json 的核心字段：specVersion（当前 1.0.0）、name（稳定 ID）、version（semver）、可选的 compat.agentSkills[].path（条目公开 Agent Skill 时指向 ./SKILL.md）、od.kind（skill / scenario / atom / bundle）、od.taskKind（new-generation / figma-migration / code-migration / tune-collab）、od.mode（输出表面，如 prototype / deck / live-artifact / image / video / hyperframes / audio / design-system / scenario）、od.capabilities[]（按最小权限声明，默认受限安装只给 prompt:inject）、od.inputs[]（应用时的参数）。

脚手架 + 本地验证：

od plugin scaffold --id my-plugin --title "My Plugin"   # 生成骨架
od plugin validate ./my-plugin                          # 校验 manifest / 文件布局
pnpm guard && pnpm --filter @open-design/plugin-runtime typecheck

字段全集与运行时契约 → plugins/spec/SPEC.md；用编码 Agent 自动开发插件 → plugins/spec/AGENT-DEVELOPMENT.md；可复制的最小模板 → plugins/spec/examples/。

贡献插件

把插件文件夹放到 plugins/community/（第三方插件），或——若想随 OpenDesign 一起内置——放到对应 tier 的 plugins/_official/。
跑通校验：od plugin validate、pnpm guard、pnpm --filter @open-design/plugin-runtime typecheck。
按 plugins/spec/CONTRIBUTING.md 的模板填 PR（ID、版本、lane、mode、权限、触发示例，视觉类附截图 / 预览）。
想发布到外部注册中心（skills.sh / ClawHub / 独立 GitHub）→ plugins/spec/PUBLISHING-REGISTRIES.md。

插件注册端点：GET /api/plugins。目录概览 → plugins/README.md（简体中文）。

架构

┌────────────────────── 浏览器 (Next.js 16) / Electron 外壳 ──────────────┐
│  聊天 · 文件工作区 · iframe 预览 · 设置 · 导入 · MCP                      │
└──────────────┬─────────────────────────────────────┬─────────────────────┘
               │ /api/*                              │
               ▼                                     ▼
   ┌─────────────────────────────────┐   /api/proxy/{provider}/stream (SSE)
   │  本地守护进程 (Express+SQLite)    │   ─→ 任何 OpenAI 兼容 BYOK,
   │                                  │       SSRF 防护在边缘
   │  /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      │
   │  MCP stdio 服务器                │
   └─────────┬───────────────────────┘
             │ spawn(cli, [...], { cwd: managed project cwd })
             ▼
   ┌──────────────────────────────────────────────────────────────────────┐
   │  Local runtime definitions come from runtimes/registry.ts;                 │
   │  the base registry has 27 definitions (including byok-opencode),           │
   │  backed by 26 distinct local CLI executables because byok-opencode shares │
   │  the OpenCode executable. See docs/agent-adapters.md.                     │
   │  组合功能技能或设计模板 + DESIGN.md，并将规范文件写入磁盘                   │
   └──────────────────────────────────────────────────────────────────────┘

层	技术栈
前端	Next.js 16 App Router + React 18 + TypeScript
守护进程	Node 24 · Express · SSE 流式传输 · `better-sqlite3`
存储	在修改或记录 daemon 存储路径之前，必须阅读仓库根目录 `AGENTS.md` 中的 Daemon data directory contract。本 README 不得复述该契约。
预览	文件系统运行渲染规范项目文件；BYOK/纯 API 运行将一个完整 `<artifact>` 块解析到沙箱 `srcdoc` iframe
导出	HTML（内联）· PDF（浏览器打印）· PPTX（Agent 驱动）· ZIP · Markdown · MP4（HyperFrames）
桌面	Electron 外壳 + 沙箱渲染进程 + sidecar IPC（STATUS · EVAL · SCREENSHOT · CONSOLE · CLICK · SHUTDOWN）
生命周期	统一入口：`pnpm tools-dev`（start / stop / run / status / logs / inspect / check）

完整架构说明 → docs/architecture.md。技能协议 → docs/skills-protocol.md。Agent 适配器契约 → docs/agent-adapters.md。

路线图

守护进程 + 26 个不同 CLI 可执行程序上的 27 个 runtime 定义 + 技能/设计模板注册中心 + 设计系统目录
Web 应用 + 聊天 + 问题表单 + 5 方向选择器 + 待办进度 + 沙箱预览
100+ 功能技能 · 独立渲染模板目录 · 151 个设计系统包 · 5 视觉方向 · 5 设备外框
SQLite 支撑的项目 · 会话 · 消息 · 标签页 · 模板
多供应商 BYOK 代理（/api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream）+ SSRF 防护
Claude Design ZIP 导入（/api/import/claude-design）
Sidecar 协议 + Electron 桌面 + IPC 自动化
工件 Lint API + 五维自评预输出门控
0.8.0——插件市场基础设施（261 个官方插件、manifest 规范、逐 Agent 安装脚本）
0.9.0——OpenDesign Cloud（应用内置的官方模型服务：零配置，一键登录）
0.10.0——一体化设计工作区：一个窗口内完成完整创作闭环（参考 → 素材 → 交互编辑 → 动效 → 交付）
0.11.0——The Bazaar：在开放中构建——人人都可以挑选和贡献的插件与设计系统社区市场
0.12.0——品牌设计系统：把你已经拥有的品牌变成可复用、可移植的 DESIGN.md 系统
0.13.0——Stay in Flow：原生会话恢复、更快的模型选择、直接导出截图支撑的 PPTX / PDF
打包 Electron 构建——macOS（Apple Silicon + Intel）+ Windows（x64）+ Linux AppImage（可选通道）
评论模式精确编辑——部分已发布，可靠的定向补丁进行中
AI 输出的调参面板 UX——尚未实现
npx od init 脚手架创建带 DESIGN.md 的项目
插件 SDK + od plugin {add,list,remove,test,publish} CLI
Figma / Pencil → React / Next / Vue 迁移插件（alpha）
刷新现有代码库插件（指向 git 仓库 + DESIGN.md）

分阶段交付 → docs/roadmap.md。

社区

每个渠道背后都是真实的人。

💬 Discord——日常聊天、插件分享、提问 → discord.gg/mHAjSMV6gz
🐦 X / Twitter——发版说明、里程碑、幕后 → @OpenDesignHQ
🗣️ GitHub Discussions——深度问答、RFC、"展示你的作品" → Discussions
🐛 GitHub Issues——Bug 报告、功能请求 → Issues

good-first-issue 和 help-wanted 标签是最简单的入门方式。

贡献

OpenDesign 之所以持续前进，是因为贡献者——设计师、工程师、提示词作者——不断出现。许多最常用的技能、设计系统和插件都由核心团队以外的人编写。

🎯 从哪里开始（最大杠杆，最小改动）

想要交付……	怎么做	在哪里
一个新的技能	放入包含 `SKILL.md` + `assets/` + `references/` 的文件夹	`skills/` · 规范在 `docs/skills-protocol.md`
一个新的设计系统	放入以 `DESIGN.md` 为核心的包；按需添加 `manifest.json`、`tokens.css`、组件、资产或来源信息	`design-systems/<brand>/`
一个新的插件	在分类文件夹下放入 `open-design.json` + 对应类型的载荷	`plugins/community/` · 规范在 `plugins/spec/SPEC.md` · Agent 开发指南在 `plugins/spec/AGENT-DEVELOPMENT.md`
支持新的编码 Agent CLI	一个运行时定义 + 注册项；仅新 wire format 需要 parser	`apps/daemon/src/runtimes/defs/`
修复 Bug 或打磨 UI	浏览 `good-first-issue` 标签	Issues →
翻译文档	更新 `README.<lang>.md` 文件	`TRANSLATIONS.md`

🤖 作为 Agent 贡献

如果你就是正在阅读这段文字的 Agent，最快的路径是：

# 1. 本地启动
git clone https://github.com/nexu-io/open-design.git
cd open-design && corepack enable && pnpm install
pnpm tools-dev run web

# 2. 找到一个 good-first-issue 并分配给自己
gh issue list --label "good first issue" --state open --limit 20
gh issue develop <number>   # 创建分支和 worktree

# 3. 做出改动，运行检查
pnpm guard && pnpm typecheck
pnpm --filter @open-design/<package> test

# 4. 提交 PR
gh pr create --fill

完整的 Agent 友好贡献流程、代码风格和 PR 标准 → English（Deutsch · Français · 简体中文 · 日本語 · Português）。

🏅 OpenDesign Fellow 计划

我们正在全球招募 OpenDesign Fellow——付费维护者，$1,000 / MR 免费 LLM 额度，官方授权在你所在地区推动增长，以及核心团队审查通道。详情 → MAINTAINERS.md 和 Discord 上的公告。

维护者

他们在日常维护、review 和社区支持里撑起了很多关键工作。

_{@Nagendhra-web}
_Maintainer

_@Sid-Qin
_Maintainer

维护者规则、晋升标准和退出协议 → MAINTAINERS.md（另有 Deutsch · Français · 简体中文 · 日本語 · Português）。

贡献者

感谢每一位参与者——代码、文档、反馈、一个精准的 Issue、一个新技能、一个新设计系统。

仓库活跃度

上方 SVG 由 .github/workflows/metrics.yml 使用 lowlighter/metrics 每日重新生成。

给我们 Star

如果这为你节省了三十分钟，请给一个 ★。Star 不能当饭吃——但它告诉下一位设计师、Agent 和贡献者，这个实验值得他们关注。一次点击，三秒钟，真实的信号。

参考与渊源

项目	角色
`alchaincyf/huashu-design`	设计哲学指南针——初级设计师工作流、品牌资产协议、反 AI 泛滥清单、五维评审。
`op7418/guizang-ppt-skill`	杂志风格 Web PPT 技能，完整打包在 `design-templates/guizang-ppt/` 下。Deck 模式默认技能。
`lewislulu/html-ppt-skill`	HTML PPT Studio 系列——15 套 Deck 模板，36 个主题，31 种页面布局，动画运行时，磁力卡片演示模式。
`OpenCoworkAI/open-codesign`	我们借鉴的 UX 模式（流式工件循环、沙箱 iframe、实时 Agent 面板）。
`multica-ai/multica`	守护进程 + 适配器架构——PATH 扫描 Agent 检测、本地守护进程作为唯一特权进程。
`VoltAgent/awesome-design-md`	最初 9 节 `DESIGN.md` schema 和 70 个上游衍生系统的历史来源；当前包可在此基础上扩展。
`bergside/awesome-design-skills`	`design-systems/` 下新增的 57 个设计技能的来源。
`heygen-com/hyperframes`	HTML→MP4 动态图形框架，在 OpenDesign 中作为 `hyperframes-html` 一等公民集成。
Claude Code skills	我们原样采用的 `SKILL.md` 约定。

详细溯源 → docs/references.md。

许可证

Apache-2.0。打包的 design-templates/guizang-ppt/ 保留其原始 LICENSE（MIT，@op7418）。打包的 design-templates/html-ppt/ 保留其原始 LICENSE（MIT，@lewislulu）。打包的 skills/web-clone/ 保留其原始 LICENSE（MIT，@Jane-xiaoer）。

热度有据可查

累计 Star: 104,695
近 7 天净增: 观察中

尚无约 7 天前的观测，不估算周净增。已有 7 天观测。

统计口径 ↗

项目档案

主要语言TypeScript

许可证Apache-2.0

Fork11,950

最近推送2026/10/29 14:00:00

本站发现2026/10/24 00:45:46

数据更新2026/10/29 13:59:35

收录与分类依据

仓库简介：The 1st Collaborative AI Design Agent Workspace. Local-first and open source. Create motion, prototypes, websites, apps, dashboards, presentations, images, and videos with your team and AI agents. Share work, exchange feedback, and iterate together in one workspace.

GitHub Topics：agent-skills, ai-design, byok, claude-code-for-design, claude-design, codex-design, cursor-design, deepseek, deepseek-harness, design-systems, desktop-app, desktop-apps

README 依据：已核实仓库中的 SKILL.md 文件或明确的技能安装命令

发现来源：分类检索 · 编程

open-design

README / 项目原文

OpenDesign: The 1st Collaborative AI Design Agent Workspace

What is OpenDesign

Product tour

Core pages

Studio — create and refine in one project

Platform Compatibility

Demo

1 · Prototypes — web · desktop · mobile

2 · Live artifacts & dashboards

3 · Decks — magazine decks, weekly updates, pitches

4 · Images — gpt-image-2, ImageRouter, custom API

5 · Video & HyperFrames — agent-native motion graphics

Why OpenDesign

Quick start

🖥️ Download the desktop app (recommended — zero config)

🤖 Install into your coding agent (no UI)

🐳 Run with Docker

🚀 Deploy on Sealos

🧑‍💻 Run from source

A full workflow — from brief to artifact

Use OpenDesign from your coding agent

Skills and design templates

Design Systems

Plugins

What plugins can do

Using plugins

Building a plugin

Contributing a plugin

Architecture

Roadmap

Community

Contributing

🎯 Where to start (max leverage, min change)

🤖 Contributing as an agent

🏅 OpenDesign Fellow program

Maintainers

Contributors

Repository activity

Star us

References & lineage

License

OpenDesign：首个协作式 AI 设计 Agent 工作台

什么是 OpenDesign

产品速览

核心页面

Studio——在同一个项目中创作和完善

平台兼容性

演示

1 · 原型——Web · 桌面 · 移动端

2 · 实时工件与仪表盘

3 · 演示文稿——杂志 Deck、周报、路演

4 · 图片——gpt-image-2、ImageRouter、自定义 API

5 · 视频与 HyperFrames——Agent 原生动态图形

为什么选择 OpenDesign

快速开始

🖥️ 下载桌面应用（推荐——零配置）

🤖 安装到你的编码 Agent（无 UI）

🐳 使用 Docker 运行

🚀 部署到 Sealos

🧑‍💻 从源码运行

一个完整的工作流——从需求到工件

从你的编码 Agent 使用 OpenDesign

技能与设计模板

设计系统

插件

插件能做什么

使用插件

构建插件

贡献插件

架构

路线图

社区

贡献

🎯 从哪里开始（最大杠杆，最小改动）

🤖 作为 Agent 贡献

🏅 OpenDesign Fellow 计划

维护者

贡献者

4 · Images — `gpt-image-2`, ImageRouter, custom API

4 · 图片——`gpt-image-2`、ImageRouter、自定义 API