psd mcp

从PSD文件中提取设计信息的MCP服务器。\ 可以直接从Claude Code和Cursor等AI编码工具读取PSD设计，用于代码实现。

不需要安装Photoshop。 直接解析PSD文件。

______________________________________________________________________

能做的事

デザイナー                    開発者
  PSD ファイル ──────────→ Claude Code / Cursor
                              │
                              ├─ レイヤー構造の取得
                              ├─ テキスト・フォント情報の抽出
                              ├─ カラー・シャドウのデザイントークン化
                              ├─ スクリーンショット画像の取得
                              ├─ レイヤー単位の CSS 生成
                              ├─ レイアウト解析（flex方向・gap推定）
                              ├─ デザイン仕様書の自動生成
                              ├─ 実装とのピクセル差分比較
                              └─ そのまま React / HTML / CSS に実装

以树形确认PSD的层结构
提取文本层的字体名称、大小、颜色和行距
单击功能区上 CSS变量/顺风/JSON 输出
通过PNG获取整个文档或单个层的屏幕快照
图层 PNG/JPEG 导出到文件
在您查看完详细信息后，单击 CSS代码生成为
单击功能区上 布局分析（flex方向gap、排列模式推测）
安装 设计式样书递归成批生成
PSD设计和安装屏幕快照的像素差分比较
按照“将此PSD作为React组件”这样的指示生成代码

______________________________________________________________________

动作环境

项目	要件
Node.js	v18 以上（v20 推奨）
npm	v9 以上
操作系统	macOS/Windows/Linux

AI工具、Cursor或Claude Desktop

______________________________________________________________________

安装，安装

1.克隆存储库

git clone https://github.com/KimMaru10/psd-mcp.git
cd psd-mcp

2.安装依赖包

npm install

在macOS上 canvas 安装失败： ``bash brew install pkg-config cairo pango libpng jpeg giflib librsvg npm install ` **对于Ubuntu/Debian：** `bash 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 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/mcp.json 创建：

{
  "mcpServers": {
    "psd": {
      "command": "node",
      "args": ["/path/to/psd-mcp/dist/index.js"]
    }
  }
}

设置后，请重新启动Cursor。

______________________________________________________________________

克劳德桌面

Settings > Developer > Edit Config 打开并添加：

macOS： ~/Library/Application Support/Claude/claude_desktop_config.json\ 窗户： %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 包含合成图像的屏幕快照（默认值：真）

返却内容: 文档大小、颜色模式、分辨率、图层树、屏幕快照图像

______________________________________________________________________

`get_layer_detail` -层详细信息

获取特定层的详细信息。

｜参数｜类型｜必需｜说明｜ |-----------|-----|------|------| | filePath ｜string｜○｜PSD文件的绝对路径｜ | layerId 层ID | layerName 层名称（完全匹配） | layerPath 图层路径（例如： Header/Logo） | | includeImage 包含层图像或（默认值：假）

layerId / layerName / layerPath 中所述修改相应参数的值。

返却内容: 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;
}

出力例（顺风）：

