psd-mcp-server

MCP Server for parsing PSD files and extracting layer information for LLM coding assistance.

Convert your Photoshop designs to code with AI.

Installation

# Add to Claude Code (recommended)
claude mcp add psd-parser -- npx -y psd-mcp-server

# Or with bunx
claude mcp add psd-parser -- bunx psd-mcp-server

MCP Configuration

Claude Desktop

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

{
  "mcpServers": {
    "psd-parser": {
      "command": "npx",
      "args": ["-y", "psd-mcp-server"]
    }
  }
}

Cursor

.cursor/mcp.json:

{
  "mcpServers": {
    "psd-parser": {
      "command": "npx",
      "args": ["-y", "psd-mcp-server"]
    }
  }
}

Features

Layer Analysis

| Tool | Description | |------|-------------| | parse_psd | Parse entire PSD structure with all layer info | | list_layers | List layers as tree structure (with depth limit) | | get_layer_by_name | Find layer by name with detailed info | | get_layer_children | Get children of a group layer | | get_text_layers | Extract text layers with font info |

Asset Export

| Tool | Description | |------|-------------| | export_images | Export image layers as PNG/JPG (@2x default) | | export_layer_image | Export single layer by name (with layerIndex for duplicates) | | list_vector_layers | List all vector/shape layers | | export_vector_as_svg | Export single vector layer as SVG | | export_all_vectors_as_svg | Export all vectors as SVG files |

Design Tokens

| Tool | Description | |------|-------------| | extract_colors | Extract all colors (fills, strokes, shadows, gradients) | | list_fonts | List fonts with sizes, styles, and CSS template |

Smart Objects

| Tool | Description | |------|-------------| | list_smart_objects | List Smart Objects with type and linked file info | | get_smart_object_content | Read embedded PSD inside Smart Object |

Usage Examples

Basic Analysis

Analyze ~/Desktop/design.psd and list all text layers

Export Assets

Export all images from the "icons" group in ~/Desktop/ui.psd to ./assets/

Extract Design Tokens

Extract colors from ~/Desktop/design.psd and output as CSS variables

Output Examples

list_fonts (css format)

@font-face {
  font-family: 'Inter';
  src: url('./fonts/Inter.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

:root {
  --font-size-1: 14px;
  --font-size-2: 18px;
  --font-size-3: 24px;
  --font-size-4: 64px;
}

extract_colors (css format)

:root {
  --color-1: #1A1A1A;
  --color-2: #666666;
  --color-3: #007AFF;

  --gradient-1: linear-gradient(90deg, #FF6B6B, #4ECDC4);
}

Limitations

• Layer effects (drop shadow, bevel) are extracted as colors but not fully styled
• Complex blend modes not supported
• Linked Smart Objects require the linked file to be present

License

MIT