Charlie Hills 整理了一份围绕 Claude Opus 5.5 的社区项目清单，涵盖从动态图形到完整网页游戏的 10 个开源项目。

在这份清单中，代码既能用于制作动画视频，也能直接构建可交互的网页游戏：动画项目通常由模型编写绘图逻辑，在浏览器中逐帧渲染并压制成 MP4 视频；而游戏项目则直接运行在浏览器前端，由玩家输入实时驱动状态机与画面渲染。在这条制作路线里，Claude 主要负责写可执行的前端与图形代码，浏览器负责画出画面；另一些项目还会调用外部图像、视频模型。

Claude 写代码，浏览器把画面画出来

清单中的项目走的是程序化路径：模型编写前端绘图与逻辑代码，通过浏览器执行并呈现结果：

1. 时间驱动与状态机建模：在动画短片中，模型设计分镜和时间轴，使用 HTML5 Canvas、SVG、WebGL、Three.js 或 p5.js 将视觉元素组织为关于时间的函数；在游戏项目中，画面并非纯时间函数，而是受玩家键盘、鼠标等输入与实时状态驱动。确定时间渲染有利于画面复现与代码局部修改，但并不保证代码本身不存在逻辑或渲染错误。
2. 虚拟时钟与逐帧截屏：动画项目通常在 Node.js 中调度无头 Chrome（Headless Chrome），通过注入虚拟时间轴驱动绘制并逐帧截取图像序列。
3. 音源对齐与压制导出：动画的声音来源多样，可以来自用户提供的既有歌曲（例如 PDoomVideo 采用既有歌曲）、免费采样库或 TTS 语音合成；渲染出的图像序列随后由 ffmpeg 与音频对齐压制为 MP4。需要注意，源码文件本身虽然轻量，但多帧渲染导出的临时图像序列与成片 MP4 仍需占用相应磁盘空间。

在 Charlie Hills 列出的这 10 个项目中，它们在技术架构和应用目标上分化成了五种形态。

第一组：手绘水彩动画与脚手架

这一流派专注于利用 p5.js 与 p5.brush 笔刷库，生成具有水彩质感和手绘线条的 2D 角色动画。

1. PDoomVideo：代码手绘音乐短片

• 项目地址：JohnHeibel/PDoomVideo
• 它做了什么：这是一支为既有歌曲《I'm Upping My P(doom)》（采用既有音源）制作的音乐录影带（MV）。视频里的每一个分镜、角色动作和笔刷效果均由 Claude Opus 5.5 在 Claude Code 中编写代码生成，未人工指定具体分镜创意。
• 运行机制：作者给出了使用吉祥物 Clawd 形象并契合歌词转场的要求。Opus 5.5 生成了分镜计划（STORYBOARD.md）与风格规范指南（ANIMATION_GUIDE.md），并调用子代理协同写代码。全片分为 9 个章节，每帧在 studio.html 中通过 p5.brush 绘制，由无头 Chrome 和 ffmpeg 完成渲染和音画合成。
• 用途：展示了利用前端绘图代码进行长篇叙事和音乐视觉呈现的实现机制。

2. ClaudeAnimationBase：标准化动画脚手架

• 项目地址：JohnHeibel/ClaudeAnimationBase

• 它做了什么：在完成 PDoomVideo 后，作者 John Heibel 总结了模型的表现特征，将可复用模块提炼为通用的动画入门套件。

• 运行机制：套件内置了主角 Clawd 的多视角、情绪表情、肢体构件与镜头辅助模块。用户克隆后在编程 Agent中输入提示词：

  Read ANIMATION_GUIDE.md, then make a 15-second video of Clawd trying to catch a butterfly.

  模型先生成分镜故事板，分镜头编写代码并渲染出镜头缩略图拼成的检查表（Contact Sheets）来检查画面，最后导出视频。若在无独显环境下运行，由于 p5.brush 的水彩填充计算较慢，作者建议改用扁平填色以提升渲染速度。

