最近做了一个《奥德赛》的沉浸式网页：往下滚动，镜头就沿着故事往前走，从特洛伊战后的海面进入洞穴，再经过冥界和海上大漩涡，最后回到伊萨卡 先放效果： Skill： /ai-market-guide/ 使用文档： /ai-market-guide/ 1. 开始前，把内容资料和视觉参考准备好 建议把资料来源，交互参考录屏，还有其他各部分内容分开整理，可以参考我这个结构 references/ brief.md # 目标、受众、章节规模、语言 story-notes.md # 故事梗概、必须保留的事件 sources.md # 资料来源、阅读范围、优先级 interaction-reference.mp4 # 交互参考录屏 reference-notes.md # 录屏时间段及需要参考的细节 visual-style.jpg # 画风、色彩、材质参考 character-reference.png # 主角外形参考 内容资料也可以很朴素，比如 story-notes.md 先写“核心是返乡旅程”，再列必须保留的章节、每章希望读者理解的一件事，以及可以省略的支线。
原著或梗概负责提供依据，这份笔记负责告诉 AI 你准备怎样取舍。材料说明的 prompt ，可以发给 Agent： 请先读取我提供的资料，再提出制作方案。
材料用途如下： 1. story-notes.md 是内容主线，里面标注“必须保留”的事件要保留。 2. sources.md 是核对来源。
不同资料冲突时，优先采用我指定的主要版本， 不要把影视改编情节直接当成原著情节。 3. interaction-reference.mp4 参考固定全屏画面、滚动推进镜头、章节切换。
具体参考片段见 reference-notes.md 。 4. visual-style.jpg 参考色调、绘画质感和光线。
- character-reference.png 用来保持主角外形一致。请先告诉我：从每份材料里提取了什么、哪些内容无法读取、 还有哪些冲突需要处理。
不能访问的链接不要假装已经看过。如果参考来自不同作品，建议再补一句哪些元素需要舍弃，例如：只参考一个网站的滚动方式，不沿用它的 Logo 、字体组合和装饰图案，这样最后做出来的页面更容易形成自己的风格 2. 第一轮 prompt 先把制作目标说具体 第一条消息不必包含所有镜头细节，但要交代主题、读者、内容范围、视觉方向、交互方式和交付要求 比如： 请使用 sn-motion-html ，制作一个关于《奥德赛》的沉浸式叙事网页。
主题：一个经历战争和漂泊的人，如何回到故乡。受众：没有读过原著、但愿意通过画面了解故事的人。
内容：以我提供的资料为依据，把返乡旅程组织成约 7 个章节。可以压缩支线，但要保留关键因果；明确标记为叙事改编。
语言：页面标题、导航和正文使用英文；制作过程用中文和我沟通。视觉：有绘画质感的古希腊史诗插画，保留布料、青铜、岩石和海水的细节。
主角外形、服装主色和船只特征需要在不同章节中保持一致。交互：一个固定的全屏画面，由页面滚动进度控制镜头进程。
相邻场景之间设计有方向感的连接镜头，支持向上回看和章节跳转。排版：标题突出，正文精简。
每章文字同时完整显示， 按主体位置选择左侧、右侧或底部留白，避免挡住人物和关键道具。设备：优先保证桌面效果，同时检查手机竖屏裁切与文字可读性。
声音：默认静音。第一轮先输出内容大纲、分镜方案和视觉提案。
样图阶段先做开头、中间、结尾的小样。等我分别确认视觉方向、内容与镜头安排后，再生成完整图片集。
收费视频生成前，单独说明模型、数量、预计费用和重试范围，等我授权。最终交付可运行项目、本地预览地址、素材和修改说明。
- 先审大纲和分镜，别急着把所有素材生成出来 《奥德赛》这种长故事需要压缩，压缩的时候，一章可以交代几个有关联的事件，但画面还是最好只有一个主要视觉事件，这一轮我会要求 Agent 把方案展开： 请把章节方案整理成分镜表，每章包含： 章节标题及它在整条故事线中的作用； 页面实际显示的文案； 一个主画面事件，以及必须出现的人物、道具； 构图、景别和镜头运动方向； 文字放在左、右还是底部，为什么； 从上一章进入本章的方式； 从本章离开时，镜头停在哪里，怎样连接下一章。先找出最容易发生跳切、人物变化或空间关系不成立的位置， 给出具体调整建议。
比如独眼巨人洞穴这一幕，如果主角在左侧、巨人在后方，文字就可以放在右侧相对空的区域，离开洞穴时，可以让镜头朝洞口光线推进；下一段如何接入海面，要在分镜阶段说明方向和中间经过什么。 5. 用少量样图确定风格，再固定人物设定 人物一致性需要单独写，尤其是有主角贯穿的故事。
只重复角色名字是不能充分约束生成结果的！ ！
以案例中的主角为基础，可以写一个固定的角色设定块，prompt 是： 主角统一设定： 成年男性，深色中长卷发，短须，体格结实。穿暗红色披风、青铜色胸甲、深蓝色短衣，佩戴皮革绑带。
脸部轮廓、发型、胡须长度和服装主色在各场景中保持一致。允许因旅途出现湿水、尘土或轻微破损。
这个设定是本项目的视觉设计；需要换装的剧情节点另行标注。生成时优先使用已经确认的角色参考图。
再把风格设定和本章画面分开写，后续修改会容易很多： 统一风格： 古希腊史诗插画，细腻绘画质感。主要材料为青铜、粗布、木材、岩石和海水。
暖金色自然光与深蓝色阴影形成对比，保留清晰的前中后景。沿用已确认的人物参考，不重新设计主角。
画面内不生成文字、Logo 、水印或现代物品。本章画面： 特洛伊战后的海岸。
主角站在木船前部，回望远处冒烟的城池。前景有船舷与绳索，中景是主角，背景是海面与城市。
主角偏右，左侧留下可放标题和两段正文的空间。关键人物保持在手机裁切仍能看见的安全区域。
样图不合适时，修改意见也尽量具体： 保留目前的色调、绘画质感和光线。第二张的主角脸型变窄、胡须变短，请按第一张参考统一。
第三张主角太靠边，请移向画面中央一些，避免手机竖屏裁掉脸。第一张左侧准备放正文，请减少该区域的高亮烟雾和密集细节。
- 网页阶段，把镜头进程、文字和滚动关系调好 有了素材，网页还需要解决几个问题：停在某一章时文字能否读完，转场时文字何时退出，手机上主体有没有被裁掉，以及视频加载失败时页面显示什么。 《奥德赛》案例里，文字位置随构图变化：有些章节在左侧，有些在右侧，结尾落到下方。
规划时就应该把这件事交代给 Agent 。可以这样提出网页制作要求： 请按已经确认的分镜和素材组装网页。
所有场景放在同一个固定全屏舞台里。滚动进度映射到场景与连接镜头的时间线，支持向上回看。
每章的完整文案同时出现，让用户可以停下来阅读。连接镜头期间隐藏正文，下一章进入后再显示对应文案。
文字位置按分镜安排，不遮住脸部、手部动作和关键道具。用局部柔和渐变改善对比，保留画面的可见范围。
提供章节导航、总进度，以及视频尚未加载时的静态封面。手机端重新检查裁切和文字位置。
系统启用减少动态效果时，保留可以阅读的静态版本。正文与章节配置保存在 content/story.json ，方便后续修改。
素材也需要统一规格。 Skill 会用 FFmpeg 处理尺寸、帧率、编码、时长等，并为网页按进度定位视频做准备。
视频能正常播放，只能说明素材可用；滚动前进、后退时是否顺畅，还需要在页面里检查。这里还有一个容易混淆的地方：视频时长和读者停留时间是两回事。
页面把滚动进度映射到视频位置，读者可以停下来读文字。如果感觉某章一滚就过去了，应该检查这一章分配的滚动距离和文字出现区间，再决定是否调整素材。
项目生成后，常用的本地检查和预览命令是： python scripts/verify_media.py . python scripts/contact_sheet.py . python scripts/serve_project.py . --port 8080 这些命令在生成后的项目目录中运行。第一个检查素材规格，第二个生成便于横向查看的画面总览，第三个启动本地预览。
也可以让 Agent 执行并解释检查结果。返工时，最好指到具体章节和具体问题。
比如： 第二章人物没问题，但标题压到了洞口的亮部，正文不好读。先调整文字位置和局部渐变，保留当前素材。
第三章进入第四章时，前一个镜头向前，后一个突然向左，接缝很明显。请检查这两段实际边界帧，提出新的连接路线，先给我看方案。
第五章手机端把主角的脸裁掉了。请先检查视频的显示位置；如果原始构图没有调整空间， 再说明需要重做哪张图、哪段视频，以及受影响的相邻连接镜头。
写作不易，希望大家支持！