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外部依赖

Kind	Dependency / Endpoint
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管控建议与判定依据

建议配套管控措施

面向 Agent

可自动加载

面向管理者

登记来源与版本

判定依据（文件路径与关键语句摘要）

SKILL.md: 纯提示词指令与规则文本，无脚本执行与外部影响

审计说明： 。纯指令/空间方法论：无脚本、无网络外发、无凭证读取、无写盘，交付物为文本形式的 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结论

把空间判据做成决策树 + 数值表，可直接落到实现（列宽算式、8px 网格、视差系数、镜头时长）

解决「画面很平 / 像模板在移动」这类高频问题：三层深度角色 + 视差速度差 + 禁止双层主动作

多画幅适配给了正确前提（焦点先放在中央带）与正确动作（重排而非裁切），并用反例说明裁切代价

交付物是明确契约（composition plan 字段清单 + 验收 checklist），能直接交给实现 skill 执行

与 animation-principles 成对且不重复：空间半引时间半，避免同 pack 术语分裂

适合： 适合在动效/视频开拍前做画面设计：定网格与焦点、规划元素进出场方向、设计推拉摇移与视差、把一条母版适配到 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 遮挡数据时——此处是经验百分比而非当期像素实测。

Install Agent-Ready

① Verified Mirror 2026-09-28

Option A · Direct DownloadDownload shot-composition.tar.gz

sha256: 5c7f5d87a93826a3…

Option B · Copy Guide for Agent

install.json

agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 3c129f769d.