Cursor + Claude 3.7 Sonnet：直接生成可编辑Figma设计稿

UP主: Next蔡蔡 · 时长: 2:28 · 🔗 B站原视频

发布: 2025-03-05 · 收录: 2025-03-24

标签: Cursor · Claude 3.7 · Figma · UI设计 · AI应用

开场：Cursor + Claude 3.7 Sonnet 直接生成可编辑 Figma 设计稿

这份设计稿是由 Cursor 加 Claude 3.7 Sonnet 生成的，而且直接就能在 Figma 上编辑。普通人和设计师之间的距离再次被拉近了。

Hello，各位精神股东们。今天是 Cursor 系列课程的第 25 课。

背景：第 24 课的问题与这次要解决的事

在第 24 课，我分享了怎么用 Cursor 加 Claude 3.7 Sonnet 快速生成一整套产品原型图或 UI 稿。由于生成的产品原型图和 UI 稿都是用 HTML 承载的，如果要转成可用的代码，需要再截图丢给 Cursor 去二次生成，这种方法有点麻烦。

所以我又折腾了一天，发现借助 Vercel 和一个 Figma 插件，就能将 HTML 直接转成可编辑的 Figma 设计稿。接下来分享完整教程。

第一步：用 Cursor + Claude 3.7 Sonnet 生成 HTML 原型图

用 Cursor 加 Claude 3.7 Sonnet 生成一套 HTML 格式的原型图或 UI 稿。这一步已经在第 24 课分享过了，这里不赘述。

然后我们会得到一个用 HTML 承载的产品原型或 UI。注意此时的地址还是本地链接。

第二步：把 HTML 网站免费部署到 Vercel 上

考虑到一些新朋友可能还不太清楚网站部署流程，这里简单介绍。

首先注册 GitHub 账号，并创建一个新仓库。新建仓库需要配置的选项不多，唯一需要注意的是仓库要选择 Public，这样就可以免费使用。

接着在 Cursor 终端进行 Git 初始化，具体怎么进行 Git 初始化可以查看 Cursor 第 7 课，这里不赘述。完成这一步后，大家就可以在自己的 GitHub 仓库看到刚才推送上去的代码。

接下来将网站部署到 Vercel 上。之所以要先部署网站，是因为第三步用 Figma 插件将 HTML 转成设计稿需要用到线上地址。之所以选择 Vercel，是因为 Vercel 可以免费部署，而且不用走备案，是目前最方便快捷的部署方式。毕竟我们的目的不是要真正上线一个网站，而是要借助部署后的线上地址进行 HTML 转设计稿。

用前面注册好的 GitHub 账号登录 Vercel，这样就能实现两个账号仓库的快速互通。接着在 Vercel 上创建一个新项目，导入刚才在 GitHub 上的项目。导入成功后，点击底部的 Deploy，就完成部署上线了。

注意对比最初的 HTML 本地链接：现在我们拥有的是一个在线链接，第三步会用到。

第三步：用 Figma 插件把 URL 导入成可编辑设计稿

在 Figma 插件社区中，有一个可以实现将 HTML 转化成 Design 的插件，叫做 HTML to design。

在 Figma 中前往插件菜单，搜索并启动 HTML to design。在插件里输入要导入到 Figma 的网站 URL，也就是我们在第二步得到的地址，然后点击 Import。

大概等 2 分钟，就能得到可以编辑的 Figma 文件了。文字、图形、组件等都可以二次编辑。

PS：免费版 Figma 每个月最多可以导入 10 个网站。

结尾

Cursor 第 25 课就到这里了，我们第 26 课见。