@pandacss/mcp

What it does

Connects Claude to Panda CSS projects, exposing design tokens, recipes, and the type-safe styling system as tools. Claude can read project configuration, inspect style definitions, generate new styles that conform to the design system, and help refactor components to use design tokens correctly.

Who it's for

Frontend engineers building with Panda CSS who want Claude to assist with styling tasks. Teams maintaining design systems benefit from AI help ensuring design token consistency, validating component styles, and generating new themed variants.

Common use cases

• Generate type-safe Panda styles matching design specifications
• Refactor components to replace hardcoded values with design tokens
• Create and iterate on Panda recipes and style variants
• Review styles for design system compliance
• Suggest design token improvements and refactoring

Setup pitfalls

• Requires a Panda project with a valid panda.config file and compiled styled-system artifacts
• @pandacss/dev must be installed in the project (not just the MCP server)
• Filesystem write access required if Claude should generate or modify files
• Changes to design tokens may require rebuilding the styled-system output