在當(dāng)今快速發(fā)展的科技時(shí)代，AI技術(shù)的崛起為開(kāi)發(fā)者帶來(lái)了前所未有的機(jī)遇與挑戰(zhàn)。一方面，AI極大地降低了技術(shù)門(mén)檻，讓更多的創(chuàng)意得以快速實(shí)現(xiàn)；另一方面，它也提升了競(jìng)爭(zhēng)維度，促使人們?cè)谡J(rèn)知、方法和時(shí)間效率上不斷提升。本文將通過(guò)一個(gè)開(kāi)發(fā)者的真實(shí)經(jīng)歷，講述如何利用AI編程工具Trae開(kāi)發(fā)一款小程序，分享其中的靈感來(lái)源、開(kāi)發(fā)過(guò)程以及遇到的困難與解決方法。

前段時(shí)間，我和大家一樣，也有一些困惑和焦慮，主要是面對(duì)未知、面對(duì)不確定性風(fēng)險(xiǎn)時(shí)的決策困難——到底選A還是選B，遺憾的是，真實(shí)的人生，它沒(méi)法A/B測(cè)試呀！

我去找一個(gè)創(chuàng)業(yè)老哥聊天，他算是我的Life coach，在我迷茫是給到過(guò)我不少正確建議，這次我把自己的顧慮、困惑講完之后，他沒(méi)直接回答，而是先給我講了一個(gè)小故事：

他說(shuō)，他最近在和女兒玩《雙人成行》的游戲，這是一個(gè)解密類(lèi)的游戲，雙方配合尋寶拿到鑰匙，走出迷宮就能通關(guān)成功。

起初，他不敢往前走，生怕記不住來(lái)時(shí)的路。

但是，后來(lái)他發(fā)現(xiàn)，等你真的拿到鑰匙之后，原本空蕩蕩地腳下會(huì)出現(xiàn)新的道路，你根本沒(méi)必要被原先的路徑所困擾。

別焦慮、別回頭，只管往前走，新的機(jī)會(huì)一定會(huì)跟著你的努力而出現(xiàn)。

這對(duì)我有很大的啟發(fā)，類(lèi)似于enlightenment（頓悟）。

其實(shí)，我知道很多同學(xué)在面對(duì)AI這個(gè)新事物的沖擊時(shí)，多少都會(huì)有些迷茫和不知所措，這也是我為何第一次直播分享「AI學(xué)習(xí)路徑」的原因。

說(shuō)實(shí)話(huà)，按照我以往的習(xí)慣，我更傾向于精心準(zhǔn)備之后再開(kāi)直播，但聽(tīng)了他的分享，我慚愧，整天講MVP、講試錯(cuò)、講敏捷迭代，可真到用的時(shí)候，就成了顧慮的借口。

所以，我給自己定了個(gè)目標(biāo)：2天內(nèi)開(kāi)播。

做到这三点挑战，产品经理只会不断升值

好的产品经理是很稀缺的，懂用户、懂商业、懂数据的产品经理走出互联网，依然是抢手货。相反，如果只做简单传话、低效执行、浅层思考的产品经理，恐怕走不过未来3-5年的洪流。

查看详情 >

不管開(kāi)播效果如何，只要勇敢地、敏捷地走出這一步，就是成功。

我覺(jué)得，這個(gè)觀念或態(tài)度，或許可以作為大家對(duì)AI學(xué)習(xí)的參考——別太多顧慮，先找個(gè)切入點(diǎn)做起來(lái)，培養(yǎng)AI信仰要從沉浸式體驗(yàn)開(kāi)始，新的機(jī)會(huì)密碼寫(xiě)在下個(gè)路標(biāo)牌上。

好，前言說(shuō)的多了一些，主要是希望大家心態(tài)調(diào)整到位，后面才更能事半功倍，說(shuō)回今天的主角——「小智文轉(zhuǎn)圖」。

01 場(chǎng)景是稀缺的，先從熟悉的自身需求出發(fā)

大概三年前，我就有這個(gè)需求：在看到優(yōu)秀的文字時(shí)，我希望能把「樸素的文字」轉(zhuǎn)化成「優(yōu)美的圖片」，這樣分享出來(lái)效果翻倍。

