两段提示词：AI做像素动画并自动录成演讲视频

原文要点

Simon Willison为2026年WeAreDevelopers北美大会闭幕演讲做了个结尾彩蛋：他把三张鸮鹦鹉照片丢给Claude并附一句提示词，让其在HTML5 Canvas上生成至少20只像素鸮鹦鹉上下跳开派对、点击或按空格喷彩带气球彩纸的动画页；之后在本机Claude Code里要求把该HTML录成15秒视频、第3秒后才点击且点击分散，Claude Code用Playwright开浏览器按时间表点击并录屏，产出嵌进Keynote的视频。原文附完整Playwright脚本，约二十行，分辨率1280×720。

这次做成什么

复刻这套两阶段做法：先用一条提示词让模型产出单文件像素动画HTML，再用一条提示词加Playwright脚本把它自动录成固定时长的演讲用视频。练习主题本站换为像素猫派对，避免照抄原作素材。

准备什么

• 可使用带图片输入的Claude对话（或等效多模态模型）
• 本机装好Python 3与playwright包，并执行过playwright install chromium
• 能跑Claude Code或任何可执行脚本的终端环境
• 三张左右的目标动物参考照片（自备，勿用他人版权图商用）

具体怎么做

1. 生成动画HTML

   在Claude对话里上传参考照片，粘贴下方第一条提示词，要求输出单个HTML文件：Canvas上至少20只像素动物循环跳动，点击或空格触发彩带。满意后把代码存为party.html。

2. 本机验证交互

   用浏览器打开file:///路径/party.html，确认点击页面任意位置有彩带爆发、动画持续循环；若有报错先让模型修复再录屏。

3. 让Claude Code接管录屏

   在Claude Code会话里粘贴第二条提示词，把路径换成你的文件绝对路径，明确要求15秒、第3秒后开始点击、点击位置分散。它会写出类似下方的Playwright脚本。

4. 运行脚本取视频

   保存脚本后运行python record.py，Playwright以1280×720视口打开页面，按时间表点击，关闭上下文时在vids文件夹生成webm视频；拖进Keynote或PPT试播。

可直接复制的材料

这里有几张猫的照片，只是让你参考它的外形和花色。请用HTML5 Canvas做一个明显像素画风格的动画：至少20只像素猫上下跳着开派对，有迪斯科灯球、彩带、气球和彩纸效果；点击、触摸或按空格键都会在点击位置喷出一轮彩带。全部代码放在一个HTML文件里，浏览器直接打开就能运行，不加载任何外部资源。

帮我用Playwright录制当前目录的party.html：页面载入后先展示3秒，再在四角和中心分散点击，让彩带效果出现；动画展示约15秒，视口和录屏分辨率1280×720，输出到vids文件夹。说明视频包含的载入、收尾时间，交付前先试听或播放检查；不要声称时长恰好15秒。

from pathlib import Path
from time import monotonic, sleep
from playwright.sync_api import sync_playwright

html = Path("party.html").resolve()
if not html.is_file():
    raise FileNotFoundError(html)
events = [(3, 640, 360), (5, 160, 120), (7, 1120, 120),
          (9, 160, 600), (11, 1120, 600), (13, 640, 360)]
with sync_playwright() as p:
    browser = p.chromium.launch()
    context = browser.new_context(viewport={"width": 1280, "height": 720},
        record_video_dir="vids", record_video_size={"width": 1280, "height": 720})
    page = context.new_page()
    page.goto(html.as_uri(), wait_until="load")
    started = monotonic()
    for second, x, y in events:
        sleep(max(0, started + second - monotonic()))
        page.mouse.click(x, y)
    sleep(max(0, started + 15 - monotonic()))
    context.close()
    browser.close()

输入与输出示例

本站虚构演示，非原作者运行结果；实际时长与效果取决于你的HTML和机器性能。

输入

向Claude上传3张自有橘猫照片并使用提示词一，保存party.html后运行本站示例。时间表为页面载入后第3秒点中心，第5、7、9、11秒点四角，第13秒再点中心。

对应输出

vids目录应生成1280×720的webm视频：页面载入后前三秒只展示动画，第3秒中心出现第一次点击效果，随后四角与中心依次触发。动画展示窗口约15秒，最终文件可能更长，须实际播放检查后再放进Keynote或PPT。

做完检查这些

• HTML单文件双击即可打开，控制台无报错，点击有彩带反馈
• 页面上可数的像素动物不少于20只且持续循环跳动
• 录出的视频前3秒没有任何点击效果，之后点击位置覆盖四角与中心
• 视频能直接拖进Keynote或PPT播放，比例符合1280×720

容易卡住的地方

• Playwright录制的是webm格式，老版本Office可能需要转码为mp4再嵌入
• ctx.close()之前视频不会写盘，脚本中断会拿不到文件
• file://路径含中文或空格时建议改用引号包好的绝对路径或起本地http服务
• 首次运行必须执行playwright install chromium，否则启动浏览器直接报错