How do I install Open Design?

Copy the stdio config for Cursor, Claude Desktop, Claude Code, or VS Code on this page. It uses the publisher's install, not a PlugMCP proxy.

Does Open Design need an API key?

The publisher lists these environment variables: OPEN_DESIGN_FIGMA_TOKEN.

What transport does Open Design use?

Open Design runs locally over stdio.

When was Open Design last checked?

Last checked 2026-11-09. Make posters, social posts, slides and landing pages with 198 design systems, checks and exports.

Open Design MCP server

Power your agent

Add this server

The publisher's own command. Not a PlugMCP endpoint.

Add to Cursor Add to VS Code Run on PlugMCP

Host a copy with our keys and logs.

Local command

npx -y @feimacode/[email protected]

Credentials from the publisher

OPEN_DESIGN_FIGMA_TOKEN — Optional. A Figma personal access token, used only to import Figma frames. Leave empty if you don't use Figma.

Claude Code has no install link for a local command. Copy the command below and run it in a terminal.

shClaude Code

1OPEN_DESIGN_FIGMA_TOKEN=<secret> claude mcp add io.github.feimacode-open-design -- npx -y @feimacode/open-design-agent-kit-mcp@0.4.0

Run in a terminal.

jsonClaude Desktop

1{2  "mcpServers": {3    "io.github.feimacode-open-design": {4      "command": "npx",5      "args": [6        "-y",7        "@feimacode/[email protected]"8      ],9      "env": {10        "OPEN_DESIGN_FIGMA_TOKEN": "<secret>"11      }12    }13  }14}

claude_desktop_config.json

Local · npmPublisher installStep-by-step: add this in Claude

Remote URL or a command on your machine? How the two installs differ

Run on PlugMCP

Host a copy with our keys and logs.

A new server you create. It is not this listing's official endpoint. Use the publisher install when you want their URL and their credentials.

Launch

Server facts

Local

Transport: stdio
Version: 0.4.0
API key

Tools

No tool list yet. Remote servers get one after the first health check.

FAQ

Questions

Open Design Agent Kit

Pro-grade design, built right into the coding agent you already use.

Open Design Agent Kit brings Open Design's design skills, brand design systems, and remixable examples into GitHub Copilot Chat, Claude Code, Codex, Cursor, and any other MCP-capable agent. Ask for a pitch deck, landing page, dashboard, or mobile prototype in the chat you already have open. Your agent's own model builds it with its own file tools, guided by a library that keeps the result from looking AI-generated.

No desktop app. No daemon. No extra account, API key, or model settings. Install it, ask, and the files show up in your repo.

Why built-in beats another app

Open Design itself is a full local-first desktop app with its own daemon, project database, and model setup. It's excellent, but it's one more thing to install, keep running, configure, and switch into. Most of what makes it valuable day to day isn't the app. It's the content: 181 skills, 114 design templates, 198 brand design systems, 193 remixable example artifacts, and 13 craft docs (typography, color, accessibility, anti-"AI slop"). Agent Kit takes that content and the generation workflow around it and builds them directly into your agent:

	Open Design desktop app	Open Design Agent Kit
Install	Desktop app plus a background daemon	One VS Code extension, Claude Code plugin, or `npx` command
Where you work	A separate app window	The agent chat you already have open
Model	Chosen and configured in the app	Whatever model your agent already uses, with no second key or bill
Setup	Providers, keys, and projects set up in the app	Nothing to configure. Your active design system is remembered per workspace.
Output	Stored in the app's project database	Plain files in your repo: diff, review, and commit them like any other code
Getting to production	Export and hand off	Promote the prototype into your real app's components, in the same session

What makes it different

Native to each agent. It isn't a wrapper or a separate UI; each integration uses the agent's own mechanism. In Copilot, that's VS Code languageModelTools, chat instructions, and slash commands. In Claude Code, it's a plugin with skills and a bundled MCP server. In Codex, it's .agents/skills plus MCP. The agent finds the tools on its own, so you just describe what you want.
A curated library, not a prompt. Task-specific recipes, brand-accurate design tokens, and hard-won craft rules. That's the difference between "a generic gradient card layout" and something that looks designed.
Remix, don't start blank. Start from any of 193 real rendered examples, plus a growing community catalog, and let the model adapt one instead of inventing from scratch.
Brand-consistent by default. Pick a design system once (bundled, invented from a brief, or imported from your own) and every generation after that uses it.
Grounded in your codebase, and headed there. Generation looks at your real components first. When the prototype is right, one tool call ports it into your app as idiomatic production code.
Everything is a file. Artifacts, manifests, comments, and custom design systems are plain files in your workspace. There's no database, no lock-in, and nothing to export.

