AI to Figma：把 Claude 或 Cursor 生成的界面发送到 Figma

模型上下文协议（MCP）是一项开放标准，让 AI 工具能够调用外部工具。HTML to Frames 将其导入功能作为 MCP 服务器提供，因此任何支持 MCP 的客户端都可以把页面发送到 Figma。

获取连接信息

在 Figma 中打开 HTML to Frames，进入 AI 标签页。这里会显示你的个人令牌以及适用于你客户端的可复制配置，无需手动编写配置。

Claude Code

使用 AI 标签页中的配置添加服务器，然后让 Claude 把它正在构建的页面发送到 Figma。Claude 会用文件内容调用 import_html。

Claude Desktop

使用提供的配置片段将服务器添加到 Claude Desktop 的 MCP 配置中；如果应用没有识别到更改，请重启应用。之后 HTML to Frames 的工具就会出现在对话中。

Cursor

在 Cursor 的 MCP 设置中用相同的信息添加服务器。之后，你在编辑器中工作时，智能体就可以导入生成的页面或 URL。

其他 MCP 客户端

任何支持 MCP 服务器的客户端都可以用同一令牌连接。请注意，目前尚不支持使用 OAuth 的 claude.ai 网页连接器。

各客户端的具体步骤会在文档中持续更新。

AI 生成的 HTML 往往在细节上不一致：每个按钮的蓝色略有不同，三个几乎相同的字号，间距相差几个像素。如果原样导入，就会变成一个杂乱的设计文件。HTML to Frames 提供的工具可以在导入过程中把它整理干净。

• 经过验证的自动布局。 生成的 CSS 中的 Flexbox 和 Grid 布局会变成自动布局框架，且每个子元素的偏差都在 2 px 以内，草稿易于重新排列。
• 样式和变量（Pro）。 重复使用的颜色和所有 CSS 自定义属性都会变成变量，并创建文字样式和阴影样式。
• Snap to my file's styles（对齐到我文件中的样式，Pro）。 与你的设计系统不完全匹配的值，会对齐到你现有最接近的颜色和文字样式，让 AI 草稿一进来就符合设计系统。
• 组件（Pro）。 重复出现的卡片、按钮和列表项会变成组件及其实例。

一个实用的循环是这样的：让 AI 生成布局，发送到 Figma，进行可视化调整，再把修改描述给 AI 进行下一轮迭代。每一轮都会生成新的框架，因此你可以在画布上保留版本历史。

由于导入使用的是你自己的套餐，限制与其他导入相同。详情见价格。

把 AI 工具连接到设计文件，自然会引发关于共享内容的疑问。以下是 MCP 连接的处理方式。

令牌

你的连接令牌在我们这边仅以哈希形式存储。请像对待密码一样对待它，不要放进共享代码仓库：客户端正是凭它向你的插件发送页面。

传输中的页面

AI 发送的页面会在内存中最多等待 30 分钟，直到你打开的插件将其取走。URL 导入使用与其他所有导入相同的隔离沙盒浏览器渲染，结果从不写入磁盘。

你的 Figma 文件

AI 无法通过此连接读取你的 Figma 文件。插件本身也不读取你文件的内容；它只写入新图层，并只读取其自身框架的元数据。

限制

• import_html 接受最大 2 MB 的 HTML。
• 必须在 Figma 中打开插件，页面才能送达。
• 每个页面计为套餐中的一次导入。
• 目前尚不支持 claude.ai 网页连接器（OAuth）。

完整的数据保留细节见安全页面。