但是，遍尋各種瀏覽器插件、APP應(yīng)用，我都沒(méi)找到合適的——要么功能復(fù)雜、要么體驗(yàn)極差、要么會(huì)員費(fèi)極貴。

前段時(shí)間，我突發(fā)奇想，干脆用AI編程自己做一個(gè)小程序試試？

說(shuō)干就干。

讓我沒(méi)想到的是，AI編程的能力迭代的如此之強(qiáng)，大概只用了2個(gè)小時(shí)，我就實(shí)現(xiàn)了基礎(chǔ)功能，剩下的更多的是對(duì)界面做些迭代、調(diào)試bug等。

這個(gè)即時(shí)的正反饋，讓我很有感觸，也讓我冷靜下來(lái)思考：

我越發(fā)覺(jué)得，一方面AI毋庸置疑地帶來(lái)了巨大的新機(jī)會(huì)，極大地降低了技術(shù)門(mén)檻，以至于類(lèi)似于「小貓補(bǔ)光燈」、「不要臉」這類(lèi)“無(wú)代碼”的現(xiàn)象級(jí)產(chǎn)品的出現(xiàn)。

但另一方面，AI客觀上也提升了競(jìng)爭(zhēng)維度——信息平權(quán)和低門(mén)檻同步被拉低后，帶來(lái)的注定是更高維度的「認(rèn)知競(jìng)爭(zhēng)」、「方法競(jìng)爭(zhēng)」以及「時(shí)間效率」。

而在這個(gè)更高維度的競(jìng)爭(zhēng)上，場(chǎng)景是稀缺的，這也是為何我建議大家多從公司業(yè)務(wù)或者自身需求的小場(chǎng)景出發(fā)的原因。

你只有先通過(guò)一兩個(gè)小程序提升了用戶(hù)洞察力，才能形成正反饋的閉環(huán)，才能發(fā)現(xiàn)更普適的新場(chǎng)景。

不要上來(lái)就立志做個(gè)百萬(wàn)級(jí)的AI產(chǎn)品，先從滿(mǎn)足自身需求出發(fā)，塔雖千層，總要從第一個(gè)臺(tái)階開(kāi)始。

02 用Trae來(lái)開(kāi)發(fā)：寫(xiě)好需求提示詞、做好原型圖

首先，這個(gè)階段我依然推薦大家用Trae來(lái)進(jìn)行AI編程，兩個(gè)原因，一個(gè)是可以免費(fèi)使用Claud3.7（偶爾需要排隊(duì)）；另一個(gè)是Trae的產(chǎn)品迭代速度很快，比如，前幾天就接入了DeepSeek。

當(dāng)然，如果你懂“無(wú)限續(xù)杯”的話(huà)，Cursor依然是王者般的存在。

說(shuō)回開(kāi)發(fā)邏輯：

從官網(wǎng)下載安裝包之后（官網(wǎng)：Trae IDE），一路點(diǎn)擊“下一步”，安裝完Trae之后，我們只需要在Build窗口表述我們需求即可。

如：

我想開(kāi)發(fā)一個(gè)小程序，主要實(shí)現(xiàn)「文字轉(zhuǎn)圖片」的功能，產(chǎn)品有三個(gè)頁(yè)面，分別是“創(chuàng)建”、“記錄”、“說(shuō)明”頁(yè)面。

創(chuàng)建頁(yè)面以卡片風(fēng)格呈現(xiàn)，主要有三個(gè)卡片區(qū)域，分別為“添加文字”、“頭像、水印設(shè)置”、“選擇背景圖片”，每個(gè)區(qū)域的功能分別是……

創(chuàng)建頁(yè)面是首頁(yè)，你要參考我的原型圖來(lái)開(kāi)發(fā)，確保樣式和功能邏輯符合原型設(shè)計(jì)，不要過(guò)度自我發(fā)揮。

現(xiàn)在，你幫我創(chuàng)建下該項(xiàng)目。

