VibeCoding实操：从零开发AI漫剧生成平台

安装 Skills​

​

​

​

​

53%

​

​

​

​

47%

​

​

开启agent team模式​

​

​

​

​

47%

​

​

​

​

53%

​

​

项目初始化​

本次演示， 从 0 开发一个 AI 漫剧生成平台​

技术选型​

对于从 0 开始的项目， 我们自己需要指定一下我们的技术选型，大概规划一下前后端，数据库的要求。然后让 AI 帮我进行技术选型。​

以下是我给到 AI 的提示词​

​

代码块​

Python

我想做一个 AI 漫剧生成平台， 这是我大概的技术选型：​

​

使用 nextjs全栈开发， 数据库使用 sqlite 快速完成集成​

​

请你帮我完成技术选型， 生成一个文档我 check 一下​

​

​

​

我们根据 AI 的交互提示， 根据自己的需要选择，中途遇到需要修改的地方，直接在终端给他说就行​

​

​

AI开发​

我们直接@刚刚生成的文件， 让 AI 帮我们开发​

​

​

AI 会帮我们生成一个很完整的执行计划​

这里 AI 会自动对他刚刚生成的 plan 进行 review。有不合理的地方，他会自己进行二次修改。​

​

​

​

​

51%

​

​

​

​

49%

​

​

修改完成后， 我们可以开始执行开发了， 这里我预留了一个模型可以在界面上配置的需求没做， 后面演示如何在已有项目上做功能迭代。​

​

​

加载superpowers:subagent-driven-development开始开发​

​

​

他会安装计划去完整整个项目的初始化和功能开发，过程中遇到我们需要确定的，就直接点就行。​

​

​

项目结构开发完成后， 他自动开始往我们的项目里面补功能， 比如，队列处理和数据库的集成​

​

​

前端页面开发​

​

​

使用 superpowers skill 开发有一个好处， 他每一次开发完一个功能会 commit 一次，这样即使 ai 把代码改坏了，我们也可以方便点回退​

​

​

这个过程我们只需要等待。全程用了将近 45 分钟， 初版系统就开发完成了​

​

​

运行测试​

启动就遇到个错误，不要慌， 修复他就好了​

​

​

修复方案也很简单，截图发送​

​

​

修复成功后，页面正常了​

​

​

发现 UI 非常的丑。接下来优化 UI 设计， 引入一个新的skill, 输入如下指令​

​

代码块​

Python

​

这一步也可以在最开始的指令中加入​

​

​

经过 3 轮优化， 改完后的样子​

​

​

项目迭代​

设置页开发​

上面说到， 模型配置现在是通过环境变量进行配置的。 我们要改成用户自己配置自己的 key。 c， 还是 字节 seedance api 和 google 的视频 API，图像生成模型也支持 openai 协议和 gemini 协议 用户可以添加多个模型供应商。 在生成剧本调用模型的地方，可以自己选择配置的模型。 这里我给的提示词是​

​

代码块​

Python

现在我们对模型配置进行改造， 有一个设置页面， 点击进入配置模型，文本模型支持 openai 协议， gemini 协议， 图像模型支持 openai 协议， gemini 协议。 视频模型支持字节 seedance 协议个 google 协议。用户可以配置多个模型供应商，默认通过 /model/list api 获取模型， 获取失败的时候，用户可以自己填写 model_id, 将 key 保存在本地. 在使用模型的时候， 用户可以选择自己的勾选的模型。 请你计划整个开发流程，完成开发，界面的风格需要和现在的保持一致​

​

​

​

模型对话功能补齐​

​

​

发现流程有一些问题， 我们来做一些调整​

​

​

AI 经过理解生成的执行计划​

​

​

图片生成 api 有问题​

​

​

分镜页面需要一个子流程, 流程逻辑是分镜描述生成必须-- 首尾帧生成(可跳过, 需要结合分镜描述和人物三维图生成) -- 视频生成（根据首尾帧图片 + 场景描述）生成视频, 每一个分镜都有单独生成的控制, 然后最上方都需要配置批量生成​

​

​

AI 优化后的页面​

​

​

优化一些细节​

​

​

功能迭代​

用户隔离​

​

​

模型拦截​

​

​

Veo 模型接入​

​

​

​

完整的系统截图​

​

​

​

​

​

​

​

​

​

​

​

​

​