UI/UX MCP Server
A comprehensive Model Context Protocol (MCP) server that integrates 5 powerful tools for complete UI/UX development workflows.
Features
📚 Component Development (Storybook)
- Get and manage stories
- Run visual regression tests
- Accessibility testing
- Component documentation
💅 Styling System (Tailwind CSS)
- Generate configurations from design tokens
- Optimize and deduplicate classes
- Create custom design systems
- CSS variable generation
🎬 Animation (Framer Motion + GSAP)
- Create complex animation timelines
- Generate animation code
- Preview animations
- Multiple easing options
🧪 Testing & Automation (Playwright)
- Cross-browser UI testing
- Visual regression testing
- Screenshot capture across viewports
- Automated user flow testing
🧩 Component Library Management
- Generate components in React/Vue/Svelte
- Analyze component performance
- Accessibility compliance checking
- Auto-generate tests and documentation
🔄 Workflow Automation
- UX optimization analysis
- Design system generation from Storybook or code
- End-to-end workflow automation
Installation
- Clone this repository:
cd ~/KenKaiBuildMCP/design-ui-mcps/ui-ux-mcp-server
- Install dependencies:
npm install
- Create a
.envfile from the example:
cp .env.example .env
- Configure your environment variables:
STORYBOOK_URL=http://localhost:6006
# ... other configurations
- Build the server:
npm run build
Configuration
Add to your Claude Desktop MCP settings (~/Library/Application Support/Claude/claude_desktop_config.json):
{
"mcpServers": {
"ui-ux-mcp": {
"command": "node",
"args": ["/Users/YOUR_USERNAME/KenKaiBuildMCP/design-ui-mcps/ui-ux-mcp-server/dist/index.js"]
}
}
}
Available Tools
Storybook Tools
storybook_get_stories- Get list of all Storybook storiesstorybook_test_component- Run visual and accessibility tests
Tailwind Tools
tailwind_generate_config- Generate Tailwind config from design tokenstailwind_optimize_classes- Optimize and deduplicate Tailwind classes
Animation Tools
animation_create_timeline- Create animation timeline with Framer Motion or GSAPanimation_preview- Generate preview of animation sequence
Playwright Tools
playwright_test_ui- Run UI tests with Playwrightplaywright_capture_screenshots- Capture screenshots across browsers
Component Tools
component_create- Create a new UI component with best practicescomponent_analyze- Analyze component for performance and accessibility
Workflow Tools
workflow_optimize_ux- Run comprehensive UX optimization analysisworkflow_build_design_system- Generate complete design system from Storybook or code
Usage Examples
Run UX Optimization Analysis
await workflow_optimize_ux({
url: "https://your-website.com",
analyses: ["performance", "accessibility", "mobile", "seo"]
})
Create Animation Timeline
await animation_create_timeline({
library: "framer-motion",
animations: [
{
target: ".hero-title",
properties: { opacity: 1, y: 0 },
duration: 0.6,
delay: 0.2
}
]
})
Generate Design System
await workflow_build_design_system({
source: "storybook",
sourceId: "http://localhost:6006",
includeTokens: true,
includeComponents: true,
includeDocumentation: true
})
Development
Run in development mode:
npm run dev
Run tests:
npm test
Lint code:
npm run lint
Architecture
ui-ux-mcp-server/
├── src/
│ ├── index.ts # Main server entry point
│ └── tools/
│ ├── storybook.ts # Storybook automation
│ ├── tailwind.ts # Tailwind CSS management
│ ├── animation.ts # Animation tools
│ ├── playwright.ts # Browser automation
│ ├── components.ts # Component management
│ └── workflows.ts # Workflow automation
├── dist/ # Compiled JavaScript
├── package.json
├── tsconfig.json
└── README.md
Requirements
- Node.js 18+
- npm or yarn
- Running Storybook instance (for Storybook features)
Contributing
- Fork the repository
- Create your feature branch
- Commit your changes
- Push to the branch
- Create a Pull Request
License
MIT
Support
For issues and questions, please open an issue in the repository.