cold-mcp-super-design/README.md

MCP server for SuperDesign integration with Cursor/Windsurf/Claude Code - Generate UI designs, components, and wireframes

# Cold MCP SuperDesign

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

[![npm version](https://badge.fury.io/js/cold-mcp-super-design.svg)](https://badge.fury.io/js/cold-mcp-super-design)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## 🚀 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)

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

### Via npx (No installation required)

```bash
npx cold-mcp-super-design
```

## ⚙️ Configuration

### For Claude Code

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

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

### For Cursor/Windsurf

Add to your MCP configuration:

```json
{
  "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](LICENSE) file for details.

## 🔗 Links

- 🌐 [SuperDesign Website](https://www.superdesign.dev/)
- 📦 [SuperDesign GitHub](https://github.com/superdesigndev/superdesign)
- 💬 [SuperDesign Discord](https://discord.gg/FYr49d6cQ9)

## 🙏 Acknowledgments

- [SuperDesign Team](https://github.com/superdesigndev) for the amazing design agent
- [Model Context Protocol](https://github.com/modelcontextprotocol) for the MCP framework
- The open-source community for inspiration and support

---

**Made with ❤️ for the SuperDesign community**