企业官网建设流程全解析

初次利用ai创作漫剧生成平台相关记录

一.明确想法

具体这个东西可以干什么，有哪些主要的功能，在提交给ai让其生成制作流程思路。

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

交给ai美化提示词。

二.一个项目的基本需求文件

1.项目立项文档

2.详细的PRD文档（业务流程需要）

3.详细的数据库ER图文档（业务流程需要）

4.详细的架构图（业务流程需要）

5.详细的产品原型线框图的文档（页面生成需要）

6.详细的项目产品原型高保真页面描述清单文档（页面生成需要）

7.详细的技术方案文档（业务流程需要）

同样交给ai生成详细的文件

2.1 会遇到的问题

2.1.1 文件生成过大总是打断输出

1.让ai输出时分段输出

2.让ai输出过大时自动压缩文本并且分段输出，然后再把输出后的文本交给ai进行详细化

三.页面的生成和提取

3.1 普通页面的生成

注意事项：所有的导航栏统一（包括进度条导航栏，等等），所有的字体风格统一。（一定一定一定在生成文档时就交给ai变成硬性要求！！！）

使用https://stitch.withgoogle.com/生成页面，生成时建议直接使用3.1 pro模型

上传 5.详细的产品原型线框图的文档（页面生成需要）或者 6.详细的项目产品原型高保真页面描述清单文档（页面生成需要）

确保生成后的页面具有连贯性。

部分会产生的问题：

1.多次生成的页面有很大的问题

解决方法：ai再次优化 5.详细的产品原型线框图的文档 和 6.详细的项目产品原型高保真页面描述清单文档，并且自己提供严格性要求或者页面的大致及具体的要求让ai优化文档。

2.自己手动让ai调整页面时会乱

解决方法：提供给ai的提示词要求更加具体限制条件更多。

3.创建出的网页没有链接跳转

解决方法：不管，我们只需要正确的网页即可，后期生成vue的网页现在所链接的也会取消。

3.2 页面的导出

正确导出方法：

使用右边从上向下数第二个框，框选出你需要的全部网页，再提取压缩

3.3 真页面的生成

3.3.1 环境配置

在此之前我们需要配置环境：Node.js https://nodejs.org/zh-cn/download 和 npm https://cn.vuejs.org/

在你的项目的文件夹中打开cmd一次运行以下代码：

node -v #用来检查是否已有环境 npm -v #安装相关配置文件 npm create vue@latest #再按照下面的步骤进行

可能遇到的问题：

1.powershell中无法使用代码

npm -v

会提示你权限有问题，则运行下面的代码：

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

解决后再运行：

npm create vue@latest

3.3.2 使用ai生成

打开trae_cn，使用：

让ai自己美化一下提示词最后提交给他其中 /plan是一种模式，第一个文件是之前ai生成出来的网页你所保存的文件，front-end是你刚刚配置后自己生成的文件（其上文件都可以因为个人原因更改名字）。

最后我们就得到了ai的界面。

3.3.3 使用ai微调界面

四.登录的实现

4.1 手机号码验证

1.首先是配置环境：也就是在阿里云中获取手机短信验证的功能。

步骤如下：

1.登录并且注册一个AccessKey：

2.选择使用RAM用户

3.创建用户组

4.注册一个用户，切记保存给你的AccessID和AccessKey，这两个东西只显示一次一定保存在文档中。

5.增加相关权限：

• AliyunDysmsFullAccess

• AliyunRAMFullAccess

• AliyunSTSAssumeRoleAccess

• AliyunDypnsFullAccess

依次输入然后搜索勾选添加。

6.在首页搜索：号码认证服务


注意这里要的是云通信的融合认证！！！

在阿里云的工作台的号码认证服务中可以看到余额。

在同一个页面中的侧边导航栏的最先方：将功能全部开启。

进行调试：

在调试中号码填写自己的号码，最开始只填写必填项进行测试。

点击发起调用后会向你的手机发送验证短信。

核验验证码的填写：

