首页 >发现

原型设计终极方案：Html to Figma + Cursor 完美复刻任意网页

我这两天开始上手 Html to figma，可以完美复制网页到设计图再到代码。

作者: 空格的键盘
分类:产品经验
28 次阅读

之前就分享过用 cursor、v0、TRAE 等 AI 代码工具来绘制原型的方法：用 Claude 生成高保真原型

其中对于在已有产品进行修改的原型设计，最好用的方式是截图，让其参考图片绘制。

但把图片转为代码，只是让模型把图片先描述为文字，然后再根据描述输出了代码，这个过程无法做到百分百复刻，比如颜色、icon、文字大小不准确。

经常需要让模型推倒重做，而且每次在原有产品做改动，都要发一遍截图和描述，每次生成效果也不同。

直到我这两天开始上手 Html to figma，可以完美复制网页到设计图再到代码。

image.png

基本上解决了我的两大难题：

  1. AI 出的前端样式都差不多丑
  2. 让 AI 在已有的产品上，做原型设或 UI 设计很难精确生成

整个操作可以总结为两大步骤：

一、用 Html to figma 插件复刻网页

1 下载 html to figma 浏览器插件

推荐使用 chrome 浏览器，下载地址：

https://chromewebstore.google.com/detail/html-to-figma-by-demoway/amcccnldajjnngnaoinemnaloklogjak?hl=zh-tw

image.png

2 在 figma 安装 html2figma 插件

点击下面链接，在figma 打开这个插件，就能让插件和 figma 账号做绑定。

https://www.figma.com/community/plugin/1385944139259302061/html-to-figma-convert-any-web-into-figma-support-ai-generated-page

image.png

3 选择一个你要复刻的网页

这里我选择的是腾讯云的控制台，它页面信息足够复杂，兼具 B 端和 C 端的属性。

进入页面后，点击浏览器右上角 html to figma 插件

image.png

选择 capture，插件将自动截取当前页面并上传到 figma 对应的插件里

image.pngimage.pngimage.png

上传完成后，还需要到 figma，任意打开一个设计页面，将上传到 html2figma 的插件导入到设计页面。按下图操作。

image.png

至此，就已经把一个网页导入进figma 了，如果觉得不满意，可以在 figma 直接修改导入的页面。

Html 2 figma 这个插件，免费版每周可以导入 2 个页面，付费无限制可捕捉导入多页面，我自己用下来觉得两个就够我用了，因为我自己负责的产品都不超过 5 个，想要 copy 别人的设计开发产品也用不了太多。

导入成功后，就进入第二大步骤了，把设计转为代码。

二、使用 V0 或 cursor 将设计转为代码

2.1 用 v0 复刻

设计转为代码，我常用的有 v0 和 cursor。

对于 v0 很简单，在对话框左下角点击连接 figma，输入 figma 画板的链接，按下图所示操作

image.png

  • 在figma 左侧画板目录选择后，右键菜单点击-复制为选中链接，如下图：

image.png

  • 将上面链接发送给 v0 ，识别成功后，点击发送，就能让 v0 生成代码。

image.png

2.2 用 cursor 复刻

用 cursor 复刻，需要在 cursor 配置 figma 的 mcp，这能够让 cursor 读取到 figma 的设计文件。

配置方式如下：

获取 Figma Access Token：

  • 打开 Figma 官网，点击左上角头像，选择「Settings」
  • 在设置页面，切换到「Security」标签
  • 滚动到「Personal access tokens」部分，点击「Generate new token」
  • 输入名称，确保有 File content 和 Dev resources 的读取权限，点击生成
  • 复制生成的 Token，后续配置需要用到

配置 MCP 服务器到 Cursor：

Cursor 支持通过 JSON 配置 MCP 服务器。将 Figma MCP 的配置添加到 Cursor 的 MCP 配置文件中。

配置内容如下（将 YOUR-KEY 替换为你的 Figma Token）：

{
"mcpServers":{
"Framelink Figma MCP":{
"command":"npx","args":[
"-y","figma-developer-mcp",
"--figma-api-key=YOUR-KEY",
"--stdio"
]}}}
  • 打开 Cursor 编辑器
  • 按 Cmd + Shift + P，输入 MCP，选择「Open MCP setting」
  • 将上面的 JSON 配置粘贴进去（如果已有内容，合并到 "mcpServers" 字段下）
  • 保存文件

配置成功后，同样的，复制 figma 的画板链接，发送给 cursor。

image.png

等待片刻，最后获取到的生成效果，少了一些图片，整体布局和原来基本一致。

image.png

有了这个复刻出来的原型效果，只需要一个页面，cursor 基本上就懂了你们产品的设计规范，可以在这个基础上继续修改，比如在顶部导航增加一个 AI 搜索的按钮、设计点击管理视图的弹窗显示的内容。

我现在已经实现，把自己做的产品完全复刻了一个 demo，任何小功能添加、小页面改动，直接在 cursor 里进行修改。

这个流程基本上就是 AI 时代绘制原型图的规范了。未来可能会推出更为标准化的产品，完全颠覆原型设计、UI 设计、代码开发的流程。


本文由公众号“空格的键盘”授权AI产品之家转载，原文连接： https://mp.weixin.qq.com/s/hzNqcvbThFG15hLpInVPWg