text-to-lottie

文本转 Lottie

为官方本地 Skia Skottie 播放器编写可用于生产环境的 Lottie JSON。 交付物应是可在播放器中渲染的场景，而非孤立的 JSON。

工作模式

• 使用官方播放器项目，并在 Skia Skottie 中验证。不要手动编写自定义查看器，也不要切换渲染器进行验证。
• 确保此技能可在不同 Agent Skills 客户端间移植。避免在技能说明中使用特定宿主的命令、命令模式或编排约定。
• 尽量少提问，并采用更可靠的默认设置。只有当某项决策会显著影响输出时才提问，例如使用透明背景还是全画幅背景、品牌限制、目标格式或提供的源素材。
• 优先打造简洁、精心设计且专业的动画效果，而非仅仅满足提示词的字面要求。

参考资料加载

此 SKILL.md 是精简的控制层。仅加载与任务匹配的一级参考资料。不要打开整个参考资料库。

在创建、编辑、修复或验证场景之前，务必阅读 references/player-contract.md。如果指定的参考资料不可用，请继续遵循此文件中的内联规则。

用户意图	有相关资料时要阅读的参考资料
新建、编辑或修复任何 Lottie 场景	references/player-contract.md
JSON 结构、关键帧、插槽、形状、资源	references/lottie-spec-map.md
Logo 动画	references/recipe-logo.md、references/motion-taste.md、references/design-taste.md
字体排版、标题、引言、文字显现	references/recipe-typography.md、references/design-taste.md、references/motion-taste.md
下三分之一字幕、姓名标签、字幕条、叠加层	references/recipe-lower-thirds.md、references/design-taste.md、references/motion-taste.md
加载器、图标、旋转指示器、徽章动画	references/recipe-loaders-icons.md、references/motion-taste.md
成功、错误、警告、完成、空状态	references/recipe-loaders-icons.md、references/design-taste.md、references/motion-taste.md
UI 微交互	references/recipe-ui-microinteractions.md、references/design-taste.md、references/motion-taste.md
通用“为此 SVG 添加动画”或 SVG 转 Lottie	references/recipe-svg-animation.md、references/svg-compatibility.md、references/motion-taste.md
镜头跟随、平移、缩放、视差、场景运动	references/recipe-camera-scene-motion.md、references/design-taste.md、references/motion-taste.md
图表、技术线条动画、标注、流程轨迹	references/recipe-diagram-technical.md、references/design-taste.md、references/motion-taste.md
数据、统计、KPI、图表、指标、仪表板数据	references/recipe-data-stats.md、references/design-taste.md、references/motion-taste.md
产品发布、功能公告、社交媒体宣传	references/recipe-product-promo.md、references/design-taste.md、references/motion-taste.md
长文本、多个创意、列表/功能/步骤、时间线、前后对比、问题/解决方案、引言+佐证、回顾/故事、产品演示、多语言变体、章节、多节拍序列、分集、跳切/硬切、转场语法	references/chapterization-transition-grammar.md、references/motion-taste.md
光晕、玻璃、金属、渐变、填充、气泡/爆裂效果	references/recipe-visual-effects.md、references/design-taste.md、references/motion-taste.md
Logo/图标/UI/下三分之一字幕相关工作中的 SVG 输入	对应任务配方以及 references/svg-compatibility.md
入门项目说明或可复用的项目方向	references/recipe-starter-projects.md、references/design-taste.md、references/motion-taste.md
任何带有“高级”“简洁”“极简”“现代”“流畅”或“精致”等限定词的需求	references/design-taste.md（克制原则），以及对应任务配方

对于混合提示，先根据主要交付内容选择一种主要配方，再添加与源格式或视觉处理相关的辅助参考资料。示例：带光晕的 SVG Logo，以 Logo 为主要配方，并添加 SVG 兼容性和视觉效果；带平移/缩放的产品发布动画，使用产品宣传和镜头场景运动；描绘技术 SVG 图表的动画，使用图表/技术配方和 SVG 兼容性；带玻璃扫光效果的动感标题，使用字体排版和视觉效果。

工作流

1. 使用上方表格为任务分类。只阅读存在的相关参考资料。
2. 找到官方播放器项目，并根据下方的目标优先级确定目标场景。编辑前，确认解析出的路径为 public/projects/<project>/<scene-N>/lottie.json；覆盖文件前立即重新读取当前文件，因为 UI 可能会将槽位编辑写回源文件。
3. 编写内容前确定背景策略。
4. 编写或更新 public/projects/<project>/<scene-N>/lottie.json，并在适用时更新 controls.json。
5. 验证 JSON，运行或复用开发服务器，使用 ?frame=N 检查确切帧，并在完成前修复渲染、设计或动态效果问题。

