2026年五分钟!Cursor+Claude3.7直接生成一整套APP原型图UI稿(附完整教程)

五分钟!Cursor+Claude3.7直接生成一整套APP原型图UI稿(附完整教程)大家好 我是苍何 不瞒你说 在 AI 编程刚兴起那会 体验过一段时间的 Cursor 自动编程 觉得效果也就一般 甚至觉得天天鼓吹这玩意多牛逼的是傻逼 但当我在 X 上看到最近用 Cursor Claude3 7 的那帮老哥们的作品 我才发现原来自己是傻逼 轻轻丢给 Claude 3 7 一张设计图 迅速就能生成一个这么酷炫的可视化页面 还有更绝的 直接用 Cursor Claude

大家好,我是讯享网,很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。



大家好,我是苍何。

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

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

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

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

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

五分钟!Cursor+Claude3.7直接生成一整套APP原型图UI稿(附完整教程)_#ui

五分钟!Cursor+Claude3.7直接生成一整套APP原型图UI稿(附完整教程)_#Cursor_02

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

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

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

五分钟!Cursor+Claude3.7直接生成一整套APP原型图UI稿(附完整教程)_#claude_03

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

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

五分钟!Cursor+Claude3.7直接生成一整套APP原型图UI稿(附完整教程)_#Cursor_04

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

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

五分钟!Cursor+Claude3.7直接生成一整套APP原型图UI稿(附完整教程)_#人工智能_05

浏览器中打开后效果:

五分钟!Cursor+Claude3.7直接生成一整套APP原型图UI稿(附完整教程)_#人工智能_06

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

最后出来效果:

五分钟!Cursor+Claude3.7直接生成一整套APP原型图UI稿(附完整教程)_#人工智能_07

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

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

五分钟!Cursor+Claude3.7直接生成一整套APP原型图UI稿(附完整教程)_#Cursor_08

这是我的提示词:

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

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

五分钟!Cursor+Claude3.7直接生成一整套APP原型图UI稿(附完整教程)_#claude_09

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

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

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

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

好啦,以上全文 2880 字,9 张图,如果这篇文章对你有用,可否点个关注,给我个三连击:点赞、转发

小讯
上一篇 2026-04-02 12:41
下一篇 2026-04-02 12:39

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/226364.html