# Adobe XD AI Design Assistant (MCP)

An open-source Model Context Protocol (MCP) server for Adobe XD that enables AI-powered design capabilities. This implementation works directly with Windsurf and Cursor's built-in AI capabilities, with no external API keys required.

## Features

- AI-assisted website design
- Logo generation
- UI/UX component creation
- Design system automation
- Style recommendations

## Quick Installation

To use this MCP server with any MCP-compatible client (including Adobe XD), simply add this to your MCP client configuration:

```json
{
  "mcpServers": {
    "Adobe XD Design MCP": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "adobe-xd-mcp", "--stdio"]
    }
  }
}
```

That's it! No API keys or additional setup required. This server leverages your client's built-in AI capabilities (like Windsurf or Cursor AI) to generate design suggestions.

## Alternative Installation Methods

### 1. Global Installation

```bash
npm install -g adobe-xd-mcp
adobe-xd-mcp --stdio
```

### 2. Direct Repository Usage

```bash
git clone https://github.com/yourusername/adobe-xd-mcp.git
cd adobe-xd-mcp
npm install
npm start
```

## Architecture

This project implements a Model Context Protocol (MCP) server that interfaces with Adobe XD through its UXP Plugin API. The server sends design prompts to the client-side AI, which generates designs directly in the environment.

```
+---------------+      +-------------------+      +---------------+
|               |      |                   |      |               |
|  Adobe XD     |<---->|  XD MCP Plugin    |<---->|  MCP Server   |
|  (UXP Host)   |      |  (UXP Plugin)     |      |  (Node.js)    |
|               |      |                   |      |               |
+---------------+      +-------------------+      +---------------+
        |                                                |
        v                                                v
+---------------+                               +----------------+
|               |                               |                |
| Windsurf AI   |                               | Design Prompts |
| Cursor AI     |                               | & Templates    |
|               |                               |                |
+---------------+                               +----------------+
```

## How It Works

Unlike traditional MCP servers that require external AI APIs, this implementation:

1. Receives design requests through the MCP protocol
2. Structures the requests into detailed prompts
3. Sends these prompts back to the client environment (Windsurf/Cursor)
4. Relies on the client's built-in AI capabilities to generate the actual designs
5. No external API keys or services required!

## Available Design Tools

The MCP server provides the following AI-powered design tools:

1. **Generate Website Design** - Create complete website designs based on descriptions, style preferences, and industry requirements
2. **Create Logo** - Generate professional logo designs with customizable styles and color schemes
3. **Design UI Component** - Create individual UI components like buttons, forms, cards, and navigation elements
4. **Suggest Color Palette** - Generate harmonious color palettes based on mood, base colors, and project requirements
5. **Create Design System** - Develop comprehensive design systems including colors, typography, components, and guidelines

Each tool is accessible through the MCP protocol and provides detailed design instructions that the client-side AI can use to generate designs.

## Configuration Options

When running the server via CLI, you can specify these options:

| Option | Description | Default |
|--------|-------------|---------|
| `--port` | Port to run the server on (for HTTP/WebSocket) | 3000 |
| `--stdio` | Use stdio transport for MCP integration | false |
| `--log-level` | Log level (debug, info, warn, error) | info |

Example usage:
```bash
npx adobe-xd-mcp --stdio --log-level=debug
```

## Getting Started

1. Install the Adobe XD MCP Plugin
2. Start the MCP Server using the configuration above
3. Begin designing with AI assistance directly in Adobe XD

## Contributing

Contributions are welcome! This is an open project for everyone to use.

## License

This project is open source and available to everyone.