willem4130/ui-ux-mcp-server

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

1. Clone this repository:

cd ~/KenKaiBuildMCP/design-ui-mcps/ui-ux-mcp-server

2. Install dependencies:

npm install

3. Create a .env file from the example:

cp .env.example .env

4. Configure your environment variables:

STORYBOOK_URL=http://localhost:6006
# ... other configurations

5. 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 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

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

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.