上面容易遇到的问题：

检查上面的步骤是否有漏或者错误。

跑通之后就可以在后端配置环境了。

阿里云客户端：

@Bean public com.aliyun.dypnsapi20170525.Client dypnsClient() throws Exception { Config config = new Config() .setAccessKeyId(accessKeyId) .setAccessKeySecret(accessKeySecret); config.endpoint = "dypnsapi.aliyuncs.com"; return new com.aliyun.dypnsapi20170525.Client(config); }

发送短信的接口：

SendSmsVerifyCodeRequest request = new SendSmsVerifyCodeRequest() .setPhoneNumber(phone) .setSignName("速通互联验证码") .setTemplateCode("100001") .setTemplateParam("{\"code\":\"##code##\",\"min\":\"5\"}"); SendSmsVerifyCodeResponse response = dypnsClient.sendSmsVerifyCodeWithOptions(request, new RuntimeOptions()); // 发送成功后设置 Redis 锁，限制频率 redisTemplate.opsForValue().set(lockKey, "1", SMS_LOCK_EXPIRE, TimeUnit.SECONDS);

校验验证码的接口：

var request = new CheckSmsVerifyCodeRequest() .setPhoneNumber(phone) .setVerifyCode(code); var response = dypnsClient.checkSmsVerifyCodeWithOptions(request, new RuntimeOptions()); // 判断是否验证成功 return response.getBody() != null && "OK".equals(response.getBody().getCode());

所有的步骤完成后把这三个接口和相关的信息如你的AccessKey和AccessID都交给codex，codex就会帮你建立好完整的功能了。

常见的问题：

打开页面时只默认启动了前端，后端代码并未启动，导致短信发送不出去。

4.2 使用SQL数据库保存用户信息并且完善登录程序

验证和修复：

自主链接数据库：

五.ai生成小说的实现

5.1 通过PRD文档确定此项目的流程

通过WorkBuddy工具编写文档：

请对提供的 `1.AI漫剧制作平台_PRD_v1.0.md` PRD文档内容进行全面、细致的审核与深入理解。基于文档中关于"AI灵感一键生成短视频全链路系统"的核心闭环流程（文字灵感→长篇小说文本→影视分镜脚本→分镜插画素材→批量生成短视频片段→视频剪辑合并 + AI配音 + 字幕合成→成片导出），整理出一套结构完整、内容详实的功能细化拆解文档。 该文档需包含以下关键要素： 1）系统整体及各环节的技术栈选型说明，明确前端框架、后端服务架构、AI模型（文本生成、图像生成、视频生成、语音合成）、数据库及存储方案等技术组件及选型理由； 2）每个核心环节的详细业务流程图，使用Mermaid语法标准化绘制，覆盖从输入到输出的完整数据流转路径； 3）全链路任务编排方案，包括各模块间的数据流转机制、RESTful接口定义（含请求/响应结构）、任务状态管理机制（排队、执行中、完成、失败等状态流转）及异常处理与重试策略。 确保文档内容专业、准确，能够作为系统开发的详细技术指导依据。生成后以*.md格式保存至桌面。

根据自己的文件名称更改提示词

5.2 通过codex明确完成该任务还需要什么资源

这里的提示词其实可以加上：除去你可以完成的内容

然后再去找或者自己写它所需要的内容，这里我是直接把他需要我们做的决策再次交给了workbuddy

让他再为我们进行一次基于总纲的决策。在这之后就是提交给codex相关的资源文件

5.3 提交必要资源文件

这是必要的资源，提交给codex之后就可以生成出对应功能的网页。

5.4 可能遇到的问题

1.在自己原本生成PRD文档时不够详细导致后续进行困难

解决方式：重新根据现有的资源详细化PRD文档

2.在交给ai生成项目流程时发现过于详细导致后续的收集资源困难

