@pandacss/mcp

What it does

This MCP server bridges Claude and Panda CSS projects by reading your project's filesystem and configuration. It provides Claude with detailed context about your design tokens, recipes, styled-system artifacts, and type-safe utility definitions, enabling it to understand your design system's structure and constraints. This allows Claude to assist with informed style generation, panda.config reviews, pattern refactoring, and design system documentation that respects your existing design decisions and tokens.

Who it's for

Frontend engineers building Panda CSS-based projects who want Claude to understand their design system architecture and constraints. Especially useful for teams doing design token documentation, style refactoring, recipe development, or iterating on their design system with AI assistance.

Common use cases

• Review your panda.config for token organization and naming consistency
• Generate new recipes or variants aligned with your design system
• Refactor styles while Claude maintains awareness of your tokens and patterns
• Document design system decisions, tokens, and usage patterns
• Get suggestions for design system structure improvements

Setup pitfalls

• Requires a valid panda.config file at your project root — the server reads this to provide context
• Reads and writes your filesystem — run only in trusted environments with appropriate sandboxing
• Install after panda init and initial code generation — Claude needs the generated styled-system artifacts for context
• Makes network requests per capability badges — verify your firewall permits outbound connections