1.生成项目文档

（一）ai大模型：

kimi（推荐），豆包，deepseek，codex，claude

（二）提示词：

我想开发一个AI漫剧制作平台，要求能首先基于AI生成的小说，然后一步步制作出多镜头的AI视频漫剧短片。请我帮设计一下完整的制作流程思路，及给每个步骤推荐一些所需的优质国内大模型API及相关的主流技术栈要求，方便下一步生成项目产品PRD文档，要求内容偏二次元风，主题更加萌系。

（三）生成：

在Trae里放入提示词选择agent模式（注意：里面有chat和agent两个模式，选错会导致文档质量不同）

生成了以下文档：

  0-项目立项文档md文档

  1.生成详细的PRD文档模板的md文档（按上述结构填充）

  2.设计详细的数据库ER图的md文档（项目/分镜/角色/素材 等等表结构）

  3.绘制详细的系统架构图（用mermaid语法生成可视化架构图）

  4.生成详细的产品原型线框图的md文档（关键页面低保真原型）

  5.生成详细的项目产品原型高保真页面描述清单的md文档（关键页面高保真原型）

  6.生成详细的项目开发的API接口的md文档

  7.生成详细的技术方案的md文档（针对MVP的技术实现方案）

产生的问题：

（一）一开始选择生成的时候选择的是chat模式导致prd文档写的十分简陋达不到要求

解决方案：使用agent模式重新根据提示词写出内容，或者让ai在基于现有代码的基础上修改

2.设计UI

（一）设计网站：https://stitch.withgoogle.com/（需要梯子）

（二）设计：

提示词：认真审核并理解所提供的“高保真页面描述清单”md文档内容，帮我设计一套web界面效果图，要求以中文界面的方式输出，每个界面的布局与风格要求保持一致性（高保真文档是上图的序号为5的文件）

给完提示词后就得到了上图的一系列UI界面，然后进行细改

（三）优化UI

点击右边的铅笔图案，然后选择要改的部分，将诉求发给ai，会根据你想要的内容进行修改，一般刚生成的UI界面逻辑上存在一些问题，需自行观察优化

（四）下载设计好的UI

点击导出会弹出这个选项，选择zip

下载好了会生成这样的文件

3.生成前端代码

（一）切换为solo模式

切换后变为这个样子

（二）创建项目

打开你的项目，然后再右边侧边栏空白处右键，点击在集成终端中打开

输入npm create vue@latest

然后终端会

再输入front-end，将图中两个选项选中

最后就生成了前端接口

此后每次当你需要打开你的网页时你需要在front-end文件夹下打开终端，并且输入npm run dev就会出现端口，可以输入到浏览器打开，也可以在trae里打开

（三）提示词：

/plan（你打出/就会弹出许多可选模式，点击plan模式）基于所提供的 下图1（右键你下好的stitch文件，也就是设计好的UI界面） 原型界面文件，对 下图2（你刚刚生成的前端文件front-end） vue3项目源码进行1:1比例的完全重构。确保重构后的项目在布局结构、视觉样式和交互功能方面与原型界面保持高度一致。实施过程中需精确还原原型中的所有元素尺寸、颜色方案、字体样式及交互效果，保证代码结构符合Vue3最佳实践，组件化设计合理，且重构后的项目能够正常运行并通过功能测试。

你的提示词输入完成后点击优化你输入的内容，就可以生成代码了

4.制作过程

UI前端实现建议使用trae，后端让codex或者deepseek，以下是我用trae生成的前端

（一）生成大框架时候产生的问题

问题：页面无法跳转

提示词：我现在的首页无法点击跳转，请你帮我修复

原因 ：首页顶部导航和侧边栏的链接都用了 <a href="#"> ，这种写法不会触发 Vue Router 路由跳转。

修改 ： 1.LandingView.vue

2.顶部导航：Logo、首页、创意工坊、模板市场、社区、登录、注册 已改为 <RouterLink>

3.侧边栏：我的项目、AI 小说引擎、素材库、会员中心、设置 已改为 <RouterLink>