解决方式：在发现资源收集不方便或者ai生成的流程所需配置过多以及考虑内容过多对我们初开发不友好时，对原本的文档进行优化并且此时对ai进行限制，如：只用什么哪几个ai做什么内容，这个网页中至少包含什么功能别的添加功能可做可不做。这样我们就可以获得项目最初的形态，以后想起什么内容再进行此基础上的添加或者修改就可以，而不是一口气全让ai干最后得到了一个残次的网页还极其难修改。

3.在生成功能时codex没有在原本的功能页面进行修改或者修改页面的元素过多

解决方法：增加限制条件：在“文件夹名”中的和 某个步骤 有关的页面中进行 什么元素 可以改变 什么元素 不能改变。这样就可以限制住ai只在某个范围之内进行。

4.优化生成小说后的界面时只优化了此个小说代码页面而非全局页面

解决方法：在我们对页面进行优化时确定好这个页面是否会直接优化在全局而不是单独的一次优化仅仅是给你看，如果发现不是全局的则让ai再次优化：

六.剧情拆解功能的实现

6.1 确认我们最需要的功能

1. 根据用户生成的小说拆解剧情

2. 用户可以自己手动更改生成后的内容

3. 用户可以一键重新生成所有或者选择重新生成某一处拆解的剧情

4. 用户可以向ai提需求定向修改

6.2 获取到用户生成的小说

直接让ai执行这条命令：

这样我们可以从生成小说的页面一键跳转并且导入到step1的界面，以后也是如此做

6.3 生成相关功能

提示词：

建议自己再次编写这个提示词，用这个提示词生成会有部分小问题不过我们可以后续优化，建议不添加提示词一口气全部生成：因为这样做可能会导致更多的bug后续调整更加困难。

6.4 注意事项

1，注意不要让ai更改你的导航设计

2，提示词中要精确说出需要什么功能

3，更改网页中的东西时最好提供截图

6.5 回首发现遇到的重大问题

1. 限制要求过多或者过于复杂导致最后输出的内容不达预期

2. 经常在原本的限制条件上增加条件导致问题频出并且难以恢复

3. 在最开始做这个step的时候并没有考虑到后面还需要哪些资源，例如：非常详细的对话情节描述以及场景的描述等等。

4. 直接在codex中修改要交给ai的提示词会导致不知道具体内容并且产生测试费用，一句话：费时又费钱。

5. 发现不对之后对页面的结构没调整，导致显示不出该有的信息

七.角色资产的实现

7.1 确认我们最需要的功能

1. ai提取人物的各种细节方便生成

2. 对ai提取的人物细节用户可以手动修改

3. deepseek生成对应的提示词后再调用相关的ai模型用次提示词进行生成

4. 导航栏统一

7.2 生成相关功能

这里的提示词算是一个错误示范，因为我这里的文件：”AI漫剧制作_七步流水线_AI调用与功能手册”是过于详细的或者就论交给ai来说是不够完善的，会让ai偷偷自己发散自己的思维创造一些我不想要的功能，以及一些没必要的功能。

后续的步骤我的提示词会有优化：

首先说明在什么位置上那个网页上进行修改，我们需要什么功能（详细描述），此时就要考虑到这一步会不会影响后续的步骤，哪些因素会有影响，该怎么改。确定好之后就可以进行生成了。

7.3 注意事项

1. 确认好调用的ai生成所需要的时间，避免因为时间过长因为后台有约束条件导致腰斩。

2. 确认好生成的提示词的来源以确保生成的准确性

7.4 回首遇到的重大问题

1. 多次重新生成人物图像之后导致后期的分镜图像生成人物不一致（增加锁定功能，锁定后只保留锁定后的一张图片传输给别的step也只传这一张）

2. 角色档案更改之后只传输出去了原本的数据（和上一个解决方式一样增加一个锁定键）

八.分镜设计的实现

8.1 确认我们需要的需求

1. 根据分镜设计的要求生成对应图像

2. 统一角色的样貌特征

3. 统一场景

4. 用户拥有一定的自由度：选择某项重新生成，一键全部生成等等

