[GitHub Global] Translate Vibe Coding 零基础教程/10 编程工具/工具实战/TRAE SOLO：AI 主导的全栈开发工具.md to zh-TW
This commit is contained in:
yupi-translate-app[bot]
committed by
GitHub
GitHub
parent
fec77372d9
commit
41a02ff8dd
@@ -0,0 +1,378 @@
|
||||
# TRAE SOLO：AI 主導的全端開發工具
|
||||
|
||||
你好，我是魚皮。
|
||||
|
||||
在前面的文章中，我們學習了各種 AI 編程工具。無論是 Cursor 還是 Claude Code，都是 **人類主導 + AI 輔助** 的模式，你需要不斷地和 AI 對話、確認、修改。
|
||||
|
||||
但如果你想讓 AI 更主動一些，自己規劃任務、自動執行開發，該用什麼工具呢？
|
||||
|
||||
這篇文章，我會介紹 TRAE SOLO，一個讓 AI 主導開發任務的全端開發工具。
|
||||
|
||||
|
||||
|
||||
## 一、什麼是 TRAE SOLO？
|
||||
|
||||
[TRAE](https://www.trae.ai/) 是字節跳動推出的 AI 原生編程工具，有 2 種開發模式：
|
||||
|
||||
- IDE 模式：類似 Cursor，保留傳統開發流程，人類主導
|
||||
- SOLO 模式：讓 AI 主導，自動推進開發任務
|
||||
|
||||
所謂 SOLO 模式，是讓 **AI 主導任務並自動執行開發**。你只需要有一個想法，然後配合 AI 就能讓想法真正落地。
|
||||
|
||||
|
||||
|
||||
TRAE SOLO 和 Cursor 的區別是什麼？
|
||||
|
||||
打個比方，用 Cursor 就像你是專案經理，AI 是程式員，你需要不斷地給 AI 分配任務、檢查成果、提出修改意見。而用 TRAE SOLO，AI 就是專案經理 + 程式員，你只需要告訴它目標，它會自己規劃、自己開發、自己測試。
|
||||
|
||||
根據 2026 年的最新評測，TRAE 在 AI 編程軟體中表現優異，特別是它的可自定義智能體系統，允許用戶像組建團隊一樣，根據專案需求定義和配置不同角色、技能的 AI 智能體。
|
||||
|
||||
|
||||
|
||||
## 二、TRAE SOLO 的核心功能
|
||||
|
||||
### 1、自動生成文件
|
||||
|
||||
TRAE SOLO 會根據你的需求，自動生成：
|
||||
|
||||
- 產品需求文件（PRD）
|
||||
- 技術架構文件
|
||||
- 接口文件
|
||||
- 測試報告
|
||||
|
||||
這些文件符合企業規範的開發流程，非常專業。
|
||||
|
||||
|
||||
|
||||
### 2、服務整合能力
|
||||
|
||||
TRAE 提供了強大的整合能力，可以傻瓜式接入各種服務：
|
||||
|
||||
- Supabase：資料庫儲存和用戶認證
|
||||
- Stripe：支付功能
|
||||
- OpenRouter：AI 服務
|
||||
- Figma：設計原型
|
||||
|
||||
不用看官方文件，直接在 TRAE 中點幾下就能完成整合。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 3、多任務並行
|
||||
|
||||
TRAE SOLO 支援多任務並行執行，可以同時開發前端和後端，大大提高效率。
|
||||
|
||||
|
||||
|
||||
### 4、程式碼變更工具
|
||||
|
||||
TRAE 提供了 DiffView 程式碼變更工具，可以清晰地看到每次修改了哪些程式碼，方便審查和回退。
|
||||
|
||||
|
||||
|
||||
### 5、Plan 模式
|
||||
|
||||
除了直接執行，TRAE 還支援 Plan 模式。AI 會先生成詳細的執行計劃，你確認後再執行。這樣可以更好地控制開發過程。
|
||||
|
||||
|
||||
|
||||
## 三、怎麼使用 TRAE SOLO？
|
||||
|
||||
讓我用一個實際例子來演示 TRAE SOLO 的使用流程。
|
||||
|
||||
⭐️ 推薦直接看魚皮的影片教學，講解更詳細：https://www.bilibili.com/video/BV1yMn3zuE7L
|
||||
|
||||
|
||||
|
||||
### 準備工作
|
||||
|
||||
首先需要準備開發工具：
|
||||
|
||||
- 下載安裝 [TRAE](https://www.trae.ai/)
|
||||
- 安裝 [Node.js 環境](https://nodejs.org/zh-cn/download)
|
||||
- 如果要開發小程式，還需要 [微信開發者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 1、需求分析
|
||||
|
||||
準備好工具後，進入 TRAE 的 SOLO 模式，打開一個空白的專案資料夾。
|
||||
|
||||
|
||||
|
||||
首先我們要進行需求分析。別想的太複雜，只需要把自己的想法用自然語言告訴 AI 就好。
|
||||
|
||||
比如我給 AI 提了這樣的需求：
|
||||
|
||||
```
|
||||
你是一位專業的程式員，請幫我開發《學習英雄 - AI 問答引導式學習》微信小程式。
|
||||
|
||||
用戶可以自主設置一個想學習（或測驗）的主題，由 AI 圍繞主題生成若干個有趣的知識問答卡片，通過闖關答題的形式引導用戶更輕鬆愉快地掌握知識。
|
||||
```
|
||||
|
||||
|
||||
|
||||
AI 很快生成了詳細的產品需求文件和技術架構文件，很符合企業規範的開發流程。
|
||||
|
||||
|
||||
|
||||
看得出來 AI 已經有些迫不及待想寫程式碼了，但是千萬別急，一定要先 **仔細確認需求文件**。
|
||||
|
||||
AI 寫的還是不錯的，但不一定完全符合我們的預期。因此我們要人工重點關注要實現的核心功能，移除掉不需要的附加功能，先確保核心業務流程（P0 級需求）跑通。
|
||||
|
||||
|
||||
|
||||
**不要嫌這一步麻煩，現在多花 1 分鐘，以後節約 1 小時！** 一定要明確需求，防止 AI 做了不該做的功能。
|
||||
|
||||
這裡有個小技巧，可以利用 TRAE 整合的 Figma 設計工具，在這裡獲取到一些免費的產品 UI 原型圖。
|
||||
|
||||
|
||||
|
||||
可以點擊查看某個原型具體的設計，只需要選中你看上的原型圖，點擊添加到對話，TRAE 就會自動把原型圖關聯到發給 AI 的對話中。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 2、方案設計
|
||||
|
||||
下面我們要進行方案設計，這以前是月薪幾萬的架構師幹的活，現在讓小 AI 幫我們 SOLO。
|
||||
|
||||
編寫這段 Prompt 時一定要注意幾個細節，**遵循最小化開發原則**，防止 AI 把簡單的事情搞複雜。
|
||||
|
||||
```
|
||||
我已經人工調整了產品需求文件，移除了很多不必要的功能。請你根據我人工修改過的需求，重新生成技術架構文件。要求：
|
||||
1. 禁止增加需求文件中沒有提到的功能
|
||||
2. 遵循最小化開發原則，以實現功能為主，禁止提供實現功能之外的擴展，比如部署、監控、限流等
|
||||
3. 遵循前後端分離原則
|
||||
```
|
||||
|
||||
很快 AI 生成了完整的技術架構文件，包括用什麼前端和後端技術、接口怎麼設計、資料表怎麼設計等等。
|
||||
|
||||
|
||||
|
||||
這裡我建議能看懂文件的同學還是多發揮一些專業性，明確具體的技術選型，讓 AI 生成的程式碼在自己的可控範圍內。比如我明確專案使用 Supabase 資料庫、使用 OpenRouter 對接 Gemini 大模型提供 AI 服務。
|
||||
|
||||
|
||||
|
||||
看不懂文件的同學也不用擔心，你就把自己想像成老闆或者產品經理，程式員同事吭哧吭哧拿了份技術方案給你，你就說 "怎麼實現我不管，這個需求明天上線！" 讓他放手幹就完了。
|
||||
|
||||
你要相信 AI，相信相信的力量。
|
||||
|
||||
|
||||
|
||||
### 3、服務整合
|
||||
|
||||
完成了方案設計，在正式進入開發前，我們還要準備專案依賴的服務。
|
||||
|
||||
把用戶資料儲存在哪裡？怎麼讓程式對接 AI 大模型？這都是我們要解決的問題。
|
||||
|
||||
相比於自己手動安裝服務，可以直接使用 TRAE 提供的整合能力，不用專門去看官方文件對接服務，直接傻瓜式安裝。
|
||||
|
||||
|
||||
|
||||
#### 整合 Supabase
|
||||
|
||||
[Supabase](https://supabase.com/) 是開源的後端即服務（BaaS）平台，提供資料庫儲存、用戶身份驗證、即時 API 等功能。
|
||||
|
||||
|
||||
|
||||
點擊連接按鈕，在彈出的頁面中完成創建 Supabase 帳號、創建組織、以及認證授權。
|
||||
|
||||
|
||||
|
||||
然後進入到 TRAE，看到組織成功顯示後，點擊創建一個新專案，填寫一些專案配置信息，然後點擊創建。
|
||||
|
||||
|
||||
|
||||
創建專案後回到 TRAE 刷新一下，點擊連接就可以了，就這麼簡單。
|
||||
|
||||
|
||||
|
||||
如果說之前 AI Vibe Coding 讓後端開發者爽翻了，那這波可以說是前端開發者贏麻了，簡單的專案都不用自己搭建後端了。
|
||||
|
||||
|
||||
|
||||
#### 整合 OpenRouter AI 服務
|
||||
|
||||
TRAE 能夠和多種 AI 服務整合，這裡我選擇 [OpenRouter](https://openrouter.ai/)，它的優點是可以通過統一的 API 對接各家大模型，比如 Gemini、GPT、Claude 等等。
|
||||
|
||||
|
||||
|
||||
首先到官網註冊登錄帳號，然後進入 API Keys 頁面創建一個調用 AI 的密鑰，然後在 TRAE 中配置並填寫密鑰，AI 服務就已經整合完畢了。
|
||||
|
||||
|
||||
|
||||
但是注意，要確保你有足夠的用量，否則可能調用失敗，或者報錯調用頻率太頻繁。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 4、後端開發
|
||||
|
||||
準備工作完成後，我們終於要進入緊張刺激的開發環節了。
|
||||
|
||||
這裡要注意，由於 **AI 的上下文是有限的**，為了能更好地生成完整專案、減少 Bug，建議分個步驟：先生成後端程式碼，人工校驗通過後，再生成前端程式碼。
|
||||
|
||||
給 AI 輸入提示詞，先開發後端，確保專案可以正常運行：
|
||||
|
||||
```
|
||||
請你基於最新的產品需求文件和技術架構文件進行開發，優先開發後端，確保專案可以正常運行
|
||||
```
|
||||
|
||||
我們可以使用 TRAE 提供的 Prompt 優化功能來一鍵優化提示詞。
|
||||
|
||||
|
||||
|
||||
點擊執行，請開始你的 SOLO。AI 會先給出任務計劃：
|
||||
|
||||
|
||||
|
||||
然後自主操作終端執行命令、編寫後端配置文件和業務邏輯程式碼、編寫資料庫建表語句等等，重要操作還會找我們主動確認，非常嚴謹。
|
||||
|
||||
|
||||
|
||||
看不懂也沒關係，讓它放手幹吧。
|
||||
|
||||
等待期間，你可以到 [編程導航](https://codefather.cn/) 上看看免費的編程學習路線。TRAE 自帶消息通知功能，AI 完成任務後會提醒我們。
|
||||
|
||||
我感覺 TRAE 調教 AI 還是有一套的，它會自己驗證程序是否正常。
|
||||
|
||||
|
||||
|
||||
一段時間後，AI 生成完畢，不僅生成了程式碼，還很貼心地生成了後端的接口文件。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 5、前端開發
|
||||
|
||||
下面進行前端開發。
|
||||
|
||||
這裡一定要注意，不要接著之前的對話繼續寫提示詞了。
|
||||
|
||||
為什麼呢？因為 AI 大模型的上下文是有限的，前面的操作已經消耗了不少上下文。為了防止 AI 上下文不足或者記憶混亂，我們生成前端時，重新開一個乾淨的對話來編寫提示詞。
|
||||
|
||||
|
||||
|
||||
提示詞中提供給 AI 產品需求文件、技術架構文件和後端接口文件，就可以讓 AI 專注於前端程式碼生成。
|
||||
|
||||
```
|
||||
你是一位專業的程式員，請幫我開發《學習英雄 - AI 問答引導式學習》微信小程式。
|
||||
|
||||
用戶可以自主設置一個想學習（或測驗）的主題，由 AI 圍繞主題生成若干個有趣的知識問答卡片，通過闖關答題的形式引導用戶更輕鬆愉快地掌握知識。
|
||||
|
||||
請你根據 @產品需求文件 @技術架構文件 @後端接口文件，幫我生成完整可運行的微信小程式前端程式碼。
|
||||
注意：
|
||||
1. 遵循最小功能原則，不要額外開發需求文件中沒提到的任何功能
|
||||
2. 如果需要顯示圖片，請使用佔位圖片 picsum.photos 代替（比如 picsum.photos/200/300）
|
||||
```
|
||||
|
||||
好，執行！
|
||||
|
||||
等待期間，你可以到 [面試鴨](https://www.mianshiya.com/) 上看看免費的面試題和刷題路線。
|
||||
|
||||
一段時間後，AI 生成完畢，一次性 SOLO 出了 20 多個文件！
|
||||
|
||||
|
||||
|
||||
雖然看著很爽，但老實說我是有點慌的，不知道能不能正常運行。
|
||||
|
||||
|
||||
|
||||
### 6、測試驗證
|
||||
|
||||
下面我們來到了激動人心的測試驗證環節。
|
||||
|
||||
首先需要打開微信開發者工具，導入已有專案資料夾，先選擇使用測試號開發調試專案。
|
||||
|
||||
|
||||
|
||||
打開專案後，我們先點擊右上角的 "測試號"，按照 [文件](https://developers.weixin.qq.com/miniprogram/dev/devtools/sandbox.html) 的指引獲取到測試號的 AppID 和 AppSecret 密鑰：
|
||||
|
||||
|
||||
|
||||
然後手動填入到後端配置文件中，否則將無法正常微信登錄。
|
||||
|
||||
|
||||
|
||||
然後我們就可以編譯運行專案了。
|
||||
|
||||
結果，果然報錯了！
|
||||
|
||||
|
||||
|
||||
意料之中，意料之中。小程式開發比網頁開發還是更難一些的，畢竟微信開發者工具和文件一直在更新。
|
||||
|
||||
|
||||
|
||||
不過沒關係，開發過程中難免遇到問題。解決方法很簡單，一句話：**報什麼錯誤，就把報錯信息發給 AI，讓 AI 來修復！**
|
||||
|
||||
像我這裡遇到了幾個典型的問題：
|
||||
|
||||
1）圖片路徑問題：利用 TRAE 的提示詞優化功能，能更好地指引 AI 按照指定的步驟修復 Bug
|
||||
|
||||
|
||||
|
||||
2）登錄失敗問題：點擊開發者工具右上角的 “詳情”，進入到本地設置中，勾選 “不校驗合法域名”
|
||||
|
||||
|
||||
|
||||
3）接口路徑問題：這可能是由於上下文過長導致的，讓 AI 整體修復前端調用後端接口的路徑和參數就好
|
||||
|
||||
|
||||
|
||||
4）環境配置問題：程式碼中讀取的環境變量名稱和配置文件中的不一致，這個問題比較簡單，我們可以手動修改。
|
||||
|
||||
當我敲了一個字符後，編輯器會自動提示我要修改哪些程式碼，還支援跨行修改。
|
||||
|
||||
|
||||
|
||||
這是 TRAE 提供的 **CUE 功能**，不僅可以幫你自動補全程式碼、還可以多行修改程式碼、自動預測未來可能的修改點，尤其適合重構程式碼的場景，效率起飛。
|
||||
|
||||
|
||||
|
||||
經過一段時間的修復，我們的小程式已經可以正常運行了。雖然現在頁面醜醜的，但只要跑通了核心業務流程，用戶能正常使用，後續的優化都很簡單了。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 7、持續優化
|
||||
|
||||
最後，如果你要把小程式上線，還是要花一些時間來優化的。
|
||||
|
||||
記住，優化前先把現有程式碼利用 Git 版本控制工具進行託管，並且提交一個基礎版本。這樣之後優化出了任何問題，都可以一鍵回滾到老版本。
|
||||
|
||||
|
||||
|
||||
像我重點讓 AI 幫忙優化了整個小程式的樣式風格，只要寫一段簡單的提示詞：
|
||||
|
||||
```
|
||||
你是一位程式員，請你幫我優化整個小程式中每個前端頁面和元素的樣式風格，使各個頁面保持一致。
|
||||
|
||||
參考風格：主色調採用活力橙色，清新治癒的卡通風格、簡約雅致、讓人感到放鬆愉快。
|
||||
```
|
||||
|
||||
然後利用 TRAE 的提示詞優化功能，就能得到一個更詳細的優化方案。
|
||||
|
||||
|
||||
|
||||
你可以按需調整，也可以讓 AI 放手幹。
|
||||
|
||||
建議大家每進行一次優化或新增一個功能，都提交一次程式碼，並且適當地新開 AI 對話框，防止上下文過多影響生成的準確度。
|
||||
|
||||
最終，你看到的這個小程式，就是我優化後的成品，效果還不錯吧。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 四、TRAE SOLO 的優缺點
|
||||
|
||||
TRAE SOLO
|
||||
Reference in New Issue
Block a user