> ## Documentation Index > Fetch the complete documentation index at: https://usefulai.com/llms.txt > Use this file to discover all available pages before exploring further. # 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.
| # | Name | Best for | Est. installs About install estimates | | -----------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | 1 | Frontend Design | Escaping the generic AI look | **1.2M** | | 2 | Web Design Guidelines | Auditing UI against Vercel's rules | **490K** | | 3 | UI UX Pro Max | Concrete design-system recommendations | **300K** | | 4 | Anthropic PPTX | Producing and editing PowerPoint files | **300K** | | 5 | Taste Skill | A collection of distinct design workflows | **285K** | | 6 | shadcn/ui | UI aligned with your shadcn components | **260K** | | 7 | Impeccable | A disciplined design-critique loop | **210K** | | 8 | Figma | Design-to-code from real Figma context | **200K** | | 9 | Storybook | UI built against your real components | **200K** | | 10 | Web Artifacts Builder | Polished self-contained web artifacts | **180K** | | 11 | Brand Guidelines | Applying your brand system to output | **160K** | | 12 | Extract Design System | Design tokens from an existing site | **130K** | | 13 | Canvas Design | Posters and standalone graphics | **110K** | | 14 | Canva | Design production in your Canva account | **100K** | | 15 | Theme Factory | Consistent themes across artifacts | **75K** | | 16 | Lucid | Diagrams in your Lucid workspace | **65K** | | 17 | Webflow | Building and managing Webflow sites | **55K** | | 18 | Product Design | Briefs to reviewable prototypes | **40K** | | 19 | Framer | Structured work on Framer sites | **35K** | | 20 | Gamma | Fast hosted decks from a prompt | **25K** | | 21 | Slidev | Version-controlled developer decks | **20K** | | 22 | Google Slides MCP | Editing live Google Slides decks | **20K** | | 23 | MagicPath | MagicPath canvas-to-code workflows | **15K** | | 24 | tldraw | A shared visual canvas in Cursor | **15K** | | 25 | Paper | A design canvas wired to your code | **10K** |
***
Frontend Design logo
## [Frontend Design](https://claude.com/plugins/frontend-design) by Anthropic
Escaping the generic AI look
1.2Mestimated installs
**What it is** 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 to use** 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.
Install PluginSkill
Web Design Guidelines logo
## [Web Design Guidelines](https://skills.sh/vercel-labs/agent-skills/web-design-guidelines) by Vercel
Auditing UI against Vercel's rules
490Kestimated installs
**What it is** 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.
**When to use** 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.
**What you need** Local project access and internet access at run time; no account.
Install Skill
UI UX Pro Max logo
## [UI UX Pro Max](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill)
Concrete design-system recommendations
300Kestimated installs
**What it is** 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 to use** 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.
**What you need** Node.js plus Python 3 for the design-database search script.
Install PluginSkill
PPTX logo
## [Anthropic PPTX](https://github.com/anthropics/skills/tree/main/skills/pptx) by Anthropic
Producing and editing PowerPoint files
300Kestimated installs
**What it is** 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 to use** 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.
Install PluginSkill
Taste Skill logo
## [Taste Skill](https://github.com/Leonxlnx/taste-skill)
A collection of distinct design workflows
285Kestimated installs
**What it is** 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 to use** 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.
Install PluginSkill
shadcn/ui logo
## [shadcn/ui](https://github.com/shadcn-ui/ui/tree/main/skills/shadcn)
UI aligned with your shadcn components
260Kestimated installs
**What it is** 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.
**When to use** 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.
Install PluginSkill
Impeccable logo
## [Impeccable](https://impeccable.style) by Paul Bakaus
A disciplined design-critique loop
210Kestimated installs
**What it is** 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.
**When to use** 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.
**What you need** Node.js; Puppeteer for URL audits.
Install Skill
Figma logo
## [Figma](https://developers.figma.com/docs/figma-mcp-server/)
Design-to-code from real Figma context
200Kestimated installs
**What it is** 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.
**When to use** 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.
**What you need** 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.
Install PluginPluginPluginMCP
Storybook logo
## [Storybook](https://storybook.js.org/ai)
UI built against your real components
200Kestimated installs
**What it is** 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.
**When to use** 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.
**What you need** Storybook 10.5 or later running locally. The Claude and Codex plugins are vendor-published but experimental.
Install PluginPluginMCP
Web Artifacts Builder logo
## [Web Artifacts Builder](https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder) by Anthropic
Polished self-contained web artifacts
180Kestimated installs
**What it is** 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.
**When to use** For bounded interactive deliverables: dashboards, demos, single-page tools. It handles construction; for choosing the visual direction itself, Frontend Design is the companion skill.
Install PluginSkill
Brand Guidelines logo
## [Brand Guidelines](https://github.com/anthropics/skills/tree/main/skills/brand-guidelines) by Anthropic
Applying your brand system to output
160Kestimated installs
**What it is** 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 to use** 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.
**What you need** A brand guide or asset set to supply.
Install PluginSkill
Extract Design System logo
## [Extract Design System](https://github.com/arvindrk/extract-design-system)
Design tokens from an existing site
130Kestimated installs
**What it is** 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.
**When to use** 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.
**What you need** Node.js and Playwright for the extraction CLI.
Install PluginSkill
Canvas Design logo
## [Canvas Design](https://github.com/anthropics/skills/tree/main/skills/canvas-design) by Anthropic
Posters and standalone graphics
110Kestimated installs
**What it is** 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 to use** 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.
Install PluginSkill
Canva logo
## [Canva](https://claude.com/plugins/canva)
Design production in your Canva account
100Kestimated installs
**What it is** 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 to use** 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.
**What you need** A Canva account; bulk creation through brand-template autofill requires Canva Enterprise.
Install PluginPluginPluginMCP
Theme Factory logo
## [Theme Factory](https://github.com/anthropics/skills/tree/main/skills/theme-factory) by Anthropic
Consistent themes across artifacts
75Kestimated installs
**What it is** Anthropic's theming skill. It generates and applies reusable visual themes, keeping palettes, typography, and visual treatment consistent across several related outputs.
**When to use** 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.
Install PluginSkill
Lucid logo
## [Lucid](https://lucid.co/marketplace/e16391cc/lucid-mcp-server)
Diagrams in your Lucid workspace
65Kestimated installs
**What it is** 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 to use** 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.
**What you need** A Lucid account; plan capabilities apply.
Install ConnectorMCP
Webflow logo
## [Webflow](https://developers.webflow.com/mcp/reference/getting-started)
Building and managing Webflow sites
55Kestimated installs
**What it is** 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 to use** 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.
**What you need** A Webflow account with access to at least one site.
Install ConnectorPluginMCP
Product Design logo
## [Product Design](https://openai.com/index/codex-for-every-role-tool-workflow/) by OpenAI
Briefs to reviewable prototypes
40Kestimated installs
**What it is** 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.
**When to use** For early product exploration, flow audits, and screenshot-to-prototype work. Its prototypes and automated critiques are not user research or accessibility certification.
**What you need** Codex only - no Claude or Cursor version of this bundle exists.
Install Plugin
Framer logo
## [Framer](https://www.framer.com/agents/)
Structured work on Framer sites
35Kestimated installs
**What it is** 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.
**When to use** 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.
**What you need** A Framer account, per-project authorization, and Node for the CLI. The External Agent API is beta, and Framer plan and credit rules apply.
Install CLI
Gamma logo
## [Gamma](https://developers.gamma.app/mcp/gamma-mcp-server)
Fast hosted decks from a prompt
25Kestimated installs
**What it is** 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.
**When to use** When a good-looking deck fast matters more than low-level slide control. Prompts and source material are sent to Gamma.
**What you need** A Gamma account; generation consumes account credits and plan limits apply.
Install ConnectorMCP
Slidev logo
## [Slidev](https://github.com/slidevjs/slidev/tree/main/skills/slidev)
Version-controlled developer decks
20Kestimated installs
**What it is** 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.
**When to use** For developer talks and code-heavy decks. For business presentations that end up as a PowerPoint file, PPTX is the better route.
Install PluginSkill
Google Slides MCP logo
## [Google Slides MCP](https://developers.google.com/workspace/slides/api/guides/configure-mcp-server)
Editing live Google Slides decks
20Kestimated installs
**What it is** 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.
**When to use** When Google Slides is the system of record and Developer Preview conditions are acceptable - the toolset and availability can change without notice.
**What you need** A Google account, enrollment in the Google Workspace Developer Preview Program, and your own Google Cloud OAuth client configured for the server.
Install MCP
MagicPath logo
## [MagicPath](https://github.com/MagicPathAI/agent-skills)
MagicPath canvas-to-code workflows
15Kestimated installs
**What it is** 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 to use** 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.
Install PluginPluginPluginSkill
tldraw logo
## [tldraw](https://tldraw.dev/blog/tldraw-mcp-app)
A shared visual canvas in Cursor
15Kestimated installs
**What it is** 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.
**When to use** When 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 need** Cursor only - no Claude or Codex route exists today.
Install Plugin
Paper logo
## [Paper](https://paper.design/docs/mcp)
A design canvas wired to your code
10Kestimated installs
**What it is** 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 to use** 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.
**What you need** The Paper desktop app installed and running, for every route.
Install PluginPluginPluginMCP
## Choose by use case

