Psd MCP
PSD ãã¡ã€ã«ãããã¶ã€ã³æ å ±ãæœåºãã MCP ãµãŒããŒã§ãã
Ask AI about Psd MCP
Powered by Claude · Grounded in docs
I know everything about Psd MCP. Ask me about installation, configuration, usage, or troubleshooting.
0/500
Reviews
Documentation
psd-mcp
PSD ãã¡ã€ã«ãããã¶ã€ã³æ
å ±ãæœåºãã MCP ãµãŒããŒã§ãã
Claude Code ã Cursor ãªã©ã® AI ã³ãŒãã£ã³ã°ããŒã«ãã PSD ãã¶ã€ã³ãçŽæ¥èªã¿åããã³ãŒãå®è£
ã«æŽ»çšã§ããŸãã
Photoshop ã®ã€ã³ã¹ããŒã«ã¯äžèŠã§ãã PSD ãã¡ã€ã«ãçŽæ¥è§£æããŸãã
ç®æ¬¡
- ã§ããããš
- åäœç°å¢
- ã»ããã¢ãã
- MCP ãµãŒããŒã®èšå®
- åäœç¢ºèª
- ããŒã«äžèЧ
- äœ¿ãæ¹ã¬ã€ã
- PSD ãã¡ã€ã«ã®æºåïŒãã¶ã€ããŒåãïŒ
- ãã©ãã«ã·ã¥ãŒãã£ã³ã°
- æè¡ã¹ã¿ãã¯
ã§ããããš
ãã¶ã€ã㌠éçºè
PSD ãã¡ã€ã« âââââââââââ Claude Code / Cursor
â
ââ ã¬ã€ã€ãŒæ§é ã®ååŸ
ââ ããã¹ãã»ãã©ã³ãæ
å ±ã®æœåº
ââ ã«ã©ãŒã»ã·ã£ããŠã®ãã¶ã€ã³ããŒã¯ã³å
ââ ã¹ã¯ãªãŒã³ã·ã§ããç»åã®ååŸ
ââ ã¬ã€ã€ãŒåäœã® CSS çæ
ââ ã¬ã€ã¢ãŠãè§£æïŒflexæ¹åã»gapæšå®ïŒ
ââ ãã¶ã€ã³ä»æ§æžã®èªåçæ
ââ å®è£
ãšã®ãã¯ã»ã«å·®åæ¯èŒ
ââ ãã®ãŸãŸ React / HTML / CSS ã«å®è£
- PSD ã®ã¬ã€ã€ãŒæ§é ãããªãŒåœ¢åŒã§ç¢ºèª
- ããã¹ãã¬ã€ã€ãŒã®ãã©ã³ãåã»ãµã€ãºã»è²ã»è¡éãäžæ¬æœåº
- ã«ã©ãŒãã¬ããã»ãã©ã³ãäžèЧã»ã·ã£ããŠã CSS Variables / Tailwind / JSON ã§åºå
- ããã¥ã¡ã³ãå šäœãåå¥ã¬ã€ã€ãŒã®ã¹ã¯ãªãŒã³ã·ã§ããã PNG ã§ååŸ
- ã¬ã€ã€ãŒã PNG / JPEG ã§ãã¡ã€ã«ã«æžãåºã
- ã¬ã€ã€ãŒã®ã¹ã¿ã€ã«ã CSS ã³ãŒããšããŠçæ
- ã°ã«ãŒãå ã® ã¬ã€ã¢ãŠãè§£æïŒflexæ¹åãgapãæŽåãã¿ãŒã³æšå®ïŒ
- å®è£ çšã® ãã¶ã€ã³ä»æ§æžãååž°çã«äžæ¬çæ
- PSD ãã¶ã€ã³ãšå®è£ ã¹ã¯ãªãŒã³ã·ã§ããã®ãã¯ã»ã«å·®åæ¯èŒ
- ããã® PSD ã React ã³ã³ããŒãã³ãã«ããŠãã®ãããªæç€ºã§ã³ãŒãçæ
åäœç°å¢
| é ç® | èŠä»¶ |
|---|---|
| Node.js | v18 ä»¥äž ïŒv20 æšå¥šïŒ |
| npm | v9 ä»¥äž |
| OS | macOS / Windows / Linux |
| AI ããŒã« | Claude CodeãCursorãClaude Desktop ã®ãããã |
ã»ããã¢ãã
1. ãªããžããªã®ã¯ããŒã³
git clone https://github.com/KimMaru10/psd-mcp.git
cd psd-mcp
2. äŸåããã±ãŒãžã®ã€ã³ã¹ããŒã«
npm install
macOS ã§
canvasã®ã€ã³ã¹ããŒã«ã«å€±æããå ŽåïŒbrew install pkg-config cairo pango libpng jpeg giflib librsvg npm installUbuntu / Debian ã®å ŽåïŒ
sudo apt-get install -y build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev npm install
3. ãã«ã
npm run build
4. ã€ã³ã¹ããŒã«å ãã¹ã®ç¢ºèª
ãã«ãåŸã以äžã®ãã¹ãã¡ã¢ããŠãããŠãã ãããMCP èšå®ã§äœ¿ããŸãã
# èªåã®ç°å¢ã§ã®çµ¶å¯Ÿãã¹ã確èª
echo "$(pwd)/dist/index.js"
åºåäŸ: /Users/yourname/dev/psd-mcp/dist/index.js
MCP ãµãŒããŒã®èšå®
Claude Code
以äžã®ã³ãã³ãã§èšå®ã远å ããŸãïŒæãç°¡åãªæ¹æ³ïŒ:
claude mcp add psd node /path/to/psd-mcp/dist/index.js
ãŸãã¯ãèšå®ãã¡ã€ã«ãçŽæ¥ç·šéããå Žå:
ã°ããŒãã«èšå® (~/.claude/settings.json) â å
šãããžã§ã¯ãã§äœ¿ãã
{
"mcpServers": {
"psd": {
"command": "node",
"args": ["/path/to/psd-mcp/dist/index.js"]
}
}
}
ãããžã§ã¯ãèšå® (.claude/settings.json) â ç¹å®ãããžã§ã¯ãã®ã¿
{
"mcpServers": {
"psd": {
"command": "node",
"args": ["/path/to/psd-mcp/dist/index.js"]
}
}
}
/path/to/psd-mcpã¯ã»ããã¢ããæé 4ã§ç¢ºèªããå®éã®ãã¹ã«çœ®ãæããŠãã ããã
Cursor
ãããžã§ã¯ãã«ãŒãã« .cursor/mcp.json ãäœæ:
{
"mcpServers": {
"psd": {
"command": "node",
"args": ["/path/to/psd-mcp/dist/index.js"]
}
}
}
èšå®åŸãCursor ãåèµ·åããŠãã ããã
Claude Desktop
Settings > Developer > Edit Config ãéãã以äžã远å :
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json
{
"mcpServers": {
"psd": {
"command": "node",
"args": ["/path/to/psd-mcp/dist/index.js"]
}
}
}
èšå®åŸãClaude Desktop ãåèµ·åããŠãã ããã
åäœç¢ºèª
èšå®åŸã以äžã®æ¹æ³ã§æ£ããæ¥ç¶ãããŠããã確èªã§ããŸãã
Claude Code ã®å Žå
PSDãã¡ã€ã«ã®åæããŒã«ã䜿ããŸããïŒ
ãšå
¥åãããšãget_document_info ãªã©ã®ããŒã«ãå©çšå¯èœã§ããããšãå¿çããŸãã
å®éã®PSDã§ç¢ºèª
/path/to/design.psd ã®ããã¥ã¡ã³ãæ
å ±ã衚瀺ããŠ
ã¬ã€ã€ãŒããªãŒãšããã¥ã¡ã³ãæ å ±ãè¿ã£ãŠããã°æåã§ãã
ããŒã«äžèЧ
get_document_info - ããã¥ã¡ã³ãæŠèŠ
PSD ãã¡ã€ã«å šäœã®æ§é ãååŸããŸããæåã«åŒã¶ã¹ãããŒã«ã§ãã
| ãã©ã¡ãŒã¿ | å | å¿ é | 説æ |
|---|---|---|---|
filePath | string | â | PSD ãã¡ã€ã«ã®çµ¶å¯Ÿãã¹ |
includeScreenshot | boolean | - | åæç»åã®ã¹ã¯ãªãŒã³ã·ã§ãããå«ãããïŒããã©ã«ã: trueïŒ |
è¿åŽå 容: ããã¥ã¡ã³ããµã€ãºãã«ã©ãŒã¢ãŒããè§£å床ãã¬ã€ã€ãŒããªãŒãã¹ã¯ãªãŒã³ã·ã§ããç»å
get_layer_detail - ã¬ã€ã€ãŒè©³çް
ç¹å®ã¬ã€ã€ãŒã®è©³çްæ å ±ãååŸããŸãã
| ãã©ã¡ãŒã¿ | å | å¿ é | 説æ |
|---|---|---|---|
filePath | string | â | PSD ãã¡ã€ã«ã®çµ¶å¯Ÿãã¹ |
layerId | number | â³ | ã¬ã€ã€ãŒ ID |
layerName | string | â³ | ã¬ã€ã€ãŒåïŒå®å šäžèŽïŒ |
layerPath | string | â³ | ã¬ã€ã€ãŒãã¹ïŒäŸ: Header/LogoïŒ |
includeImage | boolean | - | ã¬ã€ã€ãŒç»åãå«ãããïŒããã©ã«ã: falseïŒ |
layerId/layerName/layerPathã®ãããã1ã€ãæå®ããŠãã ããã
è¿åŽå 容: boundsãopacityãblendModeãããã¹ãæ å ±ããã¯ã¿ãŒæ å ±ããšãã§ã¯ããã¹ããŒããªããžã§ã¯ãæ å ±
get_design_tokens - ãã¶ã€ã³ããŒã¯ã³æœåº
PSD å šäœããã«ã©ãŒã»ãã©ã³ãã»ã·ã£ããŠã»ã°ã©ããŒã·ã§ã³ãåéããæ§é åããŒã¿ãšããŠåºåããŸãã
| ãã©ã¡ãŒã¿ | å | å¿ é | 説æ |
|---|---|---|---|
filePath | string | â | PSD ãã¡ã€ã«ã®çµ¶å¯Ÿãã¹ |
format | string | - | åºå圢åŒ: jsonïŒããã©ã«ãïŒ/ css-variables / tailwind |
åºåäŸïŒcss-variablesïŒ:
:root {
--color-1: #1a202c; /* text:Header/Title */
--color-2: #3182ce; /* vector:Content/Button */
--font-1: "Helvetica";
--shadow-1: -2px 3px 8px 0px #000000;
}
åºåäŸïŒtailwindïŒ:
{
"theme": {
"extend": {
"colors": { "custom-1": "#1a202c", "custom-2": "#3182ce" },
"fontFamily": { "custom-1": ["Helvetica"] },
"boxShadow": { "custom-1": "-2px 3px 8px 0px #000000" }
}
}
}
get_screenshot - ã¹ã¯ãªãŒã³ã·ã§ããååŸ
ããã¥ã¡ã³ãå šäœãŸãã¯ç¹å®ã¬ã€ã€ãŒã®ç»åã PNG ã§ååŸããŸãã
| ãã©ã¡ãŒã¿ | å | å¿ é | 説æ |
|---|---|---|---|
filePath | string | â | PSD ãã¡ã€ã«ã®çµ¶å¯Ÿãã¹ |
layerId | number | - | ç¹å®ã¬ã€ã€ãŒã® ID |
layerPath | string | - | ç¹å®ã¬ã€ã€ãŒã®ãã¹ |
maxWidth | number | - | æå€§å¹ pxïŒããã©ã«ã: 1200ïŒ |
maxHeight | number | - | æå€§é«ã pxïŒããã©ã«ã: 1200ïŒ |
get_text_content - ããã¹ãäžæ¬æœåº
å šããã¹ãã¬ã€ã€ãŒã®å 容ãšã¹ã¿ã€ãªã³ã°æ å ±ãæœåºããŸãã
| ãã©ã¡ãŒã¿ | å | å¿ é | 説æ |
|---|---|---|---|
filePath | string | â | PSD ãã¡ã€ã«ã®çµ¶å¯Ÿãã¹ |
layerPath | string | - | ç¹å®ã°ã«ãŒãå ã«éå®ãããã¹ |
è¿åŽå 容: åããã¹ãã¬ã€ã€ãŒã®ããã¹ãå 容ããã©ã³ãåããã©ã³ããµã€ãºãè²ãè¡éãæåééãããã¹ãé 眮ãã¹ã¿ã€ã«ã©ã³
export_image - ç»åæžãåºã
PSD ã®åæç»åãŸãã¯ç¹å®ã¬ã€ã€ãŒ/ã°ã«ãŒãã PNG/JPEG ãã¡ã€ã«ãšããŠæžãåºããŸãã
| ãã©ã¡ãŒã¿ | å | å¿ é | 説æ |
|---|---|---|---|
filePath | string | â | PSD ãã¡ã€ã«ã®çµ¶å¯Ÿãã¹ |
outputPath | string | â | åºåå
ãã¡ã€ã«ãã¹ïŒäŸ: /tmp/output.pngïŒ |
layerId | number | - | ç¹å®ã¬ã€ã€ãŒã® ID |
layerPath | string | - | ç¹å®ã¬ã€ã€ãŒã®ãã¹ïŒäŸ: Header/LogoïŒ |
format | string | - | pngïŒããã©ã«ãïŒ/ jpeg |
quality | number | - | JPEG å質ïŒ1-100ãããã©ã«ã: 92ïŒ |
scale | number | - | ã¹ã±ãŒã«åçïŒäŸ: 0.5 = 50%, 2 = 200%ïŒ |
width | number | - | åºåå¹ pxïŒã¢ã¹ãã¯ãæ¯ç¶æïŒ |
height | number | - | åºåé«ã pxïŒã¢ã¹ãã¯ãæ¯ç¶æïŒ |
search_layers - ã¬ã€ã€ãŒæ€çŽ¢
ã¬ã€ã€ãŒãååãã¿ã€ãã§æ€çŽ¢ããŸãã
| ãã©ã¡ãŒã¿ | å | å¿ é | 説æ |
|---|---|---|---|
filePath | string | â | PSD ãã¡ã€ã«ã®çµ¶å¯Ÿãã¹ |
query | string | - | ã¬ã€ã€ãŒåã®æ€çŽ¢ã¯ãšãªïŒéšåäžèŽïŒ |
type | string | - | text / group / bitmap / vector / adjustment / smartObject / all |
visible | boolean | - | å¯èŠã¬ã€ã€ãŒã®ã¿ / é衚瀺ã®ã¿ |
hasEffects | boolean | - | ãšãã§ã¯ãä»ãã¬ã€ã€ãŒã®ã¿ |
get_layout_info - ã¬ã€ã¢ãŠãè§£æ
ã°ã«ãŒãã¬ã€ã€ãŒå ã®åèŠçŽ éã®ã¹ããŒã·ã³ã°ãæŽåãã¿ãŒã³ãæšå¥šã¬ã€ã¢ãŠãæ¹åãè§£æããŸããCSS å®è£ æã® margin/padding/gap/flexbox æ¹åã®å€æã«æŽ»çšã§ããŸãã
| ãã©ã¡ãŒã¿ | å | å¿ é | 説æ |
|---|---|---|---|
filePath | string | â | PSD ãã¡ã€ã«ã®çµ¶å¯Ÿãã¹ |
layerId | number | â³ | ã°ã«ãŒãã¬ã€ã€ãŒã® ID |
layerPath | string | â³ | ã°ã«ãŒãã¬ã€ã€ãŒã®ãã¹ïŒäŸ: HeaderïŒ |
layerName | string | â³ | ã°ã«ãŒãã¬ã€ã€ãŒåïŒå®å šäžèŽïŒ |
layerId/layerPath/layerNameã®ãããã1ã€ãæå®ããŠãã ããã
è¿åŽå 容: ã¬ã€ã¢ãŠãæ¹åïŒhorizontal/verticalïŒãåèŠçŽ éã® gapãæŽåãã¿ãŒã³ãæšå¥š CSSïŒflexbox/gridïŒ
get_layer_css - CSS çæ
ã¬ã€ã€ãŒã®ã¹ã¿ã€ã«æ å ±ã CSS 圢åŒã§çæããŸãã
| ãã©ã¡ãŒã¿ | å | å¿ é | 説æ |
|---|---|---|---|
filePath | string | â | PSD ãã¡ã€ã«ã®çµ¶å¯Ÿãã¹ |
layerId | number | â³ | ã¬ã€ã€ãŒ ID |
layerName | string | â³ | ã¬ã€ã€ãŒåïŒå®å šäžèŽïŒ |
layerPath | string | â³ | ã¬ã€ã€ãŒãã¹ïŒäŸ: Header/LogoïŒ |
useParentRelative | boolean | - | 芪ã°ã«ãŒãåºæºã®çžå¯Ÿåº§æšã䜿ããïŒããã©ã«ã: trueïŒ |
layerId/layerName/layerPathã®ãããã1ã€ãæå®ããŠãã ããã
è¿åŽå 容: position, size, background, border, border-radius, box-shadow, text styles çã® CSS ããããã£
get_design_spec - ãã¶ã€ã³ä»æ§æžçæ
ã¬ã€ã€ãŒãŸãã¯ã°ã«ãŒãã®å®è£ çšãã¶ã€ã³ä»æ§æžãäžæ¬çæããŸããCSSãã¬ã€ã¢ãŠãæ å ±ãããã¹ããborder-radiusãåèŠçŽ ã®ä»æ§ãååž°çã«å«ãå æ¬çãªä»æ§æžã§ãã
| ãã©ã¡ãŒã¿ | å | å¿ é | 説æ |
|---|---|---|---|
filePath | string | â | PSD ãã¡ã€ã«ã®çµ¶å¯Ÿãã¹ |
layerId | number | â³ | ã¬ã€ã€ãŒ ID |
layerName | string | â³ | ã¬ã€ã€ãŒåïŒå®å šäžèŽïŒ |
layerPath | string | â³ | ã¬ã€ã€ãŒãã¹ïŒäŸ: HeaderïŒ |
maxDepth | number | - | åèŠçŽ ã®å垰深床ïŒããã©ã«ã: 3ïŒ |
includeScreenshot | boolean | - | ã¹ã¯ãªãŒã³ã·ã§ãããå«ãããïŒããã©ã«ã: trueïŒ |
layerId/layerName/layerPathã®ãããã1ã€ãæå®ããŠãã ããã
è¿åŽå 容: ã¬ã€ã€ãŒããšã® CSSãã¬ã€ã¢ãŠãè§£æãããã¹ãæ å ±ããšãã§ã¯ããåèŠçŽ ã®ä»æ§ïŒååž°ïŒãã¹ã¯ãªãŒã³ã·ã§ãã
compare_design - ãã¶ã€ã³å·®åæ¯èŒ
PSD ãã¶ã€ã³ãšå®è£ ã®ã¹ã¯ãªãŒã³ã·ã§ããããã¯ã»ã«åäœã§æ¯èŒããå·®åãæ€åºããŸãã
| ãã©ã¡ãŒã¿ | å | å¿ é | 説æ |
|---|---|---|---|
filePath | string | â³ | PSD ãã¡ã€ã«ã®çµ¶å¯Ÿãã¹ïŒPSD ãšæ¯èŒããå ŽåïŒ |
layerId | number | - | æ¯èŒå¯Ÿè±¡ã®ã¬ã€ã€ãŒ IDïŒPSD äœ¿çšæïŒ |
layerPath | string | - | æ¯èŒå¯Ÿè±¡ã®ã¬ã€ã€ãŒãã¹ïŒPSD äœ¿çšæïŒ |
designImagePath | string | â³ | ãã¶ã€ã³ç»åãã¡ã€ã«ã®ãã¹ïŒç»ååå£«ãæ¯èŒããå ŽåïŒ |
implementationImagePath | string | â | å®è£ ã®ã¹ã¯ãªãŒã³ã·ã§ããç»åãã¡ã€ã«ã®ãã¹ |
tolerance | number | - | è²å·®ã®èš±å®¹å€ïŒ0-255ãããã©ã«ã: 30ïŒ |
filePathïŒPSDïŒãŸãã¯designImagePathïŒç»åïŒã®ãããããæå®ããŠãã ããã
è¿åŽå 容: å·®åçïŒ%ïŒãå·®åããŒããããç»åãå·®åé åã®ããŠã³ãã£ã³ã°ããã¯ã¹ãå€å®ãµããªãŒ
äœ¿ãæ¹ã¬ã€ã
åºæ¬çãªã¯ãŒã¯ãããŒ
Step 1: ãŸãããã¥ã¡ã³ãæŠèŠã確èª
/path/to/design.psd ã®æ§é ãæããŠ
Step 2: å¿ èŠãªéšåã®ãã¶ã€ã³ããŒã¯ã³ãæœåº
/path/to/design.psd ã®ãã¶ã€ã³ããŒã¯ã³ã Tailwind 圢åŒã§åºåããŠ
Step 3: ã³ãŒãå®è£ ãäŸé Œ
/path/to/design.psd ã React + Tailwind CSS ã§å®è£
ããŠ
ãã䜿ãããã³ããäŸ
| ããããããš | ããã³ããäŸ |
|---|---|
| PSD ã®å šäœåãææ¡ | design.psd ãåæã㊠|
| ããããŒéšåã ãèŠãã | design.psd ã® Header ã°ã«ãŒãã®è©³çްãæã㊠|
| 䜿ãããŠããè²ãç¥ããã | design.psd ã§äœ¿ãããŠããå
šã«ã©ãŒããªã¹ãã¢ããã㊠|
| CSS 倿°ãšããŠåºå | design.psd ã®ãã¶ã€ã³ããŒã¯ã³ã CSS 倿°ã§åºåã㊠|
| ç¹å®ã»ã¯ã·ã§ã³ã ãå®è£ | design.psd ã® Content ã»ã¯ã·ã§ã³ã HTML/CSS ã§å®è£
ã㊠|
| ããã¹ãå 容ãäžæ¬ååŸ | design.psd ã®å
šããã¹ããæœåºã㊠|
| ãã¿ã³ã®ã¹ã¿ã€ã«ãç¢ºèª | design.psd ã® Button ã¬ã€ã€ãŒã®ãšãã§ã¯ããæã㊠|
| ã¹ã¯ãªãŒã³ã·ã§ãããèŠãã | design.psd ã®ã¹ã¯ãªãŒã³ã·ã§ããã衚瀺ã㊠|
| ã¬ã€ã€ãŒãç»åã§æžãåºã | design.psd ã® Logo ã¬ã€ã€ãŒã /tmp/logo.png ã«æžãåºã㊠|
| ã¬ã€ã€ãŒã® CSS ãååŸ | design.psd ã® CTAButton ã® CSS ãçæã㊠|
| ã¬ã€ã¢ãŠãæ§é ãç¢ºèª | design.psd ã® Header ã°ã«ãŒãã®ã¬ã€ã¢ãŠããè§£æã㊠|
| ãã¶ã€ã³ä»æ§æžãäœæ | design.psd ã® Content ã»ã¯ã·ã§ã³ã®ãã¶ã€ã³ä»æ§æžãçæã㊠|
| å®è£ ãšã®å·®åãæ¯èŒ | design.psd ãš screenshot.png ãæ¯èŒããŠå·®åãæã㊠|
PSD ãã¡ã€ã«ã®æºåïŒãã¶ã€ããŒåãïŒ
ããè¯ãè§£æçµæã®ããã«ãPSD ãã¡ã€ã«äœææã«ä»¥äžãæšå¥šããŸãã
ã¬ã€ã€ãŒåã®ã«ãŒã«
- ã¬ã€ã€ãŒã«ã¯æå³ã®ããååãä»ããïŒ
ã¬ã€ã€ãŒ 1ã§ã¯ãªãHeaderNavMenuãªã©ïŒ - ã°ã«ãŒãïŒãã©ã«ãïŒã§ã»ã¯ã·ã§ã³ãæŽçãã
- ååã« è±èª ã䜿ããšã³ãŒãçææã«ãã®ãŸãŸã¯ã©ã¹åãšããŠæŽ»çšãããã
æšå¥šæ§æäŸ
Header/
âââ Logo
âââ NavMenu/
â âââ Link-Home
â âââ Link-About
â âââ Link-Contact
âââ HeaderBG
Content/
âââ HeroTitle
âââ HeroDescription
âââ CTAButton
Footer/
âââ Copyright
âââ FooterBG
ãã®ä»ã®ãã€ã³ã
- ããã¹ãã¯ããã¹ãã¬ã€ã€ãŒã§äœæããïŒã©ã¹ã¿ã©ã€ãºããªãïŒ
- ãã¯ã¿ãŒã·ã§ã€ãã¯ã·ã§ã€ãã¬ã€ã€ãŒã®ãŸãŸä¿æãã
- ã«ã©ãŒã¢ãŒã㯠RGB ã䜿çšãã
- äžèŠãªã¬ã€ã€ãŒã¯é衚瀺ã«ãããåé€ãã
ãã©ãã«ã·ã¥ãŒãã£ã³ã°
canvas ããã±ãŒãžã®ã€ã³ã¹ããŒã«ã«å€±æãã
canvasïŒnode-canvasïŒã¯ãã€ãã£ãäŸåããããŸããOS ããšã®å¯ŸåŠæ³:
macOS:
brew install pkg-config cairo pango libpng jpeg giflib librsvg
Ubuntu / Debian:
sudo apt-get install -y build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev
Windows: node-canvas ã® Windows Installation Guide ãåç §ããŠãã ããã
MCP ãµãŒããŒãèªèãããªã
- èšå®ãã¡ã€ã«ã®ãã¹ã絶察ãã¹ã§ããããšã確èª
npm run buildãæåããŠããããšã確èª- Claude Code / Cursor / Claude Desktop ãåèµ·å
- æåã§ãµãŒããŒãèµ·åããã確èª:
echo '{}' | node /path/to/psd-mcp/dist/index.js # ãšã©ãŒãåºãªããã° OKïŒCtrl+C ã§çµäºïŒ
PSD ãã¡ã€ã«ã®è§£æã«å€±æãã
- ã«ã©ãŒã¢ãŒã: RGB 以å€ïŒCMYKãLab çïŒã¯äžéšæ©èœãå¶éãããå ŽåããããŸã
- ãã¡ã€ã«ãµã€ãº: éåžžã«å€§ã㪠PSDïŒ100MB è¶ ïŒã¯ã¡ã¢ãªäžè¶³ã«ãªãå¯èœæ§ããããŸã
- ããŒãžã§ã³: Photoshop CS6 以éã§äœæããã PSD ãã¡ã€ã«ãæšå¥šããŸã
ã¹ã¯ãªãŒã³ã·ã§ããã衚瀺ãããªã
includeScreenshot: trueïŒããã©ã«ãïŒã§åŒã³åºããŠããã確èª- PSD ã«ãã©ããåãããåæç»åãå«ãŸããŠããå¿
èŠããããŸã
- Photoshop ã§ä¿åæã«ãäºææ§ãåªå ãã«ãã§ãã¯ãå ¥ããŠãã ãã
æè¡ã¹ã¿ãã¯
| ã©ã€ãã©ãª | çšé |
|---|---|
| ag-psd | PSD ãã¡ã€ã«ã®è§£æïŒã¬ã€ã€ãŒãããã¹ãããšãã§ã¯ãïŒ |
| canvas | ã¬ã€ã€ãŒç»åã®æç»ã»ãªãµã€ãº |
| @modelcontextprotocol/sdk | MCP ãããã³ã«å®è£ |
| zod | ããŒã«å ¥åã®ã¹ããŒãããªããŒã·ã§ã³ |
ã©ã€ã»ã³ã¹
MIT
