往事漫画 · 故事连环画生成器

将故事/小说/回忆录等文字内容制作成专业的连环画/漫画（HTML格式），支持多宫格布局、气泡式对白、心理活动气泡、旁白框、音效字、分集结构。涵盖从剧本创作、角色设定、批量生图、HTML组装到压缩发布的完整工作流。适用于"把我的故事做成漫画""生成连环画""做个小人书""故事转漫画"等需求。

piprot@piprot

Install

openclaw skills install @piprot/story-comic-creator

故事连环画生成工作流

一、定位与适用场景

将用户提供的故事文本（回忆录、小说、散文、真实经历等）转化为可在浏览器中阅读的专业连环画/漫画。最终产物为单文件 HTML + 图片文件夹，支持压缩后发布到各平台。

适用： 个人故事漫画、回忆录连环画、小说改编漫画、短篇故事漫画 不适用： 长篇连载（>20集）、商用专业漫画（需要手绘级精度）、动态漫画/视频

二、完整工作流（8个阶段）

text

需求确认 → 剧本创作 → 角色资产设定 → 角色锚定 → 批量生图 → HTML组装 → 压缩发布 → 迭代修改

强制门禁：阶段3「角色资产设定」必须在批量生图之前完成。未生成角色立绘+三视图+风格参考图，不得进入批量生图阶段。

门禁总览（每个阶段结束必须逐项检查，全部通过才进入下一阶段）：

阶段	检查重点	不通过的后果
1.需求确认	参数齐全、用户确认	后续返工
2.剧本创作	集数/格数/文字量/距离规则	生图出错、画面不对
3.角色资产	三视图完整、风格参考图确认、画风统一、无畸形	全本角色不一致
4.角色锚定	描述与资产对应、多版本标注	生图角色漂移
5.批量生图	全部生成、质量合格、角色一致、画风锚定	HTML组装缺图/错图
6.HTML组装	结构正确、无断链、布局合规	显示异常、盖脸
7.压缩发布	大小达标、画质可接受、路径正确、引用干净	无法发布/显示异常
8.迭代修改	修改到位、同步发布版、重新验证	旧问题残留

阶段1：需求确认

必须确认的参数：

总集数：建议 6-12 集，每集 4-6 格画。总画格数控制在 30-60 格。
宫格布局：每集用 2×2（4格）或 2×3（6格）。避免 3×3（9格）因为单格太小文字放不下。
画风：往事/回忆录类默认写实水彩风（成熟稳重、非卡通萌系）；其他故事可选日系水彩治愈风、国风水墨、美式漫画、像素风等。
文字元素：是否需要气泡对白、心理活动、旁白框、音效字（默认全开）。
发布限制：是否有文件大小限制（如 20MB），决定压缩参数。

用户说"随便""你来定"时的默认值：

10集，每集 4-6 格，总计约 50 格
写实水彩风，暖色调（往事/回忆录类）
2×2 和 2×3 宫格交替
全部文字元素开启
压缩到 20MB 以内

✅ 阶段1检查门禁（全部通过才进入阶段2）

总集数已确认（6-12集）
每集格数已确认（4-6格），总格数在30-60之间
宫格布局已确认（2×2/2×3，无3×3）
画风已确认（往事类默认写实水彩风）
文字元素已确认（对白/心理活动/旁白/音效是否全开）
发布大小限制已确认（如20MB）
以上参数已向用户复述并获得确认

阶段2：剧本创作

输出物： 剧本.md，包含每集每格的：画面描述、对白、心理活动、旁白、音效。

2.1 拆分故事为集

通读全文，按叙事节奏拆成 6-12 集。每集聚焦一个核心场景或情绪转折。

拆分原则：

时间/空间切换 → 新的一集
情绪转折点 → 新的一集
每集有独立小标题（2-6字）
避免某集内容过多（超过6格就拆成两集）

2.2 每集拆分为画格

每集 4-6 格，按"起承转合"或时间顺序排列。

画格类型分配（每集建议）：

1格远景/ establishing shot（交代场景）
2-3格中景（人物动作、互动）
1-2格近景/特写（表情、关键物品、情绪）

每格必须写清：

text

格X（镜头类型：远景/中景/近景/特写）：
- 画面：（人物、动作、场景、镜头、光影。双人画面必须写明距离）
- 对白：（谁说的，内容）—— 可选
- 心理活动：（谁的内心独白）—— 可选
- 旁白：（叙述性文字）—— 可选
- 音效：（如"铃——""砰"）—— 可选

