psd-mcp-server 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +145 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2098 -0
- package/package.json +54 -0
package/README.md
ADDED
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
# psd-mcp-server
|
|
2
|
+
|
|
3
|
+
MCP Server for parsing PSD files and extracting layer information for LLM coding assistance.
|
|
4
|
+
|
|
5
|
+
Convert your Photoshop designs to code with AI.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
# Add to Claude Code (recommended)
|
|
11
|
+
claude mcp add psd-parser -- npx -y psd-mcp-server
|
|
12
|
+
|
|
13
|
+
# Or with bunx
|
|
14
|
+
claude mcp add psd-parser -- bunx psd-mcp-server
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## MCP Configuration
|
|
18
|
+
|
|
19
|
+
### Claude Desktop
|
|
20
|
+
|
|
21
|
+
`~/Library/Application Support/Claude/claude_desktop_config.json`:
|
|
22
|
+
|
|
23
|
+
```json
|
|
24
|
+
{
|
|
25
|
+
"mcpServers": {
|
|
26
|
+
"psd-parser": {
|
|
27
|
+
"command": "npx",
|
|
28
|
+
"args": ["-y", "psd-mcp-server"]
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### Cursor
|
|
35
|
+
|
|
36
|
+
`.cursor/mcp.json`:
|
|
37
|
+
|
|
38
|
+
```json
|
|
39
|
+
{
|
|
40
|
+
"mcpServers": {
|
|
41
|
+
"psd-parser": {
|
|
42
|
+
"command": "npx",
|
|
43
|
+
"args": ["-y", "psd-mcp-server"]
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## Features
|
|
50
|
+
|
|
51
|
+
### Layer Analysis
|
|
52
|
+
|
|
53
|
+
| Tool | Description |
|
|
54
|
+
|------|-------------|
|
|
55
|
+
| `parse_psd` | Parse entire PSD structure with all layer info |
|
|
56
|
+
| `list_layers` | List layers as tree structure (with depth limit) |
|
|
57
|
+
| `get_layer_by_name` | Find layer by name with detailed info |
|
|
58
|
+
| `get_layer_children` | Get children of a group layer |
|
|
59
|
+
| `get_text_layers` | Extract text layers with font info |
|
|
60
|
+
|
|
61
|
+
### Asset Export
|
|
62
|
+
|
|
63
|
+
| Tool | Description |
|
|
64
|
+
|------|-------------|
|
|
65
|
+
| `export_images` | Export image layers as PNG/JPG (@2x default) |
|
|
66
|
+
| `export_layer_image` | Export single layer by name (with layerIndex for duplicates) |
|
|
67
|
+
| `list_vector_layers` | List all vector/shape layers |
|
|
68
|
+
| `export_vector_as_svg` | Export single vector layer as SVG |
|
|
69
|
+
| `export_all_vectors_as_svg` | Export all vectors as SVG files |
|
|
70
|
+
|
|
71
|
+
### Design Tokens
|
|
72
|
+
|
|
73
|
+
| Tool | Description |
|
|
74
|
+
|------|-------------|
|
|
75
|
+
| `extract_colors` | Extract all colors (fills, strokes, shadows, gradients) |
|
|
76
|
+
| `list_fonts` | List fonts with sizes, styles, and CSS template |
|
|
77
|
+
|
|
78
|
+
### Smart Objects
|
|
79
|
+
|
|
80
|
+
| Tool | Description |
|
|
81
|
+
|------|-------------|
|
|
82
|
+
| `list_smart_objects` | List Smart Objects with type and linked file info |
|
|
83
|
+
| `get_smart_object_content` | Read embedded PSD inside Smart Object |
|
|
84
|
+
|
|
85
|
+
## Usage Examples
|
|
86
|
+
|
|
87
|
+
### Basic Analysis
|
|
88
|
+
|
|
89
|
+
```
|
|
90
|
+
Analyze ~/Desktop/design.psd and list all text layers
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### Export Assets
|
|
94
|
+
|
|
95
|
+
```
|
|
96
|
+
Export all images from the "icons" group in ~/Desktop/ui.psd to ./assets/
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
### Extract Design Tokens
|
|
100
|
+
|
|
101
|
+
```
|
|
102
|
+
Extract colors from ~/Desktop/design.psd and output as CSS variables
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
## Output Examples
|
|
106
|
+
|
|
107
|
+
### list_fonts (css format)
|
|
108
|
+
|
|
109
|
+
```css
|
|
110
|
+
@font-face {
|
|
111
|
+
font-family: 'Inter';
|
|
112
|
+
src: url('./fonts/Inter.woff2') format('woff2');
|
|
113
|
+
font-weight: normal;
|
|
114
|
+
font-style: normal;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
:root {
|
|
118
|
+
--font-size-1: 14px;
|
|
119
|
+
--font-size-2: 18px;
|
|
120
|
+
--font-size-3: 24px;
|
|
121
|
+
--font-size-4: 64px;
|
|
122
|
+
}
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
### extract_colors (css format)
|
|
126
|
+
|
|
127
|
+
```css
|
|
128
|
+
:root {
|
|
129
|
+
--color-1: #1A1A1A;
|
|
130
|
+
--color-2: #666666;
|
|
131
|
+
--color-3: #007AFF;
|
|
132
|
+
|
|
133
|
+
--gradient-1: linear-gradient(90deg, #FF6B6B, #4ECDC4);
|
|
134
|
+
}
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
## Limitations
|
|
138
|
+
|
|
139
|
+
- Layer effects (drop shadow, bevel) are extracted as colors but not fully styled
|
|
140
|
+
- Complex blend modes not supported
|
|
141
|
+
- Linked Smart Objects require the linked file to be present
|
|
142
|
+
|
|
143
|
+
## License
|
|
144
|
+
|
|
145
|
+
MIT
|
package/dist/index.d.ts
ADDED