Adobe XD MCP Server

A Model Context Protocol (MCP) server that enables Claude to interact with Adobe XD files, extract design information, and generate pixel-perfect React components from your designs.

Features

Core Features

• Document Analysis: Extract comprehensive information from XD files including artboards, components, and assets
• React Component Generation: Convert XD designs to React components with multiple styling options
• Color Extraction: Extract color palettes in various formats (CSS, JSON, Tailwind)
• Multiple Style Systems: Support for styled-components, Tailwind CSS, and CSS modules
• TypeScript Support: Generate type-safe React components

Pixel-Perfect Design Analysis 🎯

• Layout & Spacing Analysis: Automatically detect spacing patterns and generate spacing tokens
• Design Token Generation: Extract complete design systems (colors, spacing, typography) in multiple formats
• UI Pattern Detection: Intelligently identify buttons, cards, and other UI components
• Typography System Extraction: Analyze and organize all text styles into a reusable type system
• Layout System Detection: Detect flexbox/grid patterns and generate implementation CSS
• Element Style Extraction: Get detailed CSS and Tailwind classes for any element
• Artboard Preview Export: View design previews directly in the terminal

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Claude Desktop application

Installation

1. Clone the repository:

git clone https://github.com/yourusername/adobe-xd-mcp.git
cd adobe-xd-mcp

2. Install dependencies:

npm install

3. Build the server:

npm run build

Configuration

Add the server to your Claude Code configuration:

macOS

Edit: ~/Library/Application Support/Claude/claude_desktop_config.json

Windows

Edit: %APPDATA%\Claude\claude_desktop_config.json

Linux/WSL

Edit: ~/.claude.json

Add the following configuration:

{
  "mcpServers": {
    "adobe-xd": {
      "command": "node",
      "args": ["/absolute/path/to/adobe-xd-mcp/dist/index.js"]
    }
  }
}

Note: Replace /absolute/path/to/adobe-xd-mcp with the actual path to your installation directory.

Available Tools

1. get_xd_info

Get comprehensive information about an XD document.

Returns:

• Document name and metadata
• List of artboards with dimensions and element counts
• Components and their structures
• Color palette

2. generate_react_component

Convert XD artboards/components to React code.

Parameters:

• path: Path to XD file (required)
• artboardName: Specific artboard to convert (optional)
• componentName: Specific component to convert (optional)
• outputDir: Output directory (optional)
• styleSystem: "styled-components", "tailwind", or "css-modules" (default: tailwind)
• typescript: Generate TypeScript (default: true)

3. extract_colors

Extract color palette in various formats.

Parameters:

• path: Path to XD file (required)
• format: "css", "json", or "tailwind" (default: css)
• outputFile: Save to file (optional)

4. get_artboard_details

Get detailed information about a specific artboard including all element positions, sizes, and styles.

Parameters:

• path: Path to XD file (required)
• artboardName: Name of artboard (required)

5. get_element_styles

Get detailed CSS properties and Tailwind classes for elements.

Parameters:

• path: Path to XD file (required)
• artboardName: Name of artboard (required)
• elementName: Specific element name (optional)

Returns:

• CSS properties for each element
• Suggested Tailwind classes
• Positioning and sizing information

6. analyze_layout_spacing ⭐

Analyze spacing between elements for pixel-perfect implementation.

Parameters:

• path: Path to XD file (required)
• artboardName: Name of artboard (required)

Returns:

• Spacing tokens with usage frequency
• Suggested semantic names (xs, sm, md, lg, xl)
• Layout direction (horizontal/vertical/mixed)
• Gap values
• Suggested CSS (flexbox/grid)

7. generate_design_tokens ⭐

Generate complete design system tokens.

Parameters:

• path: Path to XD file (required)
• format: "json", "css", "tailwind", or "typescript" (default: json)
• outputFile: Save to file (optional)

Returns:

• Spacing tokens
• Color tokens with usage counts
• Typography system
• Border radius values
• Ready-to-use code in your chosen format

8. detect_ui_patterns ⭐

Automatically identify common UI components.

Parameters:

• path: Path to XD file (required)
• artboardName: Name of artboard (required)

Returns:

• Detected patterns (button, card, input, etc.)
• Confidence scores
• Bounding boxes
• Suggested component names

9. extract_typography_system ⭐

Extract and organize all typography styles.

Parameters:

• path: Path to XD file (required)

Returns:

• All unique font combinations
• Usage frequency for each style
• Suggested semantic names (display, h1-h5, body, etc.)
• Font properties (family, size, weight, line-height, letter-spacing)

10. detect_layout_system ⭐

Detect layout patterns and generate implementation CSS.

Parameters:

• path: Path to XD file (required)
• artboardName: Name of artboard (required)

Returns:

• Layout direction
• Detected gaps
• Alignment patterns
• Suggested CSS (display, flex-direction, gap, justify-content, etc.)

11. export_artboard_preview

Export artboard as base64-encoded image for viewing.

Parameters:

• path: Path to XD file (required)
• artboardName: Name of artboard (required)

Usage Examples

Basic Document Analysis

"Get information about the XD file at /path/to/design.xd"

Generate React Component