镜头类型（强制标注，每格必须写明）：

类型	用途	人物占比	文字建议
远景 / establishing	交代场景、时空	人物<30%	旁白为主
中景	人物动作、互动	人物30%-70%	对白+旁白
近景	表情、情绪	人物70%-90%	心理活动+对白
特写	关键物品、脸部细节	人物>90%	仅旁白栏，不放叠加气泡

2.3 文字量控制

对白气泡：每格最多 15 字，超过就拆成两格或简化
心理活动气泡：每格最多 20 字
旁白框：每格最多 30 字，长旁白拆到相邻格
每格文字元素总数：不超过 2 个（如对白+旁白可以，对白+心理活动+旁白就太挤）

2.4 人物距离判定规则（强制）

在设计每格画面时，必须根据原文判断人物之间的关系和距离，写入剧本的"画面"描述中。

判定流程：

读原文定关系：通读故事，明确每对人物的关系（恋人/夫妻/朋友/同事/亲人/陌生人）
按关系定距离：
- 恋人/夫妻：可以靠近、牵手、拥抱、并肩走（距离<30cm）
- 亲人（家人）：可以靠近、并肩、有肢体接触（距离<50cm）
- 朋友/同事：保持社交距离，隔桌对坐、一臂距离、并肩走但不触碰（距离≥50cm），禁止脸贴脸、额头相抵、牵手、拥抱等亲密动作
- 陌生人：保持更远距离（距离≥1m）
按原文场景微调：如果原文明确描述了某个肢体动作（如"他拍了拍我的肩""我们拥抱了"），按原文执行；如果原文没有描述，按关系默认距离执行
写入剧本：每格的"画面"描述中必须包含距离说明，如"两人隔桌对坐""两人保持一臂距离""两人并肩走但无身体接触"

常见错误（必须避免）：

朋友关系画成脸贴脸、额头相抵 → 应改为隔桌/隔物对坐
朋友关系画成牵手、拥抱 → 应改为无身体接触
双人近景特写两人面部几乎重叠 → 应改为中景，保持距离
用"面对面说话"默认画成亲密距离 → 必须加"隔桌""一臂距离"等限定词

✅ 阶段2检查门禁（全部通过才进入阶段3）

阶段3：角色资产设定（强制门禁）

目标： 为每个主要角色生成标准化的视觉资产，作为后续所有画格的角色一致性锚点。同时确立全本统一的画风。

输出物： characters/ 文件夹，每个主要角色一张「立绘+三视图」设定图；style_ref.jpg 风格参考图。

3.1 风格参考图生成（强制第一步）

在生成任何角色三视图之前，必须先生成一张纯场景的风格参考图（无人物），确认画风符合预期后，再用它作为风格参考生成所有角色三视图和画格。

为什么要做： 纯文字描述"写实水彩风"太笼统，不同模型理解差异大。先生成一张场景图确认画风，再用「参考图生图」以这张图为风格参考生成后续所有图，能确保全本画风高度统一。

风格参考图 prompt（固定模板，直接复制使用）：

text

写实水彩插画风格，传统水彩手绘质感，可见水彩晕染和水痕纹理，
粗糙水彩纸底色，色彩柔和不饱和，暖色调怀旧氛围，
笔触自然随性，边缘柔和不锐利，光影柔和渐变过渡，
类似宫崎骏动画背景的水彩质感，类似新海诚动画背景美术风格，
成熟稳重的成人向插画，非儿童绘本，非卡通萌系。

夏末午后的老校园梧桐大道，阳光透过树叶在地面洒下斑驳光斑，
远处有红砖教学楼，空无一人，宁静怀旧的氛围。
暖金色光线，柔和侧光，远景构图。

不要卡通化，不要二次元动漫风格，不要3D渲染，不要油画厚涂，
不要赛璐璐平涂，不要照片级写实质感，不要Q版，不要大眼萌系，
不要塑料感，不要过度饱和的鲜艳色彩，不要锐利的数字绘画边缘，
不要人物，不要文字。

生成后必须目视确认：

水彩晕染质感明显（可见水痕、纸纹）
色彩柔和不饱和（暖色调，不鲜艳）
边缘柔和（非锐利数字绘画）
非卡通、非3D、非照片写实
整体氛围符合"往事回忆"的怀旧感

确认通过后保存为 characters/style_ref.jpg，后续所有角色三视图和画格都用它作为风格参考。

