网页转 Figma
OldTree666/FigmaCapture
Hosted
0 Stars
73 次浏览
OldTree
更新于 2026-08-23
一个MCP服务器，用于通过HTML-to-design直接将网页捕获到Figma中。它支持历史和哈希路由模式、CSS选择器定位以及可自定义的捕获延迟。
MCP 服务配置
复制以下 JSON 到 OPClaw 或其他 MCP 客户端的配置文件中即可使用
{
"mcpServers": {
"figma-capture": {
"command": "figma-capture-mcp"
}
}
}可用工具 （1 个）
该服务在 MCP 协议中暴露的工具，AI 可按需调用
capture_webpage 3 个参数 需填 1 项
Capture a webpage using Figma's HTML-to-design feature. Supports both history and hash router modes.
必填参数：url
服务介绍
figma-capture-mcp
一个通过HTML-to-design将网页直接捕获到Figma中的MCP服务器。
功能
- 通过MCP协议将任何网页捕获为Figma设计
- 支持历史和哈希路由模式
- 使用CSS选择器定位特定元素
- 可自定义的捕获延迟
安装
使用npx（推荐）
{
"mcpServers": {
"figma-capture": {
"command": "npx",
"args": ["figma-capture-mcp"]
}
}
}
全局安装
npm install -g figma-capture-mcp
然后进行配置：
{
"mcpServers": {
"figma-capture": {
"command": "figma-capture-mcp"
}
}
}
使用
配置完成后，在Claude Code中使用capture_webpage工具：
Capture http://localhost:5173
参数
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
url |
string | 必填 | 要捕获的网页URL |
selector |
string | "body" |
要捕获元素的CSS选择器 |
delay |
number | 1000 |
触发捕获前的延迟时间（毫秒） |
工作原理
- 使用指定的URL启动浏览器
- 注入Figma的HTML-to-design捕获脚本
- 当页面准备好时触发捕获
- 浏览器保持打开状态，直到您手动关闭
要求
- Node.js >= 18.0.0
- Playwright浏览器依赖项
- 带有HTML-to-design插件的Figma桌面应用程序
许可证
ISC
