AI全栈之路：Cursor+Claude3.7一整套APP原型图UI生成_claude cursor

背景

对于大部分工作三年的开发者来说，技术栈不在是瓶颈，从一门语言到另一个门语言，从一个技术栈到另一个技术栈，只需要投入一两周的时间就可以快速入门，从前端、移动端到后端，甚至数据分析，算法，从TS、Java、GO到C++，有了一门技术的基础再学习另一门技术会快很多，很多时候缺乏的是实战了和规模化的用户经验，不过在AI时代，这都不是问题了。

AI IDE（Cursor、trae）可以让我们在只使用自然语言描述需求后快速帮助我们实现对应端的工程代码，还可以帮助我们实现部署。技术上的问题绝大部分都可以通过AI帮助我们解决。卡在我们全栈路上的另一个问题是UI设计稿的问题。对于前端或者移动端开发来讲，尤其是移动端，强依赖设计稿帮我们实现美观的应用。但是从工程师到UI设计师的迁移跨度就太大了，一时半会没有办法快速迁移。目前市面上虽然也有一些生成设计稿的AI工具，但是效果差强人意。本文我们介绍一种“曲线救国”方式的设计稿生成方式，帮助我们快速生成UI设计稿，进一步实现全栈开发运营自己的作品之路。

先上一张效果图：

Claude 生成骑行应用H5

Claude直接生成Figma等UI设计稿比较困难，但是可以使用提示词生成H5页面，再让H5页面转成Figma设计稿。

Claude API国内无法直接使用，我们可以使用Cursor，Trae或者Github Copilot中提供的Cluade能力，具体选用看大家喜好。我们这里已VSCode 中Github Copilot为例，接下来输入提示词：

你是一位全栈工程师，同时精通产品规划和UI设计，请根据下面需求文档生成设置移动端的html网页，页面扁平，图标精致# 产品需求文档（PRD）## 项目名称骑士圈 — 专业骑行社交与路线推荐App## 一、项目背景## 二、产品目标## 三、核心用户群## 四、功能模块设计### 4.1 路线推荐模块### 4.2 轨迹记录模块### 4.3 社交互动模块### 4.4 路线上传与审核模块### 4.5 用户个人中心

接下来根据提示，AI帮我们自动生成工程代码：

针对页面中问题通过Chat模式与Claude交互自动帮助我们改正。生成出完整页面工程后可以在浏览器中预览，根据需求继续调整页面内容。

H5页面转Figma设计稿

部署静态页面

H5页面生成完成后可以借助Figma的一款插件实现H5转设计稿的能力。在使用插件前需要先将H5部署到云端，让别人可以访问到。这里我们借助vercel，vercel可以将我们Github上面的项目直接进行远程部署。

首先将代码上传到github，这里不再赘述。上传完成后使用github账号登录vercel，可以直接找到我们github项目：

选择我们上传的项目进行导入，导入完成后生成对应地址：

Figma插件安装

H5页面转换Figma设计稿，一来Figma插件html.to.design：

安装完成后打开插件输入我们刚才生成的页面地址，点击导入：

导入完成后就可以看到我们页面的标注等信息了：

当然也可以直接将设计稿交给Cursor，让Cursor生成移动端项目。

总结

本文针对全栈开发者面临的UI设计瓶颈问题，提出了一套AI驱动的设计稿生成方案。开发者可借助Cursor或GitHub Copilot调用Claude模型，通过自然语言描述生成骑行类H5页面代码，并在浏览器中实时调试优化。随后将代码部署至Vercel云端，利用Figma的「html.to.design」插件将网页URL直接转换为带标注的设计稿。这种“代码先行，逆向转稿”的曲线方案，有效解决了AI直接生成设计稿效果不佳的痛点，配合AI编程工具形成从需求到落地的完整工作流，大幅降低全栈开发中的设计门槛。