Best design MCP servers in 2026: Mobbin, Awwwards, Paper, Storybook and more

Top MCP servers for design

The 13 most useful design MCP servers, from Mobbin and Awwwards to Storybook, fal and Canva, with what each one is for, the setup and prompts to try

Give a coding agent a screenshot of a design and it guesses: the spacing, the colors, which of your components to use. Design MCP servers replace the guess with the real thing: real apps' screens as references, a design file the agent can edit, your Storybook's documented props, your registry's components.

We picked the 13 most useful, starting from the most popular by GitHub stars, npm downloads and visitors on PulseMCP (October 2026). PulseMCP is a public directory of MCP servers that estimates how many people visit each one every week. We left out Figma's own MCP on purpose: if you're on Figma, you already know it (setup is at the end). Here they are in the order you'd use them, from references to shipped UI, plus Playwright for checking what shipped:

#	MCP	Best for	Popularity	Cost
1	Mobbin	Real app screens as references	Official, 620K+ screens	Paid Mobbin plan
2	Awwwards	Award-winning sites as landing page references	105 ★	Free
3	Paper	A canvas the agent edits, in HTML and CSS	Official	100 calls/week free
4	Penpot	Open-source design files, read and write	61K ★ (Penpot)	Free
5	Storybook	Building UI from your documented components	2.5M visits/week	Free
6	shadcn/ui	Finding and installing registry components	47M npm/month (CLI)	Free
7	Vibe Design System	Building with monday.com's Vibe components	683 ★, 130K npm/week (core)	Free
8	21st.dev Magic	Generating polished components from a prompt	6K ★	Free tier
9	fal	Images from Nano Banana, GPT Image, Flux	Official, 1,000+ models	Pay per image
10	Recraft	SVG icons and illustrations in one style	Official	Recraft credits
11	Agentation	Pointing at UI bugs instead of describing them	4.9K ★, 97K npm/week	Free
12	Excalidraw	Diagrams, flows and wireframes	5.5K ★	Free
13	Canva	Social graphics and brand assets	Claude connector	Free tier

1. Mobbin

Mobbin is a library of 620K+ screens and flows from real apps and websites. Its MCP lets the agent look up how good products solve the same screen before it designs yours: pricing tables, onboarding, empty states, settings. You get layouts based on proven patterns instead of the average AI page.

Terminal

Loading editor...

claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp

Watch out: it needs a paid Mobbin plan, and it covers iOS and web, not Android. It only reads: it brings references, your agent still builds.

2. Awwwards

Awwwards is the gallery of award-winning websites. This community MCP searches it in plain words ("dark 3D portfolio sites"), shows the screenshots inline and pulls a site's palette, tech stack and design elements. It's a free Mobbin for marketing sites and landing pages rather than app screens.

With Playwright installed, it also captures a live page, maps its sections and records its scroll and hover animations, naming the libraries and easings behind them. create_design_brief turns 2 to 5 picked sites and your goal into a written direction that cites where each idea came from.

Terminal

Loading editor...

claude mcp add awwwards -- npx -y awwwards-mcp

It needs Node 22.13 or newer. Build the local index once (about 4 minutes) to search thousands of sites instead of about 31 per filter: npx -y -p awwwards-mcp awwwards-index.

Watch out: it scrapes awwwards.com, so search can break when Awwwards changes its markup. It's a community project, not made by Awwwards, and the screenshots are for inspiration, not for copying a site.

3. Paper

Paper is a design canvas where every frame is real HTML and CSS, built to work with agents. Over MCP, the agent reads and edits your designs, creates variations on new artboards, pulls your code's tokens into the file and turns a frame into React and Tailwind. Design and code stop drifting apart because they're the same thing.

Terminal

Loading editor...

claude plugin marketplace add paper-design/agent-plugins && claude plugin install paper-desktop@paper

Watch out: Paper Desktop has to be open with a file loaded. The free plan allows 100 MCP calls a week, which a single session can use up; Pro is $20 per editor a month.

4. Penpot

Penpot is the open-source Figma alternative, and its official MCP gives the agent read and write access to your files with no paid seat. It can summarize a file's design system, create components in the style of existing ones and export a board as HTML and CSS or React. You can self-host all of it.

Terminal

Loading editor...

claude mcp add --transport http penpot "https://design.penpot.app/mcp/stream?userToken=YOUR_MCP_KEY"

Generate the key in Penpot → Your account → Integrations → MCP Server, then open a file and choose File → MCP Server → Connect.

Watch out: the agent can rename, move and delete objects on the open page. Penpot itself advises trying it on a copy, not your production file.

5. Storybook

Storybook's MCP gives the agent your component library's documentation: which components exist, their props and example stories. The agent builds with what you have instead of inventing a new button, then previews the stories and runs their interaction and accessibility tests.

Terminal

Loading editor...

npx storybook add @storybook/addon-mcp
claude mcp add --transport http storybook http://localhost:6006/mcp

Watch out: Storybook must be running, and the docs tools fully support React plus the Vite builds of Angular and Vue.

6. shadcn/ui

The shadcn MCP lets the agent browse, search and install components from any shadcn-compatible registry: shadcn itself, Magic UI, Aceternity, or your company's private one. It reads real examples before writing code, so the usage matches the component's actual API.

