返回 文章 apply CMS 文章

用 Claude 生成鸮鹦鹉像素动画并录制为 Keynote 视频

用 Claude 生成像素动画,再用 Claude Code + Playwright 自动录制视频,快速制作演讲素材。

ClaudeClaude CodePlaywright像素艺术
成长分 / 100 71 综合收获、行动、留存与影响

用 Claude 生成鸮鹦鹉像素动画并录制为 Keynote 视频
为什么值得读展示了一个从 AI 生成动画到自动录制视频的完整工作流,可直接复用于演讲或演示制作。

提供了简短且可复用的 Playwright 脚本,用于在浏览器中自动点击并录制视频。

关键洞察
  1. Claude Opus 5.5 在制作像素艺术动画方面表现出色,可根据照片和提示词生成 HTML5 canvas 动画。
  2. Claude Code 能够使用 Playwright 在浏览器中加载本地 HTML 文件,模拟点击并录制视频。
  3. Playwright 脚本通过预设的点击坐标和时间点,在 15 秒内分布点击以触发彩纸效果。
转成行动

深入阅读

正文与原文对照

原文保真覆盖:全文原文字符:3249

2026年9月26日

昨天,我为 WeAreDevelopers 北美世界大会 做了闭幕主题演讲。作为一个 STAR 时刻,我决定在演讲中穿插提及我们在 2026 年迎来的破纪录的 kākāpō 繁殖季。

对于我的闭幕幻灯片,我想要庆祝一番,而且我注意到有些热议说 Claude Opus 5.5 在制作像素艺术动画方面非常出色。于是我从 Google 图片搜索中找了三张鸮鹦鹉照片,把它们放进 Claude,并附上这样的提示词:

这里有一些鸮鹦鹉的照片,只是为了提醒你它们长什么样

我需要你用 HTML 5 canvas 制作一个动画像素艺术动画,内容显然是像素艺术风格的鸮鹦鹉上下跳跃开派对,还有彩纸之类的东西——至少要有 20 只

这是对话记录,而这是生成的页面。相当棒!

我想把它嵌入一个 Keynote 演示文稿文件中,所以我下载了 HTML,并对本地的一个 Claude Code 会话说:

帮我制作一个 file:///Users/simon/Downloads/kakapo-party.html 的视频——你需要在浏览器中加载它,并点击几次以获得彩纸效果,视频时长应为 15 秒

3 秒之前不要开始点击

确保几次点击分布在可点击区域的不同位置

Claude Code 使用了 Playwright(记录在此),并生成了这个视频,这正是我最后一张幻灯片所需要的:

以下是它使用的完整 Playwright 脚本,简短得令人愉快:

/// script # dependencies = ["playwright"] # /// import time from playwright.sync_api import sync_playwright W, H = 1280, 720 # Canvas fills the viewport; spread clicks across corners, edges and centre 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 ] with sync_playwright() as p: b = p.chromium.launch() ctx = b.new_context(viewport={"width":W,"height":H}, record_video_dir="vids", record_video_size={"width":W,"height":H}) page = ctx.new_page() t0 = time.time() page.goto("file:///Users/simon/Downloads/kakapo-party.html") for t,x,y in clicks: time.sleep(max(0, t-(time.time()-t0))) page.mouse.click(x,y) time.sleep(max(0, 16.0-(time.time()-t0))) ctx.close(); b.close()

近期文章

Claude Opus 5.5、GPT-6 Sol、GPT-6 Luna,以及一场新的价格战- 2026年9月22日Jev 推出一种新形态的 LLM——System One,又名 Decision Models- 2026年9月21日使用 GPT-6 Astra 和 ChatGPT Work 生成跑步路线- 2026年9月12日