内联规则

设计默认规范（始终适用）

以下几条默认规范不可妥协，适用于每个设计场景。完整理由请阅读 references/design-taste.md，尤其是提示词中出现“高级”、“简洁”、“极简”、“现代”或“卡片”时。

• 高级感意味着做减法，而不是做加法。提示词要求高级、简洁、极简、现代、利落或精致时，默认应克制：先去掉装饰元素，再考虑添加。高级感通过尺寸、字重、亮度、间距和节奏体现，绝不依赖卡片、边框、分隔线、阴影、辉光或层叠色调。
• 默认的装饰元素／容器预算为 0。除非确有必要，且留白和对齐无法实现其作用，否则不要添加框架卡片、容器、边框或分隔线。分隔网格和列时，优先使用留白和对齐，其次使用单条细线，最后才考虑填充式或带边框卡片，且仅在明确有需要时使用。
• 背景只用一种色调。使用一种背景色调。不要叠加两种相近的近黑或近白色调来伪造“表面”效果，这会显得浑浊。如果卡片表面必须与背景不同，就使用一个有明确用途的色阶差异。
• 分隔线只用一种样式和一种颜色。如果确实需要分隔线，所有分隔线都使用相同的粗细和颜色，包括标题线和列分隔线。不同分隔线之间绝不要使用略有差异的颜色或粗细。

场景规则

• 场景文件位于 public/projects/<project>/<scene-N>/lottie.json。
• 按优先级确定目标场景：明确指定的文件路径优先；其次是类似 /<project>/<scene> 的浏览器 URL 路由；再其次是任务中已知的项目/场景；否则创建一个新的安全场景。除非任务明确要求编辑当前屏幕上的内容，且没有更具体的目标，否则仅将 /__context 用于发现、验证或播放状态。不要让 /__context.live 覆盖已知的文件路径、URL 或项目/场景。只有当 main-project/scene-1 仍是未经修改的占位场景时，才覆盖它；否则创建新场景。
• 全帧独立合成应包含一个可见的背景层，并配有 bgColor 插槽和 controls.json 条目。
• 默认透明的输出包括徽标、图标、加载动画、叠加层、字幕条和 SVG 派生素材，除非用户要求添加背景。
• 顶层应包含 v、fr、ip、op、w、h、nm、assets 和 layers。将 op 视为不包含在内的上界。
• 使用有目的的缓动和分阶段设计。避免默认使用线性运动。根据 motion-taste.md 中基于行为的参考来选择缓动（动作行为为依据，焦点元素的权重最高）；不要对每个图层都使用同一种缓动。
• 对重要的可编辑值使用插槽，并在能改进属性面板时，为 controls.json 添加标签/范围。
• 对于 SVG 输入，保留 viewBox、规范化样式、注意填充规则和交叉部分，并在 Skottie 中验证结果。
• 如果场景随附字体，原生 Lottie 文本/文本插槽（ty:5）可在此播放器中渲染：将 .ttf/.otf/.ttc 文件放在 lottie.json 旁边，在 fonts.list 中声明该字体，并确保 fFamily 与字体内嵌的 family 名称一致，然后在文本文档中引用该字体。加载器会将场景中的每种字体传递给 Skottie。优先使用原生文本；仅在需要特定路径效果（描边显现、字形变形、手写效果）时才使用矢量/形状文本。请参阅播放器契约中的“原生文本”参考。

验证

完成前：

1. 确认目标文件路径为 public/projects/<project>/<scene-N>/lottie.json。

2. 验证 JSON：

   node -e "JSON.parse(require('fs').readFileSync('public/projects/<project>/<scene-N>/lottie.json','utf8'))"
   

3. 确认官方播放器正在运行，且场景显示在 GET /__context 中。

4. 在浏览器中检查固定帧。对于新场景，检查第 0 帧、中间帧和 op - 1 帧。

5. 确认背景策略符合使用场景。

6. 检查画布是否空白、素材是否缺失、形状是否缺少样式、图层顺序是否错误、缓动是否不当、时序是否别扭、内容是否被裁切、文本是否溢出，以及是否存在明显的 SVG 瑕疵。

7. 只有在动画渲染干净且效果自然时才完成。

维护评测

正常动画工作期间不要读取评测文件。仅在测试或修改此技能时使用：

• evals/trigger-prompts.json
• evals/routing-prompts.json
• evals/reference-loading-prompts.json
• evals/output-rubric.md