之前我跟大家聊过使用一些 AI 工具，比如 cursor、v0 和 TRAE 来绘制原型的经验，今天想再跟大家分享一下：如何用 Claude 生成高保真的原型。
对于那些想在已有产品基础上进行修改的原型设计，最靠谱的方法就是截图，然后让它参考这些图片来绘制。
不过，把图片变成代码的过程其实并不简单，模型只是把图片描述成文字，再根据这些文字生成代码，所以有时候会出现颜色、图标和文字大小不准确的情况。
这就导致我得不停地让模型重来一次，每次在已有产品上做改动时都得重新发截图和描述，生成的效果也总是千变万化。
直到最近我开始使用 Html to figma，竟然能够完美地将网页转换为设计图，再进一步转为代码。
这下真是解决了我两大烦恼：
- AI 生成的前端样式总是难看
- 想在已有产品上精确生成原型或 UI 设计，实在太难了
整个操作其实也就两个简单步骤：
一、用 Html to figma 插件复刻网页
1. 首先，下载 html to figma 的浏览器插件。
推荐使用 Chrome 浏览器，下载链接在这里：https://chromewebstore.google.com/detail/html-to-figma-by-demoway/amcccnldajjnngnaoinemnaloklogjak?hl=zh-tw
2. 接着，在 figma 里安装 html2figma 插件。
点开下面的链接，在 figma 里打开这个插件，就能把它和你的 figma 账号绑定起来。
https://www.figma.com/community/plugin/1385944139259302061/html-to-figma-convert-any-web-into-figma-support-ai-generated-page
3. 选择你想复刻的网页。
我这次选择了腾讯云的控制台，页面内容比较复杂，既有 B 端也有 C 端的特性。
进入页面后，点击浏览器右上角的 html to figma 插件。
选择 capture，插件会自动截取当前页面并上传到 figma 的插件里。
上传完成后，记得在 figma 中任意打开一个设计页面，将上传到 html2figma 的内容导入到这个页面。按照下图操作就好。
到这里，你就成功把网页导入到 figma 了。如果觉得不满意，可以在 figma 里直接修改导入的内容。
Html to figma 插件的免费版每周可以导入两个页面，付费版则没有限制。我自己用下来觉得两个已经足够，因为我负责的产品也就五个左右，想要复制别人设计的产品也不需要太多。
导入成功后，接下来就是第二个步骤：将设计转为代码。
二、用 V0 或 cursor 将设计转为代码
2.1 用 v0 复刻
设计转为代码，我常用的工具有 v0 和 cursor。
使用 v0 相对简单。在对话框左下角，点击连接 figma，输入 figma 画板的链接，按照下图的步骤操作即可。
1. 在 figma 左侧的画板目录中选择后，右键点击，选择“复制为选中链接”，如下图所示：
2. 将上面的链接发送给 v0，识别成功后，点击发送，就能让 v0 生成代码了。
2.2 用 cursor 复刻
如果用 cursor 来复刻，需要先配置 figma 的 mcp，这样 cursor 才能读取到 figma 的设计文件。
配置方式如下：
1. 获取 Figma Access Token：
- 打开 Figma 官网，点击左上角头像，选择“Settings”
- 在设置页面，切换到“Security”标签
- 滚动到“Personal access tokens”部分，点击“Generate new token”
- 输入名称，确保有 File content 和 Dev resources 的读取权限，点击生成
- 复制生成的 Token，后面需要用到
2. 将 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。
稍等片刻，最终生成的效果虽然少了一些图片，但整体布局和原版基本一致。
有了这个复刻出来的原型效果，cursor 基本上就能理解你们产品的设计规范，可以在此基础上继续修改，比如在顶部导航加个 AI 搜索按钮、设计管理视图弹窗的内容等。
我现在已经成功复刻了一个 demo，任何小功能添加或页面改动，都能直接在 cursor 里完成。
这个流程大概就是 AI 时代绘制原型图的标配了。将来可能会推出更标准化的产品，彻底改变原型设计、UI 设计，以及代码开发的整个流程。
我是空格，分享 AI 实践经验来提升个人效率和能力。欢迎点击阅读原文，加入 AI-PAC 社群。