5. 根据剧情拆解内容进行生成

6. 生成内容的提示词：根据拆解后的内容生成镜头设计其中内容要包含：1.镜头时长 2.出场人物 3.景别 4.镜头运动 5.场景 6.画面描述 7.对白 8.音效 9.氛围 10.转场方式

8.2 生成相关功能

1. 提交提示词：让（你调用的ai）根据拆解后的内容生成镜头设计其中内容要包含：1.镜头时长 2.出场人物 3.景别 4.镜头运动 5.场景 6.画面描述 7.对白 8.音效 9.氛围 10.转场方式

2. 添加约束条件：

   ▎分镜结构约束

   ├── 每个镜头必须有且仅有以下 9 项参数：构图 / 机位高度 / 机位角度 / 镜头焦段 / 运镜方向 / 光影方向 / 照明风格 / 主色彩 / 氛围色彩

   ├── 同一场景(same scene_id)的镜头必须保持空间连续性（如镜头2的角色位置不能与镜头1矛盾）

   └── 相邻镜头间必须满足"30度规则"——机位角度变化 ≥ 30°，避免跳切

   ▎构图约束

   ├── 构图类型：三分法 / 对称 / 对角线 / 框架 / 黄金分割 / 低仰角 / 高俯角

   ├── 规则引擎优先：文本特征→构图类型自动匹配，无法匹配时由 LLM 补充

   ├── 人物在画面中的位置必须用九宫格坐标表示（如"右1/3, 下1/3"）

   └── 禁止连续3个镜头使用同一种构图（防止视觉疲劳）

   ▎色彩约束

   ├── 情绪→色彩映射固定，不允许 AI 自由发挥：

   │ ├── 热血/激情 → 红色系 + 高对比度

   │ ├── 悲伤/忧郁 → 冷色调（蓝/灰）+ 低饱和度

   │ ├── 温馨/治愈 → 暖黄色 + 柔光

   │ ├── 悬疑/恐怖 → 暗绿色 + 蓝色补光

   │ ├── 战斗/紧张 → 高对比 + 冷暖对冲

   │ ├── 浪漫/爱情 → 粉色/紫色 + 柔焦

   │ ├── 神秘/古老 → 深棕色/金色 + 低亮度

   │ └── 科幻/未来 → 冷蓝/白 + 高锐度

   ├── 同一场景内所有镜头的色彩方案必须保持一致（色域偏差 ΔE < 15）

   ├── 场景切换时允许色彩方案变化，但渐变过渡

   └── 全片色彩脚本自动生成条形时间轴

   ▎运镜约束

   ├── 运镜方向固定6种：推 / 拉 / 摇 / 移 / 跟 / 升/降

   ├── 每个镜头最多 1 个运镜方向（禁止复合）

   ├── 对话镜头默认"中景+固定机位"（避免不必要的运动分散注意力）

   └── 动作镜头可加入运镜（跟拍、快速摇移）

3. 分镜设计也要可以人为更改和保存然后传输

8.3 注意事项

1. 只生成第一帧

2. 场景角色统一性

3. 用户自由度

九.图像生成

9.1 确认需求

1. 只生成此动画第一帧的图像（其实是我后面才想到的）

2. 生成图象时角色样貌，不同片段所在的同一场景要一致不能有太大的出入（场景细节该怎么统一呢）

3. 根据分镜设计和剧情拆解中的内容确定第一帧的内容然后生成

4. 在连续的环境中的剧情会自动根据前几张图片生成（没有则不用）

5. 用户可以自行更改图像生成的提示词

6. 用户拥有一定的自由度（自定义生成数量，选择性重新生成等等）

9.2 生成相关功能

1. 提交提示词：

当然现在的提示词是不够好的，可以在进行优化比如：我们的功能描写的就和最后要实现的完整的功能不同，例如没有让deep seek编写提示词，没有显示提示词等等，都是需要优化的。

9.3 注意事项

1. 约束条件最好自己看一遍然后进行更改不能直接套用ai的约束条件

