MCP-Stack-for-UI-UX-Designers

This MCP stack combines three specialized servers to automate UI/UX design workflows: Inspire (design inspiration extraction and analysis), Design (Figma integration and data extraction), and Handoff (converting designs to React components with accessible, responsive output).

Each server runs as its own Node.js process. Start all three servers from the repository root (or from their respective subdirectories) using the path-based entry points indicated in the configuration. Once running, you can interact with each service through its API/CLI as documented in their individual READMEs. The Inspire server helps you download and analyze web pages for UI patterns and components, the Design server connects to Figma to fetch and manage design data, and the Handoff server converts Figma designs into development-ready React code with TypeScript and Tailwind CSS, including accessibility enhancements.

Prerequisites:

• Node.js 18 or higher
• npm (comes with Node.js)
• Access to Figma API (API token)
• Optional: Claude or Cursor IDE access for AI-assisted features

Installation steps:

1. Clone the repository or download the archive containing the three MCP components.
2. Install dependencies for each component:
   • Navigate to mcp-copy-web-ui-main and run: npm install
   • Navigate to figma-mcp-server-main and run: npm install
   • Navigate to mcp-figma-to-react-main and run: npm install
3. Ensure entry points exist (as referenced in the mcp_config):
   • Inspire: mcp-copy-web-ui-main/server.js
   • Design: figma-mcp-server-main/server.js
   • Handoff: mcp-figma-to-react-main/server.js
4. Start the servers (in separate terminals or a supervisor):
   • node mcp-copy-web-ui-main/server.js
   • node figma-mcp-server-main/server.js
   • node mcp-figma-to-react-main/server.js
5. Verify each server starts without errors and note any required environment variables as described in the additional notes.

Environment and configuration tips:

• Each server may require environment variables such as Figma API tokens, AI service credentials (e.g., Claude or Cursor IDs), and any storage or API keys used for inspiration analysis. If using AI features, ensure your tokens and endpoints are correctly set in the environment (e.g., FIGMA_TOKEN, AI_SERVICE_TOKEN).
• If you encounter port conflicts, configure each server to listen on distinct ports via environment variables or the server code.
• The three components are designed to be used together as a workflow: Inspire feeds data and patterns, Design pulls from Figma to sync design data, and Handoff converts designs into production-ready React components.
• Logs and debugging output are typically available in the console where you start each server; consult the respective README in each component for any component-specific flags or options.