寫(xiě)好需求提示詞，并把原型設(shè)計(jì)的截圖一并附上去，注意，這點(diǎn)也是Trae的優(yōu)勢(shì)，可以根據(jù)原型圖來(lái)設(shè)計(jì)，我也確實(shí)做了簡(jiǎn)單的原型設(shè)計(jì)，事實(shí)上，這樣AI執(zhí)行的效果會(huì)更理想。

再之后就是點(diǎn)擊發(fā)送，AI便會(huì)使用Claud3.5/Claud3.7模型來(lái)自動(dòng)幫你創(chuàng)建項(xiàng)目，速度也很快，然后你安裝一個(gè)小程序開(kāi)發(fā)工具，就可以預(yù)覽、調(diào)試、修Bug，直到達(dá)到令你滿(mǎn)意的效果。

實(shí)現(xiàn)的步驟真的不復(fù)雜，理論上，全程無(wú)代碼確實(shí)可以實(shí)現(xiàn)。

但這里面有不少坑，說(shuō)起來(lái)話(huà)長(zhǎng)，鏡哥準(zhǔn)備單獨(dú)做個(gè)直播來(lái)分享，但我想先分享幾個(gè)實(shí)用的經(jīng)驗(yàn)，這對(duì)你在實(shí)操時(shí)會(huì)有幫助。

03 我踩過(guò)的幾個(gè)坑

① 不懂得Git代碼管理，項(xiàng)目維護(hù)很麻煩

一開(kāi)始，我不知道怎么做代碼管理，甚至手動(dòng)復(fù)制項(xiàng)目文件夾，相信不少同學(xué)都有過(guò)類(lèi)似經(jīng)歷。

所以，我的第一個(gè)經(jīng)驗(yàn)，也是給你的第一個(gè)AI編程建議是：老老實(shí)實(shí)地先去B站學(xué)習(xí)Git代碼操作，不需要很復(fù)雜，花一個(gè)小時(shí)時(shí)間，只需要懂一些基礎(chǔ)的發(fā)布、拉取命令即可。

這樣的話(huà)，當(dāng)你修復(fù)一個(gè)bug時(shí)，就可以直接推送到云端。

當(dāng)然，你也可以利用Trae來(lái)操作，而且現(xiàn)在Trae利用DeepSeek可以輔助寫(xiě)更新日志，寫(xiě)的還挺準(zhǔn)，這點(diǎn)體驗(yàn)確實(shí)很不錯(cuò)。

另外，當(dāng)你bug越修越多時(shí)（不要笑，Vibe coding遇到這種情況是常態(tài)），你就可以用Git命令幫你恢復(fù)歷時(shí)版本。

我一開(kāi)始就是不懂Git，沒(méi)有發(fā)布云端進(jìn)行保存，中間有好幾個(gè)版本越修bug越多，只能重新起了新項(xiàng)目。

圖-??通過(guò)Trae的源代碼管理，也可以推送代碼

② 不知道正確修復(fù)bug的方法

AI生成代碼很快，但是往往會(huì)有一些「頑固性Bug」無(wú)法修復(fù)。

這個(gè)時(shí)候就很難受，我們又沒(méi)有代碼基礎(chǔ)，怎么辦呢？

我的一個(gè)經(jīng)驗(yàn)是：

不要一股腦地把問(wèn)題描述完讓AI修復(fù)，可以先讓AI復(fù)述業(yè)務(wù)邏輯，按流程節(jié)點(diǎn)添加到對(duì)話(huà)中逐條詢(xún)問(wèn)。

這樣更容易真正解決問(wèn)題。

比如，我在群里也分享過(guò)這個(gè)案例：

起初，我在頭像彈窗時(shí)無(wú)法選擇別的頭像，怎么選都是默認(rèn)頭像，我讓AI修復(fù)半天，愣是修復(fù)不了，還一本正經(jīng)地回答我修復(fù)完成了。

后來(lái)，我就讓他復(fù)述下和“頭像選擇”相關(guān)的業(yè)務(wù)邏輯，然后AI就告訴我有哪些業(yè)務(wù)邏輯，我就逐條去添加對(duì)話(huà)驗(yàn)證。

