Open Design Agent Kit

Open Design Agent Kit brings pro-grade UI design generation into the coding agents developers already use — GitHub Copilot Chat, Claude Code, Codex, Cursor, and any MCP-capable tool — by packaging design skills, brand design systems, and remixable examples as plain files in the repository, with no desktop app, daemon, or extra API key. It is published under the feimacode entity, and the VS Code extension is published under the id feima.

What is Open Design Agent Kit?

Open Design Agent Kit is a library and toolchain that adds design generation directly to existing coding agents rather than shipping a standalone application. The agent's own model reads bundled skills, design tokens, and example artifacts, then writes the resulting design as plain files in your repo using its own file tools. Content is vendored from the open-design project and includes 181 skills, 114 design templates, 198 brand design systems, 193 remixable example artifacts, and 13 craft docs covering typography, color, accessibility, and anti-"AI slop" rules.

What makes Open Design Agent Kit stand out?

• Native to each agent — Copilot uses VS Code languageModelTools, chat instructions, and slash commands; Claude Code uses a plugin with skills plus a bundled MCP server; Codex uses .agents/skills plus MCP.
• Curated library, not a prompt — task-specific recipes, brand-accurate tokens, and craft rules replace generic generation.
• Remix from real examples — start from one of 193 rendered examples and have the model adapt it instead of starting blank.
• Brand-consistent by default — pick a bundled, invented, or imported design system once; it is remembered per workspace.
• Grounded and promotable — generation reads your real components first, and a tool call ports approved prototypes into production code.
• Checked before done — every design renders in a real browser and is fixed for clipped text, low contrast, missing focus states, print bleed, and generic look, then reviewed by a critic pass.
• Everything is a file — artifacts, manifests, comments, and custom design systems are plain workspace files, with no database or export step.
• Broad surface support — VS Code extension, Claude Code plugin, Claude Desktop (including an optional .mcpb extension), ChatGPT desktop plugin, a hosted web connector at https://open-design.feimacode.com/mcp, Codex CLI, a CLI setup command, and a stdio MCP server via npx -y @feimacode/open-design-agent-kit-mcp.

What can you do with Open Design Agent Kit?

• Product teams: generate pitch decks, landing pages, dashboards, and mobile prototypes from a chat prompt, then promote the approved prototype into the app's own components.
• Designers and marketers: produce Xiaohongshu-style swipeable card carousels, posters, HTML email, social posts, and print-ready resumes or decks exported to PDF or images.
• Data and engineering users: turn a CSV into a weekly metrics report with KPI cards and trend charts, or generate diagrams of a codebase.
• Connected workflows: when the agent is linked to Canva, Figma, Notion, Google Drive, Slack, Buffer, Metricool, X, or Shopify MCP servers, designs can be imported, pushed as editable layers, saved, or scheduled without manual file uploads.

How does Open Design Agent Kit work?

Install the extension, plugin, or npx command, then describe the design you want in the agent chat. The agent asks at most three clarifying questions, picks or reuses a design system, builds the artifact from a remix or a composed brief, and renders it for automated checks.

Who is it for?

• Developers using Copilot Chat, Claude Code, Cursor, or Codex who want UI mockups without leaving the editor.
• Designers who need brand-consistent artifacts produced from a documented design system.
• Teams producing recurring content such as social campaigns, decks, and reports, including scheduled jobs via the CLI (export, check, render-video).
• Scripts and CI pipelines that need design export, validation, or video rendering as automated steps.

FAQ

Is Open Design Agent Kit free?

The project is MIT-licensed, so the kit itself is free to use. The vendored skill, design-system, craft, and example content comes from open-design under Apache-2.0. Some integrations, such as ChatGPT desktop, require Node.js installed locally.

Does it need an API key or separate model?

No. Generation uses whatever model your agent already runs, with no second key or billing setup. The optional desktop extension removes the Node.js requirement for Claude Desktop.