「滴滴打人」APP上线：Claude 3分钟生成原型图，Cursor15分钟完成开发

———— / BEGIN / ————

今天要跟大家分享一个震惊我三观 的亲身经历：我用Claude 3.7生成了一个”滴滴打人”APP的原型图，然后用Cursor在15分钟内就完成了开发！！！这波操作直接让我看到了产品经理失业 的未来…😱

（别紧张，”滴滴打人”只是个教学案例，不是真要开发打人APP，我还不想进局子🤣）

💥 事情是这样的…

前两天我在研究Claude 3.7的能力，突发奇想：既然它能写代码，能不能直接设计APP原型图？

于是我丢给它这样一个魔性需求：设计一个”滴滴打人”APP，用户可以在上面下单找人去揍人，其他用户可以接单。风格参考滴滴打车。

结果Claude直接…人已麻…🤯

三分钟！！！仅仅三分钟，它就吐出了一整套HTML代码，渲染出了包含下单页面、下单详情页面和订单详情页面的完整原型！

看到这个原型图，我下巴都掉了！这也太专业了吧？完全可以拿去给开发团队直接做了好吗！

🚀 Claude 3.7 的超强理解与长输出

之前我已经介绍过Claude3.7的新特性，果然很强。

例如这次我给的提示词（Prompt）相当简单：

我想开发一个「滴滴打人」ios app，用户可以在上面下单找别人去揍人，而其他用户也可以在上面接单。现在需要输出原型图，请通过以下方式帮我完成app所有原型图片的设计。
1、思考用户需要「滴滴打人」app实现哪些功能，样式上可以参考「滴滴打车」
2、作为产品经理规划这些界面
3、作为设计师思考这些原型界面的设计
4、使用html在一个界有一说一，我已经玩了1年的AI编程，不论是Deepseek还是Grok，都无法动摇 Claude在编程领域的地位。

⚡ Cursor：15分钟从原型到代码

有了原型图，接下来就是开发了。可以参考我这篇文章学习Cursor怎么入门。

直接用里面的「Agent」功能，只需要把Claude生成的HTML原型图丢给它，然后说：请基于这个原型图，使用React Native开发一个完整的滴滴打人APP

然后…就等待神奇的事情！Cursor的AI agent会自动：

1. 分析原型图结构

2. 规划开发步骤

3. 设计合理的文件结构

4. 编写所有必要的组件

5. 实现页面之间的导航逻辑

遇到问题了怎么办？直接问Agent！比如：　”这个地图组件如何实现？””如何处理订单状态变化？””能不能优化一下性能？”

Agent每次都能给出超详细的解决方案。正常来说15分钟左右，它就能完成一个最小闭环的开发。

———— / E N D / ————

本文来自微信公众号：饼干哥哥数据分析，作者：饼干哥哥