HTML转Figma设计转换器是 Yueyin-Tql 开发的 MCP 服务器：一个功能完整的MCP服务器，可以将网页URL、HTML/CSS代码或浏览器扩展捕获的文件转换为Figma设计稿，适用于网。接入两步走：见官方 README，再把下文配置粘进客户端 mcpServers 段重启即可。
它是干什么的
先把话说清楚：HTML转Figma设计转换器不是又一个大模型，而是一个标准的 MCP 服务器。装好之后，你的 AI 客户端多出一组新工具，模型可以按需调用。一个功能完整的MCP服务器，可以将网页URL、HTML/CSS代码或浏览器扩展捕获的文件转换为Figma设计稿，适用于网页设计师和开发人员快速创建和修改设计原型
| 项目 | 数据 |
|---|---|
| 开发者 | Yueyin-Tql |
| Star | 7 |
| 收藏 | 0 |
| 质量等级 | A |
| 平台分类 | 开发效率 |
| 部署标签 | 本地部署、设计转换、Figma集成 |
| 仓库 | htmlToFigma |
核心能力
- ✅ 从网页 URL 导入：支持将任意公开网页转换为 Figma 设计稿
- ✅ 从 HTML + CSS 代码导入：支持直接粘贴代码片段转换为设计稿
- ✅ 从 .h2d 文件导入：支持导入浏览器扩展捕获的网页数据
- ✅ 视口支持：可自定义视口大小（移动端、平板、桌面）
- ✅ 主题支持：支持明亮/暗黑主题切换
适合谁用
两类人最该装：一是天天在 Claude Desktop、Cursor 里写代码，想让 AI 直接帮你跑命令、改仓库、读文件的人；二是已经在用 MCP 生态、想按需拼装能力的折腾型用户。反过来，如果你只需要偶尔手动用它背后的服务，直接开网页就行，不必上 MCP。
完整安装配置步骤
动手前确认环境齐了：
- 一个支持 MCP 的客户端：Claude Desktop、Cursor、Cline、Windsurf 任选其一。
- 对应平台的 API Key（第 2 步要用）。
第 1 步：安装HTML转Figma设计转换器
安装命令随版本更新较频繁，以 官方 README 顶部 Installation 一节为准。
第 2 步：按官方说明写入配置
HTML转Figma设计转换器的 README 没给标准 mcpServers JSON，配置入口见 官方文档 的 Usage/Configuration 章节。原则不变：客户端配置文件里加 mcpServers 条目，重启生效。
第 3 步：重启并验证
完全退出客户端再打开（是托盘里真正退出，不是关窗口）。工具列表里出现HTML转Figma设计转换器的工具即接入成功；调用报错的话，先查下面的坑点清单。
容易踩的坑
- Key 填了但没生效：多半填在了
args而不是env段。客户端日志里看到Environment variable FIGMA_ACCESS_TOKEN not set就是这个原因。 - 改了配置没反应：客户端只重启了窗口没退进程。macOS 按 Cmd+Q，Windows 检查托盘。
- JSON 报错打不开客户端：多半是最后多个逗号。粘进任何 JSON 校验器里查一遍再保存。
常见问题
HTML转Figma设计转换器免费吗？
代码在 GitHub（https://github.com/Yueyin-Tql/htmlToFigma）开放获取。个别功能依赖第三方服务时费用另算，看仓库 LICENSE 和定价页。
HTML转Figma设计转换器能用在 Cursor / Cline 吗？
能。MCP 是通用协议，同一份 mcpServers 配置在这些客户端之间基本通用，只是配置文件位置不同。
API Key 从哪拿？
去对应平台的开发者控制台申请，填进配置的 env 段。Key 泄露记得直接去平台吊销，别只改本地文件。
需要外网或代理吗？
拉包和调用官方 API 需要能访问 GitHub 与对应服务域名，内网环境先测 git ls-remote 和接口连通性。