1实现原理 · 为什么它能做到
调色板用数量纪律替代品味争论：1 主 + 1 强调 + 2-3 中性；对比与层次靠明度/彩度而非堆色相。
skills/color-motion/SKILL.md
Limit hues. A strong motion palette is **1 primary + 1 accent + 2-3 neutrals**.
注：这里在做什么：把「配色好不好看」转成可执行构造规则；下一段进一步解释为何暗场里强调色要用低-中彩度 + 高明度，而不是最大饱和度。
插值必须在感知均匀空间（OKLCH/OKLab/Lab）——sRGB 线性插值的中间点会掉进灰/浑。
skills/color-motion/SKILL.md
Linearly interpolating two colors in sRGB passes through a desaturated, often gray or muddy midpoint (blue->yellow goes through gray; blue->red through muddy purple).
注：这里在做什么：给出「渐变发灰」这一最常见症状的机理，并直接对应 CSS 的 `linear-gradient(in oklch, …)` 与 @property 注册（见下条）。
「贵」的渐变是配方而非灵感：多径向叠加 + 颗粒 + 8-20s 慢漂移。
skills/color-motion/SKILL.md
- **Animate slowly**: drift gradient positions over 8-20s with `ease-in-out alternate`. Slow is premium; fast gradient motion looks like a screensaver.
注：这里在做什么：把「高级感」量化成三条可执行动作（慢、叠、加颗粒），并给出周期区间与理由（快 = 屏保感）。
颜色要真的补间而不是跳变，必须用 @property 注册（未注册的 CSS 自定义属性是离散跳变）。
skills/color-motion/SKILL.md
`@property` registration is what makes the color actually interpolate (unregistered custom properties jump instantly).
注：这里在做什么：解释一个极常见的 CSS 陷阱，并给出可复制的注册 + transition 片段；这也是「单文件 HTML 交付」能自洽的技术前提。
调色是有序操作：曝光/白平衡 → 对比 → 中间调/饱和 → 分离调色 → 整体统一；顺序改变结果。
skills/color-motion/SKILL.md
Apply grading operations in this order; reordering changes the result:
注：这里在做什么：把调色从「拖滑块」变成有依赖关系的流水线，并给经典电影感配方（teal 阴影 + orange 高光、保持克制）。
渲染颜色管理把「预览对、导出灰」归因到四段 gamma 不匹配（工作空间、内嵌 tag、播放器解释、系统显示），而不是画面问题。
skills/color-motion/SKILL.md
the cause is a gamma/transfer mismatch across four stages — AE working space, the render's embedded tag, the player's interpretation, and the display/OS gamma — not the artwork.
注：这里在做什么：给出定位思路（问题在链路而非素材），配套可验的数值法（放 50% 灰补丁，导出后回读 128→150+ 即证明被提亮）与 ffprobe 查 tag。
验收环境必须避开 QuickTime：以 Chrome/Premiere/Resolve 为准。
skills/color-motion/SKILL.md
**Never grade or approve to QuickTime** — Chrome, Premiere, or Resolve is the correct reference for web delivery.
注：这里在做什么：把「同一文件两处不一样」的裁决权明确交给 web 交付侧播放器，避免按 QuickTime 调色后在浏览器翻车。
交付回路是「单文件 HTML + 冻结帧截图」：?t=N 用负延迟把动画钉在指定秒，再逐帧查 banding 与浑浊中点并迭代。
skills/color-motion/SKILL.md
**Verify loop — render → freeze → screenshot → check:**
注：这里在做什么：把「动画类视觉产物如何被 agent 检查」变成确定性流程；随后用 npx playwright 截图（见 external_deps，也是本 skill 判橙的原因）。
2核心能力
01调色板构建：OKLCH 记号、等视觉重量的色相旋转、中性色向主色相微染
02渐变配方库：双停止/网状（多径向）/锥形/漂移动画/颗粒去条带
03感知插值与调色板代码：culori / d3-interpolate / @property 三种实现路径
04调色顺序清单与实现层（CSS filter 快速版 / GLSL 分离调色）
05视频/渲染颜色管理：决策树、AE 项目与输出模块设置、逐平台导出色彩标签、QuickTime gamma 规避
06数值化验证：50% 灰测试补丁法 + ffprobe 查 color_primaries/color_transfer/color_space
07独立 HTML 交付契约（单文件、单一动画驱动、freeze harness、reduced-motion）
08验收回路：渲染 → 冻结 → 截图 → 查 banding/浑浊中点 → 原地迭代重截
3外部依赖
| 类型 | 依赖 |
|---|---|
| cli | npx playwright screenshot（冻结帧截图，验收回路唯一命令） |
| cli | 打包助手 scripts/seek-shot.sh 与 scripts/contact-sheet.sh（仓库根，不在本 skill 目录；内部同样走 playwright 截帧 + ffmpeg 拼图） |
| package | culori（感知插值示例与色相路径控制） |
| package | d3-interpolate / d3-scale-chromatic（Lab/HCL 插值与色阶量化） |
| network | 交付 HTML 的可选 CDN 引用（仅当需要 JS 插值库时才引；属产物期由浏览器加载） |
| cli | ffprobe / ffmpeg（校验内嵌色彩标签 color_primaries / color_transfer / color_space） |
4风险提醒 风险提醒：橙色 · 评估后使用
风险提醒：橙色 · 评估后使用
- 验收回路依赖远程包 — npx playwright 在未缓存时会从 npm 拉包并下载 Chromium（数十至上百 MB）；离线或受限网络需预装，且应固定版本以稳定截图表现。这是本 skill 判橙的原因。
- 正文引用的 scripts/ 助手不在本 skill 目录 — 按 skill 目录打包安装时 scripts/seek-shot.sh / contact-sheet.sh 解析不到（实际在仓库根）。若流水线依赖它们做截帧拼图，需额外取仓库根脚本或自行用 playwright+ffmpeg 替代（见 second_pass discrepancy）。
- 感知空间插值并非所有目标环境都支持 — CSS 的 `in oklch` 与 @property 依赖较新浏览器；旧环境需退回 JS 预计算逐帧颜色（文档给了 culori/d3 路径，但需要构建步骤，与「单文件、无构建」契约略有张力）。
- 视频颜色管理结论需按自己链路实测 — gamma 数值、播放器行为与 AE/编码器版本强相关，文档未标出处（unlocatable）；跨 macOS/Windows/播放器的结论应视为排查起点，以 50% 灰补丁法实测为准。
- 产品期 CDN 依赖 — 交付 HTML 若真的引 CDN JS 库，打开页面即执行第三方代码；离线交付/合规场景应改为内联或本地打包。
风险提醒：橙色，评估后使用。触发橙档的是「依赖第三方远程包/镜像」：SKILL.md 的验收回路直接给出 `npx playwright screenshot …`——本机未缓存 playwright 时会从 npm registry 拉包并首次下载 Chromium 二进制（同仓 logo-animation、remotion-video 的先例为同一判定）。无凭证读取、无环境变量、无业务 API、无 TLS 降级、无绕过行为；触发条件明确（仅当 playwright 未预装/未缓存时发生网络拉取，预装后即纯本地）。另注：正文引用的 scripts/seek-shot.sh 与 contact-sheet.sh 位于仓库根目录、不在本 skill 目录内，按判级口径只写入 risks 不改档位。
5第二遍独立确认
- [ok] npx playwright 是否真的写在 SKILL.md（橙档关键证据） — SKILL.md 的 Verify loop 步骤 4 之后给出该命令原文（含 --wait-for-timeout=500 与 file://$PWD/color.html?t=8）；同段第 3 步要求检查 banding 与浑浊中点。命令是验收回路的组成部分，不是可选项。
- [discrepancy] 正文引用的 scripts/ 助手是否随本 skill 目录分发 — SKILL.md 写「**Packaged helper** (`scripts/`)」，但 pin 目录下 skills/color-motion/ 只有 SKILL.md、references/、0 字节 README —— `scripts/` 实际在**仓库根**（scripts/README.md 自述为 verify-loop toolkit）。因此只装单个 skill 目录的镜像包里该引用悬空；同名写法也出现在 logo-animation、motion-background、remotion-video。对 pin commit 有效，属真实出入。
- [ok] 是否有其他隐藏的执行路径（下载/接口调用） — 全目录搜 curl/wget/fetch/XMLHttpRequest/api/child_process/process.env：零命中；唯一网络相关字符串是 npx 与交付 HTML 的 CDN 说明。
- [ok] culori / d3-interpolate 是否只是代码示例而非被执行的依赖 — 两处 import 均在 references/palettes-and-interpolation.md 的 Perceptual interpolation in code 小节内，作为给实现者抄的片段；skill 无 package.json、无安装步骤、不解析这些模块。
- [unlocatable] 颜色管理结论（QuickTime gamma、四段链路）是否可在源码内验证 — 这些是有明确立场的技术断言，但 pin 仓库内没有引用来源、没有测量脚本或样本文件；本次只读侦查也不运行渲染。文中给出的自证方法（50% 灰补丁回读、ffprobe 查 tag）用户可自行复现，故不视为空口断言，但数值本身未在本次核对。
- [ok] iart.ai 链接的性质 — reference 页脚为署名/营销链接（utm_source=github&utm_content=skill_footer），无跟踪脚本、不参与执行。
6结论
适合：适合做动效配色与渐变背景、需要颜色过渡真正平滑（按钮态、主题切换、loader）、要修「渐变发灰/条带」，以及遇到 AE 导出后发灰、跨平台颜色不一致、需要决定导出色彩标签的场景。也适合需要交付可截图验收的独立 HTML 颜色样张的流水线。
不适合：不适合：① 需严格离线、不能拉取 npm 包的环境（验收回路会失败或需预装 playwright）；② 需要 HDR/广色域完整色彩科学（只到 Rec.709/sRGB 与 PQ/HLG 的导出提示层面）；③ 期望 skill 自带截帧脚本的用法（本目录无 scripts/）；④ 需要真实视频渲染与编码能力（那属 after-effects / remotion 类），本 skill 只做颜色决策与校验。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-28
方式 A · 人下载镜像包下载 color-motion.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agentcb1e39e4a0e5b855…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 为实时上游，内容可能已更新。