2. 生成的图像规定是16：9

十.视频生成

10.1 确认需求

1. 根据分镜设计中的内容生成

2. 批量生成和指定生成（重新生成一样）

3. 使用deepseek生成提示词交给画面生成的ai

4. 生成的提示词展示给用户看，用户可以修改，确认后再交给画面生成的ai

5. 用户再次页面更改的分镜设计相关内容会影响前面分镜设计步骤中的显示

10.2 生成相关功能

1. 提示词的编写：

2. 相关约束条件：

风格约束（永久）

• 画面风格：国风动漫 / 二次元插画风，类似高质量漫画彩色内页

• 线条清晰、色彩饱满、光影明确

• 人物面部特征不可变化（发型、瞳色、脸型、肤色与输入图严格一致）

• 服饰细节不可变化（颜色、款式、配饰、武器与输入图严格一致）

• 禁止写实照片风、禁止3D渲染风、禁止欧美卡通风

动作约束（永久）

• 运动幅度控制：仅微动或中等幅度，禁止剧烈形变

• 人物位移：限于帧内小幅位移（不超过画面宽度的 10%）

• 面部稳定：五官不可扭曲、不可液化变形、不可出现重影

• 手部稳定：手指数量正确（5指），不可融合、不可多余

• 头发/衣物自然飘动（微风效果，幅度不超过发长的 20%）

• 背景可轻微动态（云飘、树叶摇曳、火焰跳动、水面波纹），但不可喧宾夺主

技术约束（永久）

• 输出帧率：24 fps 或 30 fps（这里可以删除，只要统一帧率即可）

• 画面比例：与输入图保持一致（也就是16：9）

• 无水印、无文字、无Logo

• 首帧必须与输入图一致（首帧保真）

• 禁止黑白闪烁、禁止亮度跳变

内容安全约束（永久）

• 禁止生成色情、暴力、血腥、恐怖内容

• 禁止生成政治敏感、歧视、违法内容

• 人物着装必须得体，禁止过度暴露

角色一致性约束（本次生成专用）（可以传输相关角色图片）

出场角色：{character_name}

• 面部特征锁定：{face_features}（与定妆照 Embedding 严格一致）

• 发型：{hairstyle}（不可变化）

• 服饰：{outfit}（颜色/款式/配饰不可变化）

• 武器/道具：{weapon}（如出现，必须与原图一致）

10.3 注意事项

1. 修改后的分镜设计一定要串联起来

2. 以前的人物定妆图一定要删除

3. 提示词的编写一定要按照某种规则编写

十一.后期合成

11.1 确认需求

1. 对视频的基础编辑功能：拼接，裁剪，原视频声音剥离，自由对接视频（中间可以有空）

2. 对音频的基础编辑功能：拼接，裁剪，多音频混合播放（人的说话声，背景音），自由对接音频

3. 用户可以在本地导入（出）音视频

4. 视频可以小窗口播放

5. 对编辑后的视音频预览观看

6. 有四个导轨：视频/图片，字幕，BGM，配音

7. 在导轨上清晰标注对应的内容如：起始位置，结束位置，播放时间

11.2 生成相关功能

1. 相关提示词：

在“front-end”文件中对step6相关的页面进行修改（仅需保留最上方导航栏和其它网页一致即可）并且实现step6相关功能：本地视频/图片/音频上传预览；时间轴拖拽、分割、删除片段；视频裁剪、变速、旋转、 拼接；背景音乐+音量调节；文字字幕；亮度/对比度/饱和度滤镜；浏览器本地导出MP4；约束：仅支持5分钟内短视频；FFmpeg内核按需懒加载；PC端优先；项目初始化命令、目录结构、剪辑工作台完整代码、FFmpeg渲染工具函数，附带异常处理与渲染进度展示，代码规范带注释。

这套提示词只实现了很基本的功能，并且页面也是让ai自己设计（通常会很丑）。所以在真正提交之前可以自己再附加很多额外条件。