AI to Figma：通过 MCP 将 Claude 和 Cursor 生成的 UI 导入 Figma

如今，AI 编程助手只需几分钟就能生成一个像样的落地页、设置页面或仪表盘。问题在于这些 UI 最终停留的位置：代码编辑器或本地预览中，远离团队用来评审、批注和打磨设计的 Figma 文件。

本指南介绍如何通过 AI to Figma 连接来弥合这一差距。HTML to Frames 提供 MCP 连接，让 Claude Code、Claude Desktop、Cursor 或任意 MCP 客户端把页面直接发送到你已打开的 Figma 插件中，并转换为带有自动布局（Auto Layout）的真实、可编辑图层。

这里的“AI to Figma”指什么

人们所说的 AI to Figma 其实是两件截然不同的事：

1. AI 根据提示词直接在 Figma 内生成设计。
2. AI 编写 HTML 和 CSS，再由一个桥接工具把这些代码转换为 Figma 图层。

HTML to Frames 做的是第二种。你的 AI 工具继续做它擅长的事——编写前端代码；插件则执行它对任何网页都会做的转换：框架（Frame）、文本、矢量、图片、变量和自动布局。由于走的是同一条捕获流程，结果质量与导入线上网站完全一致。产品概览请参阅 AI to Figma。

MCP 连接的工作原理

Model Context Protocol（MCP）是 AI 工具调用外部工具的标准方式。将 HTML to Frames 作为 MCP 服务器连接后，你的 AI 工具会获得三个工具：

页面会进入你在 Figma 中已打开的插件，并按你自己的套餐导入，因此套餐的常规规则同样适用：每次导入的屏幕数、样式和变量、组件等。

AI 工具会收到什么

AI 不会拿到你的 Figma 文件。它收到的是工具调用的响应，确认页面已经交付，并且可以调用 import_status 查看该导入的进展。真正的设计工作发生在 Figma 的插件里：你会看到结果页面，其中列出框架、图层、自动布局占比以及各类警告。这是有意为之：插件不会读取你的 Figma 文件内容，因此你文件中的任何信息都不会回流给 AI。

设置：在插件的 AI 标签页连接你的 AI 工具

每个 AI 客户端只需设置一次，一切都从插件开始。

1. 在 Figma 中打开 HTML to Frames，进入 AI 标签页。
2. 获取你的令牌。 AI 标签页会提供一个连接令牌，请像对待密码一样保管它。
3. 选择你的客户端。 AI 标签页为支持的客户端提供可直接复制粘贴的设置。
4. 将设置原样粘贴到客户端中（各客户端的细节见下文）。
5. 重启或重新加载客户端，使其识别新的 MCP 服务器。
6. 工作期间保持插件在 Figma 中打开。页面会被发送到已打开的插件。

Claude Code

Claude Code 从其配置中读取 MCP 服务器。复制 AI 标签页为 Claude Code 提供的设置，并按说明运行或粘贴。然后开启一个新会话，让 Claude 列出它的工具；你应该能看到 import_html、import_url 和 import_status。

Claude Desktop

Claude Desktop 将 MCP 服务器保存在配置文件中，你可以从应用的开发者设置里打开它。把 AI 标签页中的代码片段粘贴到该文件，保存后完全重启 Claude Desktop。在新对话的工具菜单中即可看到这些工具。

Cursor

Cursor 在设置中列出 MCP 服务器。使用 AI 标签页中的代码片段添加新服务器，保存，并确认该服务器显示为已连接且有三个工具。

其他任意 MCP 客户端

只要你的工具支持 MCP，就适用同样的令牌和设置。使用 AI 标签页中的通用设置，并根据你的客户端注册服务器的方式进行调整。

暂不支持：claude.ai 网页版连接器

claude.ai 网页版连接器（OAuth）暂不支持。 如果你使用的是浏览器版 Claude，请在那里生成 HTML 并保存，然后通过插件的 Local file 或 Paste code（粘贴代码）来源导入。或者把任务转到 Claude Code 或 Claude Desktop，它们目前已可通过 MCP 连接。

隐私：你的令牌和页面会怎样处理

AI 工作流自然会引发代码和设计流向何处的疑问。以下是该连接的处理方式：

• 你的连接令牌仅以哈希形式存储。 服务可以校验它，但不会保存令牌本身。
• 页面在内存中最多等待 30 分钟。 如果你的插件在此期间没有取走页面，页面就会被清除。
• 渲染在隔离的沙盒浏览器中进行。 结果只交付一次，随后从内存中删除，绝不写入磁盘。
• 插件、扩展和网站中没有 Cookie、分析或跟踪像素。
• 我们从不会从 Figma 获取你的姓名或邮箱；账户标识由你的 Figma 用户 id 派生。

