用途:在制作渲染型矢量动画时,选择并核查所用的图标、插画、Lottie 文件和字体。它针对三类常见问题:混用网格与描边粗细不同的图标集(成片显得拼凑)、在客户视频中使用要求署名或禁止商用的“免费”素材、以及导入带脚本、外部图片或表达式的 SVG/Lottie(无法逐帧渲染)。
何时使用:挑选动画图标或插画包时;需要判断“能否用于此视频”时;向项目添加 SVG 或 Lottie 时;编写或检查素材清单时。不适用:场景中摆放与缩放素材、制作动画、网页 UI 的动画图标组件、设计应用图标、将位图 Logo 矢量化。
工作流:先清点 storyboard.json 中每个视觉名词,区分图标、插画与需自绘的形状(矩形、线条、连接线自绘,不外部获取)。从 references/license-matrix.md 选定一个包,默认图标用 Lucide(ISC,24 px 网格,2 px 描边),人物与场景用 unDraw 或带署名的 Storyset,预动画点缀用 LottieFiles 公开动画;保持同一描边粗细,客户项目优先选无需署名的许可证。将文件复制到 public/,在清单中固定包版本与来源 URL,渲染时不得从 CDN 加载。编写 assets/manifest.json(契约见 references/importing-assets.md,可运行示例见 assets/example/),每个文件一条记录,含检查器清单中的许可证、需要时的署名文本,以及每个字体的 fonts[]。运行:python3 "${CLAUDE_SKILL_DIR}/scripts/check_assets.py" assets/manifest.json --write-attribution ATTRIBUTION.md,修复所有错误(未知许可证、缺少署名、SVG 含脚本/外部引用/位图、Lottie 含外部图片或表达式),对混合包或描边不一致的警告应替换文件而非忽略。交付时说明文件列表、所选包与描边粗细、署名要求。
输出要求:public/ 内全部为 SVG 或 Lottie JSON,无位图;manifest 通过检查器 0 错误;需要署名时生成 ATTRIBUTION.md 并说明署名位置(正文、幻灯片备注或画面)。
注意与限制:许可证随文件而非站点,LottieFiles 公开动画免费、市场文件不免费,SVGRepo 会把 CC-BY 标为 MIT,需追溯来源链接。Flaticon、Storyset、Icons8、Lordicon 免费层均需可见署名,付费层可去除;CC-BY-NC、ND 与 GPL 素材会被检查器有意拒绝。图标包各有网格,混入不同描边在标题尺寸下可见,缺失形状应自绘。依赖 CSS hover 或 Motion 的“动画图标”库在逐帧渲染中无法播放,应改用 useCurrentFrame() 为静态 SVG 做动画。Simple Icons 仅绘图部分为 CC0,商标不归你所有。务必固定版本,2024 年 lottie-player npm 事件影响所有加载未固定 CDN 构建的页面。参考:scripts/check_assets.py(含 --self-test)、references/license-matrix.md、references/importing-assets.md、assets/example/。