🚀TRAE SOLO 3.0 實戰：TRAE AI 驅動的 屏幕標註 App 極速開發流程🧣
「TRAE SOLO 3.0 正式版初體驗」標註工具APP的開發🧣#TRAE 3.0 SOLO出道 並 @TRAE #SOLO已就位 #TRAE發佈
摘要 (Abstract)
本次實戰利用 TRAE AI 編程工具，實現了從零到一的屏幕標註工具 App 開發。該 App 具備畫筆、矩形、圓形、直線、箭頭、文字、高亮、橡皮擦等核心標註功能。整個開發過程遵循 “原型圖先行 + 清晰需求文檔” 的 Vibe Coding 哲學，證明了在 TRAE AI 的協助下，App 開發的難度已大大降低，核心挑戰轉移至核心模型能力的強度和Bug 修復的效率。實戰強調了一次成型申請開發者賬號的重要性，並揭示了當前 App 開發的關鍵在於模型的能力和Bug 修復的速度。
關鍵詞： TRAE SOLO；屏幕標註工具；原型圖；需求文檔；模型能力；Bug 修復；一次成型
一、項目背景與開發哲學
1.1 項目需求與目標
本次開發的目標是構建一個屏幕標記工具 App，要求具備以下特性：
- 功能簡單：包含畫筆、矩形、圓形、直線、箭頭、文字、高亮、橡皮擦等工具。
- 本地運行：是一個簡單的可以本地運行的 App，不需要聯網登錄。
1.2 開發模式與工具選擇
在完成開發的過程中，我們採用了以下三項關鍵要素作為輸入：
1、原型圖 2、需求開發指令 3、修復所有 bug
A 構建原型圖步驟
（1）:產品需求提示詞
我想開發一個屏幕標記的app。
我希望這個 APP 是一個簡單的，可以本地運行，不需要聯網登陸的 APP。
請你作為出色的產品經理幫我完成相應需求的這種梳理。（2）:輸出產品需求文檔
產品名稱：ScreenAnnotator（屏幕標註工具） 產品定位：輕量級本地屏幕標註工具 目標用户：需要在屏幕上進行標註的用户（教師、演講者、設計師等）
2. 核心功能需求
2.1 基礎標註功能
畫筆工具：自由繪製線條
幾何圖形：矩形、圓形、箭頭、直線
文字標註：添加文字説明
高亮工具：半透明高亮區域
橡皮擦：擦除標註內容
2.2 工具屬性設置
顏色選擇：多種預設顏色 + 自定義顏色
粗細調節：畫筆和線條粗細
透明度：標註內容透明度調節
字體設置：文字大小、字體選擇
2.3 操作控制
快捷鍵支持：常用功能快捷鍵
撤銷/重做：操作歷史管理
清空畫布：一鍵清除所有標註
顯示/隱藏：快速隱藏標註層
2.4 界面交互
工具欄：浮動或固定工具欄
最小化模式：工具欄可收起
全屏標註：覆蓋整個屏幕
窗口穿透：標註時可操作下層應用。（3）原型圖指令
---- 現在需要輸出高保真的原型圖，並確保這些原型界面可以直接用於開發：
1、用户體驗分析：先分析這個App的主要功能和用户需求，確定核心交互邏輯。
2、產品界面規劃：作為產品經理，定義關鍵界面，確保信息架構合理。
3、高保真UI設計：作為UI設計師，設計貼近真實ios/Android設計規範的界面，使用現代化的UI元素，使其具有良好的視覺體驗。
4、HTML原型實現：使用HTML+TailwindCSS（或Bootstrap）生成所有原型界面，並使用FontAwesome（或其他開源UI組件）讓界面更加精美、接近真實的App設計。拆分代碼文件，保持結構清晰：
5、每個界面應作為獨立的HTML文件存放，例如home.html、profile.html、settings.html等。
- index.html作為主入口，不直接寫入所有界面的HTML代碼，而是使用iframe的方式嵌入這些HTML片段，並將所有頁面直接平鋪展示在index頁面中，而不是跳轉鏈接。 真實感增強： - 界面尺寸應模擬iPhone15Pro，並讓界面圓角化，使其更像真實的手機界面。 - 使用真實的UI圖片，而非佔位符圖片（可從Unsplash、Pexels、Apple官方UI資源中選擇）。 - 添加頂部狀態欄（模擬iOS狀態欄），幷包含App導航欄（類似ios底部TabBar）。 請按照以上要求生成完整的HTML代碼，並確保其可用於實際開發。
1.3 清晰的需求文文檔。
產品名稱：ScreenAnnotator（屏幕標註工具） 產品定位：輕量級本地屏幕標註工具
目標用户：需要在屏幕上進行標註的用户（教師、演講者、設計師等）
2. 核心功能需求
2.1 基礎標註功能
畫筆工具：自由繪製線條
幾何圖形：矩形、圓形、箭頭、直線
文字標註：添加文字説明
高亮工具：半透明高亮區域
橡皮擦：擦除標註內容
2.2 工具屬性設置
顏色選擇：多種預設顏色 + 自定義顏色
粗細調節：畫筆和線條粗細
透明度：標註內容透明度調節
字體設置：文字大小、字體選擇
2.3 操作控制
快捷鍵支持：常用功能快捷鍵
撤銷/重做：操作歷史管理
清空畫布：一鍵清除所有標註
顯示/隱藏：快速隱藏標註層
2.4 界面交互
工具欄：浮動或固定工具欄
最小化模式：工具欄可收起
全屏標註：覆蓋整個屏幕
窗口穿透：標註時可操作下層應用。
----請參考需求和原型圖幫我完成這個 ios app的開發，我們正在這個ios開發項目的根目錄中。我們選擇使用 Code 工具進行開發，並開啓了 Plan 模式進行開發管理。這種模式下的開發速度就像“更快一樣”。
二、屏幕標註工具 App 開步流程
以下是利用 AI 輔助編程工具完成屏幕標註工具 App 的詳細步驟：
步驟一：創建需求文檔與原型圖（先決條件）
- 操作： 首先必須要有原型圖，這是開發的前提。
- 操作： 其次，通過一個清晰的文文檔形式，針對需求來給出相應的原型界面。
- 提示詞示例： “我想開發一個屏幕標記的 App，我希望這個 App 是一個簡單的可以本地運行的，不需要聯網登錄的 App”；“請作為參要先給我們個文檔，然後通過這個文檔形式來針對這句話來去給相應的原型界面”。
步驟二：項目啓動與原生框架構建
- 操作： 使用 Code 工具，開啓 Plan 模式。
- 關鍵動作： 在項目啓動時，明確告知工具**“我們正在xcode構建的原生APP目錄，去構建了一個 App 的原生框架”**，以便基於原生框架去進行開發，從而加速後續的打包發佈過程。
步驟三：提交開發指令與參考文件
- 操作： 提交關鍵指令給 AI Agent。
- 關鍵指令： “請參考需求和原型圖完成這個 App 開發”；“在當前的原身的 App 上當中去開發”。
步驟四：執行規劃與文文檔輸出
- 操作： Agent 接受指令後，開始規劃（Plan）並執行。
- 結果： 在規劃之後，工具會輸出比較多的文文檔。
步驟五：核心功能實現與 Bug 修復啓動
- 操作： 在文文檔輸出完畢後，核心的 App 功能（如畫筆、矩形、圓形等）即已大致完成。
- 挑戰階段： 隨後立即進入 Bug 修復階段。這是最耗費時間的環節——不斷修，遇到什麼問題修。
- 工具支持： 修復 Bug 時，需要藉助比較多的工具進行修復，以提高效率，使 Bug 越來越少。
步驟六：利用核心模型能力解決 Bug
- 核心認知： 在開發和 Bug 修復階段，最終的核心還是在於模型的能力。模型的推理能力越強，修復 Bug 的速度和效率就越快。
- 策略： 如果當前工具的模型能力不足以修復 Bug，開發者需要考慮更換其他工具來完成修復，以最終實現產品。
步驟七：優化與準備打包上傳
- 操作： 當 App 功能和 Bug 修復達到令人滿意的狀態後，就可以開始打包上傳。
- 功能展示： 最終的 App 效果包括不同色號的選擇、畫筆工具、矩形、圓形、直線、箭頭、文字、高亮、橡皮擦等功能。
步驟八：App Store 上傳的“一次成型”策略
- 挑戰： App Store 上傳是當前的難度所在。
- 關鍵策略： 賬號申請要一次成型，即開發者賬號申請時要一次成功，避免因賬號被鎖定而導致後續上傳困難。目前開發難度沒有那麼大，但賬號申請的難度較高。
三、結論與 TRAE SOLO 價值體現
AI 輔助編程極大地降低了 App 開發的門檻，使得任何東西都可以用來完成 App 開發。開發的關鍵點在於清晰的原型圖和需求文檔作為輸入，並基於現有的原生 App 框架進行開發。
然而，真正的價值和效率瓶頸在於：後期的 Bug 修復。因此，選擇一個擁有強大核心模型能力的工具是決定項目最終成功和效率的關鍵。
本文收錄於以下專欄
