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

$3

``bash
npm install -g cold-mcp-super-design
`

$3

`bash
npx cold-mcp-super-design
`

⚙️ Configuration

$3

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

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

$3

Add to your MCP configuration:

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

🎯 Usage

$3

`
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
`

$3

`
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

`
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
`

$3

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": "

",
"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