如果风格不对： 调整 prompt 中的风格描述词（如增加"透明水彩""湿画法""干笔触感"等），重新生成，直到画风符合预期。不要在风格未确认时就批量生成角色三视图，否则会全部返工。

3.2 风格锚定描述块（每张图prompt必须包含）

以下描述块是固定的风格锚定，每张图（角色三视图、画格）的 prompt 开头必须完整包含，不得删减或改写：

text

【风格】写实水彩插画风格，传统水彩手绘质感，可见水彩晕染和水痕纹理，
粗糙水彩纸底色，色彩柔和不饱和，暖色调怀旧氛围，
笔触自然随性，边缘柔和不锐利，光影柔和渐变过渡，
成熟稳重的成人向插画，非儿童绘本，非卡通萌系。

以下负面约束是固定的，每张图 prompt 结尾必须完整包含：

text

【禁止】不要卡通化，不要二次元动漫风格，不要3D渲染，不要油画厚涂，
不要赛璐璐平涂，不要照片级写实质感，不要Q版，不要大眼萌系，
不要塑料感，不要过度饱和的鲜艳色彩，不要锐利的数字绘画边缘。

使用方式： 每张图的 prompt = 【风格锚定块】+ 【画面描述】+ 【角色描述】+ 【光影氛围】+ 【负面约束块】。风格锚定块和负面约束块固定不变，只改中间的画面/角色/光影描述。

3.3 角色资产清单

为每个出场超过3格的角色生成资产：

主角：必须生成立绘+三视图
重要配角：建议生成立绘+三视图
路人/群演：不需要，用通用描述即可

3.4 三视图生成规范

用「参考图生图」能力生成，以 characters/style_ref.jpg 风格参考图为参考，单张正方形，边长取所在平台支持的最高值（如 1536×1536；部分平台可到 2048×2048），prompt 模板：

text

【风格】写实水彩插画风格，传统水彩手绘质感，可见水彩晕染和水痕纹理，
粗糙水彩纸底色，色彩柔和不饱和，暖色调怀旧氛围，
笔触自然随性，边缘柔和不锐利，光影柔和渐变过渡，
成熟稳重的成人向插画，非儿童绘本，非卡通萌系。

角色设定三视图，[角色标准化外貌描述]。
三视图：正面、侧面、背面。穿[标准服装]。
身高约[X]cm，体型[描述，自然不过度夸张]。
背景纯白色，角色全身站立，双手自然下垂。

【禁止】不要卡通化，不要二次元动漫风格，不要3D渲染，不要油画厚涂，
不要赛璐璐平涂，不要照片级写实质感，不要Q版，不要大眼萌系，
不要塑料感，不要过度饱和的鲜艳色彩，不要锐利的数字绘画边缘。

参考图： 必须传入 characters/style_ref.jpg 作为「参考图」，确保画风与风格参考图一致。

三视图必须包含：

正面（确认脸型、五官、发型正面）
侧面（确认鼻梁、嘴唇、发型侧面）
背面（确认发型背面、服装背面）

多角色画风统一（强制）： 所有角色三视图都必须用「参考图生图」以 characters/style_ref.jpg 风格参考图为参考生成。第一个角色的三视图生成后，后续角色的三视图可以同时传入 style_ref.jpg + 第一个角色三视图作为双重风格参考，确保所有角色画风、笔触、色彩完全统一。禁止任何角色单独用文生图生成（会导致画风漂移）。

3.5 多造型/多年龄版本

如果角色在故事中有明显造型变化（如学生→职场、夏装→冬装、年轻→中年），每个主要造型都要生成一套三视图。在文件名中标注版本，如 二叔_工装版.jpg、二叔_休闲版.jpg。

3.6 资产确认

生成后必须目视检查：

三视图是否是同一个人物（脸型、发型一致）
服装是否符合角色设定
比例是否正常（无畸形）
画风是否与目标画风一致

确认通过后，将资产图保存到 characters/ 目录，后续生图时作为参考。

✅ 阶段3检查门禁（全部通过才进入阶段4）

阶段4：角色锚定

目标： 基于角色资产，为每个角色写一段标准化外貌描述，在所有生图 prompt 中复用。

4.1 角色设定表

text

女主（我）：20多岁中国女性，黑色中长发到肩下，发尾微卷自然垂落，偏分刘海，
清秀眉眼，眼睛大小适中，鼻梁小巧挺直，嘴唇饱满自然，脸型鹅蛋脸，气质温和大方。
标准服装：浅米色休闲夹克+白色圆领卫衣+蓝色直筒牛仔裤+白色休闲运动鞋。
身高约165cm，体型匀称自然。

