# PJ2026-0203 视觉制作需求规格

## 修改历史

| 版本 | 更新日期 | 变更说明 |
| --- | --- | --- |
| v0.1 | 2026-07-13 | 定义来源页面视觉、HTML 动效、阶段导航、PNG 和 PPTX 的目标能力。 |

## 正文

## PJ2026-0203 视觉制作需求规格

## 1. 文档控制

| 字段 | 内容 |
| --- | --- |
| 编号 | PJ2026-0203 |
| 短名 | 视觉制作 |
| 层级 | L1 方向 |
| 规格状态 | 已生效 |
| 需求规格模板 | [ISO/IEC/IEEE 29148 需求规格模板](../../templates/iso-iec-ieee-29148-requirements-spec-template.md) |
| 上级规格 | [PJ2026-02 智媒工厂总规格](PJ2026-02-smart-media-factory.md) |
| 规格治理索引 | [PJ2026-02 智媒工厂总规格](PJ2026-02-smart-media-factory.md) 第 7 章 |

本文采用 ISO/IEC/IEEE 29148 需求规格模板的项目裁剪版。

正文只定义：

- 来源视觉、场景、主题、动效、演示文稿和视觉验收的预期终态；
- 对应验收契约。

## 2. 目的和范围

### 2.1 目的

视觉制作的目标是：

- 把结构化文稿和来源证据转化为信息清楚、节奏连贯的动态画面；
- 形成具有栏目辨识度的视觉语言；
- 生成的 HTML、PPT、PNG、封面和视频采用白色与绿色为主、温暖、阳光、圆润的科技编辑部方向；
- 避免冷冽的蓝黑仪表盘观感；
- 支持栏目主题切换，同时保持来源可追溯、绝对时间可复现和多工件一致。

### 2.2 范围内

- 入选资讯原始网页、GitHub 页面或论文摘要页的本地视觉采集和失败降级。
- 合并开场与卡片大纲、逐条资讯和参考来源等场景类型。
- 本地开源 OCR、画面信息量分析、LLM 画面筛选和可审查的重点区域规划。
- Web 人工调整重点区域、出现时段和放大比例的控制入口。
- YAML 可配置的色彩、圆角、阴影、纹理、字号、留白、字幕安全区和章节导航。
- HTML/CSS/JavaScript 动效、来源页面向下滚动、绝对时间寻址和逐帧渲染状态。
- 顶部阶段内细进度、底部总阶段导航和总进度的对齐与跳转语义。
- HTML、PNG、PPTX、封面候选和视觉清单等多工件输出。
- 内容可读性、版权提示、品牌克制和离线生产边界。

### 2.3 范围外

- 资讯事实、选题和口播内容，归 [编辑策划](PJ2026-0202-editorial-planning.md)。
- 来源身份、角色、抓取政策和版权事实，归 [资讯源](PJ2026-0201-information-sources.md)。
- 场景时长最终分配、配音、字幕和视频编码，归 [音频成片](PJ2026-0204-audio-video-production.md)。
- 复制已有视频的封面、截图编排、品牌包装、转场、动画或受保护素材。
- 依赖在线 CDN、在线字体、外部脚本或付费生成服务才能渲染生产画面。
- Web 工厂、控制台和内置终端的视觉语言：
  - 控制台归 [流水线平台](PJ2026-0205-pipeline-platform.md)；
  - 内置终端归 [平台交付](PJ2026-0207-platform-delivery.md)；
  - 它们应使用工业风和紧凑布局，不复用本规格的暖色大圆角主题。

## 3. 术语表

