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.
What it isAnthropic’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 to useWhen 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.
What it isVercel’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.When to useAs 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.What you needLocal project access and internet access at run time; no account.
What it isA 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 to useWhen 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.What you needNode.js plus Python 3 for the design-database search script.
What it isAnthropic’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 to useWhen 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.
What it isA 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 to useWhen 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.
What it isThe 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.When to useIn 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.
What it isA 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.When to useFor 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.What you needNode.js; Puppeteer for URL audits.
What it isFigma’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.When to useFor 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.What you needA 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.
What it isStorybook’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.When to useFor 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.What you needStorybook 10.5 or later running locally. The Claude and Codex plugins are vendor-published but experimental.
What it isAnthropic’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.When to useFor bounded interactive deliverables: dashboards, demos, single-page tools. It handles construction; for choosing the visual direction itself, Frontend Design is the companion skill.
What it isAnthropic’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 to useWhen 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.What you needA brand guide or asset set to supply.
What it isA community skill and CLI that reverse-engineers a public website’s colors, typography, spacing, radii, and shadows into starter JSON and CSS design tokens.When to useTo 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.What you needNode.js and Playwright for the extraction CLI.
What it isAnthropic’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 to useWhen 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.
What it isCanva’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 to useWhen 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.What you needA Canva account; bulk creation through brand-template autofill requires Canva Enterprise.
What it isAnthropic’s theming skill. It generates and applies reusable visual themes, keeping palettes, typography, and visual treatment consistent across several related outputs.When to useWhen 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.
What it isLucid’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 to useWhen 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.What you needA Lucid account; plan capabilities apply.
What it isWebflow’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 to useWhen 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.What you needA Webflow account with access to at least one site.
What it isOpenAI’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.When to useFor early product exploration, flow audits, and screenshot-to-prototype work. Its prototypes and automated critiques are not user research or accessibility certification.What you needCodex only - no Claude or Cursor version of this bundle exists.
What it isFramer’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.When to useFor 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.What you needA Framer account, per-project authorization, and Node for the CLI. The External Agent API is beta, and Framer plan and credit rules apply.
What it isGamma’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.When to useWhen a good-looking deck fast matters more than low-level slide control. Prompts and source material are sent to Gamma.What you needA Gamma account; generation consumes account credits and plan limits apply.
What it isSlidev’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.When to useFor developer talks and code-heavy decks. For business presentations that end up as a PowerPoint file, PPTX is the better route.
What it isGoogle’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.When to useWhen Google Slides is the system of record and Developer Preview conditions are acceptable - the toolset and availability can change without notice.What you needA Google account, enrollment in the Google Workspace Developer Preview Program, and your own Google Cloud OAuth client configured for the server.
What it isMagicPath’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 to useWhen 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.
What it istldraw’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.When to useWhen sketching an idea together beats a text-only diagram. Licensing the tldraw SDK for production use is a separate matter from this plugin.What you needCursor only - no Claude or Codex route exists today.
What it isPaper’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 to useWhen Paper desktop is the visual workspace and design and implementation should stay connected. The agent can read and write designs and project-linked files.What you needThe Paper desktop app installed and running, for every route.
Frontend Design
Web Design Guidelines
UI UX Pro Max
Taste Skill
shadcn/ui
Impeccable
Figma
Storybook
Extract Design System
Canva
Lucid
Webflow
Product Design
Framer
Gamma
Slidev
Google Slides MCP
MagicPath
tldraw
Paper
Skill
MCP
Plugin