• 两者的区别：PDoomVideo 是绑定特定既有歌曲和分镜的成品仓库；ClaudeAnimationBase 是抽离出的可复用脚手架与通用规则库。

第二组：多风格短片工场与模块化技能库

这一组项目将画风拓展到了几十种视觉风格，并将制作流程封装为 Claude Code 的可复用技能。

3. Lemo-Opuscar：43 种影视风格的制片框架

• 项目地址：lemomo-ai/lemo-opuscar
• 它做了什么：收录了 43 种视觉与电影风格，每种风格配有一支由代码渲染生成的示范短片。特别放映作品《OPUSCAR 98》（6 分 25 秒）让角色 Clawd 穿行于 98 部电影主题，按各片风格重绘场景。
• 运行机制：由作者使用 Opus 5.5 调优制作，包含三部分文档体系：
  • DIRECTOR.md：设定叙事、节奏、运镜与自检流程；
  • TECHNIQUE.md：指导 Canvas/WebGL 逐帧渲染、免版税采样配乐与 TTS 语音旁白混音；
  • styles/<风格>/STYLE.md：提供蜡笔、水墨、半调、瑞士排版等各风格细则。
  • 可作为 Claude 插件安装。根据作者说明，生成一支片子约需 30–60 分钟且 token 用量不小；环境依赖 Node 20+、ffmpeg 和 Python 3.11+。
• 用途：为多风格代码短片提供系统化的分镜引导与参数参考规范。

4. opus-video-skills：按风格封装的技能插件

• 项目地址：tuzhechen2005/opus-video-skills
• 它做了什么：将特定视觉风格封装为独立的 Claude Code 技能插件，强调用代码绘制画面和程序化合成声音。
• 运行机制：包含两个核心技能：
  • painted-animation（手绘水彩动画）：借鉴 ClaudeAnimationBase 机制，增强角色肢体动作，支持按节拍剪辑与卡拉 OK 动效字幕（如 31 秒《小镇姑娘》演示）；
  • kinetic-reel（动态排版短片）：结合 2D 字体与 Three.js 图层（粒子地形、流体大理石等），将视觉转场与程序合成声效同步。
• 与前者的区别：Lemo-Opuscar 提供多风格统一指南框架；opus-video-skills 采用一个风格一个独立技能插件的交付方式。

第三组：从单机创意到商业应用与混合生成

生成视频不仅能用来做艺术短片，还能演变为面向现实业务的自动化产品，或者进化为调度多模型的复杂系统。

5. shipvideo (LaunchVideo)：输入网址生成产品发布短片

• 项目地址：diggerhq/shipvideo
• 它做了什么：将代码生成视频封装为 Web 应用（launchvideo.io），输入官网 URL 或描述后生成 20 到 40 秒的产品宣传片。
• 运行机制与限制：
  1. 部署与环境：依赖 OpenComputer 运行环境及 API Key（OPENCOMPUTER_API_KEY）。首次在新的 microVM 会话中初始化时需安装 Playwright 依赖、ffmpeg 与字体（约需 1 分钟左右）；
  2. 页面提取与代码编写：Agent提取网站文本、颜色与字体后，编写单文件 HTML 动画。为确保渲染确定性，工具明确禁止使用 <video>、<audio>、<iframe>、CSS transitions、Math.random 以及外部图片等元素；
  3. 虚拟时钟渲染：通过注入 __seek(t) 虚拟时钟接管 rAF 与计时器，由 Playwright 截帧并通过管道传给 ffmpeg 编码导出。作者注明的 30–40 秒仅为 30 秒短片的渲染阶段参考用时，模型编写代码、前置初始化及检查耗时不计在此内。
• 用途：展示了把前端动效生成与无头浏览器压制封装为自动化服务的实现方案。

6. motion-graphics-music-video-skill：多模型混合编排插件

