什么是 Awesome Opus 5.5 Videos？
Awesome Opus 5.5 Videos 是一个精选的病毒式传播视频合集，这些视频使用 Claude Opus 5.5 创建。每个项目都通过让 Claude 将动画编写为代码来制作，使用了 HTML、Canvas、SVG、Three.js、GSAP、GLSL、WebGL、Web Audio 和粒子等技术。
该仓库在 prompts/ 目录和 data/videos.json 中包含 282 个提示词。README 展示了 100 个条目，每个不同的提示词对应一个示例，并将每个条目链接到创作者的原始帖子。
这不是一个需要安装和导入的软件库，而是一个实用的提示词图库：选择一个示例，复制其提示词，然后让你自己的 AI 编程代理创建类似的体验。
在 Skillry 上并排观看全部 282 个视频及其实时重制版本。
按创意类别浏览合集
精选示例分为四个主要类别，方便你从想要探索的视觉风格或交互类型开始。
- 动态图形：58 个基于动画视觉构成的示例。
- 解释动画：16 个通过动画传达想法的示例。
- 3D 场景：14 个使用基于浏览器的三维视觉效果的示例。
- 游戏和交互项目：12 个可响应用户输入或表现得像小型可玩体验的示例。
其中列出的实现方式涵盖轻量级 Canvas 和 SVG 实验，也包括使用 Three.js、GSAP、GLSL、WebGL、Web Audio、AI 生成图像和粒子系统的项目。每个条目旁显示的技术标签可以帮助你选择合适的起点。
设置仓库
浏览提示词不需要安装软件包。当你想搜索、保存参考资料或检查结构化视频数据时，本地克隆仓库会很有用。
- 将 GitHub 仓库克隆到电脑上。
- 在编辑器中打开仓库文件夹。
- 浏览
prompts/目录，查看单独的 Markdown 提示词文件。 - 需要将完整合集作为结构化数据使用时，打开
data/videos.json。
git clone <repository-url>
cd <repository-directory>
README 没有指定必需的运行时、依赖安装命令或本地应用服务器。该合集主要用于阅读提示词并参考链接的示例。如果生成的项目使用外部库或浏览器 API，请让 Claude 为该特定项目提供必要的设置说明。
如何使用提示词
每个精选条目都包含一个标记为 Prompt 的链接。选择一个符合你想要的动画类型的示例，然后在仓库中打开对应的提示词文件。
- 选择一个类别，例如动态图形、解释动画、3D 场景或交互项目。
- 查看技术标签，例如
Canvas、SVG、GSAP或Three.js。 - 打开
prompts/中链接的 Markdown 文件。 - 将提示词复制到 Claude Opus 5.5 或你偏好的编程代理中。
- 让代理生成项目文件，并说明如何运行。
- 在浏览器中打开生成的 HTML 项目，然后持续迭代输出。
例如，与 Canvas 示例关联的提示词文件可以作为浏览器动画的起点。不要只复制视觉创意，还应保留提示词中的重要要求，例如渲染方式、运动行为、视觉氛围、交互和技术限制。然后更换主题或风格，让结果体现你自己的特色。
从一个提示词开始，准确复制并运行生成的结果，然后通过简短的后续请求进行修改。
示例迭代流程
实用的工作流程如下：
- 让 Claude 将选定的概念实现为一个自包含的 HTML 文件。
- 在现代浏览器中运行该文件，检查动画是否正确渲染。
- 提出一个明确的修改要求，例如更换配色方案、放慢过渡速度或添加新的交互。
- 再次测试修改后的版本，然后再提出其他修改。
- 分别保存成功的版本，以便比较各次迭代。
当项目依赖某种特定技术时，请在请求中明确提及。例如，当参考示例标记为 Canvas 时，要求使用 Canvas 实现；当参考示例使用 3D 场景时，要求使用 Three.js。这样可以让生成的结果与原始示例保持一致。
了解技术标签
Canvas
Canvas 示例会直接在浏览器画布中绘制图形，通常适用于粒子、程序化动画以及逐帧运动效果。
SVG
SVG 示例会将视觉元素构建为可缩放的矢量图形。它非常适合几何构图、图表，以及需要保持图形清晰锐利的动画。
GSAP
使用 GSAP 的示例会借助专用动画库来协调时间轴、过渡和运动效果。
Three.js、WebGL 和 GLSL
这些标签表示更高级的渲染方式。Three.js 为 3D 场景提供 JavaScript 框架，而 WebGL 和 GLSL 则支持更底层的 GPU 加速图形与着色器效果。
Web Audio 和粒子
Web Audio 示例会将视觉效果与浏览器音频功能结合起来。粒子示例则侧重于由大量微小运动元素组成的效果，例如粒子场、轨迹或爆炸。
取得更佳效果的进阶技巧
- 将仓库用作提示词库：在选择提示词前比较多个示例，即使你打算构建不同的视觉效果。
- 遵循技术标签：从实现方式符合项目目标的示例开始。
- 要求提供完整的可运行结果：请 Claude 提供所有必需代码和清晰的浏览器运行说明，而不是零散代码片段。
- 小步迭代：将视觉调整、交互变更和性能改进拆分为不同请求。
- 保留原始提示词以便比较：将修改后的版本与源提示词放在一起保存，以便确认哪些改动影响了结果。
- 查看源链接：每个精选条目都链接到创作者的原始帖子，可提供更多项目背景。
- 使用结构化数据进行查找：需要处理全部 282 个条目，而不只是精选示例时，可以搜索
data/videos.json。 - 测试浏览器权限：涉及音频、用户输入或高级图形的项目，可能会因浏览器权限和硬件不同而表现不同。
致谢与原创作品
该合集注明了精选视频创作者的信息，并链接到他们的原始帖子。当你复用某个想法或提示词时，请查看原始条目并保留适当的署名。该仓库是用于发现和学习的资源，单个视频的版权归各自创作者所有。
如需完整的浏览体验，请使用 Skillry 画廊，或直接在仓库中浏览提示词文件。
结语
Awesome Opus 5.5 Videos 提供了一种通过提示词驱动的创意编程进行实践学习的方式。浏览分类，选择实现风格，从 prompts/ 中复制提示词，然后让 Claude Opus 5.5 生成可运行的浏览器体验。该合集包含 282 个提示词，覆盖 Canvas、SVG、Three.js、GLSL、GSAP、Web Audio 等技术，为你自己的动画和交互实验提供了丰富的起点。