用 Trae Solo vibecoding 一个AI 绘本生成器
背景
一直都很想vibecoding一个绘本生成器，最近Trae Solo刚好可以玩一下，试试怎么样。
目标：
- 支持 TXT 文本上传（MVP 版先做这个吧）
- 自动生成适合 3-8 岁儿童的绘本故事
- 插图风格一致，角色不崩
- 实时进度显示，用户体验流畅
- 最终导出 PDF 可下载
实践过程
STEP 1：需求梳理 — 生成 PRD
我没有急着写代码，先让 SOLO 帮我梳理需求。
关键 Prompt：
做一个 AI 绘本生成器（MVP）。用户上传 TXT 纯文本，系统解析内容，生成 3-8 岁儿童绘本故事，配上风格一致的插图，最后导出可下载的 PDF。需要实时进度（例如轮询进度接口）。技术栈建议：Python Flask 后端 + 简单前端页面。 请写一份 PRD，目录至少包含：目标用户、核心用户故事 3～5 条、功能列表（区分 MVP 与后续迭代）、主流程、非功能需求（性能与安全写「目标」即可）。MVP 请写清：仅支持 TXT、是否需要登录才能上传、是否包含历史记录与文件清理。SOLO 生成了一份完整的 PRD，包含用户故事、功能列表、核心流程、非功能性需求。这一步主要是让 SOLO 理解项目全貌，后续对话它会自己翻回去看。
STEP 2：搭骨架 + 文件上传
关键 Prompt：
用 Flask 搭项目。实现文件上传接口：仅允许 .txt，保存到 static/uploads目录；配置单文件大小上限（例如 10MB）和 ALLOWED_EXTENSIONS。上传成功后返回 JSON：是否成功、服务端保存的文件名、file_id（若用数据库记录）。若需要登录后才能上传，请用 Flask-Login 保护路由并在前端说明。 说明：中文文件名可用「时间戳/UUID + 原扩展名」等方式避免乱码，不要只靠 secure_filename 丢中文。STEP 3：文档解析
关键 Prompt：
实现文档解析模块：仅 TXT。读取文本时先尝试 UTF-8，失败再尝试 GBK（或常见中文编码），统一返回 { success, content, method }；失败返回 { success: false, error }。提供 /parse 接口：入参为已上传文件的服务端文件名，返回解析后的纯文本供后续「生成大纲」使用。STEP 4：故事生成
关键 Prompt：
调用 DeepSeek Chat API（api.deepseek.com），从环境变量读取Api秘钥。把用户上传解析出的文本，转成 3-8 岁儿童绘本故事大纲，分 5～8 页。 硬性要求：在发给模型的系统/用户 Prompt 里规定死 Markdown 结构，便于后端解析，例如： - 第一行起有「# 故事标题」 - 每一页必须是「## 第N页」，且每页含三行：「**场景**：」「**文字**：」「**插画提示**：」 - 文末可加「## 故事主题」总结教育意义 - 若原文过长，在代码里截断后再请求，并设合理的 max_tokens，避免输出被截断在半页STEP 5：插图生成 + 角色一致性
这是整个项目最复杂的部分。
关键 Prompt：
为故事大纲的每一页调用文生图 API（用SiliconFlow，从环境变量读 API秘钥 与 API 地址）。要求： 1. 先从大纲文本里用规则/正则提取少量角色名；为每个角色生成固定的外貌描述（可用少量预设 + 兜底文案）。 2. 每页生成插图时，把「本页场景/插画提示」与「相关角色的外貌描述」以及「统一画风英文关键词」拼进英文 prompt；可加 consistent character design、children's book 等词。 3. 提供三种风格：水彩 / 卡通 / 手绘STEP 6：进度显示 + PDF 导出
关键 Prompt：
长任务（生成大纲、生成插图、合成 PDF）用后台线程执行；用内存字典 + task_id 保存状态：running / completed / failed、progress 0～100、message、结果。提供 GET /progress/<task_id> 供前端轮询（例如每 1 秒），完成后可拿到结果或错误原因。 合成 PDF：用 ReportLab（或同类库）把每页文字与插图 URL（先 requests 拉图片再排版）排成 A4 竖版；中文字体需注册本机字体路径（Windows 常见微软雅黑等）。合成成功后将 PDF 存盘，并返回可下载的静态路径或接口。STEP 7：用户系统 + 个性化
关键 Prompt：
加用户注册与登录（Flask-Login），密码需哈希存储（如 Werkzeug/Flask-Bcrypt）。用户表保存主题与字体档位。提供 /api/user/settings 读取与保存主题、字体。前端用>STEP 8：UI 调整与交互优化功能都有了，但界面很丑。接下来是反复调整 UI 的过程。
第一轮：整体风格
界面太朴素了，改成温馨可爱的风格，适合儿童绘本主题。用渐变背景、圆角卡片、柔和的阴影。
第二轮：布局调整
左侧放步骤进度，中间是主操作区，右侧放预览。三栏布局，响应式适配移动端。
第三轮：颜色微调
改成偏橙色的暖色系。加四种主题：默认暖色、深色、海洋蓝、森林绿。
第四轮：交互细节
卡片要有悬浮效果，按钮要有 hover 动画，进度条要有 shimmer 光效。步骤完成时显示绿色，当前步骤高亮。
STEP 9：收尾
关键 Prompt：
加定时清理：例如守护线程每小时扫描 uploads，删除超过 24 小时且未被数据库引用（或仅临时文件）的文件，避免磁盘被撑满。再加「历史记录」：列出当前用户已生成的绘本（标题、时间、大小），支持预览/下载/删除，数据用 SQLite + SQLAlchemy 即可。
最终成果
登录界面
![]()
绘本创作界面
![]()
绘本预览界面
![]()
我的绘本界面
![]()
上传记录界面![]()
设置界面![]()
功能 实现 文件上传 TXT，拖拽上传 文档解析 纯文本读取 + UTF-8/GBK 编码 fallback 故事生成 DeepSeek API，结构化 Prompt 插图生成 SiliconFlow API，三种风格，角色一致性 进度显示 线程 + 轮询，实时日志 PDF 导出 ReportLab 合成 用户系统 Flask-Login，注册/登录/设置 个性化 四种主题，三档字体 文件清理 守护线程，24 小时过期
效率对比：
指标 传统开发 Vibecoding 核心功能 预估 2-3 天 实际半天 UI 调整 预估半天 实际 4、5 轮迭代 代码量 约 1500 行 SOLO 生成，我只把bug复制给Trae Solo 文档 需要额外写 PRD 自动生成
Vibecoding 心得
1. 你是产品经理，AI 是程序员
Vibecoding 的核心是角色转换。你负责"要什么"，AI 负责"怎么写"。前提是你自己清楚需求边界，不能指望 AI 猜想法；同时你仍要会看报错、会跑通一条链路、会对照验收，否则「要什么」落不了地。
2. 方案先行，实现为后
每个功能实现前，先让 SOLO 输出技术方案，review 后再写代码。大模型自己写的方案，后续写代码时往往更连贯；但最终是否采用，仍以你的判断为准。
3. Prompt 要具体
给 Solo 的指令要含验收标准（接口返回什么、错误码、文件上限）；给大模型的故事 Prompt 要把输出格式写死，后续解析就省事。这是「先定结构、再填内容」。AI 出的 PRD 务必和最终实现对齐（或及时改 PRD），否则对外叙述和仓库会各说各话。
4. UI 调整要迭代
界面很难一次到位。我的做法是分轮次：先整体风格，再布局，再色板，最后动效。每次只动一类问题，方便定位。用 CSS 变量承载主题，后续替换成本低。
总结
做完这个项目，我对 Vibecoding 的体感是：相比从零手写同一套功能，整体推进会快很多，但也会遇到“工程坑”。比如大模型输出偶尔会偏离格式——我的处理方式是两手准备：一是 模型偶尔会偏离格式，我的经验是：Prompt 加硬约束；更稳的做法是在代码侧做容错解析或检测失败后自动重试。另外还有外部 API 的超时/限流、前端轮询的状态一致性等问题，需要靠日志与验收用例去兜底。最后小小吐槽：Trae Solo 网页版有时不太顺手，如果能出 Windows 桌面版就更好了。