男主（二叔）：20多岁北方男性，黑色短发清爽偏分，面容清俊，眉眼温和，
鼻梁挺直，嘴唇薄，气质沉静内敛。
标准服装：蓝色工装夹克+白色T恤+深色长裤+黑色皮鞋。
身高约180cm，体型偏瘦，肩膀略窄。

关键规则：

每个角色的发型、发色、脸型、服装在 prompt 中必须完全一致
描述必须与三视图资产对应，不要凭空添加资产中没有的特征
年龄/造型变化时，明确标注版本，并使用对应版本的三视图作为参考

4.2 复用已有画面

如果项目中已有生成好的图片，可以直接复用为关键画格。复用的图片要检查角色是否与新设定一致，不一致的需要重生成。

✅ 阶段4检查门禁（全部通过才进入阶段5）

每个主要角色都有标准化外貌描述（发型、发色、脸型、服装、身高、体型）
描述与三视图资产完全对应（无凭空添加资产中没有的特征）
角色描述中无"眼睛偏大"等萌系词汇（用"眼睛大小适中"）
多造型/多年龄版本已明确标注，并关联对应版本的三视图
配角也有简短锚定描述
复用的已有图片已检查角色一致性，不一致的已标记需重生成
角色设定表已整理完毕，可直接复制到生图prompt中

阶段5：批量生图

工具： 文生图用于无角色的场景/远景；参考图生图用于含角色的画格，以角色三视图 + style_ref.jpg 为参考确保一致性。每批最多 4 张并行。

平台适配（发布前必读）： 本 skill 的生图逻辑与具体 AI 平台无关，只用「文生图 / 参考图生图」两个概念。落地时按你所用平台映射工具：

豆包：文生图 = image_gen；参考图生图 = image_edit，参考图经 image_reference_url_list 传入（可同时传 style_ref.jpg + 角色三视图共 2 张，作为双重风格/角色参考）。

WorkBuddy：两类生图统一用 ImageGen 工具——纯文生图只给 prompt；含角色画格的双重参考给 prompt + image1=角色_三视图路径 + image2=style_ref.jpg + input_fidelity="high"（高贴合度锁一致性）；参考图支持本地路径或 URL，最多 3 张（正面/侧面/背面可各传一张）。尺寸映射到 1536×1536（三视图）/ 1024×1536（画格）。

5.1 生图工具选择

画格类型	推荐工具	说明
含主要角色的中近景	`参考图生图`	传入 style_ref.jpg + 角色三视图作为参考图，确保画风与脸型/发型/服装一致
含主要角色的远景	`文生图`	远景角色细节不明显，文生图即可（仍带风格锚定块+负面约束）
纯场景/空镜	`文生图`	无角色，不需要参考
物品/特写	`文生图`	无角色

5.2 参考图生图 Prompt 模板

text

【风格】写实水彩插画风格，传统水彩手绘质感，可见水彩晕染和水痕纹理，
粗糙水彩纸底色，色彩柔和不饱和，暖色调怀旧氛围，
笔触自然随性，边缘柔和不锐利，光影柔和渐变过渡，
成熟稳重的成人向插画，非儿童绘本，非卡通萌系。

[镜头类型]。[场景描述]。[角色标准化外貌描述]，[角色动作/表情]。
[光影/氛围/色调]。

【禁止】不要卡通化，不要二次元动漫风格，不要3D渲染，不要油画厚涂，
不要赛璐璐平涂，不要照片级写实质感，不要Q版，不要大眼萌系，
不要塑料感，不要过度饱和的鲜艳色彩，不要锐利的数字绘画边缘。

参考图（强制传入两张）：

characters/style_ref.jpg（风格参考图，确保画风统一）
characters/角色_三视图.jpg（角色参考图，确保角色一致）

关键： 参考图+风格锚定描述块+角色描述，三重锚定，画风和角色一致性最好。

5.3 文生图 Prompt 模板（仅用于纯场景/远景/物品，无角色）

text

【风格】写实水彩插画风格，传统水彩手绘质感，可见水彩晕染和水痕纹理，
粗糙水彩纸底色，色彩柔和不饱和，暖色调怀旧氛围，
笔触自然随性，边缘柔和不锐利，光影柔和渐变过渡，
成熟稳重的成人向插画，非儿童绘本，非卡通萌系。

[镜头类型]。[场景描述]。[光影/氛围/色调]。

