Skip to main content
Glama
michaeltrilford

Muiscan MCP Server

by michaeltrilford
OverviewSchemaSourceRelated ServersDiscussionsAdmin
JavaScript
Local

Muiscan MCP Server

Translate Figma files to MUI Design System components via the Model Context Protocol (MCP).

What is Muiscan?

Muiscan converts Figma designs into production-ready MUI (Michael UI) web components via the Model Context Protocol.

Related MCP server: MCP Figma to Code

Getting Started with MUI Design System

Before using Muiscan, set up your MUI project:

Create Mui App

Get started quickly with the official MUI starter template:

Create Mui App

A lightweight starter template for building accessible, fast-loading interfaces using Mui Web Components.

# Clone the starter template
git clone https://github.com/michaeltrilford/create-mui-app.git
cd create-mui-app
npm install
npm start

Once you have your MUI project set up, you can use Muiscan to convert Figma designs directly into MUI components.

Installation

  1. Clone or download this repository

    git clone https://github.com/yourusername/muiscan-mcp.git
cd muiscan-mcp

  2. Install dependencies

    npm install

  3. Configure Claude Desktop Add the Muiscan server to your Claude Desktop configuration file:

    macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
    Windows: %APPDATA%\Claude\claude_desktop_config.json

    Add this configuration (update the path to match your installation):

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

  4. Restart Claude Desktop After saving the configuration, restart Claude Desktop for the changes to take effect.

Usage

Once installed, Muiscan provides:

Tools

  • translate_muiscan: Transform muiscan JSON to web components

Prompts

  • mui-component-guide: Guide for converting UI to MUI web components

In Claude Desktop

  1. Open Claude Desktop

  2. Go to Settings → Tools and MCP

  3. Verify that "Muiscan" appears in your MCP servers list

  4. Export from Figma:

    • Open your design in Figma

    • Select the frame/component you want to convert

    • Run the Muiscan Figma Plugin to copy the layout

  5. Convert in Cursor or play.muibook.com:

    • Paste the scanned layout into your prompt

    • Ask the model/prompt to convert it to MUI web components

    • The MCP will use the component guide to generate the code

Complete Workflow

Figma Design
    ↓
Muiscan Figma Plugin (Export)
    ↓
MUISON JSON (Copy to clipboard)
    ↓
Paste into Cursor or play.muibook.com
    ↓
Muiscan MCP (Transform)
    ↓
MUI Web Components

Supported Components

Muiscan supports a comprehensive set of MUI components including:

  • Inputs: field, checkbox, input, select, switch, file-upload, progress

  • Content: accordion, heading, body, code, dialog, drawer, quote, slat, smart-card, table, image, list

  • Layout: card, container, responsive, rule, v-stack, h-stack, grid

  • Feedback: alert, badge, message, loader

  • Actions: button, button-group, chip, dropdown, link

  • Navigation: carousel-controller, stepper, tab-controller, tab-bar

Project Structure

muiscan-mcp/
├── server.js           # Main MCP server
├── mui-prompts.js      # Component guide and examples
├── transform.js        # JSON transformation logic
├── mcp.json            # Server configuration
├── package.json        # Node.js dependencies
└── README.md           # This file

Development

To test the server locally:

npm start

Troubleshooting

Server not appearing in Claude Desktop

  1. Check that the path in claude_desktop_config.json is correct

  2. Verify Node.js is installed: node --version

  3. Restart Claude Desktop completely

  4. Check Claude Desktop logs for errors

Changes not taking effect

  1. Save all configuration files

  2. Fully quit and restart Claude Desktop (not just close the window)

  3. Clear any cached MCP connections

License

MIT

Contributing

Contributions welcome! Please open an issue or submit a pull request.

Available Tools

1 tool
translate_muiscanC

Transform muiscan JSON to web components

ParametersJSON Schema
NameRequiredDescriptionDefault
jsonYesThe muiscan JSON to transform

TDQS

C2.9/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries full burden. It states 'Transform' but doesn't disclose behavioral traits like whether it's read-only, destructive, requires authentication, or has rate limits. This leaves significant gaps in understanding the tool's behavior.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence with zero waste, clearly front-loading the purpose. It's appropriately sized for a simple tool, making it easy to parse without unnecessary details.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given no annotations, no output schema, and a transformation tool, the description is incomplete. It lacks details on what the transformation entails, the format of web components produced, error handling, or any behavioral context, making it inadequate for full understanding.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the schema already documents the 'json' parameter fully. The description adds no additional meaning beyond implying the input is muiscan JSON, which aligns with the schema. Baseline 3 is appropriate as the schema handles parameter documentation.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the action ('Transform') and the resource ('muiscan JSON to web components'), making the purpose understandable. However, it doesn't differentiate from siblings (none exist) or specify what 'muiscan JSON' is, which slightly limits specificity.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool, such as prerequisites, alternatives, or context. With no siblings, it's the only option, but it lacks any usage instructions or exclusions, leaving the agent without operational context.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 1 tool update
    • First observedtranslate_muiscan
Deploy Server
One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

TDQS

B3/5.0

Scored across 1 tool

Disambiguation5/5

With only one tool, there is no possibility of ambiguity or overlap between tools. The single tool has a distinct and clear purpose, making it impossible for an agent to misselect between multiple options.

Naming Consistency5/5

Since there is only one tool, naming consistency is inherently perfect. The tool name 'translate_muiscan' follows a clear verb_noun pattern, and there are no other tools to cause inconsistency or deviation.

Tool Count2/5

A single tool is too few for most server purposes, as it severely limits functionality and scope. While it might be appropriate for a highly specialized task, it feels thin and incomplete for general use, indicating a potential mismatch with typical MCP server expectations.

Completeness1/5

The tool surface is severely incomplete, as it only offers one transformation function without any related operations. There are obvious gaps, such as no ability to create, update, delete, or retrieve muiscan data, making it impossible for agents to perform a full workflow or lifecycle in this domain.

Maintenance

ActivityInactive
ResponsivenessNo issues

Resources

Related MCP Connectors

Related MCP Servers

  • Figma Context MCP

    cola-sk
    A
    license
    A
    quality
    D
    maintenance
    Converts Figma designs into structured code context with token-aware styling, enabling AI agents to generate production-level frontend code.
    1
    7 npm
    MIT

  • OneWright

    heyxiaoze
    A
    license
    Not graded
    quality
    A
    maintenance
    Enables AI agents to read and write Figma designs through a local WebSocket relay, turning Figma selections into framework-aware code and building/editing designs directly on the canvas. Provides 112 MCP tools for bidirectional design-code workflows with support for any MCP client.
    MIT