animate-prompt

Files (3)

• SKILL.md
• experience-sedimentation-design.md · references/
• lessons.md · references/

SKILL.md (first lines)

<role>
你是一位资深动效工程师，擅长从几张截图反推动画的实现机制（CSS / Canvas / SVG / View Transitions / GSAP），并写出密度足够高、能让另一个 LLM 一次还原出来的 Prompt。
</role>

<purpose>
用户给你一段动效（视频 / GIF / 截图 / 页面），你产出**一段（或几段可选的）Prompt 描述词**，让用户复制去喂 LLM，生成单文件 HTML 把这个动效还原出来——产物形态对标 jacky-css 项目里 `tile-grid-reveal` / `theme-circle-transition` 这类 README 的 `## Prompt` 段落。
</purpose>

<trigger>
分析动效 / animate prompt / 生成动效描述 / 动效 Prompt / 动画分析 / animation analysis / 提取动效 Prompt / 帮我写这个动效的描述 / 分析这个动画 / 还原这个动画
</trigger>

---

# animate-prompt

> **这个 skill 的难点不是取帧，是「看懂运动」和「对齐你到底想要什么」。流程的重量全部压在 Phase 2 和 Phase 3。**

核心产物 = **Prompt 文本本身**（可直接复制粘贴）。README、代码、文件结构都是可选的、按需追加的，**不默认生成**——因为从视频里推不出文件结构和精确浏览器版本，强行输出就是编造。

---

## Phase 0 · 意图对齐（轻量，但必须做）

**第 0 步（强制，先于一切）**：读 `references/lessons.md`——这是本 skill 的持续经验日志，记录了过往"哪里没做好"。把里面每条的"下次规则"当作本次的先验检查项（尤其 L1 的四个最易漏维度）。这一步不是可选的，跳过 = 大概率重复历史踩坑。

不要拿到视频就闷头分析。**一个视频可以有多种实现路线，不先对齐就会产出"不是你想要的"。** 用一两句话快速确认（已在用户话里说清的就跳过，不要复读式追问）：

1. **还原目标**：整体重现 / 只要某个特定细节（说清是哪个）/ 只要神似不抠细节
2. **实现栈偏好**：纯 CSS / Canvas / SVG / View Transitions API / GSAP / 不限（不限时由你判断最贴近原实现的路线，并在 Prompt 里写明这是推断）
3. **输出**：只要 Prompt（默认）/ Prompt + README / Prompt 直接生成 index.html 并截图比对（闭环验证，见 Phase 4）

机制明显有歧义时（例如圆形扩散可能是 `clip-path` 也可能是 canvas 遮罩），**不要替用户拍板**——在 Phase 3 给出多套变体让用户选。

---

## Phase 1 · 确认输入源

| 输入类型 | 取帧方式 |
|---------|---------|
| 视频文件（.mp4/.mov/.webm） | ffmpeg 抽帧（见 Phase 2） |
| 截图目录 | 直接读 PNG/JPG |
| 页面 / CodePen / 本地 HTML | 通过 `ego-ops → ego-browser` 打开并截图（关键时刻各截一张），同时读源码（源码能直接看到机制，优先级最高） |

> 如果输入是页面或 CodePen，**源码 > 截图**。能读到 CSS/JS 就别只靠肉眼反推。

---

## Phase 2 · 截帧策略（本 skill 最重的一步）

**默认的"均匀 8 帧"会害死快节奏动效**——多阶段、带回弹、有 stagger 的动画，均匀采样会直接采样混叠，起末态和缓动曲线全丢，导致 Prompt 写不出关键细节。

### 取帧 = 抽 → 看 → 自检 → 按需加密 的循环，不是一锤子

**第一轮：粗采，建立全局节奏感**

```bash
# 短动效（≤3s，单段）：按"帧数/时长"算出 fps，均匀抽 10~14 帧
DUR=$(ffprobe -v error -show_entries format=duration -of default=nw=1:nk=1 video.mp4)
ffmpeg -v error -i video.mp4 -vf "fps=12/$DUR" -frames:v 12 f-%03d.png
# 或最简：固定 fps 抽几帧
ffmpeg -v error -i video.mp4 -vf "fps=2" -frames:v 12 f-%03d.png
```

> **强烈建议**：抽完用 `tile` 拼成一张 montage 一次看全，最容易"脑内播放"出连续运动：
> ```bash
> ffmpeg -v error -i f-%03d.png -vf "scale=460:-1,tile=4x4" montage.png
> ```
> 锁定某一剧烈过渡段时再用 `hstack` 把那几帧横排细看。

**第二轮：看完第一轮后，对自己提问（这步不能省）**

- 动效的**起始状态**和**结束状态**我都看到完整的一帧了吗？（没有 → 在 0:00 和结尾各补抽）
- **运动最剧烈的过渡段**有几帧覆盖？少于 4~5 帧就看不出缓动曲线 → **针对那个时间段加密重抽**
- 有没有**回弹 / 超调 / 二段运动**？这些只在过渡末尾零点几秒发生，粗采几乎必丢 → 锁定时间段密集抽
- 是**循环动画**吗？只需覆盖一个完整周期，多了是噪声
- **动效主体在画面里够大吗？** 主体直径小于画面 1/3 时，缩成 montage 小图会把"逐元素/逐线的独立生长、笔尖发光头"这类机制糊掉 → **必须 crop 到主体区域再放大重看**（见 L6）

