Skip to main content
Glama

UI/UX MCP Server

by willem4130
GitHub
TypeScript
OverviewInspectNewEndpointsSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

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
  1. Install dependencies:
npm install
  1. Create a .env file from the example:
cp .env.example .env
  1. Configure your environment variables:
STORYBOOK_URL=http://localhost:6006 # ... other configurations
  1. 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.

Deploy Server
-
security - not tested
F
license - not found
-
quality - not tested

How are these scores calculated?

local-only server

The server can only run on the client's local machine because it depends on local resources.

Tools

View all tools

Enables comprehensive UI/UX development workflows through integrated tools for component development with Storybook, Tailwind CSS styling, Framer Motion/GSAP animations, Playwright testing, and automated design system generation. Provides end-to-end automation for visual regression testing, accessibility compliance, and UX optimization analysis.

  1. Features
    1. 📚 Component Development (Storybook)
    2. 💅 Styling System (Tailwind CSS)
    3. 🎬 Animation (Framer Motion + GSAP)
    4. 🧪 Testing & Automation (Playwright)
    5. 🧩 Component Library Management
    6. 🔄 Workflow Automation
  2. Installation
    1. Configuration
      1. Available Tools
        1. Storybook Tools
        2. Tailwind Tools
        3. Animation Tools
        4. Playwright Tools
        5. Component Tools
        6. Workflow Tools
      2. Usage Examples
        1. Run UX Optimization Analysis
        2. Create Animation Timeline
        3. Generate Design System
      3. Development
        1. Run in development mode:
        2. Run tests:
        3. Lint code:
      4. Architecture
        1. Requirements
          1. Contributing
            1. License
              1. Support

                Related MCP Servers

                • Magic Component Platform (MCP)

                  21st-dev
                  A
                  security
                  F
                  license
                  A
                  quality
                  An 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,966
                  3,589
                  • Linux
                  • Apple

                • Magic Component Platform

                  oyasimi1209
                  A
                  security
                  F
                  license
                  A
                  quality
                  AI-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 -
                  3
                  2

                • 21st.dev Magic AI Agent

                  zackbissell
                  A
                  security
                  F
                  license
                  A
                  quality
                  A powerful AI-driven tool that helps developers create beautiful, modern UI components instantly through natural language descriptions.
                  Last updated -
                  4
                  3,966

                • FlyonUI MCP Server

                  themeselection
                  A
                  security
                  F
                  license
                  A
                  quality
                  An 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 -
                  6
                  36
                  19

                View all related MCP servers

                Appeared in Searches

                New MCP Servers

                MCP directory API

                We provide all the information about MCP servers via our MCP API.

                curl -X GET 'https://glama.ai/api/mcp/v1/servers/willem4130/ui-ux-mcp-server'

                If you have feedback or need assistance with the MCP directory API, please join our Discord server