• 项目地址：makevoid/motion-graphics-music-video-skill
• 它做了什么：这是一个 Claude Code 插件，输入音乐与创意描述，输出结合外部生成模型的动态图形音乐短片。
• 运行机制与费用参考：
  • 采用多模型混合管线：Opus 5.5 负责规划分镜、提示词与脚本，通过 MCP 接入 Fal.ai 调用 README 所列的图像模型 生成角色，调用 MiniMax H3 生成绿幕动作片段；
  • 本地工具链配合：利用 Python 进行音频分析、分轨与混音，利用 p5.js 与 macOS 平台的 Swift Core 库添加视觉特效；
  • 成本示例：作者给出的一个约 3 分钟长视频参考示例中，消耗约 30 美元的 Fal.ai credits 以及约 300 万 Opus 5.5 tokens（此为作者特定示例开销，非固定总费用）。
• 用途：展示了由编程Agent作为中枢调度外部图像/视频模型与本地代码特效的混合流水线。

第四组：游戏要能响应玩家，不能只输出一段视频

在 Charlie Hills 的清单中，有两项成果已经远远超越了“短视频”的范畴，直接跨入了复杂的互动三维程序开发。

7. claude-opus-5-5-demo：单会话 3D 网页游戏实测

• 项目地址：riba2534/claude-opus-5-5-demo

• 它做了什么：根据作者自报，测试针对三个 3D 网页游戏分别输入一句需求提示词，在单会话内完成编写并部署到 Cloudflare Pages。这里的“一句话”指用户给的需求简短；Agent 在同一个会话中仍要经历网络资料检索、工程搭建、代码编写、无头浏览器测试、问题修复与打包部署的多步执行过程。

• 生成的三个游戏模块：

  1. 鹈鹕骑自行车（pelican-bike/，11 个 JS 模块）：戴墨镜穿围巾的鹈鹕在海岸骑行抓鱼，包含围巾布料物理模拟、昼夜循环、海浪模拟、14 个成就、5 种镜头视角与合成音效。
  2. 穿越火线·运输船（cf-transport-ship/，18 个 JS 模块）：FPS 玩法，模型先检索地图布局攻略核对甲板、船舱与集装箱结构，实现了弹道后坐力、电脑 bot 对战与击杀播报。
  3. QQ 飞车（qq-speed/，15 个 JS 模块）：还原 Shift 漂移、Ctrl 氮气等键位与操作，脚本预先生成赛道俯视图核对弯道，内置十一城等四张赛道。

• 作者使用的一句话提示词原文（逐字保留）：

  鹈鹕骑自行车： 生成一个鹈鹕骑自行车的 3D 页面，尽可能把你所有的能力全部都用上. 然后上传到 CDN 上, 把访问链接给我

  穿越火线·运输船： 尽可能真实的还原穿越火线中的运输船地图，我需要一个真实的枪战游戏，生成一个3d页面，尽可能发挥你的所有能力 做完之后上传到 CDN 上 把链接发给我

  QQ 飞车： 尽可能真实地还原 QQ 飞车中的游戏地图。我需要一个真实的 QQ 飞车游戏，包括游戏的各种键位以及漂移玩法,生成一个3D 页面，尽可能发挥你的所有能力。 做完之后上传到 CDN 上 把链接发给我

• 排障与修复过程：模型在会话中执行了 320 秒无头浏览器浸泡测试，并由子代理自审修复了部分问题。上线后出现的偶发黑屏，经注入测试值定位原因为泛光（Bloom）着色器遇到无效像素时 NaN 污染扩散所致，随后在泛光前加入清理 pass 并修复海面菲涅尔等源头后重新部署。

• 用途：展示了编程Agent在单会话中自我检索、测试闭环与部署运维的实际过程。

8. tidewater：WebGPU 海岛钓鱼游戏

