這幾天不管是我的公眾號(hào)后臺(tái)，還是綠泡泡的的私信都炸了！

一開始我以為也就兩三個(gè)人，沒想到啊，睡了一覺起來發(fā)現(xiàn)綠泡泡左下角的消息都不顯示有多少條了，已經(jīng)變成了三個(gè)"..."紅點(diǎn)點(diǎn)了。

有群消息，有私信還有好友申請(qǐng)，多到我當(dāng)時(shí)打開手機(jī)的時(shí)候嘴巴都能塞下一個(gè)乒乓球了。

有很多朋友的消息我還沒來得及回復(fù)，在此給大家說一聲抱歉，并且感謝大家對(duì)我的信任。

我也花了1個(gè)多小時(shí)的時(shí)間，點(diǎn)開看了每位朋友給我發(fā)的消息，發(fā)現(xiàn)大家的問題都比較集中，幾乎都是，

"有沒有可以搞定原型圖設(shè)計(jì)的工具？"，"像 Gemini、Claude 這些 AI 工具被大家吹得很火，但我到底要如何使用才能幫我開發(fā)出一個(gè)小程序？"

這些問題也是我當(dāng)時(shí)獨(dú)立開發(fā)小程序的時(shí)候所遇到過的。

不滿大家說，雖然我是一名 Java開發(fā)工程師，但需求挖掘、原型圖設(shè)計(jì)以及前端的開發(fā)對(duì)我來說仍然是一個(gè)兩眼抓瞎的領(lǐng)域..

畢竟，想要從一個(gè)模糊的想法，到清晰的需求，最后到能夠變現(xiàn)的一個(gè)小程序/App，整個(gè)鏈路還是非常長的。

Gemini、Claude 等 AI 確實(shí)可以給我很大的幫助，但是如何去指揮他們系統(tǒng)的去設(shè)計(jì)一個(gè)產(chǎn)品，這個(gè)才是問題的關(guān)鍵。

抱歉抱歉，廢話說的有點(diǎn)多了，還是轉(zhuǎn)回今天這篇文章的主題 - 快速且系統(tǒng)的帶大家從0到1，設(shè)計(jì)一個(gè)完整的產(chǎn)品。其中包括商業(yè)變現(xiàn)模式、數(shù)據(jù)庫 SQL 語句以及 UI/UX 原型圖設(shè)計(jì)。

我們直接使用 Gemini-2.5-Pro-0506 開始操作。

輸入我們的提示詞，Gemini 問了我 4 個(gè)問題，幫我梳理我的需求。

最近女朋友一直說自己已經(jīng) 56kg 了，要玉玉了.. 雖然我覺得 56kg 相當(dāng)于她 168 的身高一點(diǎn)也不重，但還是給她設(shè)計(jì)一個(gè)定制化專門用于個(gè)人減肥的 App 吧。

最最核心的功能就是可以生成個(gè)性化的健身減肥計(jì)劃，充當(dāng)私教的角色。

不然市面上像 Keep 等軟件都可以達(dá)到這個(gè)效果和目的，那還開發(fā)了干嘛..

Gemini 復(fù)述了一遍我的需求，這樣做的好處是，可以讓 AI 和我們自己對(duì)于這個(gè)產(chǎn)品需求的理解始終保持一致。

從而去避免 AI 需求理解有偏差，實(shí)際開發(fā)下來和我們自己的想法產(chǎn)生分歧，最后導(dǎo)致返工然后挨罵..

接下來我們進(jìn)入到第二步，讓 AI 幫我們挖掘其他的需求。

奈何不是專業(yè)的產(chǎn)品經(jīng)理，除了想到的核心功能外其他的就一個(gè)登錄注冊(cè)還有開會(huì)員哈哈。

Gemini 幫我挖掘了很多沒有想到的需求，但目前并不在我 MVP 當(dāng)中，暫時(shí)放棄，留著后面迭代的時(shí)候加上。

還別說，Gemini 確實(shí)是目前最好用模型，考慮的就是周到。

我只給了個(gè)大概，Gemini 就幫我明確了更加細(xì)節(jié)的需求，只能說牛逼！

（理工科的宅男程序員脫口而出的最高夸贊..）

補(bǔ)充完細(xì)節(jié)后，Gemini 再次和我確認(rèn)，然后我們直接進(jìn)入第三步 - 技術(shù)架構(gòu)的設(shè)計(jì)！