完整说明请见安全页面。

值得了解的限制

• HTML 大小： import_html 最多接受 2 MB。尽量少内联大型 base64 图片，能用托管图片链接时就用链接。
• import_url 仅支持公开 URL。 如果 AI 的预览运行在 localhost 上，可以让 AI 直接用 import_html 发送 HTML，或者用 Chrome 扩展捕获正在运行的页面——它支持 localhost 和需要登录的页面。
• 套餐用量照常计算。 每个页面在你的套餐中计为一次导入。Free 每月 10 次导入、每次 1 个屏幕；Pro 和 Team 在合理使用范围内不限次数，每次导入最多 4 个屏幕。详见价格。
• 转换规则与其他页面相同。 iframe、WebGL 画布以及没有封面图的视频会以其区域的截图图片形式导入。倾斜（skew）和 3D 变换暂不转换。

可以试试的提示词

连接完成后，像平常一样与 AI 对话，并告诉它把结果发送到 Figma。以下提示词效果不错：

1. “用纯 HTML 和 CSS（flexbox）做一个包含三个档位的价格页，然后用 import_html 发送到 Figma。”
2. “把你刚做好的设置页面的 CSS 内联，然后导入 Figma，再检查 import_status。”
3. “我们的预发布站点在这个公开 URL。用 import_url 把价格页和注册页导入 Figma。”
4. “为这个首屏区块做两个变体，一个标题左对齐，一个居中，分别作为单独的导入发送到 Figma。”
5. “用 CSS 自定义属性重写这个卡片网格的颜色，然后导入，让变量一并生成。”

让 Figma 输出更干净的提示技巧

稍微引导一下 AI 的 CSS 写法，导入效果会更好：

• 要求使用 flexbox 和 grid，并用 gap 代替兄弟元素之间的 margin。它们能干净地映射为自动布局；参见 CSS flexbox 和 grid 转自动布局。
• 要求颜色使用 CSS 自定义属性。开启 Styles & variables（样式与变量，Pro）后，--brand-primary 会变成 brand/primary 变量。
• 要求使用真实文本，而不是烘焙进图片里的文字，这样每个标题都保持可编辑。
• 要求每次导入一个页面；冗长的多屏文档更难评审。

设计与代码的闭环

真正的价值不在于一次导入，而在于形成一个让设计和代码不再脱节的循环。

1. 提示： AI 用代码构建第一版。
2. 导入： AI 用 import_html 或 import_url 将其发送到 Figma。
3. 在 Figma 中评审： 设计师借助自动布局框架调整间距、字体、颜色和布局，添加评论并探索替代方案。
4. 把修改反馈回去： 告诉 AI 改了什么，或粘贴相关数值，让它更新代码。
5. Re-import（重新导入），确认代码已经一致，并与之前的框架进行对比。

谁会受益

• 设计师不再手工重绘 AI 原型，而是从可编辑框架起步。
• 前端开发者无需导出截图，就能针对真实产出进行设计评审。
• 产品经理可以把一个提示词变成可评审的 Figma 页面，用于干系人会议。
• 独立开发者能在同一个文件中保留每次迭代的可视记录。

AI to Figma 与其他方式对比

三种插件方式使用的是同一个引擎。MCP 只是省去了复制粘贴这一步，让 AI 来主导。自动布局是经过校验的：每个子元素的位置都会以 2 px 的容差进行检查；如果某个布局不成立，就会尝试更简单的方案，否则该框架保留绝对定位。设计永远不会被破坏。详见自动布局详解。

故障排查

• AI 提示工具不可用。 添加服务器后请重启客户端，并检查代码片段是否原样粘贴。
• 导入始终没有出现。 确认插件已在 Figma 中打开。页面最多等待 30 分钟，在此期间打开插件即可取到页面。
• 令牌被拒绝。 在 AI 标签页生成新令牌，并更新客户端的设置。
• 布局看起来不对。 查看结果页面的诊断信息，它会说明某个框架为何保留绝对定位；然后让 AI 对该区块改用 flexbox 或 grid。

开始使用

打开插件，进入 AI 标签页，先连接一个客户端。让你的 AI 工具构建一个小组件并发送到 Figma，在用于完整页面之前先看看它的表现。文档介绍了 AI 标签页，功能列出了导入支持的全部内容。