基于 Cursor 和 Claude 生成 APP 原型 UI 设计稿

背景

对于大部分工作三年的开发者来说，技术栈不再是瓶颈，从一门语言到另一门语言，从一个技术栈到另一个技术栈，只需要投入一两周的时间就可以快速入门。从前端、移动端到后端，甚至数据分析、算法，从 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 中提供的 Claude 能力，具体选用看大家喜好。我们这里以 VS Code 中 GitHub Copilot 为例，接下来输入提示词：

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

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

效果示意图