這一步我相信肯定會(huì)難倒很多非程序員朋友。

畢竟開發(fā)語言真的太多了.. 前端后端各種各樣的語言層出不窮。

這里我直接裝 0 基礎(chǔ)小白，讓 Gemini 給我推薦最方便且最容易上手的方案。

說實(shí)話，我紅框標(biāo)注的部分，我在很多 AI 上都沒有對(duì)我的想法提出疑問。都是按照 AI 自己的理解，然后就幫我把整體的方案給敲定了..

Gemini 真的越來越有賈維斯的感覺了。

確定了技術(shù)方案和核心功能的實(shí)現(xiàn)，Gemini 又對(duì)我發(fā)出了質(zhì)疑。

很好很好，我就喜歡這樣打破砂鍋問到底的"員工"。

我再次確認(rèn)的部分就不給大家演示了，接下來我們進(jìn)入到第四步 - 商業(yè)模式。

無法變現(xiàn)的 App 或者小程序只能是為愛發(fā)電了，尤其是涉及到需要調(diào)用大模型 API 的..

別說，基于平臺(tái)和產(chǎn)品的角度去考慮，Gemini 給出的變現(xiàn)模式還真不錯(cuò)。

并且最后也給出了 4 個(gè)方案，方案B對(duì)于 App/小程序 的起步階段來說是非常合適的，所以我選擇方案B。

接下來進(jìn)入第五步 - 數(shù)據(jù)庫設(shè)計(jì)。

根據(jù)前面的設(shè)計(jì)，我們的數(shù)據(jù)是存儲(chǔ)在本地的，所以不需要后端的數(shù)據(jù)庫，但前端需要存儲(chǔ)一定的數(shù)據(jù)。

Gemini 貼心的幫我們?cè)O(shè)計(jì)了每張"表"的存儲(chǔ)結(jié)構(gòu)，也解釋了每張表的用途，最后還給出了"表"對(duì)應(yīng)的 SQL 語句。

雖然我們目前不需要數(shù)據(jù)庫，但當(dāng) App/小程序體量大了以后還是需要在后端存儲(chǔ)數(shù)據(jù)，所以 Gemini 提前幫我們?cè)O(shè)計(jì)好還是很有必要的。

接下來到我們的第六步，也是倒數(shù)第二步了 -UI/UX 原型圖設(shè)計(jì)。

這一步 AI 先生成了整體的設(shè)計(jì)方案，設(shè)計(jì)理念、布局方案、交互設(shè)計(jì)等都有涉及。

接下來是每個(gè)頁面的設(shè)計(jì)方案，總共 6 個(gè)頁面，不一一給大家展示了。

我們確認(rèn)滿意后，Gemini 開始幫我們逐個(gè)生成對(duì)應(yīng)的前端頁面代碼。

給大家看看核心頁面的效果展示，AI 完整的代碼生成過程和其他原型圖可以到我末尾的文檔里面去查看。

今日計(jì)劃：

完整計(jì)劃：

個(gè)人中心：

主要的設(shè)計(jì)特點(diǎn) AI 還是會(huì)按照我們提示詞的要求幫我們總結(jié)，如果有需要調(diào)整的地方，直接告訴它修改就行。

現(xiàn)在進(jìn)入到我們的最后一步 -第七步，以 MarkDown 的格式生成一份完整的文檔，然后放到 Cursor/Trae 里面就徹底大功告成了！

拋去 AI 輸出的時(shí)間，整個(gè)過程也只花費(fèi)了我十多分鐘的時(shí)間。

但產(chǎn)品的需求梳理、需求的深度挖掘、構(gòu)建技術(shù)架構(gòu)、商業(yè)模式的規(guī)劃、數(shù)據(jù)庫設(shè)計(jì)、打造高保真UI/UX原型圖和最終的詳細(xì)MarkDown文檔，都用一套提示詞完成了。剩下的 30% 交給 Cursor 就 ok 了。

Gemini 真的很牛逼，不管是對(duì)需求的挖掘，還是對(duì)細(xì)節(jié)的抓取，都是一絕。強(qiáng)烈建議大家用 Gemini 去設(shè)計(jì)和開發(fā)。

來源 | 阿倫AI工具庫（ID：gh_acf54dbf8bb6）

作者 | 艾倫 ; 編輯 | 呼呼大睡

內(nèi)容僅代表作者獨(dú)立觀點(diǎn)，不代表早讀課立場