一句话结论
开发者利用 AI 模型生成 HTML5 交互动画，并结合本地代码助手自动执行浏览器脚本录制视频，实现了从创意描述到最终演示素材的全自动化工作流。
关键要点
- Claude Opus 5.5 模型根据三张 Kakapo 鹦鹉照片，成功生成了一个包含至少 20 只像素风鹦鹉跳跃互动的 HTML5 Canvas 动画页面。
- 本地 Claude Code 助手通过 Playwright 框架编写并执行脚本，实现了浏览器自动化操作。
- 自动化脚本严格遵循了“第 3 秒开始点击”及“点击位置分散”的逻辑要求，生成了 15 秒长的视频文件。
- 该工作流展示了大语言模型在生成前端代码与编写自动化测试脚本方面的协同能力。
- 最终生成的 Playwright 脚本代码简洁高效，直接用于捕获浏览器操作并输出视频，无需额外人工干预。
背景与事实
2026 年 9 月 26 日，知名开发者 Simon Willison 在其博客中分享了一次关于人工智能工具链的实战案例。此前一天，他在 WeAreDevelopers 北美世界大会（WeAreDevelopers World Congress North America）上发表了闭幕主题演讲。为了在演讲中穿插关于 2026 年 Kakapo 鹦鹉（一种濒危鸟类）破纪录繁殖季的相关内容，Willison 决定制作一个庆祝性的视觉素材。
在创作过程中，Willison 注意到社区中有关于 Claude Opus 5.5 擅长创建像素艺术动画的讨论。受此启发，他从 Google 图片搜索中选取了三张 Kakapo 鹦鹉的照片，将其提供给 Claude 并编写提示词。提示词明确要求生成一个 HTML5 Canvas 动画，内容是显然具有像素风格的 Kakapo 鹦鹉在跳来跳去并庆祝派对，伴随着纸屑等特效，且画面中至少要有 20 只鹦鹉。Claude Opus 5.5 生成的页面效果令人满意，不仅还原了鹦鹉的特征，还实现了动态交互效果。
随后，Willison 需要将该 HTML 文件嵌入到 Keynote 演示文稿中。由于无法直接嵌入交互式 HTML，他决定将其转换为视频。他下载了 HTML 文件，并向本地的 Claude Code 会话发出指令。指令要求生成一个 15 秒长的视频，需使用浏览器加载该 HTML 文件，并在第 3 秒后开始点击以触发纸屑效果，同时确保点击位置分散在可点击区域。
Claude Code 随后使用 Playwright 框架生成了执行脚本。该脚本定义了 1280x720 的视口大小，并预设了一系列带时间戳的点击坐标，涵盖中心、四角及边缘位置。脚本使用 `sync_playwright` 启动 Chromium 浏览器，设置视频录制目录，加载本地 HTML 文件，并按照时间计划执行鼠标点击操作，最后关闭浏览器上下文并保存视频。生成的 Playwright 脚本简短且逻辑清晰，最终输出的视频完美契合了 Willison 对最终幻灯片素材的需求。
影响分析
这一案例对中文开发者与从业者具有重要的实践参考价值，特别是在构建自动化演示素材工作流方面。分析判断认为，大语言模型在“创意生成”与“工具执行”两个环节的深度结合，正在显著降低多媒体内容制作的技术门槛。传统上，将网页动画转为视频需要手动编写 Selenium 或 Playwright 脚本，并处理复杂的异步加载与点击时机问题。而本案中，开发者仅通过自然语言描述需求，AI 助手即自动完成了脚本编写、依赖引入、坐标计算及视频录制全流程。这种模式不仅适用于技术演讲的准备，也可扩展至 UI 交互演示、自动化测试用例生成及前端开发调试场景。对于团队而言，掌握这种基于 AI 的代码生成与自动化执行技巧，能够大幅缩短从原型设计到最终交付物的周期，提升工作效率。
适用边界
该案例的成功依赖于特定条件，因此在其他场景下可能不适用。首先，源文件必须是本地可访问的 HTML 文件，若涉及需复杂后端交互或动态数据加载的网页，简单的点击脚本可能无法完整捕获预期效果。其次，Playwright 脚本中的坐标点击策略是基于固定视口大小的假设，若页面布局采用响应式设计且在不同分辨率下布局发生显著变化，预定义的点击坐标可能失效。此外，该方法主要针对静态或轻交互的动画效果，若网页包含复杂的用户身份验证、多步骤表单填写或需要实时网络通信的逻辑，单纯依靠预定义的点击脚本可能无法覆盖所有边界情况，需要更复杂的自动化策略。
孤本观察
编辑判断认为，这一工作流的核心价值在于展示了 AI 代理（Agent）在处理“跨模态”任务时的连贯性，即从图像理解到代码生成再到环境执行，形成了闭环。它预示着未来开发者可能更少地直接编写胶水代码，而是更多地通过描述目标状态来让 AI 代理自主选取并执行合适的工具链。
常见问题
Kakapo 鹦鹉在本案中指代什么类型的鸟类？
Kakapo 鹦鹉是一种濒危鸟类。
生成的 HTML5 Canvas 动画页面中至少包含多少只像素风鹦鹉？
至少 20 只。
自动化脚本要求在第几秒开始点击以触发纸屑效果？
第 3 秒。
该工作流为何不能直接应用于包含复杂后端交互或动态数据加载的网页？
因为该方法主要针对静态或轻交互动画，简单点击脚本无法完整捕获复杂后端交互或动态数据加载的预期效果。