Tools

Has the agent settle on a clear aesthetic direction first, then write distinctive, production-ready frontend interfaces that avoid the generic AI look. Official Anthropic plugin.

Builds multi-component web pages that need state or routing with React, Tailwind CSS and shadcn/ui, using bundled init and build scripts, then packs them into a single HTML file for a claude.ai Artifact. Official Anthropic skill.

UI/UX design knowledge base plugin with searchable UI styles, color palettes, font pairings, charts and guidelines for 20+ tech stacks; generates complete design system recommendations by product type. Needs Python 3 installed locally.

UI design knowledge base skill: looks up UI styles, palettes, font pairings, charts and UX guidelines by product type and generates a full design system, covering 22 stacks including React, SwiftUI and Flutter. Needs Python 3 locally.

Official shadcn/ui CLI: initializes projects and adds component source to your codebase on demand, with switchable presets. Since v4 it offers --dry-run and --diff so agents can preview changes, and it comes with an agent skill.

MCP server built into the official shadcn CLI: lets agents browse and search components, blocks and templates in any configured registry, including private ones, and install them into your project in plain language. The project needs a components.json.

Official shadcn/ui skill: uses the shadcn CLI to read project config and component docs, then adds, searches, composes and fixes components following styling, form and accessibility rules. Can also start new projects from presets.

Official Storybook addon that exposes an MCP endpoint on the Storybook dev server so agents can look up component docs and props, write and preview stories, and run component and accessibility tests. Storybook must be running; AI features are in preview.

Frontend design polish skill: one skill with 24 commands such as polish, audit, critique and typeset, plus 61 deterministic rules that catch typical AI-generated UI problems, with live iteration in the browser. Works with Claude Code, Codex, Cursor and others.

Frontend design quality plugin: one skill plus 24 commands (audit, critique, polish and more) and 61 built-in deterministic rules that find common design flaws in AI-generated interfaces and fix them one by one.

Design engineering skills by Emil Kowalski, author of Sonner and Vaul: choose animation easing and durations, review and improve motion, apply Apple design principles, make web apps feel native on phones, and help pick UI libraries and prototype multiple versions.

Official daisyUI skill: the agent uses daisyUI 5 component classes, semantic colors and themes whenever it writes HTML or JSX, picking components by intended function, reading their guides and following their exact structure. Includes install, usage, config and color guides. Built on Tailwind CSS 4.

UI/UX design plugin from the wshobson/agents marketplace with 3 subagents, 9 skills and commands for design review, component creation and accessibility audits, covering design tokens, WCAG 2.2, responsive layout, iOS HIG and Material Design 3 for in-code UI design and review.

Vercel's guide to React composition patterns: replaces boolean prop sprawl with compound components, lifted state and clean Context interfaces, including React 19 API changes. Useful for refactoring component libraries and reviewing component architecture.

UI skills for design engineers: clean up spacing and hierarchy in AI-generated interfaces, fix accessibility and page metadata, debug janky animations, build DESIGN.md from an existing product or site, and run read-only UI reviews with fix plans. Use with a local frontend project in a coding agent.

Design engineer Jakub Krehel's 11 UI skills: targeted fixes for typography, color, layout, accessibility and UI copy, plus full interface reviews, animation teardowns, component state stress tests and multi-variant generation. Works on web project code; installing needs Node.js.

OpenAI's official Codex plugin for building frontend apps and generating visual assets, testing and debugging in a browser, plus best-practice skills for React, shadcn/ui, Stripe payments and Supabase databases. Codex only.

21st.dev's official MCP: lets agents search and fetch UI components, themes and template code from the 21st.dev community, and generate components from a description once AI access is enabled. Absorbs the former Magic MCP; requires a free API key from 21st.dev.

Design engineering plugin for product interfaces such as admin panels and dashboards: builds UI on design principles and saves spacing, color and hierarchy decisions to .interface-design/system.md to stay consistent across sessions. Not meant for marketing pages.

Design token build tool: define colors, font sizes, spacing and other design specs in one JSON source, then style-dictionary build generates CSS, SCSS, iOS, Android and other platform code, keeping the design system and implementations in sync. Needs Node.js and a config.json.

Turns Figma designs into production code in your project, using the design screenshot as the visual target and reusing existing components, design tokens and Code Connect mappings first. Maintained by Figma; needs the Figma MCP server (free plans get only 6 calls a month).

Figma's official skill collection: implement designs as code, map components with Code Connect, generate design-system libraries from code, and build screens and FigJam diagrams on the canvas. Needs the Figma MCP server; canvas writes are in beta and currently free.

Searches 200,000+ icons from 150+ libraries such as Lucide and Material Design, suggests icons by use case, and returns SVG or React, Vue and other component code, or writes them into your icon file. Handy for AI-built pages and UI prototypes. No account or API key; needs Node.js.

Motion design skill built on the ideas of design engineers Emil Kowalski, Jakub Krehel and Jhey Tompkins: builds animated UI components for your project type, or audits existing animations in an HTML report with looping demos. Use in a coding agent on a local frontend project.