Best Design and UI Plugins, Skills, and MCP Servers in 2026
Research-backed design and UI skills, plugins, and MCP servers for visual taste, design systems, design tools, and presentations.
Updated July 26, 2026
These extensions make agents better at visual work. Taste skills fix the generic AI look before code gets written, design-system skills keep generated UI consistent with your components and brand, tool integrations connect the agent to Figma, Canva, or your site builder, and presentation routes turn raw material into decks. Pick by where your visual work actually lives.
Anthropic’s design-direction skill. Before implementing a frontend, it commits to a distinct visual direction - typography, color, layout, motion, texture - instead of falling back on the safe, samey styling coding agents produce on their own.
When a product surface needs its own identity rather than default styling. It shapes generation, not review - pair it with Web Design Guidelines for audits. Generated design still needs accessibility and production testing before it ships.
Vercel’s review skill for frontend files. On each run it fetches Vercel’s current interface and accessibility rules, checks the files you point it at, and returns terse file-and-line findings you can inspect before asking the agent to fix anything.
As an audit pass over new or existing UI code - it reviews rather than generates. Because rules are fetched live at runtime, results stay current but can change between runs, and the remote instructions have to be trusted.
A community workflow that searches a bundled design database and produces project-specific recommendations - palettes, typography, layout, charts, even stack choices - before the agent writes any interface code.
When structured, concrete design-system direction beats a single taste prompt. Its database is guidance, not proof of usability, and the open core is separate from the publisher’s optional paid offering.
Anthropic’s presentation skill for working directly on PowerPoint files - creating, editing, rendering, splitting, and merging PPTX and POTX artifacts through a documented production workflow rather than one-shot file generation.
When the deliverable is a PowerPoint file and generating it locally is fine. It is a different thing from Claude for PowerPoint, which runs inside the application. Rendered output still needs a visual review before it goes out.
A community bundle of portable design skills for AI agents. It includes the flexible Design Taste workflow, predefined directions such as High-End Visual Design and Minimalist UI, redesign and image-to-code workflows, and skills for generating visual references.
When you want to choose an explicit design method instead of relying on a generic styling prompt. Start with Design Taste for adjustable variance, motion, and density; select High-End Visual Design or another variant when the visual direction is already clear. The current Design Taste v2 workflow is explicitly experimental.
The official shadcn/ui skill. It helps the agent add, search, debug, style, and compose components using your project’s actual component and registry context instead of inventing component APIs that don’t exist.
In projects built on shadcn/ui or compatible registries - it keeps generated UI aligned with the real component system. It is consistency infrastructure, not a general design-taste workflow.
A provider-aware frontend design workflow: one core skill, 23 supporting commands, optional hooks, and a detector that audits files, directories, or live URLs. Its installer compiles the right package for whichever platform you run.
For improving an existing frontend through repeated critique - it gives the agent a concrete design vocabulary and a browser-review loop instead of one “make it modern” pass. It can write provider configuration and drive Puppeteer, so review what the installer generates.
Figma’s official integration. The agent retrieves structured layout and component context, design tokens, screenshots, and Code Connect mappings from your files, and supported routes can also write to Figma, FigJam, and Figma Slides.
For design-to-code and design-parity review when the source of truth lives in Figma - structured context beats pasting screenshots. Prefer the official packages over older community MCP implementations.
A Figma account with access to the files. Read-tool limits depend on plan and seat - Starter and View seats can get as few as six calls a month, so sustained use effectively needs a paid Full or Dev seat.
Storybook’s official agent extension. Through a local MCP server - plus experimental Claude and Codex plugins - the agent inspects real component APIs, generates and updates stories, runs tests, and shows visual proof instead of guessing how the design system works.
For component-driven frontend work in projects that already run Storybook, especially where many existing components must be reused consistently. Keep the local endpoint private when Storybook contains proprietary components.
Anthropic’s skill for building polished, self-contained interactive web artifacts - pages and mini-apps that need more structure than an HTML snippet but far less than a production application.
For bounded interactive deliverables: dashboards, demos, single-page tools. It handles construction; for choosing the visual direction itself, Frontend Design is the companion skill.
Anthropic’s skill for applying a supplied brand system - colors, typography, rules - to documents and visual artifacts, so the brand doesn’t have to be restated in every prompt.
When you have a concrete brand guide or asset set for it to work from. It applies rules; it doesn’t invent them, and it isn’t a live brand-management integration.
A community skill and CLI that reverse-engineers a public website’s colors, typography, spacing, radii, and shadows into starter JSON and CSS design tokens.
To bootstrap a local design system from a visual reference you’re authorized to use, instead of hand-transcribing styles. Treat the output as starter tokens, not a pixel-perfect clone of the source site.
Anthropic’s visual-art skill for standalone graphics: posters, cover images, and other finished canvas compositions. Despite the name, this is not Canva and has no connection to the Canva product - for that, see Canva.
When the deliverable is a single designed graphic rather than a user interface or a slide deck. It brings explicit composition and visual-execution guidance to that one artifact.
Canva’s official integration: a remote design MCP packaged with skills for editing, resizing, bulk creation, brand checks, design feedback, and implementing reviewer comments. This is the Canva product connection - not the similarly named Canvas Design skill.
When designs, assets, brand kits, templates, comments, and exports live in Canva and it should stay the source of truth while production happens in the agent conversation.
Anthropic’s theming skill. It generates and applies reusable visual themes, keeping palettes, typography, and visual treatment consistent across several related outputs.
When a set of artifacts should share one coherent look. It is a theming workflow, not a connection to a live design-system source of truth - Storybook covers that job.
Lucid’s official connector and hosted MCP server. The agent can generate diagrams and search, retrieve, share, and summarize existing Lucid documents without exporting static images first.
When Lucid is already the team’s diagramming source of truth and process maps should flow into agent work. OAuth grants write-capable access to documents, so authorize thoughtfully.
Webflow’s official integration: a hosted MCP server plus a Claude connector, a verified Cursor plugin, and an official skills collection. The agent designs, edits, audits, and manages sites across components, styles, CMS, assets, and branches.
When the website actually lives in Webflow and the agent should work on that governed project. It can create, edit, and delete resources and can affect published sites, so authorize sites deliberately.
OpenAI’s design bundle of ten skills that turn a brief, screenshot, URL, or existing product into research, design directions, prototypes, audits, visual QA, and shareable review artifacts - a reviewable process rather than a single styling prompt.
For early product exploration, flow audits, and screenshot-to-prototype work. Its prototypes and automated critiques are not user research or accessibility certification.
Framer’s official bridge for local agents. One CLI setup gives the agent live access to a Framer project - canvas, pages, CMS, code components, styles, assets, localization, screenshots, and publishing. Framer deliberately does not use MCP for this connection.
For structured, repeatable Framer work such as CMS imports, bulk edits, and design-system maintenance against the real project. The agent can modify and publish site state, so authorize projects deliberately.
Gamma’s official connector and hosted MCP server. It turns prompts and source material into presentations, documents, social posts, and simple sites, with themes, layouts, AI visuals, and export options handled by the hosted product.
Slidev’s official skill for developer presentations. It teaches the agent the actual Slidev Markdown and Vue syntax, components, and runtime conventions, so decks live as version-controlled files next to the code they explain.
Google’s first-party Workspace MCP server for Google Slides, currently a Developer Preview. It lets the agent operate on live presentations instead of only generating exported files.
MagicPath’s official plugins and skill connect the agent to its collaborative UI canvas - moving between a visual canvas, reusable components, design-system themes, and production code in one workflow.
When MagicPath is already part of your design-to-code process. The skill drives the product through its CLI and canvas workflow, so it has little to offer outside it.
tldraw’s official MCP App gives the agent a live visual canvas for drawing, diagramming, and collaborative visual work, with read and write access to what’s on it.
Paper’s official plugins pair a local design-canvas MCP, hosted by the Paper desktop app, with code-to-design and design-to-code skills - a bidirectional path between a real canvas and the current codebase.
When Paper desktop is the visual workspace and design and implementation should stay connected. The agent can read and write designs and project-linked files.
