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

Related MCP server: Magic Component Platform

Installation

1. Clone this repository:

2. Install dependencies:

3. Create a .env file from the example:

4. Configure your environment variables:

5. Build the server:

Configuration

Add to your Claude Desktop MCP settings (~/Library/Application Support/Claude/claude_desktop_config.json):

Available Tools

Storybook Tools

• storybook_get_stories - Get list of all Storybook stories

• storybook_test_component - Run visual and accessibility tests

Tailwind Tools

• tailwind_generate_config - Generate Tailwind config from design tokens

• tailwind_optimize_classes - Optimize and deduplicate Tailwind classes

Animation Tools

• animation_create_timeline - Create animation timeline with Framer Motion or GSAP

• animation_preview - Generate preview of animation sequence

Playwright Tools

• playwright_test_ui - Run UI tests with Playwright

• playwright_capture_screenshots - Capture screenshots across browsers

Component Tools

• component_create - Create a new UI component with best practices

• component_analyze - Analyze component for performance and accessibility

Workflow Tools

• workflow_optimize_ux - Run comprehensive UX optimization analysis

• workflow_build_design_system - Generate complete design system from Storybook or code

Usage Examples

Run UX Optimization Analysis

Create Animation Timeline

Generate Design System

Development

Run in development mode:

Run tests:

Lint code:

Architecture

Requirements

• Node.js 18+

• npm or yarn

• Running Storybook instance (for Storybook features)

Contributing

1. Fork the repository

2. Create your feature branch

3. Commit your changes

4. Push to the branch

5. Create a Pull Request

License

MIT

Support

For issues and questions, please open an issue in the repository.