谷歌Gemini砸饭碗了,10分钟搞定了App全栈设计..
发布时间:2025-05-16 16:08 浏览量:2
这几天不管是我的公众号后台,还是绿泡泡的的私信都炸了!
一开始我以为也就两三个人,没想到啊,睡了一觉起来发现绿泡泡左下角的消息都不显示有多少条了,已经变成了三个"..."红点点了。
有群消息,有私信还有好友申请,多到我当时打开手机的时候嘴巴都能塞下一个乒乓球了。
有很多朋友的消息我还没来得及回复,在此给大家说一声抱歉,并且感谢大家对我的信任。
我也花了1个多小时的时间,点开看了每位朋友给我发的消息,发现大家的问题都比较集中,几乎都是,
"有没有可以搞定原型图设计的工具?","像 Gemini、Claude 这些 AI 工具被大家吹得很火,但我到底要如何使用才能帮我开发出一个小程序?"
这些问题也是我当时独立开发小程序的时候所遇到过的。
不满大家说,虽然我是一名 Java开发工程师,但需求挖掘、原型图设计以及前端的开发对我来说仍然是一个两眼抓瞎的领域..
毕竟,想要从一个模糊的想法,到清晰的需求,最后到能够变现的一个小程序/App,整个链路还是非常长的。
Gemini、Claude 等 AI 确实可以给我很大的帮助,但是如何去指挥他们系统的去设计一个产品,这个才是问题的关键。
抱歉抱歉,废话说的有点多了,还是转回今天这篇文章的主题 - 快速且系统的带大家从0到1,设计一个完整的产品。其中包括商业变现模式、数据库 SQL 语句以及 UI/UX 原型图设计。
我们直接使用 Gemini-2.5-Pro-0506 开始操作。
输入我们的提示词,Gemini 问了我 4 个问题,帮我梳理我的需求。
最近女朋友一直说自己已经 56kg 了,要玉玉了.. 虽然我觉得 56kg 相当于她 168 的身高一点也不重,但还是给她设计一个定制化专门用于个人减肥的 App 吧。
最最核心的功能就是可以生成个性化的健身减肥计划,充当私教的角色。
不然市面上像 Keep 等软件都可以达到这个效果和目的,那还开发了干嘛..
Gemini 复述了一遍我的需求,这样做的好处是,可以让 AI 和我们自己对于这个产品需求的理解始终保持一致。
从而去避免 AI 需求理解有偏差,实际开发下来和我们自己的想法产生分歧,最后导致返工然后挨骂..
接下来我们进入到第二步,让 AI 帮我们挖掘其他的需求。
奈何不是专业的产品经理,除了想到的核心功能外其他的就一个登录注册还有开会员哈哈。
Gemini 帮我挖掘了很多没有想到的需求,但目前并不在我 MVP 当中,暂时放弃,留着后面迭代的时候加上。
还别说,Gemini 确实是目前最好用模型,考虑的就是周到。
我只给了个大概,Gemini 就帮我明确了更加细节的需求,只能说牛逼!
补充完细节后,Gemini 再次和我确认,然后我们直接进入第三步 - 技术架构的设计!
这一步我相信肯定会难倒很多非程序员朋友。
毕竟开发语言真的太多了.. 前端后端各种各样的语言层出不穷。
这里我直接装 0 基础小白,让 Gemini 给我推荐最方便且最容易上手的方案。
说实话,我红框标注的部分,我在很多 AI 上都没有对我的想法提出疑问。都是按照 AI 自己的理解,然后就帮我把整体的方案给敲定了..
Gemini 真的越来越有贾维斯的感觉了。
确定了技术方案和核心功能的实现,Gemini 又对我发出了质疑。
很好很好,我就喜欢这样打破砂锅问到底的"员工"。
我再次确认的部分就不给大家演示了,接下来我们进入到第四步 - 商业模式。
无法变现的 App 或者小程序只能是为爱发电了,尤其是涉及到需要调用大模型 API 的..
别说,基于平台和产品的角度去考虑,Gemini 给出的变现模式还真不错。
并且最后也给出了 4 个方案,方案B对于 App/小程序 的起步阶段来说是非常合适的,所以我选择方案B。
接下来进入第五步 - 数据库设计。
根据前面的设计,我们的数据是存储在本地的,所以不需要后端的数据库,但前端需要存储一定的数据。
Gemini 贴心的帮我们设计了每张"表"的存储结构,也解释了每张表的用途,最后还给出了"表"对应的 SQL 语句。
虽然我们目前不需要数据库,但当 App/小程序体量大了以后还是需要在后端存储数据,所以 Gemini 提前帮我们设计好还是很有必要的。
接下来到我们的第六步,也是倒数第二步了 -UI/UX 原型图设计。
这一步 AI 先生成了整体的设计方案,设计理念、布局方案、交互设计等都有涉及。
接下来是每个页面的设计方案,总共 6 个页面,不一一给大家展示了。
我们确认满意后,Gemini 开始帮我们逐个生成对应的前端页面代码。
给大家看看核心页面的效果展示,AI 完整的代码生成过程和其他原型图可以到我末尾的文档里面去查看。
今日计划:
完整计划:
个人中心:
主要的设计特点 AI 还是会按照我们提示词的要求帮我们总结,如果有需要调整的地方,直接告诉它修改就行。
现在进入到我们的最后一步 -第七步,以 MarkDown 的格式生成一份完整的文档,然后放到 Cursor/Trae 里面就彻底大功告成了!
抛去 AI 输出的时间,整个过程也只花费了我十多分钟的时间。
但产品的需求梳理、需求的深度挖掘、构建技术架构、商业模式的规划、数据库设计、打造高保真UI/UX原型图和最终的详细MarkDown文档,都用一套提示词完成了。剩下的 30% 交给 Cursor 就 ok 了。
Gemini 真的很牛逼,不管是对需求的挖掘,还是对细节的抓取,都是一绝。强烈建议大家用 Gemini 去设计和开发。
来源 | 阿伦AI工具库(ID:gh_acf54dbf8bb6)
作者 | 艾伦 ; 编辑 | 呼呼大睡
内容仅代表作者独立观点,不代表早读课立场