Cold MCP SuperDesign

🧠 MCP Server for SuperDesign Integration - Generate UI designs, components, and wireframes directly from Cursor, Windsurf, or Claude Code.

🚀 Features

• 🎨 Create UI Designs: Generate HTML/CSS designs with natural language prompts
• 🔄 Design Revisions: Create rev1, rev2, etc. iterations of your designs
• 📁 Organized Storage: Saves designs to .superdesign/design_iterations/
• 🌐 Preview Integration: Works with SuperDesign canvas view (Cmd+Shift+P)
• 🛠️ IDE Integration: Perfect for Cursor, Windsurf, and Claude Code

📦 Installation

Via npm (Recommended)

npm install -g cold-mcp-super-design

Via npx (No installation required)

npx cold-mcp-super-design

⚙️ Configuration

For Claude Code

Add to your ~/.claude-code/mcp-settings.json:

{
  "mcpServers": {
    "cold-mcp-super-design": {
      "command": "npx",
      "args": ["cold-mcp-super-design"]
    }
  }
}

For Cursor/Windsurf

Add to your MCP configuration:

{
  "mcpServers": {
    "cold-mcp-super-design": {
      "command": "npx",
      "args": ["cold-mcp-super-design"]
    }
  }
}

🎯 Usage

1. Generate SuperDesign Prompts

Use the generate_superdesign_prompt tool to create prompts for your AI assistant:

- designType: "login", "calculator", "dashboard", etc.
- colorScheme: "gold, black, and white"
- style: "modern", "minimal", "elegant"
- additionalRequirements: Any specific needs

2. Create Designs

Use create_design tool with:
- name: Design name (e.g., "login-form")
- description: What the design does
- prompt: Original design requirements
- html: Generated HTML code
- css: Generated CSS styles

3. Create Revisions

Use create_design_revision tool to iterate:
- originalName: Name of the original design
- revisionDescription: What changed
- prompt: Updated requirements
- html: Updated HTML
- css: Updated CSS

4. Preview in SuperDesign

1. Press Cmd+Shift+P (or Ctrl+Shift+P)
2. Type "Superdesign: Open canvas view"
3. Open the generated HTML file from .superdesign/design_iterations/

🎨 Example Workflow

1. Generate a prompt:

   generate_superdesign_prompt({
     "designType": "login",
     "colorScheme": "gold, black, and white",
     "style": "elegant"
   })

2. Copy the prompt to your AI assistant (Cursor/Windsurf/Claude Code)

3. Let AI generate HTML/CSS, then save with:

   create_design({
     "name": "elegant-login",
     "description": "Elegant login form with gold accents",
     "prompt": "Create an elegant login form...",
     "html": "<div class='login-form'>...</div>",
     "css": ".login-form { ... }"
   })

4. Preview with Cmd+Shift+P → "Superdesign: Open canvas view"

5. Create revisions as needed:

   create_design_revision({
     "originalName": "elegant-login",
     "revisionDescription": "Added forgot password link",
     "prompt": "Update the login form to include...",
     "html": "...",
     "css": "..."
   })

🛠️ Available Tools

| Tool | Description | |------|-------------| | create_design | Create a new UI design | | create_design_revision | Create a revision (rev1, rev2, etc.) | | list_designs | List all created designs | | get_design | Get details of a specific design | | generate_superdesign_prompt | Generate prompts for AI assistants |

📁 File Structure

.superdesign/
└── design_iterations/
    ├── login-form.json          # Design metadata
    ├── login-form.html          # Preview file
    ├── login-form-rev1.json     # First revision
    ├── login-form-rev1.html     # First revision preview
    └── ...

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🔗 Links

• 🌐 SuperDesign Website
• 📦 SuperDesign GitHub
• 💬 SuperDesign Discord

🙏 Acknowledgments

• SuperDesign Team for the amazing design agent
• Model Context Protocol for the MCP framework
• The open-source community for inspiration and support

Made with ❤️ for the SuperDesign community