• 项目地址：dgreenheck/tidewater
• 它做了什么：一个基于 WebGPU 和 WGSL 的海岛钓鱼浏览器游戏，使用项目自带的小型专用渲染引擎构建（未使用通用第三方框架）。
• 技术特性与素材来源：
  • 水体与环境：四级级联 FFT 水面模拟（基于 Tessendorf 光谱），包含浅水碎浪、航行尾流与水下焦散；大气散射模型模拟昼夜、体积云与丁达尔光；
  • 钓鱼玩法：包含 18 种鱼类、张力控制起竿机制、鱼获买卖与渔具燃油补给；
  • 第三方素材集成：集成了 Poly Haven 的 CC0 场景扫描素材、Microsoft Rocketbox 的角色模型以及 Freesound 的 CC0 环境录音。
• 硬件与运行条件：需要支持 WebGPU 的现代浏览器与适配显卡；首次加载需要编译数百个着色器脚本，耗时可能达到一分钟以上，后续访问因浏览器缓存会加快。
• 用途：提供了在 WebGPU 环境下组合自研着色器、复杂物理水体与第三方素材的工程参考范例。

第五组：一个帮你找灵感，一个帮你看懂制作路线

最后两个仓库都收集社区案例，但用途不同：一个便于找画风和公开提示词，另一个便于追溯视频用了哪些工具和素材。

9. awesome-opus5-5-videos (yihui-dev 维护版本)：案例与提示词整理

• 项目地址：yihui-dev/awesome-opus5-5-videos

• 它做了什么：收录了 475 个视频案例。有创作者公开提示词的，就附提示词；没有公开的，就提供原帖链接。案例覆盖动态图形、讲解、3D 场景与小游戏。

• 核心特色：配套展示站（Skillry）提供部分提示词供用户测试，并支持查看原帖视频与代码重跑结果对照。

• 用途：提供寻找视觉灵感与提示词写法的参考库。

10. awesome-opus-5-5-videos (athemeroy 维护版本)：来源分类与样本研究目录

• 项目地址：athemeroy/awesome-opus-5-5-videos
• 它做了什么：这是一个对社区视频样本进行来源分析的研究目录。项目抓取相关候选帖子并对下载的 MP4 文件进行 SHA-256 哈希排重。经分类器标记为 yes 或 likely 的有 1119 个文件，这仅代表模型参与倾向的分类标注，不等于已验证该 1119 个文件均为纯 Opus 5.5 作品；此外挑选了 168 个典型帖子案例进行了非随机的深度审读。
• 梳理的角色与生产路径：
  1. 模型的四种参与角色：编写渲染代码、基于已有素材（Figma/素材视频）重写转换、调度外部视频模型、或开发网页应用后人工录屏；
  2. 七大生产路径：代码绘制 2D、知识讲解、3D/实时图形、现有素材转换、外接视频模型流水线、应用或游戏录屏、混合/未定管线。
• 两者的区别：yihui-dev 侧重于展示案例与收集创作者公开的提示词或原帖；athemeroy 则侧重于来源溯源、核对制作链路与区分模型在生产中的实际角色。

十个项目，分别适合从哪里开始

如果已经有一个想做的作品，可以按下面的产物和起步条件找到对应入口：

选项目时，先想清楚你要交付什么

这十个项目展示了生成式 AI 在结合代码工程时的实际应用范畴：

1. 代码作为视觉呈现的另一种路径：对于几何图形、动态排版、扁平手绘与交互场景，通过大模型生成代码并在浏览器中执行，可以利用代码的版本控制与参数化调节能力实现确定性渲染，也可直接作为实时互动应用运行。
2. 区分概念展示与工程交付条件：无论是自动化短片生成还是单会话游戏构建，背后依赖的是清晰的环境规范（如虚拟时钟接管、脚本规则限制）、多轮次自测审查，或外部素材与外部模型的协同调度。理解每个项目的依赖环境、算力开销与素材来源，是实际复现和选型的前提。