结果：代码给ai后我能通过http://localhost:5173/的端口进入我的网页

问题：网页之间无法正常跳转，显示服务有问题

原因：页面使用的是 Google Fonts 的 Material Symbols 图标字体，原 CSS 链接中 Material Symbols 的轴参数写少了一个（缺少 GRAD 轴范围），导致图标字体加载失败，图标全部以英文名称（如 folder_open 、 settings ）显示，与中文挤在一起。

修改：

src/assets/main.css ：

1.将 Google Fonts 替换为国内可访问的 fonts.loli.net 镜像

2.修正 Material Symbols URL，补全 opsz,wght,FILL,GRAD 四个轴参数

index.html ：

  1.页面标题改为中文： 漫酱AI - 专业萌系剪辑器

  2.各页面可见英文已翻译为中文：

  3.Hot → 热门

  4.Points → 积分

  5.JPG / MP4 → 图片 / 视频

  6.LoRA Locked → LoRA 已锁定

  7.Weibo → 微博

  8.示例用户名 SakuraArtist 、 LumiDev 、 NightOwl 等 → 中文昵称

  9.页脚 Man-chan AI Team. Made with ❤️ for creators. → 漫酱AI团队. 用心为创作者打造 ❤️

结果：大部分网页互相能跳转，但是只能跳转一次，你在跳转的页面再点其他页面就无法跳转了

问题：所有按钮都是中英文结合，里面的字会挤出按钮边界

提示词：访问了后可以跳转，但是每个页面都有中文和英文同时存在挤压出界的情况，请你帮我以全中文的方式改一下

原因：

页面使用的是 Google Fonts 的 Material Symbols 图标字体，原 CSS 链接中 Material Symbols 的轴参数写少了一个（缺少 GRAD 轴范围），导致图标字体加载失败，图标全部以英文名称（如 folder_open 、 settings ）显示，与中文挤在一起。

修改内容：

src/assets/main.css ：

将 Google Fonts 替换为国内可访问的 fonts.loli.net 镜像

修正 Material Symbols URL，补全 opsz,wght,FILL,GRAD 四个轴参数

index.html ：

页面标题改为中文： 漫酱AI - 专业萌系剪辑器

各页面可见英文已翻译为中文：

Hot → 热门

Points → 积分

  JPG / MP4 → 图片 / 视频

  LoRA Locked → LoRA 已锁定

  Weibo → 微博

  示例用户名 SakuraArtist 、 LumiDev 、 NightOwl 等 → 中文昵称

  页脚 Man-chan AI Team. Made with ❤️ for creators. → 漫酱AI团队. 用心为创作者打造 ❤️

问题：页面留存的部分页面无法相互跳转

提示词：页面之间无法顺利切换，请你帮我修复一下

修改：

  将 14 个视图中的顶部导航、左侧边栏、移动端底部导航的 <a href="#"> 全部替换为 <RouterLink>

保留每个页面当前激活项的高亮样式

路由映射：首页 /home 、创意工坊 /creative 、模板市场 /assets 、社区 /community 、我的项目 / 、AI 小说引擎 /novel 、素材库 /assets 、会员中心 /billing 、设置/登录/注册 /login

结果：所有网页可以互通

问题：页面逻辑有问题，页面跳转混乱

提示词：

/plan 基于所提供的 stitch_ 原型界面文件，以1:1的方式完全重构 front-end vue3项目源码，保证项目的布局，样式及交互功能的一致性,并且根据页面的逻辑进行设置调整和跳转选项，增添缺少的点击页面，要求这一切基于我现有的代码和页面进行修改融合调整，并且优化功能

修改：

阶段四：响应式布局修复

  DubbingView.vue ：左右固定面板改为移动端抽屉，主内容区自适应

  EffectsView.vue ：三栏布局改为移动端抽屉+全宽预览

  ComicView.vue ：画布宽度自适应，右侧面板改为抽屉

  EditorView.vue ：素材库/属性面板改为移动端抽屉

