五分钟！Cursor+Claude3.7直接生成一整套APP原型图UI稿（附完整教程）_cursor生成ui设计原型图

大家好，我是苍何。

不瞒你说，在 AI 编程刚兴起那会，体验过一段时间的 Cursor 自动编程，觉得效果也就一般。

甚至觉得天天鼓吹这玩意多牛逼的是傻逼，但当我在 X 上看到最近用Cursor+Claude3.7 的那帮老哥们的作品。

我才发现原来自己是傻逼。

轻轻丢给 Claude 3.7 一张设计图，迅速就能生成一个这么酷炫的可视化页面。

还有更绝的，直接用 Cursor+Claude 3.7 生成 UI/UX 设计图。

我甚至低估了 Claude 3.7 的审美能力👍。

于是我忍不住亲自体验一番，不体验不知道，我真的只用 5 分钟直接生成一整套 APP 原型图UI稿。

比如我想开发一款 AI 情绪日记与生活助手 app，我只需要输入下面这段提示词到 Cursor 中：

你是一位全栈工程师，同时精通产品规划和UI设计。 我想开发一个AI情绪日记与生活助手app，现在需要输出完整的APP原型图，请通过以下方式帮我完成app所有原型图片的设计。 1、思考用户需要AI情绪日记与生活助手app实现哪些功能 2、结合用户需求，以产品经理的视角去规划APP的功能、页面和交互； 3、作为设计师思考这些原型界面的设计，并以设计师的视角去输出完整的UI/UX； 4、使用html在一个界面上生成所有的原型界面，文件命名为:canghe_app_prototype.html，可以使用FontAwesome等开源图标库，让原型显得更精美和接近真实 5、我希望这些界面是需要能直接拿去进行开发的

在0.46.8 版本中选择 Edit 模式，选择 Claude 3.7 Sonnet 模型，特别注意不要选择 agent 模式。

一开始会提示创建文件，别犹豫，点击他就会自动帮你生成一个. html 结尾的文件。

因为现在 Claude3.7 使用人数超多，中途如果遇到卡顿，可以发送：继续。

大概等了几分钟，就帮我生成好了，我只需要在浏览器中打开看看效果。

浏览器中打开后效果：

原型有了，我觉得有些丑，肯定是提示词哪里不大对，于是我优化了提示词后：

你是一位全栈工程师，同时精通产品规划和UI设计。 我想开发一个AI情绪日记与生活助手app，现在需要输出完整的APP原型图，请通过以下方式帮我完成app所有原型图片的设计。 1、思考用户需要AI情绪日记与生活助手app实现哪些功能 2、结合用户需求，以产品经理的视角去规划APP的功能、页面和交互； 3、作为设计师思考这些原型界面的设计，并以设计师的视角去输出完整的UI/UX； 4、使用html在一个界面上生成所有的原型界面，文件命名为:canghe_app_prototype.html，可以使用FontAwesome等开源图标库，让原型显得更精美和接近真实 5、引入tailwindcss来完成，而不是变成style样式，图片使用unsplash 我希望这些界面是需要能直接拿去进行开发的 6、使用iPhone标准尺寸作为基准（375px宽度），并确保所有元素都符合移动端的交互习惯。

最后出来效果：

nice，功能虽然不复杂，但这意味着什么？意味着你可以直接拿着这个原型让 cursor 继续生成 APP 代码，然后去 App Store 直接发布啦。

当然为了对比效果，我又去 MGX 上交给了 AI 开发团队来做这个事情，同样使用 Claude3.7。

这是我的提示词：

我想开发AI情绪日记与生活助手，你需要帮我实现这个系统，并通过以下方式帮我完成所有原型图片的设计： 1、思考用户需要AI情绪日记与生活助手实现哪些功能 2、结合用户需求，以产品经理的视角去规划系统的功能、页面和交互； 3、作为设计师思考这些原型界面的设计，并以设计师的视角去输出完整的UI/UX； 4、使用html在一个界面上生成所有的原型界面，文件命名为:canghe_app_prototype.html，可以使用FontAwesome等开源图标库，让原型显得更精美和接近真实 5、引入tailwindcss来完成，而不是变成style样式，图片使用unsplash 我希望这些界面是需要能直接拿去进行开发的 设计好原型后，请直接开始开发这套系统。

这里没有让做 APP，是因为目前 MGX 进支持开发网页系统。

但可惜，还没出结果就把额度用完了。

目前来看还是 Cursor+Claude3.7 的效果更强。

一顿操作下来，我承认了自己的傻逼，我乖乖的充了 pro，准备弃用原先那套编程的范式。

尝试一种全新的 AI 编程体验，我想未来或许会有更多的程序员吧，那个时候程序员的定义或许要被改为：

但凡会用 AI 编程的都可以算于程序员。

好啦，以上全文 2880 字，9 张图，如果这篇文章对你有用，可否点个关注，给我个三连击：点赞、转发和再看。若可以再给我加个⭐️。