故事的缘起
去年可以说是 Vibe Coding（氛围编码）一经推出便大火的一年，而且确实也编程领悦带来了实打实的效率提升。
起因是女儿很喜欢在我的备忘录和搜索框中点击各种 emoji。她不仅点得起劲，还自顾自地嘟囔着每个表情的含义，偶尔还会主动问我最喜欢哪个表情符号。
受此启发，我想为女儿搭建一款 emoji 的故事书。
于是第一版的提示词在我脑海里诞生了：
我是一个富有爱心的奶爸，想构建一个全栈 app，名字叫 story_pot,一个可以通过点选的 emoji 图片创作一个简短、有趣的儿童故事的程序。
- 程序有用户登录功能
- 程序可以设计用户的昵称、年龄、性别等基本信息，并可以在后续故事中融入用户的相关设置信息
- 故事的生成通过大模型产生，提示词会根据年龄、性别略有不同，默认是故事的讲述对象5 岁的小女孩
- 大模型默认接入 deepseek，但也可以适配其他模型
- 创造的故事最好可以和中国传统故事（包括但不限于神话、寓言、小说）相结合或者有关联
- 登录使用 clerk
- 生成的故事除了通过文本内容展示外，还要预留一个语音功能，后续可以通过接入语音大模型进行朗读
- 重要代码上请添加中文注释 ，README 中有必要的启动方法和注意事项
最佳的技术栈选型如下：
后端: Python FastAPI
前端: Tailwind CSS + Alpine.js
数据库: Supabase的 mongo
在开始编码前，我希望你一步一步仔细思考，帮我规划程序整体的架构
记得当时最火的 Vibe 编程工具是 TRAE，于是把提示词放到 TRAE 应用中，第一版的 web 应用也就诞生，但为了更具定制化，我把代码下载到了本地，开始了项目微调，用了 gemini ，也试了 claude code，提示词也写了很多，现在还能回忆起的思路如下：
故事元素请按 场景、人物、道具 3 个类别去分类，鼠标移到对应 emoji 上时，显示其中文名称，对于免费用户，显示元素是固定的；付费用户可以显示更多的元素
导出这个程序的需求文档和使用说明
接下来的步骤是购买域名和上线应用。我在腾讯云购买了域名，整体配置过程还算便捷，整个流程分为以下几步：
1.在腾讯云购买域名（33 元）
2.在 vercel 的 domain 配置项下添加新域名的名称，并获得域名解析的ip 地址等详情
3.在腾讯云的 dns 配置页面，添加对应的配置信息
接下来就是把应用发到群里，让大家试用提供一下反馈，大家总体反馈都不错（当然试用的人也比较少），这期间我又给这个应用加上了语音朗读的功能，用的是阿里云的服务（主要看中的是免费）。
故事的尾声
最终，我把这个基本成型的产品拿给女儿体验。遗憾的是，她的兴趣似乎不大，玩了一会儿便放下了。
不过这个 web 应用让我真正体会了使用 vibe coding，从一个简单想法一步步落地到线上产品的完整旅程，后续我还计划再加入一些图文的功能。或许这并不是一个很成功产品，但是一路走来确实给我带来了不少乐趣。最近拿这个作品参加了知乎举办的2025 年AGI专项赛，拿了一个全国第三的成绩，算是一个意外之喜。补充一下，这个作品的 web 地址是：www.storypot.cn/ ，欢迎大家体验并提提意见和感受。
一些经验
使用 AI Agent 编程的过程中，其实有很多经验可以说，今天就主要从文档这个角度谈一下我的使用经验，我们在编程的使用很容易会遇到一般函数、框架的库版本不是最新的，或者一些冷门的函数库 AI 可能也不知道，所以 AI 在协助我们编程的时候就会遇到答非所问、越改越错的情况，怎么避免呢？我的经验如下：
1/ 使用 context7 的 mcp
安装 context7 的 mcp
在每次查询问题的后面加上 "use contex7"
或者在 claude.md 的设置文件中加上说明：
在使用任何第三方套件时，必须使用 context7 查询最新文档
2/ 使用 perplexity
3/ 使用更好的提示词
请上网查询 xx 官方文档中关于 xx 的用法，读取相关页面后，告诉我正确的实践方式
请一定引用官方文档链接,并再次确认于和我的描述相符。
think harder 描述你的问题（只对 claude code 管用）
One more thing
今年还参加了一个阿里万象的视频比赛，但并没有获奖，成果在这里：weibo.com/dsy2008bob?…
总结一下我的 AI 视频创作流程，供大家参考。
1.脑海中形成模糊创意，然后喂给 GPT
一个毛绒手办小玉米和一个小女孩的故事：平时小女孩总拿着小玉米到处去玩，睡觉也抱着小玉米。但随着小女孩长大，去了幼儿园，认识了新朋友，就把小玉米遗忘了。请根据上面内容，帮我设计一个 10s 以上的视频脚本，突出"心跳"这个主题。
2.让 GPT 根据我提供的内容形成故事梗概
3.根据故事梗概，让 GPT 生成故事角色的描述
你是一位专业的角色设计师，请根据我提供给你的【故事梗概】设计每个主要角色的外观，包含相貌、发型、服装、体型、气质等，并转换为 AI 影像生成工具的英文提示词（附上中文翻译），所有角色皆以白色的背景单独呈现。
【故事梗概】
4.把角色描述喂给通义万相和 google banana 生成图像（可以拿拍好的照片坐垫图；banana 可以根据一张图生成多视角图）
5.根据故事梗概让 GPT 生成分镜
你是一位 专业的分镜设计师，请根据我提供给你的 【故事情节】 生成一个完整的分镜表，输出格式如下：
• 编号：以「分镜1、分镜2…」标示。
• 地点：说明分镜中的场景环境、时间、光线与氛围等。
• 镜头：描述分镜中角色的表情、姿势和动作，并描述拍摄的构图、视角和运镜手法。
• 对白：列出在该分镜出现的对话或旁白，若无对话可标示「无对话」。
6.使用分镜描述 prompt 在通义万相生成图像
7.使用 6 中的图像在https://huixiang.baidu.com/ 生成视频（5s）
8.多个视频组合拼装生成最终稿
