使用说明

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