项目笔记｜从古诗 APP 到多模态应用的 10 个开发心得

本文作者：茉卷，TRAE 开发者用户

大家好，我是一名 AI 应用架构师。通过 TRAE 生成代码，我显著提升了个人项目的开发效率。

如果说当前是“自媒体”时代，那么在我看来，下一个时代将是“自开发”时代——每个人都可以利用编程工具，结合 AI 能力，实现自己的应用创意。大部分接地气的需求都可以尝试交给 AI 编程工具来完成。当然，AI 实现的具体效果可能会因使用者的经验与设计能力而有所差异。但有一点可以肯定：AI 编程已经极大地提升了个人的开发效率，让我们离“人人可开发”的未来更近了一步。

项目介绍：TRAE 能帮助我实现什么

第一版：看视频，学古诗

我家小朋友正在学习古诗和文言文，背诵古文的过程有时候确实比较枯燥，对孩子来说也有一定难度。

为了增加趣味性，我想：如果给每一句诗都配上对应的画面，是不是会更容易记忆？ 实际上，很多记忆方法正是通过将信息与图像结合来提高记忆效果的。

想象一下，让孩子通过上下滑动的方式切换诗词，左右滑动切换章节，每首诗词不仅配有朗读和背景音乐，还有自动生成的画面和简要讲解，这样“有声、有画、有文、有解”，背诵是不是就不再枯燥了？

当然，理想很丰满，现实往往有些骨感。目前文生视频、图生视频的技术在效果和成本上，对个人开发者来说还有些挑战。所以我们不妨分步实现，先简化形式：用“图片 + 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

第一版的挫折

最终，我提交了第一版到苹果商店。

很遗憾，由于苹果方面认为该类内容属于“报刊杂志”范畴，需要提供相应的出版资质——这显然是我作为个人开发者无法满足的要求。因此，这个方案目前只能暂时搁置。（后续有机会了，我肯定会上线～～）

第二版：转型多模态创作工具

根据苹果的审核意见，我决定转变方向，探索另一条路径：文生图、文生视频、图生视频。

多模态生成无疑是 AI 应用发展的重要趋势。我们计划从一个基础版本起步，持续迭代和完善。于是，原本专注于古诗学习的应用，逐步转型为一款支持文生图、文生视频与图生视频生成的工具——更准确地说，现阶段我们先聚焦于文生图功能。鉴于当前文生视频和图生视频在生成效果与成本方面的考量，这两项功能将暂缓推进。

用户只需输入一句诗 + 一段描绘诗词意境的提示词，系统即可生成对应的画面。在这个方向上，我们以字节的“即梦 AI”为参考对象，见贤思齐，也希望在不断优化中走出自己的特色。

主界面

用 TRAE 实现的效果图（左）VS 即梦 AI（右）

配图详情页面

大图展示 + 用户评论 + 点赞，建立一个创作者社区

诗词意境创作页面

用户输入诗句和提示词，生成图片。

用户输入的内容需要经过一个审核流程之后，提示词才会交给文生图模型出图。

TRAE 使用 Tips 分享

个人经验，仅供参考，实践是检验真理的唯一标准

把 TRAE 当作编程老师（最重要）

对于不懂编程的小伙伴来说，掌握一些基本的编程知识是十分必要的。

TRAE 可以很好地帮助我们入门。你甚至可以用它入门某种编程语言直到精通。

大部分时候，使用 Claude-4-Sonnet

TRAE 支持的模型有很多，目前我比较推荐的是 Claude-4-Sonnet。

虽然 GPT-5 效果也不错，但是我总感觉还差点什么～～

配置不同能力的智能体

针对不同的职能，我建议配置不同能力的智能体。

（写代码，写需求文档，写设计文档... 为这些智能体定制提示词）

比如，我们可以创建一个写代码的 AI 程序员 Susirial（如下图），它负责生成代码。我们需要给它配置上各种工具。

再比如，我们可以创建一个审核代码的 AI Reviewer，它负责审查代码，找出代码的潜在风险。

再比如，我们可以创建一个优化代码的 AI 性能分析师，它负责找出优化点，给出优化建议。

目前，咱们不太可能一次就生成 100%完美的代码～

为每种编程语言（智能体）定制提示词

不同编程语言在语法、范式和最佳实践上存在显著差异。

我们可以在智能体的提示词中，增加我们的设计范式，比如架构约束、使用哪些 API、如何处理异常、如何处理请求、请求失败处理原则、性能与安全性要求...

比如：

• 写 React 代码的智能体：staff_react

• 写 Python FastAPI 代码的智能体：staff_backend_fapi

• 写苹果 Swift 代码的智能体：staff_swift

2.3 和 2.4 通常需要结合起来使用，比如 susirial 是一个写程序的智能体，它主要负责前端 React 编写，等等...

如何制作理想中的 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 布局，生成一个对应的前端页面。

如何让 TRAE 像工程师一样写代码

1. 明确需求，生成需求文档（将需求拆分成不可再分的原子需求）

2. 根据需求文档，生成技术实现方案，让 AI 生成多种实现方案，并进行评估

3. 选定技术方案，让 AI 生成具体的流程框架，设计重要模块

4. 修订流程框架，模块，生成详细设计文档

5. 根据详细设计文档，制定 To Do List

6. 针对某个原子功能（最小功能），让 AI 开始编码

7. 将多个原子功能合并或者基于已经开发好的原子功能，按照一定流程、规则，实现高层级需求

8. 编译中、调试中出现的错误，让 AI 生成 BUG 文档，明确标注错误原因和解决办法，将这些文件归档

阅读 1，2，3，4，8 可以让你快速成长

代码及时归档

任何时候，代码都应该可以回溯到之前正常的版本。

咱们可以使用 git 或者通过定期备份的方式来实现。

【新建会话】使用时机

出现下面的情况时，我建议使用【新建会话】：

• 开始新功能编码

• 本来没问题的代码，因为新功能而被修改，这时需要回溯代码，并新建会话（在提示词中做约束）

• 新功能或者 BUG 在多轮讨论之后（比如 10 轮）仍然没有达到效果，这时需要回溯代码，重新设计提示词，开启新会话

• 编译错误经过多轮后（比如 10 轮），仍然出现同样的错误（比如'}'号的位置问题）

适当补充上下文

针对某一个需求、BUG、编译错误，我们最好能主动告诉 AI：

1. 需要查看哪些代码文件

2. 需要查看哪些函数

3. 不应该修改什么

4. 可以新建哪些代码和说明文档

5. 可以参考哪些代码生成

6. 要使用哪些框架，设计模式、性能要求、API 等等

如何快速分析解决错误

• 把运行错误贴给 AI，让 AI 根据错误在代码中写入 DEBUG LOG 打印机制（增加打印信息）

• 再次运行，抓取 LOG

• 把错误 LOG 贴给 AI 分析

经过上面的步骤，AI 一般都能根据错误日志修复代码问题。

关于茉韵 APP

中国苹果商店搜：茉韵 或者苹果手机打开链接：https://apps.apple.com/us/app/%E8%8C%89%E9%9F%B5/id6749039662?ppid=621ca0d4-5df4-45d3-a136-bda4782cf014

更多用户交流和福利，欢迎加入 TRAE 用户交流群｜官方，点击链接即可入群。