用 WorkBuddy 生成一个 GSAP 粒子球体作品集动画网站

场景描述

年底需要做一份工作室年度作品集 Showreel。传统的做法是用 After Effects 或 Premiere 手动剪辑，但这类工具对动效交互和 3D 视觉的迭代成本很高——每次调整缓动曲线或粒子参数都要重新渲染。

我希望换一种方式：用 GSAP + 软件 3D 投影做一个纯前端动画，300 个粒子聚拢成球体，6 个节点代表 6 组作品，点击节点后镜头聚焦、标题浮出、作品视频展开。整个过程在浏览器里实时运行，可以随时调整参数立即看到效果。

但手写这个动画的 3D 数学、粒子分布、时间线编排和 Mockup 布局非常耗时。所以我把它交给 WorkBuddy，用自然语言描述需求，让它逐步生成并迭代。

飞书文档 - 图片

想要完成的任务

•

输入：一份 6 场景脚本（含标题、副标题、作品名、链接），27 个本地媒体文件（MP4/MOV 视频 + 截图）

•

目标：一个自包含 HTML 文件 + 本地媒体，在浏览器中实时播放粒子球体 Showreel 动画

•

交付物：

◦

可在浏览器中预览的 HTML 动画

◦

推送到 GitHub 仓库并通过 GitHub Pages 在线访问

前置条件

•

WorkBuddy 版本：支持本地文件读写和 Bash 执行的版本

•

操作系统：macOS（Windows/Linux 同样适用，路径稍作调整）

•

所需账号或权限：GitHub 账号，已配置 SSH key 或 personal access token

•

所需输入文件：27 个媒体文件放在本地文件夹，一份脚本文本

使用的 Skill

本次任务没有安装额外的 Skill，全程使用 WorkBuddy 的内置能力：

#cNKOUotJQRnH text { white-space: pre; }#cNKOUotJQRnH .fb0 { stroke: var(--N900-FG, 0.15); }#cNKOUotJQRnH .fb0 {stroke: rgba(31,35,41, 0.15)}#cNKOUotJQRnH .fx0 { stroke-miterlimit: 10; }#cNKOUotJQRnH .fx0 {stroke-miterlimit: 10}#cNKOUotJQRnH .fa1 { fill: rgb(187, 191, 196); }#cNKOUotJQRnH .fa1 {fill: rgb(187, 191, 196)}#cNKOUotJQRnH .fx1 { font: 400 12px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#cNKOUotJQRnH .fx1 {font-style: normal}#cNKOUotJQRnH .fx2 { text-anchor: middle; }#cNKOUotJQRnH .fx2 {text-anchor: middle}#cNKOUotJQRnH .fx3 { dominant-baseline: central; }#cNKOUotJQRnH .fx3 {dominant-baseline: central}#cNKOUotJQRnH .fx4 { stroke: none; }#cNKOUotJQRnH .fx4 {stroke: none}#cNKOUotJQRnH .fc0 { fill: var(--text-caption); }#cNKOUotJQRnH .fc0 {fill: #646a73}#cNKOUotJQRnH .fa2 { fill: var(--text-link-disabled); }#cNKOUotJQRnH .fa2 {fill: rgb(187, 191, 196)}#cNKOUotJQRnH .fa3 { fill: rgb(21, 24, 18); }#cNKOUotJQRnH .fa3 {fill: rgb(21, 24, 18)}#cNKOUotJQRnH .fx5 { font: 400 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#cNKOUotJQRnH .fx5 {font-style: normal}#cNKOUotJQRnH .fx6 { text-anchor: start; }#cNKOUotJQRnH .fx6 {text-anchor: start}#cNKOUotJQRnH .fx7 { dominant-baseline: alphabetic; }#cNKOUotJQRnH .fx7 {dominant-baseline: alphabetic}#cNKOUotJQRnH .fc1 { fill: rgb(255, 255, 255); }#cNKOUotJQRnH .fc1 {fill: rgb(255, 255, 255)}#cNKOUotJQRnH .fc2 { fill: rgb(17, 19, 14); }#cNKOUotJQRnH .fc2 {fill: rgb(17, 19, 14)}#cNKOUotJQRnH .fx8 { font: 400 12px LarkHackSafariFont, LarkEmojiFont, SFMono-Regular, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Noto Sans", Tahoma, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", STHeiti, SimHei, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", system-ui; }#cNKOUotJQRnH .fx8 {font-style: normal}#cNKOUotJQRnH .fb1 { fill: var(--N900-FG, 0.15); }#cNKOUotJQRnH .fb1 {fill: rgba(31,35,41, 0.15)}#cNKOUotJQRnH .fb2 { fill: rgb(51, 56, 47); }#cNKOUotJQRnH .fb2 {fill: rgb(51, 56, 47)}#cNKOUotJQRnH .fb3 { fill: rgb(215, 219, 208); }#cNKOUotJQRnH .fb3 {fill: rgb(215, 219, 208)}#cNKOUotJQRnH .fa4 { fill: var(--bg-body); }#cNKOUotJQRnH .fa4 {fill: #fff}ABC12345能力用途来源或安装方式本地文件读写Bash 执行网页预览GSAP CDN 引用读取素材文件、写入生成的 HTML启动 HTTP 服务器、检查视频尺寸、Git 操作在浏览器中实时预览动画效果通过标签引入 GSAP 3.12.5WorkBuddy 内置WorkBuddy 内置WorkBuddy 内置外部 CDN（cdnjs）