【禁止】不要卡通化，不要二次元动漫风格，不要3D渲染，不要油画厚涂，
不要赛璐璐平涂，不要照片级写实质感，不要Q版，不要大眼萌系，
不要塑料感，不要过度饱和的鲜艳色彩，不要锐利的数字绘画边缘，
不要人物，不要文字。

注意： 含角色的画格必须用「参考图生图」（5.2），禁止用文生图（会导致角色不一致、画风漂移）。

镜头类型词： 远景、中景、近景、特写 光影词： 夕阳金色光线、暖黄色台灯光、蓝紫色暮色、明亮阳光、柔和侧光

5.4 生图策略

最小验证（强制）：批量生成前，先生成第1集的4格画格（含角色三视图参考），目视检查：画风是否符合预期、角色是否与三视图一致、画面是否符合剧本。确认无误后再批量生成剩余画格。避免一次性生成50格后发现画风不对全部返工。
按集分批：每批 4 张，优先生成同一集的画格（方便检查一致性）
先关键后补充：先生成每集的核心画格（特写、关键动作），再生成远景/过渡格
生成与下载分离：专心连续生成所有画格，不要每批穿插下载（容易超时拖慢节奏）。全部生成完后，用一个批量下载脚本一次性下载所有图片到 panels/ 目录，命名 e{集数}_p{格数}.jpg
图片格式（强制）：源文件统一用 JPG 格式（quality=95），不要用 PNG。PNG 每张约 3MB，50格就是 150MB，严重浪费存储空间和下载时间。如果生图工具返回的是 PNG，下载后立即用 PIL 转为 JPG（quality=95）。
质量检查：全部下载后目视检查——角色是否与三视图一致、画面是否符合剧本、有无畸形/穿帮
不一致重生成：发现角色脸/发型漂移，用「参考图生图」以三视图为参考重生成该格

5.5 常见问题与处理

问题	处理方式
角色脸不一致	用参考图生图以角色三视图为参考重生成；prompt 中增加更详细的面部特征
画面有多余文字	AI 生图偶尔会产生乱码文字，重生成或裁剪掉
手部畸形	特写手部时重生成 1-2 次，或改用中景避开手部
特定人物不像	增加具体特征描述，用参考图生图以参考图生成，多生成几次选最像的
男女距离不当	prompt 中明确"保持普通朋友距离""隔桌对坐""一臂距离"等

5.6 文件命名规范

text

panels/
  e01_p01.jpg  (第1集第1格)
  e01_p02.jpg
  e02_p01.jpg
  ...
characters/    (角色资产，三视图 + 风格参考图)
  style_ref.jpg   (风格参考图，强制)
  男主_三视图.jpg
  女主_三视图.jpg
  二叔_工装版.jpg   (多造型版本)
images/        (复用的已有图片，如 page01.jpg)

命名规则（强制）：

画格：e{集数两位}_p{格数两位}.jpg，如 e01_p01.jpg
风格参考图：characters/style_ref.jpg（固定名）
角色三视图：{角色名}_三视图.jpg，如 女主_三视图.jpg、二叔_三视图.jpg
多造型版本：{角色名}_{造型名}.jpg，如 二叔_工装版.jpg
禁止用 prompt 作为文件名（如"写实水彩风格_角色设定三视图_....png"），太长且无意义

✅ 阶段5检查门禁（全部通过才进入阶段6）

阶段6：HTML 组装

输出物： 连环画.html，单文件，引用相对路径的图片。

6.1 文件结构

text

comic/
  连环画.html
  panels/       (新生成的画格)
  images/       (复用的图片)
  剧本.md       (剧本备份)

6.2 CSS 核心组件

完整模板见 templates/comic_template.html。核心组件：

画格结构（关键）：

html

<div class="panel-cell">          <!-- 画格单元：图片在上，旁白栏在下 -->
  <div class="panel">              <!-- 仅放图片 + 叠加气泡 -->
    <img src="panels/e01_p01.jpg">
    <div class="bubble speech pos-tr">对白</div>
  </div>
  <div class="narration-bar">旁白</div>  <!-- 图片下方独立空间，绝不盖脸 -->
</div>

核心原则：旁白不叠加在图片上——旁白放在图片下方独立的 .narration-bar 中，彻底避免盖住人物脸部。只有对白气泡、心理活动气泡、音效字叠加在图片上，且必须放在四角。

宫格容器：

.grid-2x2：2列×2行，4格
.grid-2x3：2列×3行，6格
用 border: 3px solid #3a3025 做画格外框，格子间 1.5px 边框分隔

气泡类型：

