用途：把 Ian 小黑正文配图原则改造成可控的 HTML+SVG+GSAP timeline 动效，用于中文文章配图、脚本、分镜场景、工作流讲解、概念隐喻和短视频；目标不是复刻生图像素，而是把一个认知动作重建成分层漫画舞台，方便录视频、按字幕 cue 对齐、后续改文案和元素。
核心规则：不要把 PNG 自动矢量化成路径汤再动画化；栅格图只作构图参考，场景须重建为语义化 SVG 分组。流程为 idea -> shot plan -> SVG layer plan -> HTML/SVG template -> GSAP timeline -> static + motion review。
工作流：从文章、脚本、截图或分镜中提取一个认知锚点；选一个物理隐喻（分类、搬运、搭桥、泄漏、接住、折叠、称重、打开、改道、坠落）；让小黑执行核心动作，若去掉小黑不改变含义就重新设计；设计 16:9 白底单主场景，留白 35% 以上，手写标注最多 3-5 条；为每个移动对象建语义 SVG 分组；用 GSAP timeline 做动画，使用 x、y、rotation、scale、opacity 和 SVG 描边绘制，避免布局动画；同时输出可播放 HTML 页面和静态审查截图；若是口播成片项目，先映射时间线段与字幕/ cue 时间再最终渲染。
按需阅读：设计新场景或判断风格前读 references/style-rules.md；写或改 SVG 结构前读 references/svg-layering.md；写 GSAP 动画前读 references/motion-rules.md。
输出约定：默认文件夹 output/<slug>-xiaohei-svg-motion/；必需文件 index.html、README.md、preview.png、vendor/gsap.min.js；可选 source.png（用户提供参考图时）、cue-map.md（对齐口播脚本或字幕时）。
可复用资源：图标位于 assets/icons/，以 assets/icons/index.json 为准，生成时把完整 SVG 内联进场景 SVG 以保留渐变、描边与品牌色；若已有精确图标就直接用，不要用通用方块、星形、火花替换；用户提供新 SVG 图标时，存入 assets/icons/<category>/ 并登记 index.json，再按 id 引用；对比场景中图标选择是含义的一部分，保持尺寸与位置一致，让观众先识别演员。
模板：手绘漫画场景（含移动对象、箭头、标注或小黑动作）用 assets/templates/xiaohei-comic-motion/；需要多版本、可复用系列或更广参考集的口播讲解场景用 assets/templates/xiaohei-series-reference/。把模板复制到输出目录后，修改 SVG 分组名、手写标签、对象位置、时间线标签与时长、README 中场景隐喻说明。
质量门：最终回复前在本地服务器打开 HTML，检查控制台报错；用 ?static=1 截静态图；多拍场景至少截一张播放中帧，可用 ?frame=mid 取确定性审查帧；目视检查文字、箭头、小黑、道具、传送带、坑、卡片、最终落点不重叠；确认动画有可见推进（先语境、再动作、后问题/结果、最后总结）；标注只在被解释对象/动作之后出现；若对象运动已示方向，去掉装饰性半透明引导箭头；确认小黑参与动作；除用户明确要求纯 PNG 运镜外，页面不能只是 <img> 里的 PNG。关于收费、价格与具体平台支持，资料暂未提供。