Repolode
Submit
feimacode

feimacode/open-design-agent-kit

Design posters, social posts, slides and landing pages inside GitHub Copilot, Claude Code, Codex or Cursor, with no separate desktop app.

Open-source alternative to:Canva

View on GitHubWebsite
Stars
1,028
Forks
100
Open issues
8
Last commit
yesterday

What is it?

Open Design Agent Kit brings design skills, brand design systems and remixable examples into coding agents such as GitHub Copilot Chat, Claude Code, Codex and Cursor, or any MCP-capable agent. You describe a pitch deck, landing page, dashboard or mobile prototype in the chat you already use, and the agent's own model generates the files with its own file tools.

The kit bundles 198 design systems, 181 skills, 114 templates and 193 example artifacts. Generated output is written as plain files in your repository, so it can be reviewed, diffed and committed like other code. Agents render each design in a browser and run checks for clipped text, low contrast and missing focus states before finishing.

It is installed as a VS Code extension, a Claude Code plugin, a Codex skill set, an MCP server, or through a one-line npx command. Export to PDF, PNG and PowerPoint is supported, and some workflows connect to services such as Figma, Canva and Notion when their MCP servers are available.

Key features

  • 01Runs inside GitHub Copilot Chat, Claude Code, Codex, Cursor and other MCP-capable agents.
  • 02Ships 198 brand design systems that keep generated designs consistent.
  • 03Starts from 193 editable example artifacts or generates from a brief.
  • 04Renders and checks designs in a browser before delivering them.
  • 05Saves outputs as plain files in the repository.
  • 06Exports to PDF, PNG and PowerPoint.

Use cases

  • Creating social media graphics or posters from a short prompt inside an editor.
  • Drafting a slide deck or landing page prototype before building it in production code.
  • Turning a CSV or document into a report-style layout within your repo.
  • Producing print-ready resumes or single-page documents exported as PDF.

Quick start

  1. 1

    Run the one-command setup in your project to wire up Claude Code

    npx @feimacode/open-design-agent-kit init --tools claude
  2. 2

    Open your agent chat and describe the design you want, such as a landing page or poster

Things to know

  • It runs inside an existing coding agent, so you need one such as Claude Code, Codex, GitHub Copilot or Cursor.
  • The npx-based install routes require Node.js.
  • Some integrations, such as Figma, need their own tokens or official MCP servers.

In collections

UI design skills for AI coding agentsClaude Code tools, skills & pluginsAI coding assistants & agentsMCP serversAI agent skill libraries

Topics

#ai-design#design-systems#coding-agent#mcp#slides#poster#prototyping#claude-code#agent-skills#claude-design

FAQ

What is open-design-agent-kit?
Design posters, social posts, slides and landing pages inside GitHub Copilot, Claude Code, Codex or Cursor, with no separate desktop app. Open Design Agent Kit brings design skills, brand design systems and remixable examples into coding agents such as GitHub Copilot Chat, Claude Code, Codex and Cursor, or any MCP-capable agent. You describe a pitch deck, landing page, dashboard or mobile prototype in the chat you already use, and the agent's own model generates the files with its own file tools.
Is open-design-agent-kit free to use? What license does it have?
open-design-agent-kit is open source under the MIT license. Check the license terms before using it in commercial products.
Is open-design-agent-kit still maintained?
Actively maintained. The last commit to open-design-agent-kit was on Nov 6, 2026.
What can I use open-design-agent-kit for?
Creating social media graphics or posters from a short prompt inside an editor. Drafting a slide deck or landing page prototype before building it in production code. Turning a CSV or document into a report-style layout within your repo. Producing print-ready resumes or single-page documents exported as PDF.
How do I install open-design-agent-kit?
Run the one-command setup in your project to wire up Claude Code: npx @feimacode/open-design-agent-kit init --tools claude Open your agent chat and describe the design you want, such as a landing page or poster
Where can I get open-design-agent-kit?
The source code and installation instructions are on GitHub: https://github.com/feimacode/open-design-agent-kit

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects