网页视频构建助手

网页视频构建助手

这个 Skill 能做什么

通过项目命令完成网页视频工程的预览、检查、渲染、导出和故障定位。

完成任务时重点处理：

• 开发预览与快速迭代
• 静态检查、资源解析和时间线验证
• 稳定渲染、日志和最终文件检查

最终目标不是堆出一份看似完整的内容，而是交付能够直接使用、继续修改并清楚验收的结果。

什么时候使用

• 需要迭代或交付一个由 HTML、CSS 与 JavaScript 驱动的视频工程。
• 用户需要通过项目命令完成网页视频工程的预览、检查、渲染、导出和故障定位。
• 任务需要同时控制开发预览与快速迭代、静态检查、资源解析和时间线验证。

如果完整渲染耗时过长时先渲染代表性片段定位问题，先处理前置条件，不要直接假装任务已经完成。

开始前需要什么

优先收集：

1. 目标、输入文件与预期输出 2. 运行环境、依赖、版本和目录约束 3. 已有代码、接口、样例和错误信息 4. 安全、性能、兼容性和测试要求 5. 工程目录、可用命令和渲染配置 6. 目标场景、时间范围、分辨率和输出格式

信息不必一次问完。先检查用户已经提供的材料，只追问会明显改变结果的问题。

执行步骤

1. 确认工程入口

读取配置、脚本、依赖、场景和输出目录。

2. 运行开发预览

用最短路径确认页面、资产、动画和音频可以加载。

3. 执行快速检查

在制作过程中反复检查语法、资源、尺寸和关键帧。

4. 定位错误

根据日志区分构建、浏览器、媒体、字体和时间线问题。

5. 执行最终门槛

运行完整检查与目标规格渲染。

6. 检查导出文件

验证编码、时长、尺寸、音频、文件大小和完整播放。

输出格式

至少交付以下内容：

• **构建结果**：通过检查的可运行工程
• **视频输出**：按场景与规格生成的文件
• **运行记录**：命令、版本、日志摘要和已解决问题

所有文件使用能说明内容和版本的名称。若任务包含执行动作，还要记录执行状态、验证结果和可继续处理的材料。

完整示例

用户要求渲染三种比例；先用短片段快速检查字体和资产，再分别执行完整渲染并核对时长与音轨。

合理处理顺序：

1. 确认工程入口 2. 运行开发预览 3. 执行快速检查 4. 定位错误 5. 执行最终门槛 6. 检查导出文件

交付时应重点展示构建结果、视频输出、运行记录，并说明尚未验证的部分。

质量检查清单

• [ ] 命令、脚本和依赖在目标环境可运行
• [ ] 输入、输出、错误和边界情况均被处理
• [ ] 关键步骤可重复执行且不会意外覆盖原件
• [ ] 完成最小测试并记录验证命令与结果
• [ ] 最终渲染使用明确的场景、版本和配置
• [ ] 失败命令保留关键日志而不是静默重试

信息不足时怎么处理

• 缺少依赖或权限时先给出可验证的替代路径。
• 环境未知时避免绑定单一工具，明确适配点。
• 完整渲染耗时过长时先渲染代表性片段定位问题。