Muiscan

Translate Figma files to MUI Design System via the Muiscan MCP Server

javascript

2

GitHub Stars

javascript

Language

6 months ago

First Indexed

2 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "michaeltrilford-muiscan-mcp": {
      "command": "node",
      "args": [
        "/Users/AddYourPath/muiscan-mcp/server.js"
      ]
    }
  }
}

Muiscan MCP Server translates Figma layouts into production-ready MUI web components using the Model Context Protocol. It enables you to automate the conversion process from design frames to reusable UI building blocks within your MUI project, speeding up design-to-code workflows.

How to use

You interact with the Muiscan MCP server through an MCP client (such as Claude Desktop). Start the server locally, ensure your client recognizes it, then provide your design input to the MCP flow. The server uses the component guide to transform scanned layouts into MUI web components that you can incorporate into your project.

How to install

Prerequisites: you need Node.js and npm installed on your system.

Clone the MCP server repository and install dependencies.

# Clone the MCP server repository
git clone https://github.com/yourusername/muiscan-mcp.git
cd muiscan-mcp

# Install dependencies
npm install

# Test run
npm start

Configure Claude Desktop for MCP access

{
  "mcpServers": {
    "muiscan": {
      "command": "node",
      "args": ["/Users/AddYourPath/muiscan-mcp/server.js"]
    }
  }
}

Run and use the MCP in practice

After configuring Claude Desktop, restart the application to apply changes. Open Claude Desktop, ensure Muiscan appears under Tools and MCP, then export your Figma frame or component using the Muiscan Figma Plugin. Paste the resulting layout into your MCP prompt (Cursor or play.muibook.com) and request conversion to MUI web components. The MCP uses the component guide to output production-ready code.

Complete workflow

Figma Design → Muiscan Figma Plugin → MUISON JSON → Paste into Cursor or play.muibook.com → Muiscan MCP transforms → MUI Web Components.

Troubleshooting

If the MCP server isn’t visible in Claude Desktop, verify the path in the configuration, ensure Node.js is installed, restart Claude Desktop completely, and check logs for errors.

Notes

This server configuration is intended for local development and testing. Adjust the file path in the Claude Desktop config to match your actual setup.