类型	CSS类	样式	用途	位置限制
对白气泡	`.speech`	白底+黑边+圆角+尾巴	人物说话	仅四角
电话对白	`.speech-phone`	白底+虚线边+斜体	电话那头的声音	仅四角
心理活动	`.thought`	米白底+棕边+云朵形+小圆点尾巴	内心独白	仅四角
旁白栏	`.narration-bar`	米白底+顶部细线，图片下方独立栏	叙述/场景交代	图片下方，不叠加
音效字	`.sfx`	红色粗体+旋转+白边	拟声词	任意

叠加气泡位置（仅四角，禁止居中）：

.pos-tl / .pos-tr / .pos-bl / .pos-br：四角
禁止用居中位置（pos-tc/pos-bc）放气泡，因为居中最容易盖住脸
气泡 max-width: 58%，避免占满画格

气泡尾巴方向：

说话人在画面左侧 → 尾巴在左下角 (.pos-bl)
说话人在画面右侧 → 尾巴在右下角 (.pos-br)
说话人在画面上方 → 尾巴在左上角/右上角

心理活动气泡的小圆点尾巴指向角色的头部。

回忆/闪回处理：

.flashback 类加 filter: sepia(0.15) contrast(0.95)，视觉上区分时空

手机端优化（强制）：

600px以下：气泡字号10px，旁白栏10.5px，气泡max-width 62%
380px以下：气泡字号9px，进一步压缩padding
旁白栏min-height确保不会因文字少而塌陷

6.2.1 HTML清理（强制）

生成HTML后，必须清理以下冗余内容：

冗余属性：删除 data-page-node-id、data-* 等非标准属性（其他模型/平台可能自动添加）
空元素：删除空的 .narration-bar（虽然CSS有:empty隐藏，但清理更干净）
注释清理：删除开发用注释，保留集数/格数标注注释
格式统一：缩进统一为2空格，标签闭合规范

清理命令参考：

python

import re
html = re.sub(r'\s+data-page-node-id="[^"]*"', '', html)
html = re.sub(r'\s+data-[a-z-]+="[^"]*"', '', html)

6.3 气泡尾巴方向

对白气泡的尾巴要指向说话人：

说话人在画面左侧 → 尾巴在左下角 (.pos-bl)
说话人在画面右侧 → 尾巴在右下角 (.pos-br)
说话人在画面上方 → 尾巴在左上角/右上角

心理活动气泡的小圆点尾巴指向角色的头部。

6.4 文字可读性与防盖脸规则

旁白栏（不叠加）：

旁白放在图片下方独立的 .narration-bar，有自己的空间，绝不盖脸
旁白栏背景用不透明米白色，确保文字清晰
字号：桌面12px，手机10.5px，超小屏9.5px

叠加气泡（对白/心理活动）：

气泡背景用不透明/近不透明白色，确保文字在任何画面上都清晰
字号：桌面12px，手机10px，超小屏9px
气泡 max-width: 58%（桌面）/ 62%（手机），避免占满画格
仅用四角位置（pos-tl/tr/bl/br），禁止居中——居中最容易盖脸
气泡padding：桌面6px×10px，手机4px×7px，紧凑不臃肿

生图时的防盖脸配合：

生图prompt中尽量让人物脸部在画面中心区域，四角留空给气泡
特写镜头（脸部占比大）尽量不放叠加气泡，改用旁白栏

✅ 阶段6检查门禁（全部通过才进入阶段7）

阶段7：压缩发布

目标： 将总文件夹压缩到目标大小以内（通常 20MB）。

7.1 压缩脚本

完整脚本见 templates/compress.py。核心参数：

python

from PIL import Image
max_size = 1024      # 最长边最大像素
quality = 70          # JPEG 质量 (1-100)

效果参考： 54张原图（1536×2048，约61MB）→ 压缩后约 7.7MB

7.2 压缩流程

新建 comic_publish/ 文件夹
遍历原文件夹所有 .jpg/.png，缩放+降质量后保存为 .jpg 到新文件夹（保持目录结构）
复制 HTML 文件到新文件夹
清理未引用文件（强制）：发布版中只保留 HTML 中实际引用的图片。characters/ 角色三视图与风格参考图通常不被 HTML 引用，不应复制到发布版（会增加文件大小）。检查 HTML 中所有 src="..." 引用，只保留这些文件。
检查总大小，如仍超限则降低 max_size（如 800）或 quality（如 60）
验证 HTML 中图片引用路径正确（发布版统一为 .jpg，如果源文件是 .png，HTML 中的引用也要改为 .jpg）