阶段一/二/三收尾

  修复可见英文 alt 文本为中文（AppSidebar、PublishView、EditorView、ModelsView、LandingView）

  保留 data-alt 英文描述作为后续本地资源提示

阶段六：最终验证

  npm run type-check ✅ 通过

  npm run build-only ✅ 通过，dist 生成成功

  开发服务器因沙箱网络限制无法启动，但构建产物正常

（二）网页设计

前言：在开始做创意页面开始的ai短视频创作页面之前还需要生成一个文档，然后后续的页面制作生成需要参照这个文档，在trae或者codex里制作都可以

  制作文档提示词：

  请对提供的 2-AI漫剧制作平台_PRD_v1.0.md PRD文档内容进行全面、细致的审核与深入理解。基于文档中关于"AI灵感一键生成短视频全链路系统"的核心闭环流程（文字灵感→长篇小说文本→影视分镜脚本→分镜插画素材→批量生成短视频片段→视频剪辑合并 + AI配音 + 字幕合成→成片导出），整理出一套结构完整、内容详实的功能细化拆解文档。

  该文档需包含以下关键要素：

  1）系统整体及各环节的技术栈选型说明，明确前端框架、后端服务架构、AI模型（文本生成、图像生成、视频生成、语音合成）、数据库及存储方案等技术组件及选型理由；

  2）每个核心环节的详细业务流程图，使用Mermaid语法标准化绘制，覆盖从输入到输出的完整数据流转路径；

  3）全链路任务编排方案，包括各模块间的数据流转机制、RESTful接口定义（含请求/响应结构）、任务状态管理机制（排队、执行中、完成、失败等状态流转）及异常处理与重试策略。

  确保文档内容专业、准确，能够作为系统开发的详细技术指导依据。生成后以*.md格式保存至 项目开发文档 "项目开发文档"目录中。

  登录/注册页面：

这里我叫trae为我写了前端的登录和验证码登录的设计，然后后端实现是用codex写的，中途需要去阿里云平台购买短信验证服务，然后叫codex帮忙实现，缺什么让他说出来

阿里云平台短信认证过程：

首先进入网页https://www.aliyun.com/product/pnvs进行购买套餐（默认已经注册）

然后在新手指引里根据步骤来完成准备工作https://help.aliyun.com/zh/pnvs/getting-started/sms-authentication-service-novice-guide?spm=5176.38925337.websiteFastBuy.1.7ff01a8fEjSEd8

点击短信认证服务，查看系统赠送认证参数配置https://help.aliyun.com/zh/pnvs/user-guide/sms-authentication-service?spm=a2c4g.11186623.help-menu-75010.d_2_0.87156222iDG8x2

查看到系统赠送的签名和模板配置后，选择一个你喜欢的签名（或者整个页面发给ai，但是有被泄露的风险）以及全部模板配置发给codexhttps://dypns.console.aliyun.com/smsCertParamsConfig?spm=a2c4g.11186623.0.0.6b1d6222iGvbw0

还有创建用户需要再创建一个ram用户，然后给你的ram用户授权，在这个子用户里创建你的AccessKey，然后将你的AccessKeyID发给codex让它生成

这样所有短信验证需要的关键信息都得到了，全部发给codex，中途有错让它不断调整修改就行了

完成短信认证功能之后需要你每次使用前都在backend里面node dist/index.js来启动

提示词：

使用 d:\fuguangzaomeng\项目开发文档\项目源码\front-end\stitch_\ai_ai\code.html 页面作为设计参考和基础模板，对位于"http://localhost:5176/"的注册页面进行全面美化与视觉优化。确保新设计在保持功能完整性的前提下，实现与参考页面视觉风格的一致性，包括但不限于色彩方案、排版层次、组件样式和交互效果。优化后的页面应具备响应式设计，在不同设备尺寸下均能提供良好的用户体验，并符合现代网页设计标准。生成如下

首页：

项目中心--->我的项目：

思考：这里我发现导航栏虽然是项目中心，但是实际功能是我创建项目的地方，于是我进行了修改

提示词：

