Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@psd-mcp-server Parse ~/Desktop/design.psd and list all text layers"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
MCP Server for parsing PSD files and extracting layer information for LLM coding assistance.
Convert your Photoshop designs to code with AI.
# 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-serverRelated MCP server: AI-Canvas MCP Server
~/Library/Application Support/Claude/claude_desktop_config.json:
{
"mcpServers": {
"psd-parser": {
"command": "npx",
"args": ["-y", "psd-mcp-server"]
}
}
}.cursor/mcp.json:
{
"mcpServers": {
"psd-parser": {
"command": "npx",
"args": ["-y", "psd-mcp-server"]
}
}
}Tool | Description |
| Parse entire PSD structure with all layer info |
| List layers as tree structure (with depth limit) |
| Find layer by name with detailed info |
| Get children of a group layer |
| Extract text layers with font info |
Tool | Description |
| Export image layers as PNG/JPG (@2x default) |
| Export single layer by name (with layerIndex for duplicates) |
| List all vector/shape layers |
| Export single vector layer as SVG |
| Export all vectors as SVG files |
Tool | Description |
| Extract all colors (fills, strokes, shadows, gradients) |
| List fonts with sizes, styles, and CSS template |
Tool | Description |
| List Smart Objects with type and linked file info |
| Read embedded PSD inside Smart Object |
Analyze ~/Desktop/design.psd and list all text layersExport all images from the "icons" group in ~/Desktop/ui.psd to ./assets/Extract colors from ~/Desktop/design.psd and output as CSS variables@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;
}:root {
--color-1: #1A1A1A;
--color-2: #666666;
--color-3: #007AFF;
--gradient-1: linear-gradient(90deg, #FF6B6B, #4ECDC4);
}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
MIT
This server cannot be deployed
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
Serves your design system and coding standards to coding agents, so they stop guessing.
OCR, transcription, file extraction, and image generation for AI agents via MCP.
Un-flatten any flat AI design into editable layers, reproduce it bit-perfect, from your agent.
