產(chǎn)品經(jīng)理親測(cè):3周用AI編程做出一個(gè)英語(yǔ)學(xué)習(xí)小程序
都說(shuō)普通人可以使用AI編程開(kāi)發(fā)產(chǎn)品了,作為產(chǎn)品經(jīng)理的我決定親自試一試,用AI給孩子做一個(gè)背單詞小程序。歷時(shí)3周,踩坑無(wú)數(shù),最終成功上線!分享我的真實(shí)經(jīng)歷、踩過(guò)的坑和核心結(jié)論:普通人能用AI做產(chǎn)品,但“零基礎(chǔ)”目前仍不現(xiàn)實(shí),編程的基礎(chǔ)知識(shí)和產(chǎn)品思維是關(guān)鍵加速器。
緣起:從“看熱鬧”到“動(dòng)手干”
今年3月份,在B站上看到了各種“AI編程”的視頻,都說(shuō)普通人可以用AI編程來(lái)做自己的產(chǎn)品了。我跟著教程做了幾個(gè)簡(jiǎn)單Demo后,我決定自己做一個(gè)能上線的產(chǎn)品。我有信心能做成功, 因?yàn)槲冶绕胀ㄈ藦?qiáng)點(diǎn),本身就是做產(chǎn)品的,而且我還自學(xué)過(guò)python和react的一些知識(shí),可以寫(xiě)簡(jiǎn)單的小功能。想來(lái)想去,最后決定給我女兒做一個(gè)背單詞的英語(yǔ)學(xué)習(xí)小程序“洛洛的學(xué)習(xí)工具”。我大概花費(fèi)了3周的時(shí)間完成了開(kāi)發(fā),主要是前后臺(tái)聯(lián)調(diào)浪費(fèi)的時(shí)間最多。
我的AI開(kāi)發(fā)流水賬
首先是需要先寫(xiě)提示詞,簡(jiǎn)單的描述一下需求,讓AI來(lái)跟根據(jù)你的需求寫(xiě)完整的prd需求文檔的。一次是肯定寫(xiě)的不好,需要不斷的調(diào)整。我這文檔也是一點(diǎn)一點(diǎn)完善的,文檔寫(xiě)的約詳細(xì),AI來(lái)寫(xiě)代碼的時(shí)候就更容易。
初期的時(shí)候,只做了一個(gè)“單詞閃卡”功能, 之后又新增加的“測(cè)一測(cè)”和“寫(xiě)一寫(xiě)”。需求文檔寫(xiě)完了后,在讓AI按照需求文檔生成小程序使用的API接口文檔,生成后也要自己檢查一下接口文檔的輸入和輸出參數(shù)是不是自己想要的,如果不是話,就繼續(xù)跟AI描述,讓他來(lái)修改文檔。直到你看到文檔大概沒(méi)有問(wèn)題了,就可以讓AI根據(jù)需求文檔來(lái)編寫(xiě)代碼了。
文檔完成后,就可以讓AI根據(jù)文檔先生成一般html的原型圖,看看和自己想想中的樣子是否一樣,如果不一樣就在寫(xiě)提示詞優(yōu)化原型圖,畢竟優(yōu)化原型圖會(huì)比較簡(jiǎn)單。
原型圖滿意后,就可以讓AI開(kāi)始寫(xiě)代碼了,這中間的過(guò)程是比較曲折的,各種的聯(lián)調(diào),各種的改。下面給大家分享一下做每個(gè)功能時(shí)候的大概流程。
小程序的核心功能
說(shuō)一下小程序中的功能,這個(gè)小程序里面有24種主題單詞。每種主題里面都包含三種學(xué)習(xí)單詞的方式。
第一種,“單詞閃卡”功能
這些單詞的圖片 都是使用coze的工作流來(lái)批量生成的。
左右滑動(dòng)圖片可以切換單詞閃卡。這個(gè)左右滑動(dòng)的效果,滑動(dòng)時(shí)圖片傾斜的角度,以及滑動(dòng)的位置,漸變的消失位置,我是嘗試寫(xiě)了好幾次提示詞,最終才實(shí)現(xiàn)的。感興趣的可以看首圖有小程序碼體驗(yàn)一下。?在寫(xiě)提示詞的時(shí)候,要想用AI來(lái)實(shí)現(xiàn)好的效果,必須要有一些做產(chǎn)品的知識(shí),否則你都不知道該怎么表達(dá)你的意圖。
錄音和播放錄音的交互效果,也是調(diào)試了很多次。有時(shí)候不光是要寫(xiě)提示詞實(shí)現(xiàn)功能, 還有一些需要了解的交互設(shè)計(jì)的知識(shí),如何讓用戶錄音和播放體驗(yàn)更好。
第二種,“單詞測(cè)一測(cè)”功能
這個(gè)功能相對(duì)簡(jiǎn)單,選擇圖片上對(duì)應(yīng)的單詞,選錯(cuò)了后,會(huì)錯(cuò)誤的提示。在答題完成后,有個(gè)的統(tǒng)計(jì)頁(yè)面。但是因?yàn)闆](méi)有做用戶相關(guān)的功能,這些錯(cuò)誤的單詞也沒(méi)有存儲(chǔ),用戶沒(méi)有辦法看到打錯(cuò)的題,等有空增加一下用戶相關(guān)的功能吧。
第三種,“單詞寫(xiě)一寫(xiě)”功能
單詞圖片下面是打亂的字母排序,按單詞正確順序點(diǎn)擊字母,選錯(cuò)字母的話,當(dāng)前位置的橫線會(huì)閃動(dòng)變紅色, 拼寫(xiě)成功后會(huì)顯示“下一題”的按鈕。這里有個(gè)小問(wèn)題,當(dāng)單詞比較長(zhǎng)的時(shí)候,字母選項(xiàng)就多,看著有點(diǎn)亂,應(yīng)該是當(dāng)字母特別長(zhǎng)的時(shí)候,默認(rèn)已經(jīng)填寫(xiě)了幾個(gè)字母,這樣看起來(lái)會(huì)比較好一些。
我們?cè)诳匆韵鹿芾韱卧~的后臺(tái)功能
最早我是用了一個(gè)python腳本去批量生成單詞和圖片,后來(lái)維護(hù)起來(lái)太麻煩了,就又搞了一個(gè)管理后臺(tái)。 當(dāng)時(shí)是用Claude 3.5,它還不是那么強(qiáng)大,搞個(gè)前后臺(tái)聯(lián)調(diào)的項(xiàng)目很麻煩,經(jīng)常報(bào)錯(cuò),有時(shí)候調(diào)試幾個(gè)錯(cuò)誤就需要消耗1個(gè)賬號(hào)的免費(fèi)額度。
“管理主題”頁(yè)面??梢宰约涸鰟h改查主題分類。
“管理單詞”頁(yè)面。這些單詞都是coze批量生成的,如果對(duì)哪個(gè)單詞的圖片不滿意,可以自己再單獨(dú)生成更合適的圖片。
“批量導(dǎo)入”功能。 把這個(gè)json示例扔給Deepseek,或者其他AI工具,讓他生成類似的json格式。然后把生成的json數(shù)據(jù),放入到輸入框中,點(diǎn)擊“處理數(shù)據(jù)”按鈕就可以批量生成對(duì)應(yīng)的主題和單詞。
再看一下coze的工作流功能
工作流的輸入是一個(gè)英語(yǔ)單詞,然后分成兩個(gè)主要的分支,一個(gè)是把單詞生成發(fā)音,另一個(gè)是根據(jù)單詞生成圖片內(nèi)容。最后輸出的結(jié)果是個(gè)json結(jié)構(gòu),包含單詞、發(fā)音、圖片。
這個(gè)工作流是可以發(fā)布成API的,這樣我們就可以使用程序去批量生成圖片,不用在coze里面,一個(gè)一個(gè)生成圖片。
部署上線
所有功能都做好了以后,測(cè)試沒(méi)有問(wèn)題了, 就需要把后端的代碼部署到服務(wù)器了。我是買(mǎi)了一個(gè)京東云最低配置,促銷價(jià)首頁(yè)年28塊錢(qián),網(wǎng)絡(luò)速度不是很快,訪問(wèn)個(gè)幾十k左右的圖片都有點(diǎn)慢。 在服務(wù)端是裝了個(gè)寶塔來(lái)操作服務(wù)器。先把后端項(xiàng)目打包上傳到文件中,然后創(chuàng)建一個(gè)python項(xiàng)目指向這個(gè)文件目錄。 因?yàn)閿?shù)據(jù)量很小,所以我也沒(méi)有用數(shù)據(jù)庫(kù),所有的數(shù)據(jù)都是存在一個(gè)json文件中。 等加上用戶系統(tǒng)后,再更換成數(shù)據(jù)庫(kù)吧。初學(xué)者就是先能用就行,怎么簡(jiǎn)單,怎么來(lái)吧。
小程序端的代碼,上傳到小程序后臺(tái)來(lái)發(fā)布。如果只是自己訪問(wèn),申請(qǐng)小程序個(gè)人號(hào)就行, 也不需要認(rèn)證,也不需要備案。如果想被搜索到,那就需要認(rèn)證了,個(gè)人賬號(hào)認(rèn)證費(fèi)用每年30塊錢(qián)。
小程序備案,初審是微信的審核員來(lái)審核,他們審核的要求非常嚴(yán)格,小程序名字最好起得普通一點(diǎn),就比較容易審核通過(guò)。初審?fù)ㄟ^(guò)后會(huì)提交給管局審核。我的小程序的名字原來(lái)是叫“洛洛愛(ài)上背單詞”,但是備案的時(shí)候,不允許有任何學(xué)科類的名詞,無(wú)奈,只能改成叫“洛洛的學(xué)習(xí)工具”了。
基本上這個(gè)產(chǎn)品算真正上線了, 普通人可能要經(jīng)歷非常多的挫折才能上線成功。這也僅僅是上線了,想要靠這個(gè)賺錢(qián),離的還很遠(yuǎn)。
通過(guò)做這個(gè)產(chǎn)品得出的結(jié)論是, 一個(gè)沒(méi)有任何代碼基礎(chǔ),和互聯(lián)網(wǎng)產(chǎn)品知識(shí)的人,要想做一個(gè)真正意義上的產(chǎn)品,可能使用目前的AI還是很困難的,需要首先去學(xué)習(xí)一些產(chǎn)品、技術(shù)的基礎(chǔ)知識(shí), 但是比沒(méi)有AI之前要簡(jiǎn)單太多了。
現(xiàn)在AI編程大模型進(jìn)化的速度非??欤杏X(jué)每個(gè)月都有驚喜。 這個(gè)項(xiàng)目是我4月份寫(xiě)的,當(dāng)時(shí)用的Cursor,模型還是Claude 3.5,估計(jì)寫(xiě)這個(gè)項(xiàng)目用了10多個(gè)賬號(hào)的免費(fèi)額度。現(xiàn)在已經(jīng)是Claude4.1了,比之前強(qiáng)了很多,而且還有涌現(xiàn)出其他的優(yōu)秀的大模型。編輯器也同樣重要,同樣是Claude4的模型,Cursor和 Augment ?就要比 Trae強(qiáng)一些,據(jù)說(shuō)是因?yàn)樯舷挛墓芾砀靡恍?現(xiàn)在國(guó)外的軟件無(wú)論是Cursor,還是Augment ?在國(guó)內(nèi)使用起來(lái)都非常麻煩了。 要想獲得更好的效果,只能等待國(guó)內(nèi)的大模型和編輯器進(jìn)步了。
本文由 @還有點(diǎn)夢(mèng)想的中年P(guān)M 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可,禁止轉(zhuǎn)載
題圖來(lái)自Unsplash,基于CC0協(xié)議
- 目前還沒(méi)評(píng)論,等你發(fā)揮!