| 术语 | 定义 |
| --- | --- |
| 来源视觉 | 从实际采用来源页面生成并登记的本地画面帧及其链接、滚动位置和使用策略。 |
| 场景模型 | 描述场景身份、类型、标题、正文、来源视觉、章节和 HTML 工件关系的结构化数据。 |
| 绝对时间寻址 | 通过场景内毫秒位置直接计算动效状态，使任意帧可重现而不依赖前序播放。 |
| 阶段内进度 | 位于画面顶部、表示当前场景内部播放位置的细进度条。 |
| 总阶段导航 | 位于画面底部、等宽等高展示整期短标题并与总进度 X 轴对齐的章节导航。 |
| 来源滚动 | 单个页面按绝对时间从上到下滚动，完成后直接切换下一页面的确定性视觉效果。 |
| OCR 画面证据 | 本地开源 OCR 从候选画面提取的文本、位置、布局和置信度，用于筛选与重点区域验证。 |
| 重点区域 | 在来源画面中可由 OCR 和来源事实验证，或由编辑者手工指定的放大矩形、出现时段和倍率。 |
| 内容主题令牌 | 由 YAML 管理的生成内容颜色、圆角、阴影、纹理和布局参数。 |
| 字幕安全区 | 为字幕和播放器覆盖层预留、不得放置关键信息的画面区域。 |
| 无图降级 | 来源页面不可采集或不适合使用时，以原创文字、数据卡片和来源标识替代第三方画面。 |

## 4. 系统边界和接口

本规格把视觉制作作为内容画面和演示工件生产能力看待，不负责文稿真实性和音视频编码。

| 边界项 | 内容 |
| --- | --- |
| 外部使用者 | 编辑者、视频制作者、音频成片、发布审核者和 Web 预览用户。 |
| 外部输入 | 结构化文稿、来源清单、来源视觉策略、期次元数据、场景时长提示和主题 YAML。 |
| 受控资源 | 来源帧、视觉清单、场景模型、HTML、CSS、PNG、PPTX、封面画面和动效状态函数。 |
| 外部输出 | 可预览 HTML、确定性场景帧、演示文稿、封面候选和供成片渲染的场景清单。 |
| 用户接口 | TypeScript CLI 视觉与幻灯单步、浏览器 HTML 预览、PNG/PPTX 工件和 Web 幻灯视图。 |
| 系统边界 | 视觉制作负责“信息如何被看见和导航”；不改变来源事实、口播语义和最终媒体时间线。 |

## 5. 内部分工与下级索引

| 编号 | 模块或课题 | 规格位置 | 主责边界 | 上游依赖 | 下游支撑 |
| --- | --- | --- | --- | --- | --- |
| PJ2026-020301 | 来源画面 | 本规格 6.1 | 页面采集、OCR、画面筛选、滚动位置、清单、失败和无图降级 | 资讯源、结构化文稿 | 场景编排 |
| PJ2026-020302 | 场景编排 | 本规格 6.2 | 开场与大纲、故事、来源页和章节身份 | 编辑策划、来源画面 | 动效渲染、音频成片 |
| PJ2026-020303 | 主题系统 | 本规格 6.3 | 色彩、圆角、阴影、纹理、字号、留白和主题切换 | YAML、栏目定位 | 全部场景 |
| PJ2026-020304 | 导航进度 | 本规格 6.4 | 阶段内进度、总导航、总进度、对齐和标题高度 | 场景编排、时间线 | 成片、Web 跳转 |
| PJ2026-020305 | 动效渲染 | 本规格 6.5 | 绝对时间寻址、来源滚动、重点放大、逐帧一致性和离线渲染 | 场景编排、主题系统 | 音频成片 |
| PJ2026-020306 | 视觉工件 | 本规格 6.6 | HTML、PNG、PPTX、封面和视觉质量边界 | 全部视觉环节 | 发布运营 |

本章图形描述视觉制作的预期终态数据面。

### 5.1 目标数据面架构图

```mermaid
flowchart LR
  subgraph Inputs[视觉输入]
    Script[结构化文稿]
    Sources[来源清单]
    Theme[主题 owning YAML]
  end
  subgraph VisualPlane[视觉制作数据面]
    Capture[来源页面采集器]
    VisualStore[本地来源帧与清单]
    OCR[本地 OCR]
    Planner[画面筛选与重点规划]
    SceneCompiler[场景编排器]
    HtmlRenderer[HTML 动效渲染器]
    DeckRenderer[PNG / PPTX 渲染器]
  end
  Sources --> Capture
  Capture --> VisualStore
  VisualStore --> OCR
  OCR --> Planner
  Script --> SceneCompiler
  Script --> Planner
  Planner --> SceneCompiler
  VisualStore --> SceneCompiler
  Theme --> SceneCompiler
  SceneCompiler --> HtmlRenderer
  HtmlRenderer --> DeckRenderer
  HtmlRenderer --> Motion[确定性视频帧]
  DeckRenderer --> Review[人工视觉预览]
```