"Generate a React component from the LoginScreen artboard in /path/to/design.xd using TypeScript and Tailwind CSS"

Extract Design Tokens

"Generate design tokens from /path/to/design.xd in Tailwind format and save to tokens.js"

Analyze Spacing for Pixel-Perfect Implementation

"Analyze the spacing in the HomePage artboard from /path/to/design.xd"

Returns spacing tokens like:

{
  "spacingTokens": [
    { "value": 8, "usage": 15, "suggestedName": "sm" },
    { "value": 16, "usage": 12, "suggestedName": "base" },
    { "value": 24, "usage": 8, "suggestedName": "lg" }
  ],
  "layoutAnalysis": {
    "direction": "vertical",
    "gaps": [16, 24, 16],
    "suggestedCSS": {
      "display": "flex",
      "flexDirection": "column",
      "gap": "16px"
    }
  }
}

Detect UI Components

"Detect UI patterns in the Dashboard artboard from /path/to/design.xd"

Returns identified components:

{
  "patterns": [
    {
      "type": "button",
      "confidence": 0.8,
      "suggestedComponent": "Button",
      "bounds": { "x": 100, "y": 200, "width": 120, "height": 40 }
    },
    {
      "type": "card",
      "confidence": 0.6,
      "suggestedComponent": "Card",
      "bounds": { "x": 0, "y": 0, "width": 300, "height": 400 }
    }
  ]
}

Extract Typography System

"Extract the typography system from /path/to/design.xd"

Returns:

{
  "styles": [
    {
      "fontSize": 48,
      "fontFamily": "Inter",
      "fontWeight": 700,
      "lineHeight": 1.2,
      "usage": 5,
      "suggestedName": "display"
    },
    {
      "fontSize": 16,
      "fontFamily": "Inter",
      "fontWeight": 400,
      "lineHeight": 1.5,
      "usage": 45,
      "suggestedName": "body"
    }
  ]
}

Get Element Styles

"Get the styles for the 'Primary Button' element in the Components artboard"

Returns CSS and Tailwind classes:

{
  "elements": [
    {
      "name": "Primary Button",
      "type": "rectangle",
      "css": {
        "width": "120px",
        "height": "40px",
        "backgroundColor": "#5ead0c",
        "borderRadius": "8px"
      },
      "tailwindClasses": ["bg-[#5ead0c]", "rounded-lg"]
    }
  ]
}

Pixel-Perfect Implementation Workflow

1. Analyze the Design

   "Analyze layout spacing in my HomePage artboard"
   

2. Generate Design Tokens

   "Generate design tokens in TypeScript format"
   

3. Detect UI Patterns

   "Detect UI patterns in the HomePage artboard"
   

4. Extract Typography

   "Extract typography system from the design"
   

5. Get Specific Element Styles

   "Get styles for the header navigation"
   

6. Generate Component Code

   "Generate React component for the HomePage using the detected patterns"
   

Development

Project Structure

adobe-xd-mcp/
├── src/
│   ├── index.ts                  # MCP server setup
│   ├── tools/
│   │   └── xd-tools.ts          # Main XD processing logic
│   ├── parsers/
│   │   └── xd-parser.ts         # XD file parsing
│   ├── generators/
│   │   └── react-generator.ts   # React code generation
│   └── analyzers/
│       └── design-system-analyzer.ts  # Design system analysis
├── dist/                         # Compiled output
├── package.json
└── tsconfig.json

Running in Development

npm run dev

Building

npm run build

Troubleshooting

Server not appearing in Claude

1. Ensure the path in claude_desktop_config.json is absolute
2. Restart Claude Desktop after configuration changes
3. Check that the build completed successfully
4. Verify Node.js version is 16 or higher

XD file parsing errors

1. Ensure the XD file path is correct and accessible
2. Verify the XD file is not corrupted
3. Check file permissions
4. Try re-saving the XD file
5. Note: Supports both legacy (single artwork.agc) and modern (per-artboard graphicContent.agc) XD file formats

Component generation issues

1. Verify the artboard name exists in the XD file (case-insensitive)
2. Ensure the output directory is writable
3. Check for naming conflicts with existing files
4. Verify sufficient disk space

Design token extraction returns empty results

1. Ensure the XD file contains actual design elements
2. Check that artboards have named elements
3. Verify text elements have font properties set

Tips for Best Results

1. Name Your Elements: Named elements in XD produce better, more semantic code
2. Use Consistent Spacing: Regular spacing values produce cleaner spacing tokens
3. Organize with Components: XD components map well to React components
4. Group Related Elements: Grouped elements are easier to identify as UI patterns
5. Use Text Styles: Consistent text styling produces better typography systems

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License - see LICENSE file for details

Support

For issues and feature requests, please use the GitHub issue tracker.

Changelog

v2.0.0 - Pixel-Perfect Design Analysis

• Added layout and spacing analysis
• Added design token generation (CSS, Tailwind, TypeScript)
• Added UI pattern detection
• Added typography system extraction
• Added layout system detection
• Added element style extraction with Tailwind classes
• Added artboard preview export
• Enhanced XD parser to support both legacy and modern XD file formats

v1.0.0 - Initial Release

• XD file parsing (legacy format)
• React component generation
• Color extraction
• Basic design analysis