# Immersive Poetry Page｜沉浸式古诗词网页生成 Skill

把一首中国古典诗、词、曲或古风散文诗，制作成一个真正可运行的电影感滚动网页。

[](https://zlbigger.com) [](https://zlbigger.com) [](LICENSE)

`immersive-poetry-page` 是一个面向 Codex 的创作型 Skill。它不只生成一张网页草图，而是完成从文学分析、视觉分镜、AI 图像生成、前端实现到浏览器验收的完整生产流程。

项目主页：[https://zlbigger.com](https://zlbigger.com)

## 它能做什么

给它一首诗，例如：

```text 使用 $immersive-poetry-page，把李白《将进酒》制作成沉浸式页面。 ```

Skill 会依次完成：

1. 检查现有前端项目、构建脚本、路由和未提交文件。 2. 核对作品信息、原文与重要文本异文。 3. 按叙事和情绪转折拆分为 5–8 个视觉段落。 4. 建立统一的时代、地理、人物、服饰、色彩和镜头语言。 5. 通过内置 ImageGen 为主视觉和每个重要段落分别生成图片。 6. 制作联系表，检查人物一致性、时代错误、意外文字和风格漂移。 7. 构建带背景交叉淡入、轻微视差和章节导航的响应式网页。 8. 接入诗词朗诵，尝试自动播放，并提供始终可用的播放／暂停开关。 9. 增加逐段直译、细读、技法说明和全诗情绪结构。 10. 运行生产构建，并在真实浏览器中检查桌面、移动端、音频和控制台。

## 核心特点

### 1. 文学分镜，而不是平均切句

分段依据空间、时间、视角、人物、动作、修辞模式和情绪方向的变化。相互依赖的诗句共用同一场景，避免“每一句配一张无关古风图”的碎片化效果。

每个视觉段落都需要明确：

- 原文 - 现代直义 - 可见意象与动作 - 关键写作手法 - 在全诗中的情绪功能 - 可拍摄、符合时代背景的场景 - 页面文案所需的留白方向

### 2. 一套贯穿全页的视觉圣经

所有生成图共享同一套约束：

- 朝代与地理环境 - 重复人物的年龄、脸型、发式、服装和道具 - 建筑、器物和材质 - 4–6 个核心色彩 - 随诗意推进的光线和天气 - 镜头焦段、构图和色彩科学 - 明确的禁止项

画面优先采用写实历史电影、真实微缩摄影、摄影风景或克制的绘画电影感。默认避免卡通、塑料玩具、低多边形、通用游戏美术和空泛的“古风”。

### 3. 图片是叙事主体

页面使用固定图片舞台和两层图像交叉淡入。每个段落进入视口时，背景切换到对应场景，并只添加克制的缩放或指针视差。

桌面端让文案卡片保持在半屏以内；移动端采用 `contain` 主图配合模糊的全屏背景，尽量保留完整人物和关键构图。

### 4. 原文、解读和视觉同步

页面不仅展示原诗，还包括：

- 清晰的逐段直译 - 对关键词和动词节奏的解释 - 对照、时间线、情绪刻度等微型视觉组件 - 体式、意象系统、结构、修辞和核心张力总结 - 重要文本异文说明

原诗文字由 HTML 排版，生成图片中禁止出现书法、印章、签名、水印或错误文字。

### 5. 完整工程验收

交付前必须检查：

- 生产构建是否成功 - 首屏加载层是否正常消失 - 中段背景是否真实切换 - 卡片是否遮挡主体或裁切文字 - 结尾解读是否完整 - 手机端是否溢出或破坏构图 - `prefers-reduced-motion` 是否生效 - 浏览器控制台是否干净

### 6. 自动播放与朗读开关

每个页面可以配置一条朗诵音频。页面会尝试自动播放；如果浏览器拦截有声自动播放，则保持“朗读”按钮可见，用户点击后立即播放。按钮同步显示播放、暂停、重播和音频不可用状态，并提供 `aria-pressed` 与键盘焦点样式。

## 工作流

```mermaid flowchart LR A[输入诗词] --> B[检查项目] B --> C[核对文本与文学分镜] C --> D[建立视觉圣经]