designer-skill

by PyModel · Media & Design · ★ 47

designer-skill is an MCP server by PyModel. Plug-and-play MCP that gives your coding agent UI superpowers. One-line install, zero config. Claude Code, Codex, Cursor, VS Code, and more. It has 47 GitHub stars and ranks #550 of 2017 in Media & Design by stars.

Category: Media & Design
Author: PyModel
GitHub stars: 47
This week: Tracking since 18 Oct 2026
Weekly downloads: 66
Language: JavaScript
License: MIT (open source)
Last update: 2026-10-21 (3 days ago)
Links: Source Website npm

ai-agent
claude
claude-code
codex
coding-agent
cursor
design-system
designer-skill
frontend-design
mcp
model-context-protocol
npm
+5 more

How to install designer-skill

designer-skill is published on npm as @pymodel/designer-skill-mcp, and it is listed in the official MCP Registry. These steps assume it runs as a local stdio server, which is the usual setup.

Check the README. Confirm the start command and note any API keys or environment variables it needs (pass them with -e KEY=value or an env block). You need Node.js for npx.

Add it to Claude Code from a terminal:

claude mcp add designer-skill -- npx -y @pymodel/designer-skill-mcp

Or add it to Cursor or Claude Desktop in .cursor/mcp.json or claude_desktop_config.json:

{
  "mcpServers": {
    "designer-skill": {
      "command": "npx",
      "args": [
        "-y",
        "@pymodel/designer-skill-mcp"
      ]
    }
  }
}

Restart the client and check it. Run claude mcp list, or open the client's MCP settings, and confirm designer-skill and its tools are listed. The install guide covers VS Code and Codex.

Also listed in

Maintain this project? Get it featured ($99/mo, pinned at the top of Media & Design) or see what featuring includes.

Report a problem with this listing

Frequently asked questions

What is designer-skill?

designer-skill is an MCP server by PyModel in the Media & Design category. Plug-and-play MCP that gives your coding agent UI superpowers. One-line install, zero config. Claude Code, Codex, Cursor, VS Code, and more. It has 47 GitHub stars and ranks #550 of 2017 in Media & Design by stars.

Is designer-skill free and open source?

Yes. designer-skill is published under the MIT license, so you can run, modify and self-host it at no cost. If it connects to a paid service, that service's own pricing and API terms still apply. Check the repository for the exact license text before using it commercially.

What are the alternatives to designer-skill?

Other Media & Design projects on MCP Harbor include Shotkiln, remotion, LocalAI. Each alternative links to its own page with stars, license and recent activity. The Media & Design category ranks all 2017 by stars, and you can re-sort it by growth this week.

Alternatives to designer-skill

Shotkiln★ FeaturedMCP Registry

shotkiln.com

Screenshot, PDF and Open Graph image API for AI agents: capture pages, render PDFs, make OG images.

remotion★ 66,837

remotion-dev · TypeScript

🎥 Make videos programmatically with React

LocalAI★ 49,903

mudler · Go+305 stars this week (+0.6%)

LocalAI is the open-source AI engine. Run any model - LLMs, vision, voice, image, video - on any hardware. No GPU required.

chakra-ui★ 40,702

chakra-ui · TypeScript

Chakra UI is a component system for building SaaS products with speed ⚡️

next-ai-draw-io★ 36,394

DayuanJiang · TypeScript+92 stars this week (+0.3%)

Draw and edit draw.io diagrams by chatting with an AI. Web app, desktop app, and an MCP server for Claude Code, Cursor, Codex and VS Code.

agentscopeTrending★ 33,797

agentscope-ai · Python+378 stars this week (+1.1%)

Build and run agents you can see, understand and trust.

All 2017 Media & Design MCP servers →

Data last updated 25 October 2026. Stars and downloads are refreshed every day from GitHub and npm.