来源采集器只产生本地视觉工件。场景编排器拥有章节与画面关系，渲染器不重新解析来源事实。

### 5.2 目标数据流图

```mermaid
flowchart TD
  Script[结构化文稿] --> Scenes[场景编排]
  Sources[来源清单] --> Capture[来源页面采集]
  Capture --> VisualManifest[来源视觉清单]
  VisualManifest --> OCR[本地 OCR 与布局]
  OCR --> Plan[画面筛选与重点区域计划]
  Plan --> Scenes
  Theme[主题 owning YAML] --> HTML[HTML 场景生成]
  Scenes --> HTML
  HTML --> Preview[PNG 预览]
  HTML --> Motion[绝对时间动效帧]
  Preview --> Deck[PPTX]
  Preview --> Cover[封面候选]
  Motion --> Video[音频成片]
```

HTML 场景是动态视觉语义的主要表达，PNG 和 PPTX 是可审查、可交换的派生工件。三者应共享场景数据和主题，不维护互相漂移的版式实现。

### 5.3 关键时序图

```mermaid
sequenceDiagram
  participant E as 编辑者
  participant P as 流水线平台
  participant C as 来源页面采集器
  participant S as 场景编排器
  participant B as 本地浏览器
  participant A as 视觉工件
  E->>P: 提交 visuals 单步
  P->>C: 传入实际采用来源与视觉策略
  loop 每条故事
    C->>B: 打开公开来源并按位置截图
    alt 可以采集
      B-->>C: 本地来源帧
      C->>A: 登记链接、滚动位置与画面
    else 不可采集
      C->>A: 登记失败与无图降级
    end
  end
  E->>P: 提交 slides 单步
  P->>S: 传入文稿、来源视觉和主题
  S->>B: 按绝对时间生成 HTML 与预览
  B-->>A: HTML、PNG、PPTX 与场景清单
  P-->>E: 返回场景数、画面状态与工件索引
```

来源视觉失败不应触发无关图片替换。幻灯步骤必须消费视觉清单中的成功或降级状态，保持 HTML、PNG 和 PPTX 同源。

## 6. 原子需求

### 6.1 VISUAL-L1-REQ-001 可追溯来源画面

| 编号 | 短名 | 主责模块 | 关联模块 |
| --- | --- | --- | --- |
| VISUAL-L1-REQ-001 | 来源画面 | PJ2026-020301 来源画面 | [资讯源](PJ2026-0201-information-sources.md)、[编辑策划](PJ2026-0202-editorial-planning.md) |

系统应为每条入选资讯按来源视觉策略采集本地画面。

视觉清单应保留：

- 故事、来源、链接和页面标题；
- 采集状态和失败原因；
- 画面路径、滚动位置和页面高度。

候选画面必须经过本地开源 OCR，至少登记：

- 识别文本、文本框、行和布局；
- 置信度、画面尺寸和 OCR 模型版本；
- 可与来源事实匹配的关键词和重点区域候选。

授权 LLM 可以消费：

- OCR 结果；
- 来源事实；
- 候选画面摘要。

LLM 输出应包含：

- 画面选择和理由；
- 重点矩形；
- 出现时段；
- 放大倍率。

自动重点放大应满足：

- 只有 OCR 或来源事实能够验证时才能生效；
- 置信不足时标记为人工确认；
- 允许编辑者在 Web 中手工调整。

来源画面可以按网页、GitHub 和论文摘要使用不同样式，但必须遵守：

- 来自实际采用的公开来源；
- 只采集必要页面范围并用于短时展示；
- 不下载整站；
- 不展示登录信息、个性化推荐、敏感资料或无关广告。

页面不可访问、内容不适合展示或版权边界不清时应使用无图降级。系统不得从无关图片搜索结果、旧期次或其他媒体视频中找图冒充当前来源。

### 6.2 VISUAL-L1-REQ-002 稳定场景结构

| 编号 | 短名 | 主责模块 | 关联模块 |
| --- | --- | --- | --- |
| VISUAL-L1-REQ-002 | 场景编排 | PJ2026-020302 场景编排 | [编辑策划](PJ2026-0202-editorial-planning.md)、[音频成片](PJ2026-0204-audio-video-production.md) |

