使用说明
Penpot MCP服务器
一个生产就绪的模型上下文协议（MCP）服务器，使AI助手（Claude、GPT-4等）能够以编程方式与Penpot设计文件进行交互。
特性
✨ 15+MCP工具 -用于设计操作的全面API 🎨 设计分析 -基于AI的颜色、排版和布局分析 🔄 CRUD操作 -创建、读取、更新和删除设计元素 📤 出口支持 -导出为SVG、PNG和设计标记 🤖 AI集成 -自然语言设计生成 🔒 安全 -内置速率限制和身份验证 ☁️ 多实例 -支持Penpot Cloud和自托管实例
快速开始
安装
来自PyPI（推荐）
pip install penpot-mcp
来源
git clone https://github.com/Acorn-Technology-Solutions-inc/penpot-mcp.git
cd penpot-mcp
pip install -e .
配置
- 创建一个
.env文件：
cp .env.example .env
- 添加您的Penpot访问令牌：
PENPOT_API_URL=https://design.penpot.app/api
PENPOT_ACCESS_TOKEN=your_token_here
要获取访问令牌，请执行以下操作：
- 首选https://design.penpot.app
- 登录您的账户
- 前往“设置”>“访问令牌”
- 创建新令牌
使用Claude Desktop
添加到您的Claude Desktop配置(~/Library/Application Support/Claude/claude_desktop_config.json 在macOS上）：
{
"mcpServers": {
"penpot": {
"command": "python",
"args": ["-m", "penpot_mcp"],
"env": {
"PENPOT_ACCESS_TOKEN": "your_token_here"
}
}
}
}
使用游标
添加到光标MCP配置中：
{
"penpot": {
"command": "python",
"args": ["-m", "penpot_mcp"],
"env": {
"PENPOT_API_URL": "https://design.penpot.app/api",
"PENPOT_ACCESS_TOKEN": "your_token_here"
}
}
}
可用工具
文件操作
list_files-列出团队/项目中的所有设计文件get_file-获取所有页面和形状的完整文件数据create_file-创建新的设计文件delete_file-删除文件
设计分析
analyze_design-人工智能驱动的综合设计分析extract_colors-使用统计数据提取调色板extract_typography-提取所有文本样式和字体get_components-列出所有组件和实例
形状操作
create_rectangle-创建矩形形状create_text-创建文本元素create_frame-创建容器框架update_shape-更新形状属性delete_shape-删除形状
出口业务
export_to_svg-将设计导出为SVG格式export_to_png-将设计导出为PNG格式export_design_tokens-将设计令牌导出为JSON
高级功能
generate_design_from_prompt-人工智能驱动的设计生成validate_accessibility-检查可访问性合规性compare_designs-比较两个设计文件
示例
示例1：创建一个简单的设计
# The AI assistant can now:
# "Create a new design file called 'Landing Page' in my project"
# "Add a blue rectangle at position 100,100 with size 200x100"
# "Add text that says 'Welcome' at the top"
示例2：分析设计
# "Analyze the design in file xyz-123 and tell me about the colors used"
# "Extract all typography styles from my design"
# "Check if my design meets accessibility standards"
示例3：导出设计
# "Export the first page of file xyz-123 as SVG"
# "Export design tokens from my design system file"
发展
设置
# Clone repository
git clone https://github.com/Acorn-Technology-Solutions-inc/penpot-mcp.git
cd penpot-mcp
# Create virtual environment
python -m venv venv
source venv/bin/activate # On Windows: venv\Scripts\activate
# Install dependencies
pip install -e ".[dev]"
运行测试
# Unit tests
pytest -v
# Functionality tests
python test_functionality.py
# With coverage
pytest --cov=penpot_mcp
# All tests
python -m pytest && python test_functionality.py
代码质量
black src/ # Format code
ruff check src/ # Lint code
mypy src/ # Type check
建筑与出版
看 docs/PUBLISHING.md 完整的指南。
快速构建：
# Build package
python -m build
# Upload to PyPI
python -m twine upload dist/*
建筑
penpot-mcp/
├── src/penpot_mcp/
│ ├── server.py # Main MCP server
│ ├── penpot_client.py # Penpot API client
│ ├── tools/ # MCP tool implementations
│ │ ├── file_ops.py
│ │ ├── analysis.py
│ │ ├── shapes.py
│ │ └── export.py
│ ├── models/ # Data models
│ │ ├── file.py
│ │ └── shape.py
│ └── utils/ # Utilities
│ ├── auth.py
│ ├── rate_limit.py
│ └── cache.py
├── tests/
└── examples/
api参考
看 docs/API.md文件 API的详细文档。
贡献
欢迎投稿！请阅读 贡献.md 作为指导方针。
许可证
MIT许可证-请参阅 许可证 了解详情。
