開發2小時,修bug2周,我用Trae做了個小程式。
更新于:2025-03-26 03:35:57

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

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

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

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

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

但是,後來他發現,等你真的拿到鑰匙之後,原本空蕩蕩地腳下會出現新的道路,你根本沒必要被原先的路徑所困擾。

別焦慮、別回頭,只管往前走,新的機會一定會跟著你的努力而出現。

這對我有很大的啟發,類似於enlightenment(頓悟)。

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

說實話,按照我以往的習慣,我更傾向於精心準備之後再開直播,但聽了他的分享,我慚愧,整天講MVP、講試錯、講敏捷反覆運算,可真到用的時候,就成了顧慮的藉口。

所以,我給自己定了個目標:2天內開播。

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

我覺得,這個觀念或態度,或許可以作為大家對AI學習的參考——別太多顧慮,先找個切入點做起來,培養AI信仰要從沉浸式體驗開始,新的機會密碼寫在下個路標牌上

好,前言說的多了一些,主要是希望大家心態調整到位,後面才更能事半功倍,說回今天的主角——「小智文轉圖」。

01 場景是稀缺的,先從熟悉的自身需求出發

大概三年前,我就有這個需求:在看到優秀的文字時,我希望能把「樸素的文字」轉化成「優美的圖片」,這樣分享出來效果翻倍。

但是,遍尋各種瀏覽器外掛程式、APP應用,我都沒找到合適的——要麼功能複雜、要麼體驗極差、要麼會員費極貴

前段時間,我突發奇想,乾脆用AI程式設計自己做一個小程式試試?

說干就干。

讓我沒想到的是,AI程式設計的能力反覆運算的如此之強,大概只用了2個小時,我就實現了基礎功能,剩下的更多的是對介面做些反覆運算、調試bug等。

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

我越發覺得,一方面AI毋庸置疑地帶來了巨大的新機會,極大地降低了技術門檻,以至於類似於「小貓補光燈」、「不要臉」這類“無代碼”的現象級產品的出現。

但另一方面,AI客觀上也提升了競爭維度——資訊平權和低門檻同步被拉低后,帶來的註定是更高維度的「認知競爭」、「方法競爭」以及「時間效率」

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

你只有先通過一兩個小程式提升了使用者洞察力,才能形成正反饋的閉環,才能發現更普適的新場景。

不要上來就立志做個百萬級的AI產品,先從滿足自身需求出發,塔雖千層,總要從第一個台階開始。

02 用Trae來開發:寫好需求提示詞、做好原型圖

首先,這個階段我依然推薦大家用Trae來進行AI程式設計,兩個原因,一個是可以免費使用Claud3.7(偶爾需要排隊);另一個是Trae的產品反覆運算速度很快,比如,前幾天就接入了DeepSeek。

當然,如果你懂“無限續杯”的話,Cursor依然是王者般的存在。

說回開發邏輯:

從官網下載安裝包之後(官網:Trae IDE),一路點擊“下一步”,安裝完Trae之後,我們只需要在Build視窗表述我們需求即可。

如:

我想開發一個小程式,主要實現「文字轉圖片」的功能,產品有三個頁面,分別是“創建”、“記錄”、“說明”頁面。

創建頁面以卡片風格呈現,主要有三個卡片區域,分別為“添加文字”、“頭像、浮浮”、“選擇背景圖片”,每個區域的功能分別是……

創建頁面是首頁,你要參考我的原型圖來開發,確保樣式和功能邏輯符合原型設計,不要過度自我發揮。

現在,你幫我創建下該專案。

寫好需求提示詞,並把原型設計的截圖一併附上去,注意,這點也是Trae的優勢,可以根據原型圖來設計,我也確實做了簡單的原型設計,事實上,這樣AI執行的效果會更理想。

再之後就是點擊發送,AI便會使用Claud3.5/Claud3.7模型來自動幫你創建專案,速度也很快,然後你安裝一個小程序開發工具,就可以預覽、調試、修Bug,直到達到令你滿意的效果。

實現的步驟真的不複雜,理論上,全程無代碼確實可以實現。

但這裡面有不少坑,說起來話長,鏡哥準備單獨做個直播來分享,但我想先分享幾個實用的經驗,這對你在實操時會有説明。

03 我踩過的幾個坑

① 不懂得Git代碼管理,項目維護很麻煩

一開始,我不知道怎麼做代碼管理,甚至手動複製項目資料夾,相信不少同學都有過類似經歷。