请你在侧边栏创建一个我的项目，并将它改为项目中心的功能，项目中心网页请你根据我的其他网页重新设计

结果：

将项目中心改为我的项目部分

改后：

创意工坊--->项目中心：

思考：在经过ai的审核后，发现我的创意工坊页面是存在重复多余的，于是改为项目中心

提示词：

请你在侧边栏创建一个我的项目，并将它改为项目中心的功能，项目中心网页请你根据我的其他网页重新设计

结果：

将我的创意工坊删除了，并且替换为新的项目中心页面（因为经过ai审查后发现两者的页面功能是一样的）

模板市场:

社区：

角色工坊：

素材库：

AI助手：

风格化工坊：

会员中心：

设置：

编剧：

  问题一：一开始的时候ai助手生成的内容无法应用到创意里面，于是修改成ai生成的内容自动划分大纲章节，还有ai生成正文和续写

提示词：请你将我的ai助手和创意串联起来，生成的大纲能应用到创意里

改后：侧边栏的大纲转章节会智能分章节，并且正文也能正常导入

问题二：生成的大纲里面有着很多的乱码

提示词：现在我的ai生成的小说有乱码，请你看一下原因

原因：

1.后端 AI 助手要求模型返回严格 JSON，逻辑在 [assistant.ts (line 237)](D:\fuguangzaomeng\项目开发文档\项目源码\backend\src\assistant.ts:237)。

2.但模型这次返回的内容里，chapters[].content 包含多行正文，形成了“看起来像 JSON、其实不是严格 JSON”的文本。

3.后端 extractJson() / JSON.parse() 没能把它解析成结构化结果，于是退回成“普通文本 reply”，位置在 [assistant.ts (line 170)](D:\fuguangzaomeng\项目开发文档\项目源码\backend\src\assistant.ts:170) 和 [assistant.ts (line 292)](D:\fuguangzaomeng\项目开发文档\项目源码\backend\src\assistant.ts:292)。

4.前端 AI 助手页在没有 actions 时，会把这段原始 reply 直接写进 script.outline，位置在 [AiAssistantRealView.vue (line 230)](D:\fuguangzaomeng\项目开发文档\项目源码\front-end\src\views\AiAssistantRealView.vue:230)。

