🚀TRAE SOLO 3.0 实战：TRAE AI 驱动的 屏幕标注 App 极速开发流程🧣

🚀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，要求具备以下特性：

1. 功能简单：包含画笔、矩形、圆形、直线、箭头、文字、高亮、橡皮擦等工具。
2. 本地运行 ：是一个简单的可以本地运行 的 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 修复 。因此，选择一个拥有强大核心模型能力的工具是决定项目最终成功和效率的关键。