A
security-
licenseA
qualityAn AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.
Last updated -
4
3,508
3,740
Allows creation of complex animation timelines and code generation using Framer Motion, with animation preview capabilities and multiple easing options
Enables generation of React components with best practices, performance analysis, and accessibility compliance checking
Enables management and testing of Storybook stories, including visual regression testing, accessibility testing, and component documentation
Supports creation and management of Svelte components with automated testing and documentation generation
Provides tools for generating Tailwind CSS configurations from design tokens, optimizing and deduplicating classes, and creating custom design systems
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.
Related MCP Servers
- Asecurity-licenseAqualityAI-driven tool that helps developers create beautiful UI components instantly through natural language descriptions, integrating with popular IDEs like Cursor, Windsurf, and VSCode.Last updated -32
- Asecurity-licenseAqualityA powerful AI-driven tool that helps developers create beautiful, modern UI components instantly through natural language descriptions.Last updated -43,508
- Asecurity-licenseAqualityAn AI-powered Tailwind builder that helps developers create, inspire, and refactor UI components directly within their IDE, supporting popular frameworks like React, Next.js, Vue, and Svelte.Last updated -63619