Ways in:

VS Code extension: native tools for GitHub Copilot Chat, plus a gallery, a live artifact preview with comments, WYSIWYG editing and a Tweaks panel, multi-screen collections and explorations, and an Integrations view.
Claude Code plugin: /plugin install open-design gives you skills that trigger on design requests (including social posts, posters, campaigns, explorations and decks from documents), 27 curated /open-design:* commands, and the MCP server, registered automatically.
Codex CLI: the same skills in Codex's own .agents/skills format, plus the MCP server.
One-command project setup: npx @feimacode/open-design-agent-kit init wires Claude Code and/or Codex into your project.
MCP server: npx @feimacode/open-design-agent-kit-mcp for Cursor or any other MCP-capable agent.
Any agent via npx skills add: npx skills add https://github.com/feimacode/open-design-agent-kit/tree/main/packages/claude-plugin/skills/open-design drops the same skill into any of the 75+ agents skills supports (Cursor, OpenCode, Cline, and more). It registers the MCP server itself the first time you ask it to design something — nothing else to run first.

Published under the feimacode entity; the VS Code extension's publisher id is feima.

See what it builds

Six of the ~280 vendored skills and templates, rendered exactly as-is — no retouching, no cherry-picked crops:

Every one of these started from remix_open_design_example (copy a real example, then modify it) or prepare_open_design_brief (compose instructions and generate from scratch) — the same two tools regardless of which surface below you use.

Get started

VS Code (GitHub Copilot Chat): install "Open Design Agent Kit" from the Marketplace. See the getting-started guide.
Claude Code: /plugin marketplace add feimacode/open-design-agent-kit, then /plugin install open-design. Or run npx @feimacode/open-design-agent-kit init --tools claude in your project. See the getting-started guide.
Claude Desktop: install the same plugin from Customize → Plugins, then use it in the Code tab or in a Chat with a folder. Optionally add the desktop extension (open-design-<version>.mcpb from the releases) for the tools without Node.js, a Figma token form, and Chat without a folder. See the getting-started guide.
Codex CLI: npx @feimacode/open-design-agent-kit init --tools codex. See the getting-started guide.
Any MCP agent (Cursor and others): register npx -y @feimacode/open-design-agent-kit-mcp as a stdio MCP server. See the MCP server README.
Any of the 75+ agents skills supports: npx skills add https://github.com/feimacode/open-design-agent-kit/tree/main/packages/claude-plugin/skills/open-design (add --agent <name> to target one directly). The skill wires up the MCP server on its own the first time it runs.
Scripts and CI: npx @feimacode/open-design-agent-kit export …, check … and render-video …. See the CLI guide.

Works with the tools you already use

When your agent is connected to one of these services' official MCP servers, Open Design's workflows use it directly instead of handing you a file to upload: importing into Canva, pushing designs into Figma, saving to Drive, posting through a scheduler. Nothing is installed without your yes. See Connect other services.

Integration	What your agent can do with it
Canva	Import a design, upload assets, export, read brand kits
Figma	Read frames into code, push designs in as editable layers, export and upload assets
Notion	Read pages, create pages, upload files
Google Drive	Search, read and save files
Slack	Share a message or image in a channel
Buffer	Draft and schedule posts on X, LinkedIn, Instagram, Facebook, Threads, Bluesky, Mastodon, TikTok, Pinterest, YouTube
Metricool	Schedule posts on Instagram, Facebook, LinkedIn, TikTok, YouTube
X	Post through X's own server
Shopify	Update products and descriptions in your store

Documentation

Everything lives in docs/:

Guides:

Community

Gallery: remixable designs from the community live in awesome-open-design. Made something good? Add it there.
Questions and show-and-tell: GitHub Discussions.
Bugs and requests: open an issue.
Contributing: start with CONTRIBUTING.md and the good first issue label.

Provenance

Some code is adapted from open-design (Apache-2.0): the artifact manifest logic, parts of the preview editor, and deck export. See Upstream ports, and packages/core/src/vendored/SOURCE.md for the exact record.

License

MIT — see LICENSE. Skill/design-system/craft/example content is vendored from open-design, licensed Apache-2.0; see Provenance above for which files that applies to.