Superdesign MCP Claude Code

🚀 Superdesign MCP Server

This MCP (Model Context Protocol) server integrates Superdesign, an open - source AI design agent by @jasonzhou1993 and @jackjack_eth, into Claude Code as native tools. It acts as a "design orchestrator" to provide structured specifications for the IDE's LLM, enabling Superdesign's advanced design capabilities without the need for Anthropic API keys.

🚀 Quick Start

The Superdesign MCP Server offers a seamless way to integrate Superdesign's design capabilities into Claude Code. With no API keys required, it runs locally on your machine and integrates well with Claude Code.

✨ Features

• No API Keys Required: Directly utilizes Claude Code's built - in LLM connection.
• Local Execution: Runs entirely as an MCP server on your machine.
• IDE Integration: Seamlessly integrates with Claude Code (and potentially Cursor, Windsurf, or other MCP - compatible IDEs, though untested).
• Open - Source Based: Built on Superdesign.dev, an open - source AI design system.

📦 Installation

Step 1: Install dependencies

npm install

Step 2: Build the server

npm run build

📚 Documentation

Claude Code Integration

Step 1: Add the MCP server to your Claude Code configuration

# Create or edit your Claude Code MCP settings file
# On macOS:
mkdir -p ~/.claude-code
cp claude-mcp-config.json ~/.claude-code/mcp-settings.json

# Or add manually to your existing mcp-settings.json:

Example ~/.claude-code/mcp-settings.json:

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

Step 2: Restart Claude Code

Step 3: Available Superdesign orchestrator tools in Claude Code

• superdesign_generate - Returns specifications for Claude to generate designs.
• superdesign_iterate - Returns instructions for Claude to iterate on existing designs.
• superdesign_extract_system - Returns instructions for design system extraction.
• superdesign_list - Lists all created designs in the workspace.

Development

Run in development mode:

npm run dev

Superdesign Tools Available

superdesign_generate

Returns structured specifications for Claude Code to generate designs:

• UI designs: Complete responsive interfaces
• Wireframes: Minimal black and white layouts
• Components: Individual UI components (HTML/React/Vue)
• Logos: SVG logo designs
• Icons: SVG icon designs

Parameters:

• prompt: Description of what to create
• design_type: Type of design (ui, wireframe, component, logo, icon)
• variations: Number of variations to generate (1 - 5, default 3)
• framework: Framework for components (html, react, vue)

Output: Detailed specifications including Superdesign system prompt, file naming patterns, and design guidelines for Claude Code to execute.

superdesign_iterate

Returns iteration instructions for Claude Code to improve existing designs:

• Reads existing design files
• Provides structured feedback application guidelines
• Maintains design consistency through Superdesign principles

Parameters:

• design_file: Path to existing design file
• feedback: Improvement instructions
• variations: Number of variations to create

Output: Iteration specifications including original design content, feedback to apply, and Superdesign guidelines for Claude Code to execute.

superdesign_extract_system

Returns instructions for Claude Code to extract design systems from screenshots:

• Provides analysis framework for visual design patterns
• Guides extraction of color palettes, typography, spacing
• Specifies JSON structure for reusable design systems

Output: Extraction specifications and JSON schema for Claude Code to analyze images and create design system files.

superdesign_list

List all Superdesign creations in workspace:

• Shows design iterations
• Shows extracted design systems
• Displays file organization

superdesign_gallery

Generate an interactive HTML gallery to view all designs:

• Browser - based gallery - opens in your default browser
• Visual previews - see design thumbnails in a responsive grid
• Interactive features - click to view full - screen, copy paths
• Mobile responsive - works on desktop, tablet, and mobile
• Auto - discovery - finds all HTML/SVG files in design_iterations/

Parameters:

• workspace_path: Workspace directory (optional, defaults to current directory)

Output: Gallery HTML file with embedded previews and JavaScript interactions. The gallery opens automatically in your browser, providing a Superdesign - like canvas experience.

How the Orchestrator Works

This MCP server operates as a design orchestrator rather than a direct generator:

1. User Request: "Generate a modern dashboard UI"
2. MCP Server: Returns detailed specifications with:
   • Complete Superdesign system prompt and guidelines
   • Exact file paths and naming conventions
   • Design type - specific instructions
   • Number of variations to create
3. Claude Code: Receives specifications and:
   • Generates the actual HTML/SVG/React code
   • Saves files to specified locations
   • Follows all Superdesign design principles

Usage in Claude Code

Once configured, you can use Superdesign through Claude Code with natural language:

Example Usage:

• "Generate a modern dashboard UI design"
• "Create 3 variations of a login page wireframe"
• "Design a React component for a product card"
• "Make a minimalist logo for a tech startup"
• "Iterate on the dashboard design with better spacing"
• "Show me the gallery of all my designs"

Requirements:

• Claude Code with MCP support
• No API keys needed (uses Claude Code's existing LLM connection)

File Organization: Designs are automatically saved to superdesign/ directory (visible folder):

• design_iterations/ - Generated designs (HTML/SVG files)
• design_system/ - Extracted design systems (JSON files)

Benefits:

• No API key configuration required
• Uses Claude Code's existing LLM capabilities
• Maintains all of Superdesign's sophisticated design methodology
• Proper file organization and naming conventions
• Full design iteration workflow support

Known Issues & Troubleshooting

File Permissions Error

If you encounter permission errors when running the MCP server:

# Add execute permissions to the built file
chmod +x dist/index.js

MCP Tools Not Appearing

If Superdesign tools don't appear in Claude Code after installation:

1. Ensure you've completely quit Claude Code (not just closed the window).
2. Restart Claude Code from your terminal.
3. Verify the server is registered: claude mcp list.
4. Check the tools are available by asking Claude: "What tools do you have available?"

Server Registration Issues

If the server fails to register:

# Remove and re-add the server
claude mcp remove superdesign -s user
claude mcp add --scope user superdesign /path/to/superdesign/dist/index.js

Build Errors

Ensure you have Node.js 16+ installed:

node --version  # Should be v16.0.0 or higher

🤝 Relationship to Superdesign

This MCP server provides a complementary integration for Superdesign by @jasonzhou1993 and @jackjack_eth.

While Superdesign offers an IDE extension that works across multiple editors, this MCP server specifically enhances Claude Code by:

• Eliminating the need for API keys - uses Claude Code's built - in LLM connection
• Providing native tool integration - no manual prompt copying required
• Enabling direct tool calls - seamless workflow without copy/paste

This addresses the community request for Claude Code API provider support (see Superdesign Issue #3).

How it's Different

📄 License

This project follows the same license as the original Superdesign project. Please refer to the Superdesign repository for license details.