Skip to main content
Glama
drapon

psd-mcp-server

by drapon
OverviewSchemaSourceRelated ServersDiscussionsAdmin
JavaScript
Local

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

Related MCP server: Photoshop 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

This server cannot be deployed

Shareable, User-Owned Context BackendPeople, applications, and agents read, write, and coordinate together in one context lake. Reach it over MCP, a CLI, a Python SDK, or REST.fulcradynamics.comAd

Maintenance

ActivityInactive
ResponsivenessNo issues

Resources

Related MCP Connectors

Related MCP Servers

  • Adobe XD MCP Server

    dekdee
    A
    license
    Not graded
    quality
    F
    maintenance
    Enables Claude to interact with Adobe XD files, extract design information, and generate React components from designs.
    13 npm
    21
    MIT

  • DesignPort

    MarlonJD
    A
    license
    B
    quality
    B
    maintenance
    Enables coding agents to read, render, and normalize design documents from Figma and Adobe XD, providing visual context plus structured design data and generating starter code for web, React, Vue, Flutter, SwiftUI, and Jetpack Compose.
    13
    1
    GPL 3.0