所以,我的第一個經驗,也是給你的第一個AI程式設計建議是:老老實實地先去B站學習Git代碼操作,不需要很複雜,花一個小時時間,只需要懂一些基礎的發佈、拉取命令即可

這樣的話,當你修復一個bug時,就可以直接推送到雲端。

當然,你也可以利用Trae來操作,而且現在Trae利用DeepSeek可以輔助寫更新日誌,寫的還挺準,這點體驗確實很不錯。

另外,當你bug越修越多時(不要笑,Vibe coding遇到這種情況是常態),你就可以用Git命令幫你恢復歷時版本。

我一開始就是不懂Git,沒有發佈雲端進行保存,中間有好幾個版本越修bug越多,只能重新起了新專案。

圖-通過Trae的原始程式碼管理,也可以推送代碼

② 不知道正確修復bug的方法

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

這個時候就很難受,我們又沒有代碼基礎,怎麼辦呢?

我的一個經驗是:

不要一股腦地把問題描述完讓AI修復,可以先讓AI複述業務邏輯,按流程節點添加到對話中逐條詢問

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

比如,我在群裡也分享過這個案例:

起初,我在頭像彈窗時無法選擇別的頭像,怎麼選都是預設頭像,我讓AI修復半天,愣是修復不了,還一本正經地回答我修復完成了。

後來,我就讓他複述下和“頭像選擇”相關的業務邏輯,然後AI就告訴我有哪些業務邏輯,我就逐條去添加對話驗證。

然後,AI告訴我有個遮罩和選擇頭像也有關係(大家在用Axure畫原型時,肯定都用過遮罩),我就添加對話問AI,這個遮罩的邏輯具體是什麼。

果然,AI這次就精準定位到了問題——遮罩關聯的有彈窗關閉事件,遮罩又在最頂層。

這兩個資訊很關鍵,這就導致你點擊別的頭像時,其實是點擊的透明遮罩,他就自動關閉了彈窗,就沒有執行頭像選擇的事件。

你看,正確地提問時解決問題地關鍵

我原先直接要答案,調了3、4個小時沒有結果,當我按流程節點復盤時,只用3分鐘就解決了這個問題。

圖- 問題拆解,快速修復bug的有效手段

③ 圖片太大,無法發佈小程式

這個其實也是一個很實用的經驗。

微信小程式代碼包有大小限制,好像圖片資源不能超過200K,而我的業務邏輯是:把使用者輸入的文字,與背景圖片合成在一起,最終輸出優美的圖文效果

而一個背景圖片就是一兩兆,怎麼辦?

所以說,問題是驅動成長的關鍵,於是我就網上搜索解決方案,問了Kimi之後,發現可以用OSS來存儲圖片,之後把URL給到Trae就行,AI會調整代碼邏輯,實現線上載入。

說實話,以往也聽到過OSS,但是自己並沒有技術層面操作過,也不懂什麼是Bucket,這次卻用了1個小時就成功接入了阿裡雲的OSS,之後Trae就用幾分鐘就實現了我的需求。

非常有成就感。

當然,這中間的一個坑是,阿裡雲的OSS既需要存儲包,還需要流量包,前者消耗的是你的存儲資源,一般不需要太大,後者則是用戶訪問時的流量消耗。

一開始我不知道還需要流量包,只買了存儲包,結果幾個朋友剛體驗一會兒,阿裡雲就發來了停服資訊。

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

當然,這個專案並不複雜,甚至第一版還有很多問題和缺陷,還是那句話,重點其實是對場景的理解以及真實的實踐,後續我也會用這個專案和大家詳細分享個中的產品思考。

最後,AI時代,帶給我們無限的想像空間,但是,鏡哥還是想說一句,門外的熱鬧永遠是暫時的,而且永遠追不完的熱點,但這對我們產品崗位來說,競爭優勢的內核永遠是產品思維

這或許才是咱們擁抱AI的正確態度。

希望本文對大家有參考。

本文由人人都是產品經理作者【產品大峽谷】,微信公眾號:【產品大峽谷】,原創/授權 發佈於人人都是產品經理,未經許可,禁止轉載。

題圖來自Unsplash,基於CC0協定

定製專案有多可怕?
定製專案有多可怕?
2025-03-26 06:49:14
小紅書的底層邏輯
小紅書的底層邏輯
2025-03-26 08:08:44