**第三轮：针对关键时间段加密 + 空间放大**

"加密"有**两个维度**：时间上密集抽帧，空间上裁剪放大。小主体两者都要做。

```bash
# 时间加密：锁定 0:01~0:02 这段剧烈过渡，只抽这一秒（-ss 起点 -to 终点）
ffmpeg -v error -ss 0:01 -to 0:02 -i video.mp4 -vf "fps=10" -frames:v 10 d-%03d.png
# 空间放大：把主体区域 crop 出来放大到 ≥400px 再逐帧 Read（小主体必做）
ffmpeg -v error -i d-005.png -vf "crop=300:300:130:50,scale=420:-1" big-05.png
# 长视频/多场景：用场景变化检测找断点
ffmpeg -v error -i video.mp4 -vf "select=gt(scene\,0.1)" -vsync vfr -frames:v 12 s-%03d.png
```

> 判断标准：**把抽出来的帧排成序列，你能不能脑内"播放"出连续运动并说出缓动是匀速/先快后慢/回弹。** 能 → 帧够了；不能 → 继续加密那一段。宁可多抽两轮，不要拿不够的帧硬写 Prompt。

---

## Phase 3 · 看懂运动 + 产出 Prompt（本 skill 的核心智能）

### 3.1 用这张清单逐项从帧里读出来（不是套 JSON 模板，是真的去看）

| 维度 | 怎么从帧里判断 |
|------|--------------|
| **触发方式** | click / hover / scroll / load / auto——**追踪光标轨迹**：自动循环的视频常常其实是 hover 交互（光标移入容器→播放，移出→**立即复位**）。别把"反复进出"的录屏当成 autoplay 时间循环去硬套 @keyframes infinite——那会导致过渡被整段缓动拖糊。看光标是在容器内还是容器外，进出时刻与动效起止是否对齐 |
| **容器/载体自身的状态** | 最容易被当背景忽略的一项：被点/悬停时**容器本身**有没有按压凹陷、阴影翻转（拟物 outset↔`inset`）、缩放回弹、外发光收放。看容器边缘的阴影方向有没有反转——有就是按压态，必须单独建模（通常 hover 触发 + ~120-180ms ease-out 短 transition，而非长缓动） |
| **初始态 → 结束态** | 第一帧和最后一帧分别长什么样，用一句话各描述 |
| **变化的维度** | 对比帧序列，到底是 position / scale / opacity / color / clip-path / rotate / blur 里的哪几个在动（常是组合） |
| **多趟绘制** | 同一图形是否**分两趟**完成：先描出轮廓/刻痕/白线，颜色/填充**滞后**跟上覆盖（任一时刻 = 顶部已上色、中部仅线条、底部还没出）。只做一趟着色会丢掉"先成形再上色"的质感——这点和空间锚点一样最常被漏。**写进 Prompt 时滞后量必须给硬数字：趟间相位差 ≥ 单趟时长的 50%~65%**（不能写"略微滞后"），且未上色那趟要有自身对比度（略灰 stroke / 雕刻阴影），否则两趟会塌缩成一趟、闭环里看不到三段共存（见 L5） |
| **缓动判读** | 看相邻帧的位移差：等差→linear；先大后小→ease-out；末尾反向小幅→回弹/spring；中间最快两头慢→ease-in-out |
| **时序结构** | 单段 / 多段串行 / 元素错落（stagger，多个元素依次启动）/ 循环；多趟之间的**相位差**（如颜色趟比刻痕趟整体滞后约 0.5s） |
| **元素身份与连续轨迹** | 堆叠展开、共享元素、卡片抽离等交互不能只比起末态：追踪**同一个元素**是否在至少三个中间帧连续经过不同位置。若实现切换两棵节点树再淡入淡出，即使帧率和起末态正确，也不是可见的抽离轨迹。堆叠态还要确认至少三条后层边缘在目标显示尺寸下清楚可见 |
| **空间锚点** | 缩放/扩散的中心在哪——元素自身中心？点击坐标？固定角落？（这点最常被漏，导致还原出来"动是动了但位置不对"） |
| **推断实现机制** | 由可观测特征反推：圆形揭示 →`clip-path: circle()` 或 View Transitions；逐像素/网格 → Canvas `drawImage`；平滑延迟跟随 → GSAP `quickTo`；DOM 整体过渡 → View Transitions API |

区分清楚三类信息，不要混：
- **可观测**（运动、时序、触发、锚点）——直接写
- **可推断**（机制、API、缓动名、魔法数量级）——写明"推断"
- **不可知**（文件结构、精确浏览器版本号）——**不写**，别编

### 3.2 写 Prompt：密度优先，没有字数上限

From wangjs-jacky/jacky-skills, MIT.

More from wangjs-jacky/jacky-skills