Generating a new frontend that shouldn't look generic?

→ Frontend Design commits to a distinct visual direction before any code is written

→ UI UX Pro Max returns concrete palette, type, and layout recommendations from a design database

→ Taste Skill bundles adjustable design direction, predefined visual styles, redesign workflows, and image-to-code skills

→ Web Artifacts Builder for a polished self-contained artifact or mini-app rather than product UI

→ Product Design is the Codex-only bundle from brief to reviewable prototype

Already built the UI and want it critiqued?

→ Web Design Guidelines audits files against Vercel's live interface and accessibility rules

→ Impeccable runs a repeated critique loop with browser review, not a single pass

Keeping generated UI consistent with your components and brand?

→ shadcn/ui when your components are shadcn - the agent works from the real registry

→ Storybook grounds the agent in your actual component library, with visual proof

→ Extract Design System bootstraps starter tokens from an existing site

→ Theme Factory and Brand Guidelines keep themes and a supplied brand consistent across outputs

Your design lives in Figma or on a canvas, and you want code?

→ Figma for design-to-code and parity review from structured file context

→ Paper for a design canvas wired both ways to your codebase

→ MagicPath when its collaborative canvas is already your route to production code

Paper needs its desktop app running - the cards carry the platform details.

Want the agent to work inside a site builder or design app?

→ Webflow and Framer when the tool is the website itself

→ Canva for design production and brand assets in your account

→ Lucid for diagrams in your workspace; tldraw for a shared sketch canvas beside the agent

tldraw is Cursor-only - the cards carry the platform details.

Building a deck or a standalone graphic?

→ PPTX when the deliverable is a PowerPoint file

→ Claude for PowerPoint to work inside the application itself

→ Gamma for fast hosted decks; Google Slides MCP for live Slides, still a Developer Preview

→ Slidev for version-controlled developer talks

→ Canvas Design for posters and single graphics rather than slides

No reveal.js route has earned a recommendation yet - for code-native decks, Slidev is the maintained path.

## Related categories Image, video, and audio generation live there. Documents, whiteboard collaboration, and office-file skills. Frontend tooling and component work without a design job.