然后，AI告訴我有個(gè)遮罩和選擇頭像也有關(guān)系（大家在用Axure畫(huà)原型時(shí)，肯定都用過(guò)遮罩），我就添加對(duì)話(huà)問(wèn)AI，這個(gè)遮罩的邏輯具體是什么。

果然，AI這次就精準(zhǔn)定位到了問(wèn)題——遮罩關(guān)聯(lián)的有彈窗關(guān)閉事件，遮罩又在最頂層。

這兩個(gè)信息很關(guān)鍵，這就導(dǎo)致你點(diǎn)擊別的頭像時(shí)，其實(shí)是點(diǎn)擊的透明遮罩，他就自動(dòng)關(guān)閉了彈窗，就沒(méi)有執(zhí)行頭像選擇的事件。

你看，正確地提問(wèn)時(shí)解決問(wèn)題地關(guān)鍵。

我原先直接要答案，調(diào)了3、4個(gè)小時(shí)沒(méi)有結(jié)果，當(dāng)我按流程節(jié)點(diǎn)復(fù)盤(pán)時(shí)，只用3分鐘就解決了這個(gè)問(wèn)題。

圖-?? 問(wèn)題拆解，快速修復(fù)bug的有效手段

③ 圖片太大，無(wú)法發(fā)布小程序

這個(gè)其實(shí)也是一個(gè)很實(shí)用的經(jīng)驗(yàn)。

微信小程序代碼包有大小限制，好像圖片資源不能超過(guò)200K，而我的業(yè)務(wù)邏輯是：把用戶(hù)輸入的文字，與背景圖片合成在一起，最終輸出優(yōu)美的圖文效果。

而一個(gè)背景圖片就是一兩兆，怎么辦？

所以說(shuō)，問(wèn)題是驅(qū)動(dòng)成長(zhǎng)的關(guān)鍵，于是我就網(wǎng)上搜索解決方案，問(wèn)了Kimi之后，發(fā)現(xiàn)可以用OSS來(lái)存儲(chǔ)圖片，之后把URL給到Trae就行，AI會(huì)調(diào)整代碼邏輯，實(shí)現(xiàn)線(xiàn)上加載。

說(shuō)實(shí)話(huà)，以往也聽(tīng)到過(guò)OSS，但是自己并沒(méi)有技術(shù)層面操作過(guò)，也不懂什么是Bucket，這次卻用了1個(gè)小時(shí)就成功接入了阿里云的OSS，之后Trae就用幾分鐘就實(shí)現(xiàn)了我的需求。

非常有成就感。

當(dāng)然，這中間的一個(gè)坑是，阿里云的OSS既需要存儲(chǔ)包，還需要流量包，前者消耗的是你的存儲(chǔ)資源，一般不需要太大，后者則是用戶(hù)訪(fǎng)問(wèn)時(shí)的流量消耗。

一開(kāi)始我不知道還需要流量包，只買(mǎi)了存儲(chǔ)包，結(jié)果幾個(gè)朋友剛體驗(yàn)一會(huì)兒，阿里云就發(fā)來(lái)了停服信息。

圖-??利用OSS，在線(xiàn)管理背景圖片

當(dāng)然，這個(gè)項(xiàng)目并不復(fù)雜，甚至第一版還有很多問(wèn)題和缺陷，還是那句話(huà)，重點(diǎn)其實(shí)是對(duì)場(chǎng)景的理解以及真實(shí)的實(shí)踐，后續(xù)我也會(huì)用這個(gè)項(xiàng)目和大家詳細(xì)分享個(gè)中的產(chǎn)品思考。

最后，AI時(shí)代，帶給我們無(wú)限的想象空間，但是，鏡哥還是想說(shuō)一句，門(mén)外的熱鬧永遠(yuǎn)是暫時(shí)的，而且永遠(yuǎn)追不完的熱點(diǎn)，但這對(duì)我們產(chǎn)品崗位來(lái)說(shuō)，競(jìng)爭(zhēng)優(yōu)勢(shì)的內(nèi)核永遠(yuǎn)是產(chǎn)品思維。

這或許才是咱們擁抱AI的正確態(tài)度。

希望本文對(duì)大家有參考。