系统应把结构化文稿编排为具有稳定身份和章节语义的场景：

- 栏目至少包含合并的开场与卡片大纲、每条资讯和参考来源；
- 故事数量变化时，场景数量应按内容生成；
- 场景数量不能写死为九页。

各场景职责如下：

- 开场突出期数、日期和主题，并在同一场景使用可快速扫读的卡片大纲；
- 故事页呈现短标题、核心变化、关键信息和来源画面；
- 最后一条故事结束后直接进入参考来源；
- 参考来源页以类似参考文献的编号格式列出实际采用来源。

场景标题、章节短标题、中文短释和来源身份应来自同一结构化文稿，不允许在 HTML、PPTX 和视频中分别人工维护。

### 6.3 VISUAL-L1-REQ-003 暖阳可配置主题

| 编号 | 短名 | 主责模块 | 关联模块 |
| --- | --- | --- | --- |
| VISUAL-L1-REQ-003 | 暖阳主题 | PJ2026-020303 主题系统 | [编辑策划](PJ2026-0202-editorial-planning.md)、[发布运营](PJ2026-0206-publishing-operations.md) |

系统应通过 owning YAML 管理生成内容主题令牌。

默认主题应满足：

- 以纯白为大面积底色；
- 以中深绿色作为框线、点缀、导航和装饰；
- 通过暖白、圆角、克制阴影和充分留白营造温暖、阳光的编辑部感受。

默认主题不得使用渐变。页面层级应通过边框、色块、字号、间距和少量实色强调建立，不得用大面积渐变制造科技感。

本主题只用于生成的 HTML、PPT、PNG、封面和视频。Web 工厂、控制台与内置终端不得继承这些大圆角、卡片留白和暖色装饰规则。

主题必须保持：

- 正文、标题、来源标签、进度和字幕区域的对比度与可读性；
- 通过层级、留白、大小和有限强调色区分关键信息；
- 不让暖色退化为所有元素同色；
- 不依赖颜色单独表达状态。

主题切换不得改变场景数据、来源关系和时间线契约。其他栏目可以选择不同主题，但生产 HTML 不得依赖在线字体、脚本或样式服务。

### 6.4 VISUAL-L1-REQ-004 对齐章节导航

| 编号 | 短名 | 主责模块 | 关联模块 |
| --- | --- | --- | --- |
| VISUAL-L1-REQ-004 | 导航进度 | PJ2026-020304 导航进度 | [音频成片](PJ2026-0204-audio-video-production.md)、[发布运营](PJ2026-0206-publishing-operations.md) |

进度布局必须满足：

- 顶部显示当前场景内部细进度；
- 底部显示总阶段导航和总进度；
- 底部导航与总进度在 X 轴使用同一内容宽度和起止位置；
- 用户可以按进度位置理解或跳转到对应阶段。

阶段导航必须满足：

- 所有阶段等宽、等高；
- 底部总览使用直角并与画面底边贴合；
- 相邻阶段之间不留空隙；
- X 轴从画面最左侧延伸到最右侧，并与总进度起止位置完全对齐；
- 导航内只显示简短标题；
- 标题过长时允许换行，并统一增加全部阶段的 Y 轴高度；
- 不能截断、使用省略号或让单个阶段独自变高；
- 标题长度和导航最大高度由配置给出上限。

底部总览颜色应满足：

- 过去、当前和未来阶段使用具有足够对比度的实色；
- 活动阶段和结束阶段在典型视频压缩和普通显示器上仍可清楚区分；
- 不使用过浅底色。

场景数量和标题来自当期场景模型。HTML 预览和 Web 编辑台可以点击章节跳转，成片中的导航则以高亮和进度提供同一视觉语义。

### 6.5 VISUAL-L1-REQ-005 确定性动态画面

| 编号 | 短名 | 主责模块 | 关联模块 |
| --- | --- | --- | --- |
| VISUAL-L1-REQ-005 | 动效渲染 | PJ2026-020305 动效渲染 | [音频成片](PJ2026-0204-audio-video-production.md)、[流水线平台](PJ2026-0205-pipeline-platform.md) |

系统应以场景内绝对时间计算所有生产动效，使从任意时间点渲染的画面与从头播放到该点的画面一致。

来源页面滚动顺序如下：

