[opensourcedex]

open-design-agent-kit is a free, open source design & prototyping project written in HTML and released under MIT. It has 1,029 GitHub stars, 99 forks and 8 open issues, and was last pushed 20 hours ago. On this registry it ranks #92 of 112 tracked projects in Design & Prototyping, with 5 head-to-head comparisons available.

What is open-design-agent-kit?

Open Design Agent Kit is an MIT-licensed library of design skills, 198 brand design systems and 193 remixable examples that runs inside the coding agent or chat a developer already uses — GitHub Copilot Chat, Claude Code, Codex, Cursor or any other MCP-capable agent — to produce posters, social posts, slides, dashboards and landing pages as plain files in the repository.

What it is

The kit packages Open Design's content — 181 skills, 114 design templates, 198 brand design systems, 193 remixable example artifacts and 13 craft documents on typography, colour, accessibility and anti-"AI slop" rules — as integrations built on each host agent's own mechanism: languageModelTools, chat instructions and slash commands in Copilot, a plugin with skills and a bundled MCP server in Claude Code, and .agents/skills plus MCP in Codex. Because the agent discovers the tools itself, a request is made in ordinary chat, and the resulting artifacts, manifests, comments and custom design systems appear in the workspace as files.

The problem it solves is installation weight. Open Design is a full local-first desktop app with its own daemon, project database and model setup, which is one more thing to install, keep running, configure and switch into, and its output lives in that app's database rather than in the codebase. The kit carries the same content and generation workflow without the app: no desktop app, no daemon, no extra account, API key or model setting, and output that can be diffed, reviewed and committed like any other code.

Key capabilities

  • A curated library rather than a prompt: 181 skills, 114 design templates, 198 brand design systems, 193 remixable rendered examples and 13 craft documents.
  • Native integration per agent through VS Code languageModelTools, chat instructions and slash commands, a Claude Code plugin with a bundled MCP server, or .agents/skills plus MCP in Codex.
  • A design system chosen once — bundled, invented from a brief or imported from your own — and remembered per workspace so later generations stay brand-consistent.
  • Every design is rendered in a real browser and checked for clipped text, low contrast, missing focus states, print bleed and a generic "AI" look, then passed to a critic for a verdict, after at most three questions up front.
  • Generation reads the codebase's real components first, and a single tool call ports a finished prototype into the application as idiomatic production code.
  • Export to PDF, PNG and PowerPoint; the VS Code extension adds a gallery, a live artifact preview with comments, WYSIWYG editing with a Tweaks panel, multi-screen collections and an Integrations view.

Who uses it and how

  • Developers who need a pitch deck, landing page, dashboard or mobile prototype produced inside the repository and reviewed as a diff.
  • GitHub Copilot Chat users who install the VS Code extension and ask for a design in the chat they already have open.
  • Claude Code users who run /plugin install open-design to get skills that trigger on design requests.
  • Codex users, and users of other MCP-capable agents reached through .agents/skills or the npx command.

Getting started

Install the VS Code extension, add the Claude Code plugin with /plugin install open-design, or use the npx command for other MCP-capable agents. The project homepage at https://feimacode.github.io/open-design-agent-kit/ links the per-integration guides.

How it compares

The closest relative named in the facts is Open Design's own desktop application: that app brings a background daemon, a project database and in-app provider and model configuration, while the kit adds nothing beyond an extension, a plugin or an npx command and runs on the model the host agent already uses, with no second key or bill. Output ownership follows from that difference, since the kit writes files into the repository instead of storing projects in an application database.

When to use it — and when not to

Choose it when the work already happens inside an MCP-capable agent and the designs should live beside the code; there is no database, daemon or mail server to operate, but the agent and its model must already be in place, and results are bounded by that model's quality and file tools. It is the wrong fit for anyone who wants a standalone design application with its own project database and model settings, for which the Open Design desktop app is the named alternative. The README excerpt documents install paths and integration surfaces rather than a full command reference, so expect to follow the per-integration pages in docs/getting-started and packages/vscode.

project readme (upstream, from github) — read inline

Open Design Agent Kit

English | 简体中文 | 日本語

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.
  • Checked before it's done. The agent renders every design in a real browser, fixes what the checks find (clipped text, low contrast, missing focus states, print bleed, a generic "AI" look), then asks a critic with fresh eyes for a verdict. It asks at most three questions up front, and keeps new designs from all looking alike.
  • 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.
  • Claude Desktop: the same plugin in the Code tab, Chat and Cowork, with designs shown inline in the conversation. An optional desktop extension (.mcpb) needs no Node.js and works in a Chat with no folder.
  • ChatGPT desktop: a desktop plugin for the Work and Codex tabs, installed with one npx command.
  • Claude and ChatGPT on the web: a hosted connector, nothing to install, for when you can't run anything locally.
  • 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:


"Design a dating-site dashboard — mutuals, match rate, a 30-day trend."
Editorial dashboard, left-rail nav, one restrained accent color.
"A habit-tracking app with daily quests and XP."
Three-screen mobile prototype, vivid quest tiles, level bar.

"A board-ready strategy deck, Swiss International style."
Decision-grade corporate deck — this is slide one of ten.
"Turn this CSV into a weekly metrics report."
KPI cards, trend charts, and a raw-data table.

"5 tips, as a Xiaohongshu-style swipeable card carousel."
Social-native knowledge cards, ready to export as images.
"A modern, print-ready resume."
Single A4 page, ready for PDF export.

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-.mcpb from the releases) for the tools without Node.js, a Figma token form, and Chat without a folder. See the getting-started guide.
  • ChatGPT desktop (macOS, Windows): npx @feimacode/open-design-agent-kit install chatgpt, restart ChatGPT, and turn on Open Design under Plugins → Personal. Works in the Work and Codex tabs; needs Node.js. See the getting-started guide.
  • Claude or ChatGPT on the web, or your phone: add the hosted connector https://open-design.feimacode.com/mcp. 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 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/:

Community

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.

Frequently asked questions

Is open-design-agent-kit free to use?

open-design-agent-kit is open source under the MIT licence. There is no licence fee and no seat count — you can self-host it or, where the project offers one, pay a vendor for a managed version instead.

What does open-design-agent-kit do?

Make posters, social posts, slides and landing pages in the coding agent or chat you already use (Copilot, Claude, Codex, Cursor), with 198 design systems, chec

What is open-design-agent-kit written in?

open-design-agent-kit is primarily written in HTML. Its source is publicly available at https://github.com/feimacode/open-design-agent-kit, and it has 1,029 GitHub stars.