Superdesign MCP Server

How to use

Set up and use the Superdesign MCP Server to interact with Claude Code through native MCP tools. You will configure Claude Code to connect to a local MCP server, then invoke the available tools to generate designs, iterate on existing designs, extract design systems, and list or gallery your creations.

How to install

Follow these concrete steps to install and run the MCP server locally.

# 1. Install dependencies
npm install

# 2. Build the server
npm run build

Configuration and usage notes

Configure Claude Code to connect to the MCP server by adding a local MCP entry. The example shows using Node to run the built server from a local path. You can adjust the path to where you compiled the server on your machine.

{
  "mcpServers": {
    "superdesign": {
      "command": "node",
      "args": ["/path/to/superdesign/dist/index.js"],
      "env": {}
    }
  }
}

Using the available tools

Once connected, you can use the following tools from Claude Code to manage your design workflow.

• superdesign_generate — Returns specifications for Claude Code to generate designs (UI designs, wireframes, components, logos, icons)
• superdesign_iterate — Returns iteration instructions to improve existing designs
• superdesign_extract_system — Returns instructions to extract design systems from design work
• superdesign_list — Lists all created designs in the workspace
• superdesign_gallery — Generates an interactive HTML gallery with previews and browser-based viewing

Starting and stopping the server safely

Run the server using the command specified in the configuration. When you need to stop, terminate the process using your terminal or system supervisor as you would with any Node.js application.

Developer workflow tips

Keep the server running in the background during design sessions. Regularly rebuild if you modify source files, and restart Claude Code if you notice MCP tools are not appearing after changes.

Troubleshooting and tips

If you encounter issues, verify the MCP server is properly registered in Claude Code and that you have restarted Claude Code after adding the MCP entry. Ensure the runtime path and file permissions are correct for the built dist/index.js.

Security and scope notes

This setup runs locally and relies on Claude Code’s built-in LLM integration. It does not require external API keys, reducing exposure to API credentials. Treat the local MCP server as a design automation tool within your development environment.

Known issues & troubleshooting quick fixes

File permissions: if you see permission errors, grant execute rights to the built file: chmod +x dist/index.js.

MCP tools not appearing: fully quit Claude Code and restart from the terminal. Verify the server is registered with claude mcp list and check tool availability with "What tools do you have available?".

Server registration: if issues arise, remove and re-add the server with the CLI commands shown in the setup instructions.

Build requirements: ensure you have Node.js 16 or higher installed (node --version).

Relation to Superdesign

This MCP server provides a native integration for Superdesign within Claude Code, enabling direct tool calls without copying prompts or managing API keys.

superdesign_generate

Returns structured specifications for Claude Code to generate designs such as UI designs, wireframes, components, logos, and icons.

superdesign_iterate

Returns iteration instructions for improving existing designs, including feedback application and maintaining design consistency.

superdesign_extract_system

Returns instructions to extract design systems from visuals, including color palettes, typography, spacing, and a JSON schema for reusable design systems.

superdesign_list

Lists all design iterations and extracted design systems in the workspace.

superdesign_gallery

Generates an interactive HTML gallery of designs with previews and browser-based viewing.