{
  "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｜-｜特定层的标识｜ | layerPath 特定层的路径 | maxWidth 最大px（默认值：1200） | maxHeight 最大高度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｜-｜特定层的标识｜ | layerPath 特定层的路径（例如： Header/Logo） | | format |string |-| png（默认）/ jpeg | | quality ｜number｜JPEG质量（1-100，默认值：92）｜ | scale 缩放倍率（例如0.5=50%，2=200%） | width 输出宽度px（纵横比维持） | height 输出高度px（纵横比维持）

______________________________________________________________________

`search_layers` -层搜索

按名称或类型搜索层。

｜参数｜类型｜必需｜说明｜ |-----------|-----|------|------| | filePath ｜string｜○｜PSD文件的绝对路径｜ | query 层名称搜索查询（部分匹配） | 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 玩家的路径（例如： Header） | | layerName ｜string｜△｜组玩家名称（完全一致）｜

layerId / layerPath / layerName 中所述修改相应参数的值。

返却内容: 布局方向、子元素之间的gap、对齐模式、推荐CSS（flexbox/grid）

______________________________________________________________________

`get_layer_css` - CSS 生成

以CSS格式生成图层样式信息。

｜参数｜类型｜必需｜说明｜ |-----------|-----|------|------| | filePath ｜string｜○｜PSD文件的绝对路径｜ | layerId 层ID | layerName 层名称（完全匹配） | layerPath 图层路径（例如： Header/Logo） | | useParentRelative 是否使用父组标准的相对坐标（默认值：真）

layerId / layerName / layerPath 中所述修改相应参数的值。

返却内容: CSS属性，如position、size、background、border、border-radius、box-shadow、text styles等

______________________________________________________________________

`get_design_spec` -设计规格书生成

批量生成层或组实施的设计规范。CSS、布局信息、文本、border-radius、递归包含子元素规范的全面规范。

｜参数｜类型｜必需｜说明｜ |-----------|-----|------|------| | filePath ｜string｜○｜PSD文件的绝对路径｜ | layerId 层ID | layerName 层名称（完全匹配） | layerPath 图层路径（例如： Header） | | maxDepth 子元素的递归深度（默认值：3） | includeScreenshot 包含屏幕快照或（默认值：真）

layerId / layerName / layerPath 中所述修改相应参数的值。

返却内容: 按层CSS、布局分析、文本信息、效果、子元素规格（递归）、屏幕快照

______________________________________________________________________

`compare_design` -设计差异比较

以像素为单位比较PSD设计和实现的屏幕快照，以检测差异。

｜参数｜类型｜必需｜说明｜ |-----------|-----|------|------| | filePath ｜string｜△｜PSD文件的绝对路径（与PSD比较时）｜ | layerId 比较层ID（PSD使用时） | layerPath 比较层路径（使用PSD时） | designImagePath 设计图像文件的路径（比较图像之间的情况） | implementationImagePath 实施的屏幕快照图像文件的路径 | tolerance 色差容差（0-255，默认值：30）

filePath（PSD）或 designImagePath请指定（图像）之一。

返却内容: 差分率（%）、差分热图图像、差分区域边界框、判定摘要

______________________________________________________________________

使用指南

基本工作流

Step1:首先确认文档概要

/path/to/design.psd の構造を教えて

Step2:提取所需部分的设计标记

/path/to/design.psd のデザイントークンを Tailwind 形式で出力して

Step3:请求代码实施

/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 而不是 Header NavMenu 的下界
在组（文件夹）中组织节
已重命名英语在生成代码时容易直接作为类名使用

推奨构成例

Header/
  ├── Logo
  ├── NavMenu/
  │   ├── Link-Home
  │   ├── Link-About
  │   └── Link-Contact
  └── HeaderBG
Content/
  ├── HeroTitle
  ├── HeroDescription
  └── CTAButton
Footer/
  ├── Copyright
  └── FooterBG

其他要点

文本是文本层中创建（不光栅化）
矢量形状扫描器保持
彩色模式波 红绿蓝 使用
隐藏或删除不需要的图层

______________________________________________________________________

故障排除

`canvas` 软件包安装失败

canvas（node-canvas）依赖于本机。操作系统解决方案：

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

窗户： node-canvas的 Windows安装指南来修改标记元素的显示属性。

未检测到MCP服务器

配置文件路径绝对路径确认
npm run build 确认成功
克劳德代码/光标/克劳德桌面を再起动
确认服务器是否手动启动：

   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文件（图层、文本、效果） | 画布图层图像的绘制/调整大小 | @模型上下文协议/sdk ｜MCP协议实现｜ | 黄道带工具输入的架构验证

______________________________________________________________________

许可证

麻省理工学院

psd MCP

快速接入

详细介绍

psd mcp

目次

能做的事

动作环境

安装，安装

1.克隆存储库

2.安装依赖包

3.构建

4.确认安装路径

配置MCP服务器

克劳德代码

光标

克劳德桌面

动作确认

对于Claude Code

实际PSD确认

工具列表

get_document_info -文档概述

get_layer_detail -层详细信息

get_design_tokens -设计标记提取

get_screenshot -截图检索

get_text_content -批量提取文本

export_image -图像导出

search_layers -层搜索

get_layout_info -布局分析

get_layer_css - CSS 生成

get_design_spec -设计规格书生成

compare_design -设计差异比较

使用指南

基本工作流

常用提示示例

准备PSD文件（面向设计师）

层名称规则

推奨构成例

其他要点

故障排除

canvas 软件包安装失败

未检测到MCP服务器

PSD文件解析失败

屏幕快照不可见

技术栈

许可证

目录标签

接入字段

权限和风险

来源信息

继续浏览同类 MCP

`get_document_info` -文档概述

`get_layer_detail` -层详细信息

`get_design_tokens` -设计标记提取

`get_screenshot` -截图检索

`get_text_content` -批量提取文本

`export_image` -图像导出

`search_layers` -层搜索

`get_layout_info` -布局分析

`get_layer_css` - CSS 生成

`get_design_spec` -设计规格书生成

`compare_design` -设计差异比较

`canvas` 软件包安装失败