用Claude生成像素动画并转视频：一次演讲收尾的AI实践

开发者兼独立工具作者 Simon Willison 分享了一次颇具启发性的 AI 工作流实践：为一场技术大会的闭幕主题演讲制作收尾画面。他没有动用专业动画软件，而是通过 Claude 完成了从像素动画生成到视频导出的全过程。整个案例虽小，却清晰展示了当下大语言模型在创意生产和自动化任务上的组合能力。

一句提示词生成像素动画

Simon 在 WeAreDevelopers World Congress North America 的闭幕演讲中，想借用新西兰鸮鹦鹉（kākāpō）破纪录的繁殖季作为一个情感收尾点（他称之为演讲中的"STAR 时刻"）。为了做出一个庆祝画面，他注意到社区里对 Claude Opus 5.5 生成像素动画能力的讨论，于是决定亲自试一试。

他的做法非常直接：从 Google 图片搜索中找了三张鸮鹦鹉照片丢进 Claude，然后给出提示词——"这是一些鸮鹦鹉的照片，提醒你它们长什么样"，接着要求"用 HTML5 canvas 制作一段明显是像素风的鸮鹦鹉动画，让它们上下跳跃开派对、撒彩带，至少要有 20 只"。

最终 Claude 直接产出了一个可交互的网页动画，效果被作者评价为"相当不错"。这一步的价值在于：把参考图和明确的视觉需求交给模型，就能得到一个可运行的前端产物，省去了从零编写 canvas 动画逻辑的成本。

HTML5 Canvas 是浏览器内置的 2D 图形绘制 API，允许通过 JavaScript 逐帧绘制图形、实现动画效果，无需安装任何插件。像素风动画在 canvas 上的实现通常涉及低分辨率精灵图的放大绘制（使用 imageSmoothingEnabled = false 关闭抗锯齿），以及基于 requestAnimationFrame 的帧循环。为 20 只角色分别维护位置、速度、动画帧等状态，同时叠加粒子系统实现彩带效果，手写起来涉及相当多的样板代码。这正是将参考图交给模型的效率优势所在：模型对这类常见动画模式有充分的训练覆盖，能一次性生成可直接运行的完整实现，开发者无需自行查阅 Canvas API 文档或调试粒子运动逻辑。

用 Claude Code 把网页转成视频

真正体现工作流巧思的是第二步。Simon 想把这个动画嵌入 Keynote 演示文稿，但网页动画无法直接放进幻灯片，需要一段视频。于是他把任务交给了本地运行的 Claude Code 会话。

他的指令同样口语化：加载本地的 kakapo-party.html 文件，在浏览器里点击几次触发彩带效果，录制一段 15 秒的视频；并且补充了两条细节要求——"3 秒之后再开始点击"，以及"确保点击分散在可点击区域的不同位置"。

Claude Code 选择用 Playwright 来完成这项自动化任务，最终产出的视频正好满足了演讲最后一页幻灯片的需求。这里的关键是，作者只用自然语言描述了对时间节奏和点击分布的意图，模型自行把它翻译成了可执行的浏览器自动化脚本。

Claude Code 是 Anthropic 推出的命令行 AI 编程助手，可在本地终端环境中直接执行代码、读写文件、调用系统工具。与在网页对话框中生成代码片段不同，Claude Code 能够在本地环境中真正运行脚本并完成完整任务，这使它能够承担"生成脚本并立即执行"的自动化角色。Playwright 则是 Microsoft 开发的浏览器自动化框架，支持通过 Python、JavaScript 等语言控制 Chromium、Firefox、WebKit 等浏览器执行点击、截图、录屏等操作。在本案例中，Claude Code 充当"任务调度层"，理解意图并决定使用 Playwright 方案，而 Playwright 则作为执行层，真正操控浏览器完成动画录制。这两者的结合，让原本需要手动安装录屏软件、逐帧设置的工作缩减为一次自然语言指令。

脚本本身：短小而精准

作者特别提到，Playwright 脚本"令人愉快地简短"。脚本设定了 1280×720 的视口，预先定义了一组带时间戳的点击坐标，把点击点铺满画面的中心、四角和边缘：

# /// script
# dependencies = ["playwright"]
# ///
import time
from playwright.sync_api import sync_playwright
W, H = 1280, 720
clicks = [
    (3.0, 640, 360),   # centre
    (4.2, 160, 120),   # top-left
    (5.4, 1120, 120),  # top-right
    (6.6, 180, 600),   # bottom-left
    (7.8, 1100, 600),  # bottom-right
    (9.0, 640, 100),   # top-centre
    (10.0, 380, 380),  # mid-left
    (11.0, 900, 380),  # mid-right
    (12.2, 640, 620),  # bottom-centre
    (13.2, 640, 300),  # finale centre
]

脚本随后启动 Chromium、开启视频录制上下文，按预设时间依次执行 mouse.click，最后等待到第 16 秒关闭。逻辑清晰，几乎没有冗余。这段脚本恰好呼应了作者"3 秒后开始、点击要分散"的自然语言要求——模型把模糊的意图转化成了精确的坐标与时间序列。

这个小案例透露了什么

表面上这只是一段有趣的鸮鹦鹉派对动画，但它折射出几个正在成型的实践趋势。

第一，模型正在成为端到端的创意与工程管线。从生成前端动画，到编写自动化脚本、录制视频，两个环节都由 Claude 系列完成，人只负责提出意图和验收结果。

第二，自然语言正在取代精细的参数配置。作者没有手写坐标、没有调时间轴，只用"分散点击""3 秒后开始"这样的描述，就得到了工程上可用的产物。

第三，组合式使用比单点能力更有价值。Claude 负责创意生成，Claude Code 结合 Playwright 负责自动化落地，这种"模型 + 工具"的搭配，才是让整个任务顺利闭环的核心。

对于需要快速产出演示素材、原型动画或一次性小工具的开发者来说，这类轻量工作流的参考意义远大于案例本身的复杂度。它提醒我们，很多过去需要专门软件和手工操作的任务，如今可以用几句提示词串起来完成。