Best design plugins for Claude Code

Give Claude Code design expertise

These specialized resources turn Claude Code into a more effective design and frontend assistant. Some are MCP servers (which connect Claude to external services), others are community agents or skills (Markdown files to copy into .claude/).

Frontend Design Agent: The design expert in Claude Code

Community resource | Category: Agents | Source: Everything Claude Code

The Frontend Design agent is a Markdown file that configures Claude Code as a design and frontend development expert. It's part of community collections like Everything Claude Code.

Installation from Everything Claude Code

# Install via /install-github
/install-github punkpeye/everything-claude-code

# Or manually: download the specific agent
mkdir -p .claude/agents
curl -o .claude/agents/frontend-design.md \
  https://raw.githubusercontent.com/punkpeye/everything-claude-code/main/agents/frontend-design.md

Example frontend-design.md agent file

You can also create your own:

---
name: frontend-design
description: Design and frontend development expert, specialized in React and Tailwind CSS
---

You are a design and frontend development expert with expertise in:
- Design systems (tokens, components, documentation)
- React with TypeScript and Tailwind CSS
- Web accessibility (WCAG 2.1 AA minimum)
- Responsive design and mobile-first
- Subtle animations with Framer Motion

For each component, you produce:
1. Strict TypeScript code, no `any`
2. Responsive Tailwind classes (mobile → desktop)
3. ARIA attributes and focus management
4. A dark mode example if applicable

Use cases

• Full landing page: "As the frontend-design agent, create a landing page for a SaaS with hero, features, pricing, and footer"
• Design system: "Generate design tokens (colors, typography, spacing) for a cohesive design system"
• Accessible component: "Create an accessible Modal component with focus trap, escape key, and aria-labels"
• Dark mode: "Add a complete dark mode to my application with smooth transitions"

21st.dev Magic: Modern UI components (MCP)

Official MCP Server | Category: UI generation | Author: 21st.dev

21st.dev Magic is a real MCP server that provides access to a library of modern UI components directly from Claude Code. Unlike agents, it's an external service connected via the MCP protocol.

Installation

# Via the Claude command
claude mcp add magic -e TWENTY_FIRST_API_KEY=your-key -- npx -y @21st-dev/magic

JSON configuration

{
  "mcpServers": {
    "magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic"],
      "env": {
        "TWENTY_FIRST_API_KEY": "your-21st-dev-key"
      }
    }
  }
}

Available tools

• 21st_magic_component_builder: Generate a UI component from a description
• 21st_magic_component_inspiration: Find inspiration from existing components
• 21st_magic_component_refiner: Improve an existing component
• logo_search: Search for brand logos

Use cases

• Complex component: "I need a pricing section with 3 tiers, monthly/annual toggle, and feature comparison"
• Inspiration: "Show me examples of modern hero sections for a documentation site"
• Refinement: "Take this Card component and improve it with hover animations and better spacing"

Playwright: E2E tests and visual verification (MCP)

Official MCP Server | Category: Testing & Automation | Author: Microsoft / community

The Playwright MCP integrates end-to-end testing directly into the Claude Code workflow. It lets Claude navigate pages, take screenshots, and validate interactions.

Installation

# Install Playwright if not already done
npm install -D @playwright/test
npx playwright install

# Add the MCP
claude mcp add playwright -- npx -y @playwright/mcp

JSON configuration

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp"]
    }
  }
}

Available tools

• browser_navigate: Navigate to a URL
• browser_take_screenshot: Take a screenshot of the page
• browser_snapshot: Capture the accessible DOM of the page
• browser_click: Click an element
• browser_fill_form: Fill a form
• browser_evaluate: Execute JavaScript in the page

Use cases

• Visual verification: "Open my local homepage and take a screenshot to check the rendering"
• E2E test: "Test the signup form: fill in the fields, submit, and verify the success message"
• Responsive debug: "Take a screenshot of my page in mobile (375px) and desktop (1440px)"

Frontend Design Skill: Dedicated slash command

Community resource | Category: Skills | Format: Markdown file

In addition to the agent, you can create a skill (slash command) dedicated to frontend design. Unlike the agent which is always active, the skill is invoked explicitly when you need it.

Create a frontend-design.md skill

mkdir -p .claude/commands
cat > .claude/commands/frontend-design.md << 'EOF'
# Frontend Design

Create or improve a UI component with the following constraints:

**Stack**: React 18+, TypeScript strict, Tailwind CSS v3
**Accessibility**: WCAG 2.1 AA minimum (aria-labels, focus visible, 4.5:1 contrast)
**Responsive**: mobile-first, breakpoints sm/md/lg/xl
**Quality**: no `any`, named exports, one component per file

Always provide:
1. The complete TypeScript component
2. A usage example
3. Props documented with JSDoc
EOF

Usage:

/frontend-design create a product card component with image, title, price, and add-to-cart button

Summary

Next steps

• Security & quality extensions: Secure and improve your code quality
• Top essential extensions 2026: The fundamental resources
• Installing and managing extensions: Installation and configuration guide