- 先直接显示一个页面；
- 在该页面内从上到下滚动；
- 滚动完成后直接切换到下一页面；
- 页面之间不得使用会让两页文字叠加的慢渐变。

重点放大应满足：

- 使用视觉计划中的矩形、时段和倍率；
- 保持右侧来源画面文字可读；
- 自动计划未通过 OCR 或来源事实验证时不得静默启用；
- 使用 Web 人工调整结果或保持未放大画面。

进场、强调、进度和卡片动效应服务信息理解，不能造成文字晃动、阅读时间不足或字幕冲突。

浏览器渲染必须在禁用后台网络依赖的生产环境中运行。

渲染应满足：

- 指定画布、捕获帧率和时间点产生稳定尺寸与场景身份；
- 中断重跑不得因上次浏览器状态改变结果。

### 6.6 VISUAL-L1-REQ-006 多工件视觉交付

| 编号 | 短名 | 主责模块 | 关联模块 |
| --- | --- | --- | --- |
| VISUAL-L1-REQ-006 | 视觉工件 | PJ2026-020306 视觉工件 | [音频成片](PJ2026-0204-audio-video-production.md)、[发布运营](PJ2026-0206-publishing-operations.md) |

系统应从同一场景模型生成可直接预览的 HTML、逐场景 PNG、PPTX 和封面候选，并登记尺寸、页数、路径、字节数和哈希。

多工件要求如下：

- PPTX 可以把 HTML 画面封装为高保真演示页；
- PPTX 应保持标准宽高比、页数和预览一致；
- PNG 应支持人工快速抽检和无浏览器场景预览；
- 封面候选应由栏目视觉生成，不复制来源站点封面。

视觉交付完成标准包括：

- 关键文字不越界；
- 字幕安全区无关键信息；
- 来源标识清楚；
- 长标题可读；
- 参考来源页可辨识；
- 无意外网络依赖；
- 无未登记第三方资产。

## 7. 过程控制

### 7.1 追溯契约

- 每个视觉场景应能追溯到故事身份、来源许可、画面策略、视觉计划和最终时间线。
- 自动生成文件、纯配置、锁文件和二进制工件应由对应生成器、校验器或 owning YAML 提供稳定归属。

### 7.2 原入口验收

- 通过 TypeScript CLI 分别单步运行来源视觉和幻灯步骤。
- 核对每条入选资讯的视觉状态、来源链接、帧数、滚动位置和失败降级。
- 在浏览器中检查合并开场与大纲、至少两条故事和来源页的开始、中间、结束状态。
- 核对 OCR 文本和布局、LLM 画面选择理由、自动重点区域验证与 Web 人工调整结果。
- 检查顶部细进度、底部总导航、总进度 X 轴对齐、阶段等宽等高和长标题换行。
- 检查底部总览直角贴边、阶段无间隙、全宽对齐和深色对比度。
- 检查单页向下滚动完成后直接切页，页面之间不存在慢渐变文字重叠。
- 核对 HTML、PNG、PPTX 的场景数、顺序、尺寸、标题和来源一致。
- 在桌面和窄屏 Web 入口检查章节导航可点击且无横向溢出。

### 7.3 版权和失败控制

- 页面采集只使用实际采用来源和必要可见范围，并保留来源归因。
- 来源视觉失败时允许无图降级，不允许因此阻断有充分事实证据的整期内容。
- 视觉清单中的版权提示是人工复核输入，不构成自动授权结论。
- 新增外部字体、图片、图标、音频或模板前必须确认许可和分发边界。
- 视觉效果无法通过绝对时间复现、需要联网才能生产或遮挡字幕时不得进入发布候选。

### 7.4 回写边界

- 页面身份、许可提示或来源策略问题回写 [资讯源](PJ2026-0201-information-sources.md)。
- 场景内容、标题或信息层级来源于文稿的问题回写 [编辑策划](PJ2026-0202-editorial-planning.md)。
- 时间线、字幕安全区实测或编码问题回写 [音频成片](PJ2026-0204-audio-video-production.md)。
- 章节跳转、工件展示或作业可见性问题回写 [流水线平台](PJ2026-0205-pipeline-platform.md)。
- 封面选择和平台展示问题回写 [发布运营](PJ2026-0206-publishing-operations.md)。
