AI编程实战：用Trae SOLO模式梭哈一个文档阅读小程序

埃兰德欧神
289 阅读10分钟

💡 写在前面

技术文档都是英文，看着费劲？想用 AI 翻译成中文，再通过小程序随时随地阅读？我用 Trae CN 的 SOLO 模式，三天时间搞定了一个沉浸式文档阅读小程序的前中后端开发。这篇文章记录了从想法到落地的全过程，包括技术选型、AI 协作实战，以及踩过的那些坑。如果你对 AI 辅助编程感兴趣，或者也想尝试 SOLO 模式开发项目，这篇实战经验应该能给你一些参考。

一、为什么要做这个项目？

作为开发者，我经常需要查阅各种技术文档，比如 Supabase、Appwrite、Claude Code 等。这些文档在移动端的体验整体不错，但有个共同的痛点：都是英文的，没有中文版。

碎片时间用手机看英文文档，不仅阅读效率低，理解起来也费劲。虽然可以用翻译工具，但来回切换很麻烦，体验割裂。于是就有了这个想法：做一个小程序，可以收集、整理开源项目的 Markdown 文档，通过 AI 自动翻译成中文，然后提供沉浸式的阅读体验。

这样既能享受小程序的便捷阅读体验，又能无障碍地理解技术内容。正好最近体验了 Trae CN 的 SOLO 模式，不如就用它来实现这个想法，看看 AI 辅助编程在实际项目中的表现如何。

二、技术选型：站在巨人的肩膀上

工欲善其事，必先利其器。在开始编码前，我做了一轮技术调研：

核心技术栈

  • 小程序框架：vue-mini-tailwindcss-template - 这是我一直使用的微信小程序模板，支持 Vue3 + TailwindCSS

  • Markdown 解析：Towxml - 在小程序上解析和渲染 Markdown 的利器

  • 后端服务：Supabase - 开源的 Firebase 替代品，提供数据库、认证、存储等全套后端服务

  • 项目管理：PNPM Workspace - 统一管理小程序、后台管理、数据库脚本等多个子项目

项目结构设计

基于这些技术选型，我快速搭建了 Monorepo 结构：

├── packages
│   ├── miniprogram          # 微信小程序
│   ├── admin-dashboard      # 后台管理系统
│   └── database            # 数据库脚本
├── supabase
│   ├── config.toml         # Supabase 配置
│   ├── functions           # 云函数
│   └── migrations          # 数据库迁移脚本
├── scripts                 # 工具脚本
└── pnpm-workspace.yaml     # Workspace 配置

技术选型完成，接下来就是请 AI 出场了。

三、SOLO 实战：让 AI 成为你的开发伙伴

初识 Trae SOLO

TRAE 是一个能理解需求、调动工具、独立完成各类开发任务的 AI 开发工程师。它的 SOLO 模式支持多任务并行，这意味着可以同时推进前端、后端、数据库等多个任务。

初始化工作区后，我导入 Trae 开始 Vibe Coding。

[疯狂打码表情包]

第一步：需求沟通与原型设计

我给 Solo Coder 的第一个任务很简单：

"请先学习这个项目，这是一个沉浸式阅读项目，功能是收集、整理和翻译网上开源项目的 Markdown 文档资料，使用小程序进行阅读。请帮我设计一个小程序原型图。"

几分钟后，Solo Coder 给出了一个完整的设计原型：

惊讶

设计图和功能规划完全符合预期！这就是 AI 的魔力：从模糊的想法到清晰的原型，只需要一次对话。

第二步：多任务并行开发

了解到 SOLO 模式支持多任务并行后，我决定梭哈一把，同时开启三个任务：

  1. 开发微信小程序 - 实现用户界面和交互

  2. 开发 Admin Dashboard - 后台管理系统，用于文档管理

  3. 开发 Supabase - 数据库设计和 API 接口

看着三个任务同时推进，那一刻真的感受到：AI 时代已经到来，一个人可以顶一个小团队。

然而，理想很丰满，现实很骨感。接下来才是真正的考验。

实战中的挑战与解决

问题 1：Towxml 组件适配失败

现象：Towxml 组件在 vue-mini-tailwindcss-template 工程里无法正常工作。

原因分析：应该是工程目录结构的问题，Towxml 对路径和配置有特定要求。

解决方案：不纠结于原有模板，直接改用 Towxml-Demo-3.0 作为基础进行初始化。虽然损失了一些便利性，但 快速试错、及时调整 比坚持错误的方向更重要。

问题 2：Admin Dashboard 对接 Supabase 后白屏

实现过程：

  • 完成了 Arco Design Pro 项目的全量引入

  • 项目启动访问 http://localhost:3000，初始功能正常

  • 指挥 Solo Coder 对接 Supabase 的注册和登录功能

  • AI 引入 @supabase/supabase-js，将 Mock API 替换为真实的 Supabase 调用

遇到的问题：提交代码后，打开浏览器——白屏了 😮

问题定位：

  • 打开控制台，发现用户权限数据 undefined

  • 原因：初始化时使用的是 Mock 数据，对接后端后缺少相应的权限字段

解决方法：
给 Solo Coder 提供明确的指令：

"请根据 mock/user.ts 中的用户登录返回数据，修复用户登录权限数据 undefined 问题。"

同时贴上控制台的完整报错信息。AI 很快定位到问题并修复了数据结构。

经验教训：提供足够的上下文信息至关重要。代码、报错、期望结果都贴出来，AI 才能给出准确的解决方案。

问题 3：Supabase 数据库设计

需求：根据功能规划设计数据库表结构。 数据库迁移脚本生成

AI 表现：Solo Coder 不仅设计了合理的表结构，还自动生成了符合规范的 migration 脚本：