7.3 发布格式选择

平台要求	方案
接受文件夹/ZIP	直接用 `comic_publish/` 文件夹
要求单文件 HTML	将图片转 base64 内嵌（文件会变大，需更激进压缩）
要求 PDF	用无头浏览器打印为 PDF（排版固定，但文件可能较大）

✅ 阶段7检查门禁（全部通过才进入阶段8/交付）

阶段8：迭代修改

常见修改类型与处理：

修改需求	处理方式
某格画面不满意	重新生成该格图片，替换文件，HTML 不用改
某句台词要改	直接编辑 HTML 中对应气泡的文字
某集太重复/太挤	减少画格数（如6格→4格），调整 grid 类，重新排列
气泡位置挡住脸	调整 `.pos-xx` 类，或微调 `top/left` 值
角色不像	增加特征描述重生成，或用参考图生图参考已有角色图

修改后必须：

同步更新 comic_publish/ 中的 HTML（如果改了 HTML）
重新压缩替换的图片（如果改了图片）
重新验证总大小

✅ 阶段8检查门禁（全部通过才交付）

用户指出的问题已准确定位（哪一集、哪一格、什么问题）
修改已执行到位（重生成图片/改文字/调布局/减格数）
修改后的画格已目视检查，确认问题已解决
如重生成了图片，角色与三视图一致，无新问题
如改了HTML，源版和发布版都已同步更新
如改了图片，发布版已重新压缩
总大小仍在目标限制以内
在浏览器中重新打开，确认修改生效且无新问题
已向用户说明修改了什么、为什么这样改

三、项目文件清单

text

项目根目录/
├── 连环画.html          # 主文件（浏览器打开即可阅读）
├── 剧本.md              # 完整剧本（每集每格的画面+文字）
├── characters/          # 角色资产（风格参考图+三视图）
│   ├── style_ref.jpg    # 风格参考图（强制，所有图的画风锚点）
│   ├── 男主_三视图.jpg
│   ├── 女主_三视图.jpg
│   └── ...
├── panels/              # 新生成的画格图片
│   ├── e01_p01.jpg
│   ├── e01_p02.jpg
│   └── ...
├── images/              # 复用的已有图片（可选）
│   ├── page01.jpg
│   └── ...
└── comic_publish/       # 压缩发布版（自动生成）
    ├── 连环画.html
    ├── panels/
    └── images/

四、时间/工作量估算

阶段	耗时	说明
需求确认+剧本	10-15分钟	取决于故事长度
角色资产设定	5-10分钟	每个主要角色1张三视图，2-3个角色；含风格参考图确认
批量生图（50格）	25-35分钟	每批4张，约12-13批，含下载；含角色的用参考图生图参考生图
HTML组装	10-15分钟	用模板填充
压缩+验证	5分钟
迭代修改	按需	每次修改5-10分钟

总计： 约 1.5-2 小时完成一个 10集50格的连环画项目（含角色资产）

五、关键经验与踩坑记录

