作者介绍：茉卷，TRAE 开发者用户
大家好，我是一名 AI 应用架构师。通过 TRAE 生成代码，我显著提升了个人项目的开发效率。
如果说当前是“自媒体”时代，那么在我看来，下一个时代将是“自开发”时代——每个人都可以利用编程工具，结合 AI 能力，实现自己的应用创意。大部分接地气的需求都可以尝试交给 AI 编程工具来完成。当然，AI 实现的具体效果可能会因使用者的经验与设计能力而有所差异。但有一点可以肯定：AI 编程已经极大地提升了个人的开发效率，让我们离“人人可开发”的未来更近了一步。
1 项目介绍：TRAE 能帮助我实现什么
1.1 第一版：看视频，学古诗
我家小朋友正在学习古诗和文言文，背诵古文的过程有时候确实比较枯燥，对孩子来说也有一定难度。
为了增加趣味性，我想：如果给每一句诗都配上对应的画面，是不是会更容易记忆？ 实际上，很多记忆方法正是通过将信息与图像结合来提高记忆效果的。
想象一下，让孩子通过上下滑动的方式切换诗词，左右滑动切换章节，每首诗词不仅配有朗读和背景音乐，还有自动生成的画面和简要讲解，这样“有声、有画、有文、有解”，背诵是不是就不再枯燥了？
当然，理想很丰满，现实往往有些骨感。目前文生视频、图生视频的技术在效果和成本上，对个人开发者来说还有些挑战。所以我们不妨分步实现，先简化形式：用“图片 + MP3”的方式构成内容单元，既降低制作门槛，也保留了核心的沉浸体验。
于是，这样一个产品雏形慢慢清晰起来：
一款通过看视频帮助学习古诗词的应用：上下滑动切换诗歌，左右滑动切换章节。希望能够让孩子们在轻松愉悦的氛围中，爱上古诗词。
于是，我用 TRAE 实现了上面的功能，咱们一起来看下：
诗词阅读界面
小朋友可以学习具体的某个诗词。
枯藤老树昏鸦：不用我多说，单看整个图片，诗词意境效果拉满。
-
有图（字节 SeeDream 3.0）
-
有诗文，有解释（字节豆包 1.6）
-
有朗诵（火山引擎大模型语音合成）
初期效果视频演示，可参考：https://www.bilibili.com/video/BV1qTb1zjEzD
诗词列表界面
小朋友可以搜索想学的诗。
为每一首配上吸引人的封面，吸引小朋友的注意力～我也是煞费苦心。
初期效果视频演示，可参考：https://www.bilibili.com/video/BV15fbmzJEVg
诗词助手智能体
大模型解答小朋友的问题。
这里我用扣子智能体平台的 API，迅速搭建出一个问答 BOT 机器人，用来回答小朋友的问题。
初期效果演示：https://www.bilibili.com/video/BV1TGbUz6EjG
第一版的挫折
最终，我提交了第一版到苹果商店。
很遗憾，由于苹果方面认为该类内容属于“报刊杂志”范畴，需要提供相应的出版资质——这显然是我作为个人开发者无法满足的要求。因此，这个方案目前只能暂时搁置。（后续有机会了，我肯定会上线～～）
1.2 第二版：转型多模态创作工具
根据苹果的审核意见，我决定转变方向，探索另一条路径：文生图、文生视频、图生视频。
多模态生成无疑是 AI 应用发展的重要趋势。我们计划从一个基础版本起步，持续迭代和完善。于是，原本专注于古诗学习的应用，逐步转型为一款支持文生图、文生视频与图生视频生成的工具——更准确地说，现阶段我们先聚焦于文生图功能。鉴于当前文生视频和图生视频在生成效果与成本方面的考量，这两项功能将暂缓推进。
用户只需输入一句诗 + 一段描绘诗词意境的提示词，系统即可生成对应的画面。在这个方向上，我们以字节的“即梦 AI”为参考对象，见贤思齐，也希望在不断优化中走出自己的特色。
主界面
用 TRAE 实现的效果图（左）VS 即梦 AI（右）
配图详情页面
大图展示 + 用户评论 + 点赞，建立一个创作者社区
诗词意境创作页面
用户输入诗句和提示词，生成图片。
用户输入的内容需要经过一个审核流程之后，提示词才会交给文生图模型出图。
2 TRAE 使用 Tips 分享
个人经验，仅供参考，实践是检验真理的唯一标准
2.1 把 TRAE 当作编程老师（最重要）
对于不懂编程的小伙伴来说，掌握一些基本的编程知识是十分必要的。
TRAE 可以很好地帮助我们入门。你甚至可以用它入门某种编程语言直到精通。
2.2 大部分时候，使用 Claude-4-Sonnet
TRAE 支持的模型有很多，目前我比较推荐的是 Claude-4-Sonnet。
虽然 GPT-5 效果也不错，但是我总感觉还差点什么～～
2.3 配置不同能力的智能体
针对不同的职能，我建议配置不同能力的智能体。
（写代码，写需求文档，写设计文档… 为这些智能体定制提示词）
比如，我们可以创建一个写代码的 AI 程序员 Susirial（如下图），它负责生成代码。我们需要给它配置上各种工具。
再比如，我们可以创建一个审核代码的 AI Reviewer，它负责审查代码，找出代码的潜在风险。
再比如，我们可以创建一个优化代码的 AI 性能分析师，它负责找出优化点，给出优化建议。
目前，咱们不太可能一次就生成 100%完美的代码～
2.4 为每种编程语言（智能体）定制提示词
不同编程语言在语法、范式和最佳实践上存在显著差异。
我们可以在智能体的提示词中，增加我们的设计范式，比如架构约束、使用哪些 API、如何处理异常、如何处理请求、请求失败处理原则、性能与安全性要求…
比如：
-
写 React 代码的智能体：staff_react
-
写 Python FastAPI 代码的智能体：staff_backend_fapi
-
写苹果 Swift 代码的智能体：staff_swift
2.3 和 2.4 通常需要结合起来使用，比如 susirial 是一个写程序的智能体，它主要负责前端 React 编写，等等…
2.5 如何制作理想中的 UI 界面
使用 ASCII 码
如果你有比较明确的目标，你可以用 ASCII 码来告诉 AI 你想画一个什么样的界面。
比如，类似即梦 AI 的大图展示界面，可以这样告诉 AI：
+--------------------------------------+
| [大图] |
| (诗词意境相关图片) |
+--------------------------------------+
| 访问次数: 1.2k 点赞数: 345 |
| 时间: 2023-11-06 14:20 |
+--------------------------------------+
| 用户#62071E2B |
| 🔹 日月之行，若出其中； |
| |
| 用户#62071E2B |
| 🔹 枯藤老树昏鸦 |
+--------------------------------------+
| 探索 | 对话 | 灵感 | 我 |
| 🔍 | 💬 | 💡 | 👤 |
+--------------------------------------+
使用 TRAE 内置工具：SOLO 中的 Figma
Figma 则是一家以开发网页端协作软件为主的公司，其主要产品 Figma Design 是一款强大的界面设计协作工具。在 TRAE 中集成 Figma 后，用户可以通过 Figma 将 Figma 的设计稿与 TRAE 的自动化流程相连接。我目前还没有测试过这种方法，网上有一些介绍，大家可以参考。
将 UI 图片直接粘贴给 AI
例子中的提示词有点简单，就是举个例子。咱们可以用专业的提示词代替～
让 AI 参考某些著名的 APP 生成
比如参考快手的短视频列表 UI 布局，生成一个对应的前端页面。
2.6 如何让 TRAE 像工程师一样写代码
①明确需求，生成需求文档（将需求拆分成不可再分的原子需求）
②根据需求文档，生成技术实现方案，让 AI 生成多种实现方案，并进行评估
③选定技术方案，让 AI 生成具体的流程框架，设计重要模块
④修订流程框架，模块，生成详细设计文档
⑤根据详细设计文档，制定 To Do List
⑥针对某个原子功能（最小功能），让 AI 开始编码
⑦将多个原子功能合并或者基于已经开发好的原子功能，按照一定流程、规则，实现高层级需求
⑧编译中、调试中出现的错误，让 AI 生成 BUG 文档，明确标注错误原因和解决办法，将这些文件归档
阅读 1，2，3，4，8 可以让你快速成长
2.7 代码及时归档
任何时候，代码都应该可以回溯到之前正常的版本。
咱们可以使用 git 或者通过定期备份的方式来实现。
2.8【新建会话】使用时机
出现下面的情况时，我建议使用**【新建会话】**：
-
开始新功能编码
-
本来没问题的代码，因为新功能而被修改，这时需要回溯代码，并新建会话（在提示词中做约束）
-
新功能或者 BUG 在多轮讨论之后（比如 10 轮）仍然没有达到效果，这时需要回溯代码，重新设计提示词，开启新会话
-
编译错误经过多轮后（比如 10 轮），仍然出现同样的错误（比如’}'号的位置问题）
2.9 适当补充上下文
针对某一个需求、BUG、编译错误，我们最好能主动告诉 AI：
①需要查看哪些代码文件
②需要查看哪些函数
③不应该修改什么
④可以新建哪些代码和说明文档
⑤可以参考哪些代码生成
⑥要使用哪些框架，设计模式、性能要求、API 等等
2.10 如何快速分析解决错误
-
把运行错误贴给 AI，让 AI 根据错误在代码中写入 DEBUG LOG 打印机制（增加打印信息）
-
再次运行，抓取 LOG
-
把错误 LOG 贴给 AI 分析
经过上面的步骤，AI 一般都能根据错误日志修复代码问题。
3 关于茉韵 APP
中国苹果商店搜：茉韵 或者苹果手机打开链接：https://apps.apple.com/us/app/茉韵/id6749039662?ppid=621ca0d4-5df4-45d3-a136-bda4782cf014