5.小说页再把这个“伪 JSON 大纲”按普通文本拆章节，于是生成了 第1章：{，位置在 [NovelView.vue (line 313)](D:\fuguangzaomeng\项目开发文档\项目源码\front-end\src\views\NovelView.vue:313) 和 [project.ts (line 205)](D:\fuguangzaomeng\项目开发文档\项目源码\front-end\src\stores\project.ts:205)。

总结：不是字符集坏了，是 AI 的结构化返回解析失败后，被 fallback 逻辑误存成了小说内容

解决：

1.后端/前端都要识别这类“半结构化 AI 返回”

2.不再把原始 JSON 文本写进 outline

3.对已经坏掉的项目，优先从 outline 里恢复真正的 chapters

改后：恢复正常

分镜：

a.提示词：认真审核我的文档和项目，请你设计一个分镜系统，并告诉我你的思路

b.codex会列一份清单出来，然后：现在我要你基于你的思路来进行实现

c.提示词：好，如何实现真实的视频分镜，请你根据https://agnes-ai.com/zh-Hans/docs/agnes-video-v20的内容告诉我怎么实现

d.提示词：那么现在我需要做什么或者给你什么信息吗，然后codex为我列了一个清单，要我去官网找api，自行写入文档里以防泄露

e.一切都生成好了后让他解决一下小的报错就可以生成视频了

改后：

问题一：视频只能选择生成4s的，除此以外都不能生成

提示词：为什么我的视频除了4s以外的都生成不了

原因：

  1.8 秒任务已经在 Agnes 那边跑完了

  2.但 Agnes 返回的结果里，没有落在我们原来只认的 metadata.url 这个字段上

  3.我们后端于是把它误判成失败了

解决：

  1.在 [agnes-video.ts](D:/fuguangzaomeng/项目开发文档/项目源码/backend/src/agnes-video.ts) 里，完成后不再只读 metadata.url，还会尝试旧版查询接口和其他可能的 URL 字段

  2.在 [generation.ts](D:/fuguangzaomeng/项目开发文档/项目源码/backend/src/generation.ts) 里，失败时会清掉旧的 4 秒视频结果，避免界面残留旧预览误导

改后：恢复正常

素材生成：

思考：原本的生成页面我认为在制作项目的过程中起不到任何作用，我并不需要任何多余的插画或者视频素材生成，一般这些工作都在对应的页面底下实现，所以我原本打算删掉，于是我把这个想法发给了ai，ai的建议是叫我改一下就行

提示词：素材生成页面里面的素材生成中心和素材记录我认为完全没有作用，请你根据我的项目来看它是否有用

改后：

问题一：我认为现在做的效果和功能实现还是不好，网页实际作用很小，排布杂乱

配音：

思考：因为我生成的视频里自带配音，所以我要重新定位一下配音在我视频里起到的作用，于是我发给了codex

提示词：我生成的视频里本身有声音，如果是这样你认为配音还能起到什么作用

结果：

1.统一声音 不同镜头各自生成的声音，常常会出现音色、情绪、响度不一致。合成成长视频时会很明显。

2.替换问题镜头 有些镜头画面能用，但原声内容不准、咬字怪、情绪不对。这时就需要单独补配，而不是整段重生。

3.后期可控 你现在后期页已经有原声静音、音量控制这类逻辑，说明声音最好是可管理的，而不是完全焊死在视频里。

4.补充非对白音频 比如旁白、章节解说、转场语音，这些不一定适合交给镜头原生声音去承担。

结论：

如果镜头视频已经自带可用对白，就没必要保留一个“大而完整的配音功能页”；但有必要保留一个“声音处理/补配音”环节。

思考：通过ai的回答我认为我的配音系统应该用处理有问题的音频或者做角色配音来生成视频，固定角色形象，所以我依然需要这个功能，我便下载了CosyVoice2

提示词：假如我要部署CosyVoice 3 / CosyVoice2，你需要我做什么

结果：

  1.一台部署机器

    最好是 Linux + NVIDIA GPU

    也可以先在你本机试，但你现在是 Windows，正式跑服务我还是更建议 Linux

    官方仓库提供了 FastAPI 和 Docker 部署方式，也默认走 NVIDIA 运行时 来源：

    GitHub - QwenAudio/CosyVoice: Multi-lingual large voice generation model, providing inference, training and deployment full-stack ability. · GitHub

  2.GPU 信息

        告诉我你的显卡型号、显存大小、CUDA 是否可用

        例如：4090 24GB、A5000 24GB、3090 24GB

                这是为了判断你更适合：

                1.直接普通推理

      2.vLLM

                3. 还是后面再考虑 TensorRT-LLM

  3.你想用哪个模型

        官方现在明确“更推荐”用 Fun-CosyVoice3-0.5B

        也支持 CosyVoice2-0.5B

                如果你问我的建议：

      再切 CosyVoice3：效果更好，后面升级 来源：

      先上 CosyVoice2：更稳，更适合先接入业务

                 README 里明确推荐 Fun-CosyVoice3-0.5B

GitHub - QwenAudio/CosyVoice: Multi-lingual large voice generation model, providing inference, training and deployment full-stack ability. · GitHub

  4.你想怎么用它 你得先帮我定一种主模式，不然接口会做得很散。你这个项目最适合的是下面二选一：

         A. 固定角色音库

                后面镜头补配音时直接选角色

                每个角色注册一个声音

        B. 零样本克隆

               每次上传一段参考音，临时生成同音色语音

  对你的漫剧项目，我更推荐 A。

  5.如果要做角色音色克隆，给我参考音 每个角色至少准备：

        10~30 秒干净人声

        尽量不要有背景音乐、混响、杂音

        最好再给这段音频对应的文本

改后：

后期：

改后：

润色：

发布：