不要用 AI 直接生成带文字的漫画——中文字会乱码。所有文字用 HTML/CSS 叠加，图片只负责画面。
角色一致性必须先做三视图资产——这是强制门禁。纯靠 prompt 文字描述会导致脸型、发型、体型在不同格子里漂移。先生成角色立绘+三视图，后续含角色的画格用「参考图生图」以三视图为参考生成。
多角色三视图必须画风统一——第一个角色用文生图生成后，后续角色必须用参考图生图以第一个角色的三视图为风格参考生成，否则各角色画风/笔触/色彩会漂移（一个写实一个卡通）。
往事/回忆录类用写实水彩风，不要卡通化——prompt 中必须写"写实水彩风格""不要卡通化""不要大眼萌系""不要Q版"，角色描述中避免"眼睛偏大"等萌系词汇，用"眼睛大小适中"。
男女关系要在 prompt 中明确距离——如果只是朋友关系，必须写"隔桌对坐""一臂距离""没有身体接触"，否则 AI 会默认画成亲密关系。
宫格不要超过 2×3——3列的格子在手机上太小，文字和细节都看不清。
每格文字不超过2个元素——对白+心理活动+旁白全堆在一格里会非常乱。
生成与下载分离——不要每批穿插下载（容易超时拖慢节奏），专心连续生成完所有画格后，用批量脚本一次性下载。
压缩用 1024px + quality 70——屏幕阅读完全够用，50格约 8MB，远低于 20MB 限制。
回忆场景加滤镜——用 sepia 滤镜视觉上区分过去和现在，读者一眼就能看出时空切换。
气泡尾巴指向说话人——这是漫画的基本语法，尾巴方向错了会很违和。
旁白绝不叠加在图片上——旁白放在图片下方独立的文字栏，彻底避免盖住人物脸部（尤其是手机端）。只有对白/心理活动气泡叠加，且必须放在四角，禁止居中。
生图时让脸在中心、四角留空——prompt中尽量让人物脸部在画面中心区域，四角留空给叠加气泡。脸部特写镜头尽量不放叠加气泡，改用旁白栏。
批量生图前先做最小验证——先生成第1集4格，确认画风、角色一致性、画面符合剧本后再批量生成剩余画格。避免一次性生成50格后发现画风不对全部返工。
源文件用JPG不用PNG——PNG每张约3MB，50格就是150MB，严重浪费存储空间和下载时间。生图返回PNG时下载后立即转JPG（quality=95）。
文件命名要规范——角色三视图命名为角色名_三视图.jpg，禁止用prompt作文件名（如"写实水彩风格_角色设定三视图_....png"），太长且无意义。
HTML生成后清理冗余属性——删除data-page-node-id、data-*等非标准属性（其他模型/平台可能自动添加），保持HTML干净。
发布版只复制引用文件——characters/角色三视图与风格参考图通常不被HTML引用，不应复制到发布版（会增加文件大小）。只保留HTML中实际src="..."引用的图片。
心理活动气泡四角尾巴要完整——CSS中.thought的::before/::after尾巴必须覆盖pos-tl/tr/bl/br四个位置，否则上方气泡没有尾巴。
画风不能只靠"写实水彩风"五个字——不同模型对"写实水彩风"理解差异大，必须用三层锚定：①固定的风格锚定描述块（水彩晕染、纸纹、柔和色彩、边缘柔和等具体描述）②明确的负面约束（不要卡通/3D/油画/赛璐璐/照片写实）③先生成风格参考图，后续所有图以它为参考生成。
风格参考图必须先于角色三视图——先生成一张纯场景的风格参考图确认画风，再用它作为风格参考生成所有角色三视图和画格。不要在风格未确认时就批量生成，否则会全部返工。
含角色的画格必须用参考图生图，不能用文生图——文生图会导致角色不一致和画风漂移。含角色的画格必须传入 style_ref.jpg + 角色三视图作为双重参考。
每张图prompt必须包含风格锚定块+负面约束块——这两个块是固定的，不得删减或改写。只改中间的画面/角色/光影描述。

往事漫画 · 故事连环画生成器

Install

故事连环画生成工作流

一、定位与适用场景

二、完整工作流（8个阶段）

阶段1：需求确认

✅ 阶段1检查门禁（全部通过才进入阶段2）

阶段2：剧本创作

2.1 拆分故事为集

2.2 每集拆分为画格

2.3 文字量控制

2.4 人物距离判定规则（强制）

✅ 阶段2检查门禁（全部通过才进入阶段3）

阶段3：角色资产设定（强制门禁）

3.1 风格参考图生成（强制第一步）

3.2 风格锚定描述块（每张图prompt必须包含）

3.3 角色资产清单

3.4 三视图生成规范

3.5 多造型/多年龄版本

3.6 资产确认

✅ 阶段3检查门禁（全部通过才进入阶段4）

阶段4：角色锚定

4.1 角色设定表

4.2 复用已有画面

✅ 阶段4检查门禁（全部通过才进入阶段5）

阶段5：批量生图

5.1 生图工具选择

5.2 参考图生图 Prompt 模板

5.3 文生图 Prompt 模板（仅用于纯场景/远景/物品，无角色）

5.4 生图策略

5.5 常见问题与处理

5.6 文件命名规范

✅ 阶段5检查门禁（全部通过才进入阶段6）

阶段6：HTML 组装

6.1 文件结构

6.2 CSS 核心组件

6.2.1 HTML清理（强制）

6.3 气泡尾巴方向

6.4 文字可读性与防盖脸规则

✅ 阶段6检查门禁（全部通过才进入阶段7）

阶段7：压缩发布

7.1 压缩脚本

7.2 压缩流程

7.3 发布格式选择

✅ 阶段7检查门禁（全部通过才进入阶段8/交付）

阶段8：迭代修改

✅ 阶段8检查门禁（全部通过才交付）

三、项目文件清单

四、时间/工作量估算

五、关键经验与踩坑记录

Related skills