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

🐳 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

🚀 Deploy on Sealos

The Sealos App Store template runs the published Open Design 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.

One-line install (16+ CLIs supported):

curl -fsSL https://open-design.ai/install.sh | sh -s <agent>

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:

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:

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

Quick start

Demo

Four core product categories, all rendered by a coding agent running on your laptop. Click a thumbnail to see the real example.

🖥️ 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 or GitHub Releases
• Windows (x64) → open-design.ai or GitHub Releases
• Linux (AppImage, optional lane) → GitHub 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.

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.

References & lineage

Detailed provenance → docs/references.md.

[skill]: https://docs.anthropic.com/en/docs/claude-code/skills

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

---

Plugins

261 official plugins live in 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:

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

Contributing a plugin

1. Drop the plugin folder into plugins/community/ (third-party plugins), or — to ship it bundled with Open Design — into the matching tier of 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 (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.

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

---

Comparison

---