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

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

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

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

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

1.1 第一版：看视频，学古诗

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

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

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

当然，理想很丰满，现实往往有些骨感。目前文生视频、图生视频的技术在效果和成本上，对个人开发者来说还有些挑战。所以我们不妨分步实现，先简化形式：用"图片 + MP3"的方式构成内容单元，既降低制作门槛，也保留了核心的沉浸体验。

于是，这样一个产品雏形慢慢清晰起来：

一款通过看视频帮助学习古诗词的应用： 上下滑动切换诗歌，左右滑动切换章节。希望能够让孩子们在轻松愉悦的氛围中，爱上古诗词。

于是，我用 TRAE 实现了上面的功能，咱们一起来看下：

诗词阅读界面

小朋友可以学习具体的某个诗词。

枯藤老树昏鸦： 不用我多说，单看整个图片，诗词意境效果拉满。

有图（字节 SeeDream 3.0）
有诗文，有解释（字节豆包 1.6）
有朗诵（火山引擎大模型语音合成）

初期效果视频演示，可参考：

www.bilibili.com/video/BV1qT...

诗词列表界面

小朋友可以搜索想学的诗。

为每一首配上吸引人的封面，吸引小朋友的注意力～我也是煞费苦心。

初期效果视频演示，可参考：

www.bilibili.com/video/BV15f...

诗词助手智能体

大模型解答小朋友的问题。

这里我用扣子智能体平台的 API，迅速搭建出一个问答 BOT 机器人，用来回答小朋友的问题。

初期效果演示：

www.bilibili.com/video/BV1TG...

第一版的挫折

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

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

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

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

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

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

主界面

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

配图详情页面

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

诗词意境创作页面

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

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

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：

diff 复制代码

+--------------------------------------+
|                [大图]                |
|           (诗词意境相关图片)          |
+--------------------------------------+
|  访问次数: 1.2k    点赞数: 345       |
|  时间: 2023-11-06 14:20              |
+--------------------------------------+
|  用户#62071E2B                       |
|  🔹 日月之行，若出其中；              |
|                                      |
|  用户#62071E2B                       |
|  🔹 枯藤老树昏鸦                     |
+--------------------------------------+
|   探索    |   对话    |   灵感   |  我  |
|  🔍      |  💬      |  💡     | 👤 |
+--------------------------------------+

使用 TRAE 内置工具：SOLO 中的 Figma

Figma 则是一家以开发网页端协作软件为主的公司，其主要产品 Figma Design 是一款强大的界面设计协作工具。在 TRAE 中集成 Figma 后，用户可以通过 Figma 将 Figma 的设计稿与 TRAE 的自动化流程相连接。我目前还没有测试过这种方法，网上有一些介绍，大家可以参考。