Enables the automated generation of React UI components and front-end code directly from Photoshop design assets and layer structures.
Supports the intelligent identification and automated export of Photoshop layers and components into SVG vector format.
Facilitates the automatic application of design specifications and utility-first styling using UnoCSS during the design-to-code workflow.
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., "@PS-MCP Export the 'Login-Button' layer as a transparent PNG."
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.
Photoshop MCP Server - AI驱动的设计工作流自动化
PS-MCP 是一个基于 Model Context Protocol (MCP) 的 Photoshop 集成服务器，旨在通过 AI 大模型（如 Claude、GPT 等）实现对 Adobe Photoshop 的智能控制。
本项目目前处于早期开发阶段，核心目标是实现设计稿的智能切图与资源导出，并计划在未来演进为 「设计稿分析 → 智能切图 → UI 代码生成」 的一站式工作流解决方案。
Related MCP server: Vextra MCP Server
✅ 通过自然语言指令控制 Photoshop 导出切片
✅ 自动识别设计稿中的图层、组件边界
✅ 支持多种格式导出（PNG、JPG、SVG、WebP）
✅ 智能命名与资源管理
🔄 图层结构分析与语义理解
🔄 颜色、字体、间距等设计规范提取
🔄 组件库识别与归类
📋 基于切图结果生成前端代码（Vue/React/HTML）
📋 自动应用设计规范（Tailwind/UnoCSS）
📋 实现「设计稿 → 可运行代码」的完整闭环
┌─────────────────────────────────────────────────────────────┐
│ AI 大模型 (Claude/GPT) │
└───────────────────────┬─────────────────────────────────────┘
│ MCP Protocol
┌───────────────────────┼─────────────────────────────────────┐
│ ▼ │
│ ┌────────────────┐ │
│ │ PS-MCP Server │ ← 本项目 │
│ │ (Python) │ │
│ └───────┬────────┘ │
│ │ │
│ ┌───────────┴───────────┐ │
│ │ │ │
│ ▼ ▼ │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ Photoshop │ │ Export │ │
│ │ JSX/Script │ │ Assets │ │
│ └──────────────┘ └──────────────┘ │
└─────────────────────────────────────────────────────────────┘组件 | 技术 | 说明 |
MCP Server | Python MCP 服务端框架 | |
通信协议 | stdio/sse | 标准输入输出 / HTTP 流 |
PS 交互 | ExtendScript / UXP | Adobe Photoshop 脚本接口 |
构建工具 | uv | 现代 Python 包管理器 |
Python >= 3.14
Adobe Photoshop 2022 或更高版本
Claude Desktop / 其他 MCP 客户端
# 克隆仓库
git clone https://github.com/pangxie231/ps-mcp.git
cd ps-mcp
# 使用 uv 安装依赖
uv sync
# 或使用 pip
pip install -e "."在 Claude Desktop 配置文件中添加：
{
"mcpServers": {
"ps-mcp": {
"command": "python",
"args": ["/path/to/ps-mcp/server.py"]
}
}
}# 开发模式
python server.py
# 或使用 uv
uv run server.py功能模块 | 状态 | 说明 |
MCP 服务框架 | ✅ | 基础服务搭建完成 |
工具注册 | ✅ | 测试工具可用 |
PS 连接层 | 🚧 | 开发中... |
切图功能 | 📋 | 计划中 |
图层分析 | 📋 | 计划中 |
UI 生成 | 📋 | 计划中 |
图例： ✅ 已完成 | 🚧 进行中 | 📋 计划中
⚠️ 注意：以下工具列表将随开发进度持续更新
工具名 | 描述 | 参数 |
| 测试连接 | 无 |
本项目欢迎贡献！由于处于早期阶段，API 和架构可能会有较大变动，建议先通过 Issue 讨论后再提交 PR。
Fork 本仓库
创建功能分支 (git checkout -b feature/amazing-feature)
提交更改 (git commit -m 'feat: add some amazing feature')
推送分支 (git push origin feature/amazing-feature)
创建 Pull Request
实现 Photoshop 基础连接
添加图层信息获取工具
实现简单切片导出功能
智能组件识别
批量切图导出
设计规范提取
UI 代码生成（支持 Vue/React）
完整的设计到代码工作流
插件生态支持
MIT © 2026 ps-mcp Contributors
⚠️ 免责声明：本项目目前处于早期开发阶段，API 可能不稳定，不建议用于生产环境。
Made with ❤️ for better design-to-code workflow
This server cannot be deployed
The Figma MCP server brings Figma design context directly into your AI workflow.
The Canva MCP server connects AI assistants (like Claude, ChatGPT, and Cursor) to Canva's API, enabling them to create and manage designs directly within chat conversations. Key capabilities include generating new designs from prompts, autofilling templates, searching and resizing existing designs, importing files from URLs, exporting designs as PDFs or images, and managing folders and comments without switching between tools.
A Model Context Protocol server for Wix AI tools
Sync Lightroom, Figma, Dropbox & Canva assets to WordPress and Shopify via natural language.