We asked for the parts of a pricing page from shadcn and Magic UI. It found that neither has a ready-made pricing block, assembled one from five components, and gave a single install command:

Terminal

Loading editor...

npx shadcn@latest mcp init --client claude

Watch out: it finds and installs, it doesn't design. The result is only as good as the registry, and the project needs a components.json.

7. Vibe Design System

Vibe is monday.com's open-source React design system, and its official MCP gives the agent the library's docs: components, props, usage examples, accessibility rules, icons and design tokens. The agent builds with real Vibe components instead of guessing their API.

It's for apps on the monday.com marketplace, where matching monday's look matters, and for teams that use Vibe as their component library. It also checks a project for the Vibe 2 to Vibe 3 upgrade and generates the migration commands.

Terminal

Loading editor...

claude mcp add vibe -- npx -y @vibe/mcp

Watch out: it only knows Vibe, so on any other stack it has nothing to offer. It documents components but doesn't check the result: look at the screen with Playwright after the agent builds.

8. 21st.dev Magic

21st.dev is a community library of polished React components. Its MCP searches the library, pulls a component's code, and can generate new ones from a prompt with /ui. It also finds brand logos as SVG, which saves a trip for every integrations grid.

Terminal

Loading editor...

npx @21st-dev/cli@latest init --client claude

Watch out: without direction, results look like every other landing page. Point it at your tokens. It was renamed "21st MCP" and old API keys were reset, so older tutorials are out of date.

9. fal (image generation)

fal's official MCP gives the agent 1,000+ image and video models through one server: Nano Banana, GPT Image, Flux, Seedream, Ideogram and upscalers. It can recommend a model, show its price, run it and save the result into your project. Hero images, empty-state illustrations and product shots come from the same session that builds the page.

Terminal

Loading editor...

claude mcp add --transport http --scope user fal https://mcp.fal.ai/mcp-relay

Watch out: every generation costs money, and an agent left to iterate runs up the bill. Tell it to check the price and ask before each batch. It makes raster images only; for SVG icons, see Recraft below.

10. Recraft

Recraft's MCP is the image generator that makes real vectors. Icon sets, illustrations and logos come out as SVG you can drop into the codebase, in one consistent style, including a custom style trained on your own illustrations. It also vectorizes PNGs and removes backgrounds.

Terminal

Loading editor...

claude mcp add --transport http recraft https://mcp.recraft.ai/mcp

Watch out: it spends the same credits as the Recraft app, so heavy MCP use eats your monthly allowance.

11. Agentation

Describing a visual bug to an agent in words is slow: "the second card, the gap under the title, on mobile". Agentation replaces that with pointing. Add its toolbar to your app, click the element, write a note, and the agent gets the note with the element's CSS selector, source file, React component tree and computed styles. With the MCP server running, annotations go straight to Claude Code, and the agent can reply in the thread, mark each one fixed or ask what you meant.

It's design review without screenshots and long messages.

Terminal

Loading editor...

claude mcp add agentation -- npx -y agentation-mcp server

Then add the toolbar to your app: .

Watch out: it runs locally on port 4747, so it's for your dev server, not production. The component tree is captured for React apps.

12. Excalidraw

Excalidraw's official MCP draws hand-drawn diagrams: user flows, architecture, sitemaps and low-fi wireframes. In Claude Desktop and claude.ai the editable canvas appears right in the chat, and you can export it to excalidraw.com.

Terminal

Loading editor...

claude mcp add --transport http excalidraw https://mcp.excalidraw.com/mcp

Watch out: it's for sketches and diagrams, not finished UI. The live canvas needs a client that supports MCP Apps; in the terminal you get a link.

13. Canva

Canva's server generates designs, edits text in existing ones, resizes for every channel and exports PNG or PDF. It's the one on this list for marketing assets rather than product UI: launch graphics, one-pagers, webinar banners.

Terminal

Loading editor...

claude mcp add --transport http canva https://mcp.canva.com/mcp

Watch out: no code and no tokens come out of it, and generated designs usually need a pass in Canva before they go out.

Playwright for design QA

Playwright is the most used MCP server overall, and it's as useful for designers as for developers. It opens the real page in a browser, resizes it to any device and screenshots it, then measures what you'd check by eye: spacing, overflow, clipped text, tap target sizes and contrast. It's a design review of what actually shipped, at every breakpoint, in a couple of minutes.

We asked for a QA pass on our own Skills page at phone, tablet and desktop widths. It found 12 issues. The worst two only show at tablet width: there is no menu at all, and the footer pushes the page sideways.

Terminal

Loading editor...

claude mcp add playwright npx @playwright/mcp@latest

Watch out: full-page screenshots can miss lazy-loaded content and sticky headers. Ask for viewport screenshots while scrolling when the page has either.

Playwright isn't a design server, so it lives with the development MCPs. Full setup, prompts and limits are on its MCP page.

Also worth knowing

Figma MCP: reads frames, variables and Code Connect, and captures shipped pages back into Figma. Install with claude plugin install figma@claude-plugins-official; real use needs a paid Dev or Full seat. On any plan, Framelink reads Figma files with a free token.