让我印象深刻的地方：

  • 项目目录结构准确无误

  • Migration 文件命名规范（时间戳 + 描述）

  • SQL 脚本包含了索引、外键、注释等细节

感受：在这种标准化的工作上，AI 的表现甚至比人工更稳定、更规范。

问题 4：Git 版本管理的痛点

完成所有开发任务后，我发现了一个严重的问题：工作区内有 200+ 个文件被修改。

遇到的困扰：

  • 整体提交不利于回退和问题追溯

  • 虽然每个任务都有产物汇总页面，但没有独立的提交功能

代码变更汇总

  • 只能手动将不同模块的变更分别提交

尝试的解决方法：
在项目规则中添加：

任务运行完毕，请按照 git 规范提交这个任务更改的代码，包括修改后的文件、删除的文件和新增的文件。

结果：后续执行仍然不起作用。

反思：这可能是目前 SOLO 模式最需要改进的地方。如果有朋友知道更好的解决方法，欢迎在评论区分享！

四、经验总结：AI 不是银弹，但确实是利器

重新认识 AI 辅助编程

使用 SOLO 模式的这段时间，让我对 AI 辅助编程有了更深的认识。它确实不像想象中那样"一句话需求，坐等收代码"，而是仍需像传统开发那样精心打磨，遇到问题时要自己定位和 Debug。

但不可否认，AI 确实大幅提升了开发效率，改变的是我们的工作方式。

SOLO 模式的优势

1. 多任务并行能力惊艳

最让我惊喜的是可以同时开 3 个任务：小程序、后台管理、数据库设计。这种并行开发的能力是传统方式难以企及的。虽然需要在任务间切换关注点，但整体进度确实快了很多。

2. 快速原型和代码生成

从设计原型到生成代码，SOLO 模式能够快速将想法落地。特别是在项目初期搭建阶段，AI 生成的代码质量和项目结构都相当不错，大大减少了"从 0 到 1"的时间成本。

3. 代码规范性出人意料

AI 生成的代码在命名、目录结构、迁移脚本等方面都很规范，有时候比人工写的还要严谨。比如 Supabase 的 migration 文件命名，完全符合最佳实践。

SOLO 模式的局限

1. 需要精确的指令

AI 不会读心术，模糊的需求会得到模糊的结果。你需要像写 PRD 一样清晰地描述需求，必要时还要提供上下文和示例。这对产品思维和需求表达能力要求不低。

2. 代码审查不可省略

生成的代码并非完美，白屏、权限数据缺失等问题依然会出现。你仍然需要具备审查代码的能力，理解代码逻辑，才能快速定位和修复问题。

3. Git 管理是个痛点

200+ 文件的修改如果没有合理的 commit 策略，回退和版本管理会很痛苦。虽然尝试在项目规则里加入自动提交的要求，但效果并不理想。这可能是目前 SOLO 模式最需要改进的地方。

适用场景建议

基于这次实战，我认为 SOLO 模式特别适合：

✅ 适合的场景

  • 原型快速验证：想法验证阶段，快速搭建 MVP

  • 标准化项目：采用主流技术栈的 CRUD 项目

  • 重复性工作：数据库设计、API 接口、基础组件等

  • 个人项目：一个人顶一个小团队，特别适合独立开发者

❌ 相对不适合

  • 高度定制化的复杂业务逻辑

  • 需要深度性能优化的场景

  • 对代码质量要求极高的核心模块

实用技巧分享

1. 任务拆分要合理

不要一次性给太大的任务，把大任务拆成小的、可验证的子任务。每个子任务完成后验证一下，避免问题累积。就像盖楼一样，一层一层往上搭，每一层都要验收。

2. 提供充足的上下文

贴代码、贴报错、贴项目结构。AI 看到的信息越完整，给出的解决方案越靠谱。就像遇到白屏问题，把控制台报错一贴，问题很快就定位了。

3. 建立项目规则

在项目开始时就建立清晰的规则和约定（代码风格、提交规范、文件组织等），让 AI 遵循统一的标准。虽然不是 100% 生效，但会有明显帮助。

4. 保持怀疑精神

AI 生成的代码要经过自己的审查和测试，不要盲目信任。遇到问题时，先理解代码逻辑，再决定是修改还是重新生成。

对 AI 编程工具的思考

这次实战让我真切感受到"前端已死，未来已来"这句话的含义。AI 不是要取代开发者，而是在改变开发者的工作方式：

  • 从"写代码"转向"设计和审查"：更多精力放在架构设计、需求分析和代码审查上

  • 从"单打独斗"转向"人机协作"：学会如何高效地与 AI 沟通和协作

  • 从"全栈工程师"转向"产品工程师"：技术实现由 AI 辅助，人更专注于产品和用户价值

五、项目后续计划

目前项目已经跑通了主体流程，完成了基础架构搭建和核心功能原型。接下来的计划：

  1. 完善文档解析和翻译功能

  2. 优化阅读体验和交互细节

  3. 补充完整的测试用例

  4. 撰写详细的技术文档

如果你对这个小程序感兴趣，欢迎持续关注。项目成熟后会考虑开源，希望能给想尝试 AI 辅助开发的朋友提供一些参考。

也欢迎在评论区分享你使用 AI 编程工具的经验，或者对这个项目的建议和想法。AI 辅助开发的最佳实践，需要我们一起探索。

📌 关键收获

  • SOLO 模式适合快速原型和标准化项目，但不是银弹

  • 精确的需求描述和充足的上下文是成功的关键

  • 代码审查和 Git 管理仍然需要人工介入

  • AI 改变的是工作方式，而非取代开发者

  • 一个人确实可以顶一个小团队，但前提是你知道怎么用好 AI

avatar
文章
阅读
粉丝