UI/UX

You deploy a dedicated MCP server that wires together Storybook, Tailwind, animation, testing, component management, and workflow automation to streamline UI/UX development. This server lets you run all five toolchains from a single runtime, enabling end-to-end UX optimization, design system generation, and automated testing within your projects.

How to use

You run this MCP server locally or in your environment and connect a compatible MCP client to it. Once connected, you can access Storybook-related actions, Tailwind configuration, animation workflows, Playwright UI tests, component management tasks, and design workflow automation from a unified interface. Use each tool to perform its specific tasks: fetch Storybook stories, generate design-system artifacts, create and preview animations, run cross-browser UI tests, analyze components for performance and accessibility, and execute UX optimization analyses.

How to install

Prerequisites you need before installation are Node.js 18+ and npm (or yarn). Ensure you have a local development environment with a shell access to run commands.

# 1) Clone the MCP server repository
cd ~/

# 2) Install dependencies
npm install

# 3) Create a local environment config from the example
cp .env.example .env

# 4) Edit environment values as needed (example below shows where a Storybook URL could be configured)
# STORYBOOK_URL=http://localhost:6006

5. Build the server to generate the distribution artifacts that the MCP runtime will execute.

npm run build

6. Start the MCP server using the configured runtime. The server is designed to be launched through the MCP runtime you set up in the client configuration. If you are running it directly from your environment after building, you can start it with the node runtime pointing to the generated entry script.

node dist/index.js

Configuration

Configure your MCP client to connect to the server. The following example shows how the Claude Desktop MCP settings can reference this server.

{
  "mcpServers": {
    "ui-ux-mcp": {
      "command": "node",
      "args": ["/Users/YOUR_USERNAME/KenKaiBuildMCP/design-ui-mcps/ui-ux-mcp-server/dist/index.js"]
    }
  }
}

Notes on environment variables and usage

• The server can leverage a local .env file for configuration. Create it with presets from .env.example and set keys such as STORYBOOK_URL as needed for your workflow.

• The MCP client uses the configured command and arguments to launch the local server process. In this example, the command is node and the argument points to the compiled entry point in dist/index.js.

Troubleshooting and tips

• If the server fails to start, verify that the dist/index.js path exists after the build step. Re-run the build if necessary.

• Ensure your environment variables in .env (and any client-side overrides) are correctly set, especially STORYBOOK_URL if you rely on Storybook integration.

• Confirm the MCP client is pointing to the correct local command and path. If you move the project, update the args in your MCP client configuration accordingly.

Architecture

This server bundles six tool domains under one MCP runtime: Storybook automation, Tailwind configuration, animation tooling, Playwright-based UI testing, component management, and workflow automation. Each domain exposes a set of functions that you can invoke from your MCP client to drive UI/UX development end-to-end.

Available tools

storybook_get_stories

Fetches the list of all Storybook stories available in the connected Storybook instance.

storybook_test_component

Runs visual and accessibility tests on a specified Storybook component.

tailwind_generate_config

Generates Tailwind CSS configuration from design tokens to align styling with design system tokens.

tailwind_optimize_classes

Optimizes and deduplicates Tailwind classes to reduce output size and improve consistency.

animation_create_timeline

Creates an animation timeline using Framer Motion or GSAP with defined targets and properties.

animation_preview

Generates a live preview of an animation sequence.

playwright_test_ui

Executes cross-browser Playwright UI tests to validate interactions and UI flow.

playwright_capture_screenshots

Captures screenshots across multiple browsers and viewports for visual regression testing.

component_create

Generates a new UI component following best practices for React, Vue, or Svelte.

component_analyze

Analyzes a component for performance and accessibility metrics.

workflow_optimize_ux

Runs a comprehensive UX optimization analysis across a site or app.

workflow_build_design_system

Generates a complete design system from Storybook or code, including tokens and components.