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:

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

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

2. Direct Repository Usage

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:

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.