1实现原理 · 为什么它能做到
入口是一棵决策树，先把四类问题分流（静态构图 / 进出场 / 深度与镜头 / 多画幅适配），再进入对应规则。
skills/shot-composition/SKILL.md
├─ A static frame's layout
注：这里在做什么：与「先选镜头再想构图」的常见乱序相反，树根问的是「你在摆什么」，四支各有判据与产物，避免把静态构图规则误用到镜头运动上。
空间层显式继承 animation-principles：把 1/3 规则空间化成三分点与行程上限，把三层运动角色投影到 Z 轴当深度层。
skills/shot-composition/SKILL.md
**Cross-reference — apply the shared frameworks.** This skill is the spatial half of `animation-principles`. Apply them explicitly:
注：这里在做什么：两 skill 是同一套判据的「时间半」与「空间半」，此处明确要求引用而不复制表格，避免同 pack 内出现两套术语。
网格给公式而非形容词：12 栏、8px 基线、列宽算式，并给出 1920 宽的具体算例。
skills/shot-composition/SKILL.md
column_width = (content_width - (cols - 1) * gutter) / cols
注：这里在做什么：把版式从「感觉整齐」变成可核算的数值（例：1920 / 边距 100 / 槽 24 → 列宽 121.3px），使构图决策能被下游实现精确复现。
焦点唯一 + 层级有固定优先级：size > contrast > color > position。
skills/shot-composition/SKILL.md
Build **visual hierarchy** in this priority order to direct the eye: **size > contrast > color > position**.
注：这里在做什么：给出「眼睛先看哪」的机械排序，配合「每帧只有一个主要焦点」的硬约束，用来解释「画面很平/不知道看哪」的成因。
深度分层直接映射运动角色并给视差速度：背景 0.1-0.3x（Ambient）、中景 0.5-0.7x（Secondary）、前景 1.0-1.5x（Primary）。
skills/shot-composition/SKILL.md
| Background | Ambient | 0.1–0.3x | low, often desaturated/blurred | sky, gradient, texture, set dressing |
注：这里在做什么：让视差不再是随手给个系数——速度差由角色决定，且禁止两层同时拥有主动作；这也是修复「像整块模板在平移」的处方。
镜头语言是「一镜一意图」：禁止推+摇+旋同时上，并给出 2D/3D 通用的四类镜头与时长。
skills/shot-composition/SKILL.md
**One shot, one intent.** Don't push + pan + rotate simultaneously — combined moves read as chaotic.
注：这里在做什么：把镜头运动从「堆效果」变成单意图决策；英雄级镜头 800-2000ms、ease-in-out、慢即电影感，均写在同段与 reference。
进出场方向带语义（跟随阅读方向为顺、反向表示回退），并要求从最近边缘进出。
skills/shot-composition/SKILL.md
Motion that follows reading direction (left-to-right, top-to-bottom in LTR locales) feels natural and smooth; reversing it creates tension or signals "back/undo."
注：这里在做什么：把方向与叙事含义绑定（新内容从右/下进入，回退反向），并配合 ease-out 进 / ease-in 出的缓动族。
多画幅策略先给安全区百分比表，再要求竖屏「重排而不是裁切」。
skills/shot-composition/SKILL.md
Design the **focal point centered enough** that it survives all crops, then let secondary elements reflow per aspect.
注：这里在做什么：把适配从「裁一刀」变成有前提的设计（焦点先放在能活过所有裁切的中央带），并用 16:9→9:16 的 restack 例与 ANTI-PATTERN 固定这个判断。
2核心能力
01网格体系：12 栏 + 8px 基线 + 列宽公式与算例，可直接落到实现
02焦点与层级：三分点放置、单焦点约束、size>contrast>color>position 排序
03留白作为节奏元素（不是剩余空间）
04深度分层与视差速度表（bg/mid/fg ↔ Ambient/Secondary/Primary）
05镜头配方：push/pull、pan/tilt、follow、parallax，以及 reference 里的 whip-pan、orbit、dolly-zoom 带具体帧值与缓动
06进出场方向语义与最近边缘规则
07安全区表（16:9 / 9:16 / 1:1 / 4:5）与多画幅重排方案
08交付物 spec：一份可交给实现 skill 的 composition plan（帧规格/焦点坐标/层图/进出场/镜头/安全区/交叉引用）
3外部依赖
| 类型 | 依赖 |
|---|---|
| package | Three.js（reference 的深度视差示例，产物期由实现方引入） |
| package | 下游实现 skill：gsap-web / remotion-video / after-effects（其中 gsap-web 属 iart-ai/web-animation-skills 仓库） |
| package | CSS scroll-driven animations / Pointer Events（reference 的纯 CSS 与 JS 视差示例） |
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 交付链跨仓，单装本 pack 时有悬空引用 — composition plan 的三个下游 skill 中，gsap-web 属 iart-ai/web-animation-skills（另一 pack）。若只装 motion-design-skills，需要自行补齐 gsap 实现侧才能落地（remotion-video / after-effects 在本仓，可直接衔接）。
- 安全区数值是经验值且随平台版本漂移 — 百分比表（9:16 顶 12-14% / 底 18-20% 等）无引用出处；平台 UI 改版会使其失准。竖屏交付建议以 video-delivery-specs 的像素版（顶/底约 250px、TikTok 右侧约 120px）与当期平台规格为准。
- 规则强、风格窄 — 默认取向是「克制、单焦点、留白、慢镜头」的当代商业动效语法。若目标是密集信息图、多焦点拼贴或刻意混乱美学，需要显式偏离这些默认值，否则会被这套判据拉回中庸。
- reference 里的 Three.js 等示例会引入额外依赖 — 深度视差示例含 Three.js 思路；若照抄进产物即引入数百 KB 的运行时依赖，轻量场景应改用 CSS scroll-driven 或 CSS 变量方案（同文件内已给出）。
风险提醒：绿色，放心使用。纯指令/空间方法论：无脚本、无网络外发、无凭证读取、无写盘，交付物为文本形式的 composition plan。注意点（不改档位）：① 它在交付物 spec 里点名下游实现 skill（gsap-web / remotion-video / after-effects），属跨 skill 委派，档位不传递；其中 gsap-web 在另一个仓库（iart-ai/web-animation-skills），只装本 pack 时该引用无法解析；② reference 含 Three.js / CSS / JS 代码示例，属产物期引用，由实现方决定是否引入。
5第二遍独立确认
- [discrepancy] 被点名的 gsap-web 是否在本仓（防悬空引用） — 本仓 skills/ 下无 gsap-web；该 skill 位于另一工作副本 iart-web-animation-skills/skills/gsap-web（同一作者的另一 pack），其 SKILL.md 亦反向引用 shot-composition。因此这条交付链跨仓，只装 motion-design-skills 时 gsap-web 引用解析不到——属真实缺口（文档未标注「需另装」）。
- [ok] reference 是否含可执行脚本或联网调用 — camera-and-grids.md 内只有 CSS/JS/GLSL 代码块与具名镜头参数表；全目录搜 npx/curl/fetch/URL 无执行期命中。
- [ok] 与 animation-principles 的交叉引用是否一致（两处术语是否打架） — SKILL.md 明写 depth layers ARE the three motion layers projected onto Z，并把 1/3 规则拆成「构图三分点」与「行程不超过 1/3」两形态；与 animation-principles 原文表述一致，属同义映射而非冲突。
- [unlocatable] 安全区百分比是否有出处 — 9:16 顶部 12-14% / 底部 18-20%、1:1 6-8%、4:5 6%/8% 等是经验值，pin 仓库内无平台文档引用或测量数据；平台 UI 尺寸会随版本变化，实际交付应以当期平台规格复核（本 pack 的 video-delivery-specs 给的是像素级版本）。
6结论
适合：适合在动效/视频开拍前做画面设计：定网格与焦点、规划元素进出场方向、设计推拉摇移与视差、把一条母版适配到 16:9/9:16/1:1/4:5，或产出可交给实现环节的 composition plan。也适合用来 review 现有画面的「平、乱、被裁」。
不适合：不适合：① 需要具体代码实现（应走 gsap-web / remotion-video / after-effects / web 动画类 skill，本 skill 只到 plan）；② 需要决定动作的时间感与缓动（应走 animation-principles）；③ 需要平台导出规格与 QC（应走 video-delivery-specs）；④ 追求密集/多焦点/反秩序美学的项目，需自行覆盖其默认判据；⑤ 需要精确平台 UI 遮挡数据时——此处是经验百分比而非当期像素实测。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-28
方式 A · 人下载镜像包下载 shot-composition.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agent5c7f5d87a93826a3…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库iart-ai / iart-ai/motion-design-skills
原始 GitHubiart-ai/motion-design-skills ↗
Stars35
最近推送2026-06-22
本 skill commit
3c129f769d许可MIT（仓库根 LICENSE：'MIT License' / Copyright (c) 2026 iart.ai；.claude-plugin/plugin.json 的 license 字段亦为 MIT）
本站信息
收录日期2026-09-06
分类内容创作
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。