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

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

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

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

起初，他不敢往前走，生怕記不住來時的路。

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

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

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

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

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

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

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

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

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

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

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

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

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

說干就干。

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

這個即時的正反饋，讓我很有感觸，也讓我冷靜下來思考：

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

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

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

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

不要上來就立志做個百萬級的AI產(chǎn)品，先從滿足自身需求出發(fā)，塔雖千層，總要從第一個臺階開始。

02 用Trae來開發(fā)：寫好需求提示詞、做好原型圖

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

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

說回開發(fā)邏輯：

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

如：

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

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

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

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

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

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

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

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

03 我踩過的幾個坑

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

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

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

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

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

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

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

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

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

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

這個時候就很難受，我們又沒有代碼基礎(chǔ)，怎么辦呢？

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

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

這樣更容易真正解決問題。

比如，我在群里也分享過這個案例：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

非常有成就感。

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

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

圖-??利用OSS，在線管理背景圖片

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

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

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

希望本文對大家有參考。