1. 为什么我决定用 Claude Code 来写 Lottie 动画Lottie 这个东西做前端和移动端的同学应该都不陌生。设计师在 After Effects 里把动画做好用 Bodymovin 插件导出成一份 JSON前端拿到这份 JSON 之后用 lottie-web、lottie-ios 或者 lottie-android 直接播放不用手写一帧一帧的关键帧代码。这套流程在过去几年里几乎成了动效交付的标准方案。但真正做过的人都知道从「创意」到「一份能用的 Lottie JSON」之间隔着一条很宽的沟。设计师得会 AE、会 Bodymovin、会调导出参数前端得懂 JSON 结构、懂怎么接播放器、懂怎么调性能。两边来回沟通、导出、调试一个简单的图标入场动画可能就要耗掉半天。我最近在折腾一个方向能不能让 Claude Code 直接根据自然语言描述生成一份可播放、可交付的 Lottie JSON答案是能而且链路比我想象的短。这篇文章就把我实测下来的完整流程写清楚——从 Claude Code 接入 TaoToken 的统一 Key/API 通道到生成 Lottie JSON、本地预览验证、导出交付三步走完。适合已经在用 Claude Code、又想快速产出发布会级动效的开发者跟做。2. TaoToken 前置给 Claude Code 配一条稳定的 API 通道Claude Code 本身是个命令行里的编码 Agent它的能力来自背后调用的模型。默认情况下它走的是官方通道但在国内网络环境下直连经常不稳定尤其是你要连续跑几十轮生成任务的时候中途断一次就很烦。TaoToken 在这里的角色是提供一个统一的 Key/API 通道。你只需要在 TaoToken 官网注册、拿到一个 API Key然后在 Claude Code 的配置文件里把请求地址指向 TaoToken 的 API 端点Claude Code 就能通过这条通道稳定调用模型。整个过程不涉及任何网络工具就是改一个配置文件的地址字段。具体来说你需要做三件事第一去 TaoToken 官网https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content注册账号进入控制台创建一个 API Key。这个 Key 就是你后面所有请求的凭证。第二记住 TaoToken 的 API 端点地址是 https://taotoken.net/api注意这个地址后面不加任何 UTM 参数直接用它作为 base URL。第三找到 Claude Code 的配置文件 settings.json把里面的 API 地址和 Key 替换成 TaoToken 的。下一节我会给出完整的可复制配置骨架。这里有个细节要提醒Claude Code 读取配置的优先级是「项目级 用户级」也就是说如果你在项目根目录放了一个.claude/settings.json它会覆盖你用户目录下的全局配置。我建议先在用户级配好保证所有项目都能用个别项目需要特殊处理时再在项目级覆盖。3. 可复制配置settings.json 骨架与参数说明Claude Code 的配置分两个层面一个是环境变量层面决定它请求哪个 API 地址、用哪个 Key一个是 settings.json 层面决定权限、模型、工具开关等。下面这份是我实测能跑通的骨架你可以直接复制把sk-开头的那串换成你自己的 Key。{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: sk-你的TaoToken密钥, ANTHROPIC_MODEL: claude-sonnet-4-20250514, ANTHROPIC_SMALL_FAST_MODEL: claude-3-5-haiku-20241022 }, permissions: { allow: [ Read, Write, Bash(npx:*), Bash(node:*), Bash(npm:*) ], deny: [] }, includeCoAuthoredBy: false }几个参数我逐个解释一下避免你配错ANTHROPIC_BASE_URL是请求的根地址这里填 TaoToken 的 API 端点。注意结尾不要多加斜杠也不要带任何查询参数Claude Code 会自己拼接后面的路径。ANTHROPIC_AUTH_TOKEN就是你在 TaoToken 控制台创建的那个 Key。这个字段名是 Claude Code 认的鉴权字段填错名字会导致 401。ANTHROPIC_MODEL是主模型负责实际的代码生成和推理。生成 Lottie JSON 这种任务对模型的指令跟随能力要求比较高建议用能力强的型号。ANTHROPIC_SMALL_FAST_MODEL是轻量模型Claude Code 在处理一些简单判断比如要不要读某个文件时会用它配一个快的能明显提升响应速度。permissions.allow里我放开了npx、node、npm这几个命令因为后面安装 Lottie 生成技能包、跑本地预览都要用到。如果你比较谨慎可以只放开npx等确认没问题再加。配置写完之后保存文件。如果你不确定 Claude Code 有没有读到这份配置可以在终端里跑一句claude --version确认它正常工作然后进入下一步。注意Key 属于敏感信息不要把它提交到 Git 仓库。建议把 settings.json 加进.gitignore或者用环境变量注入的方式管理。4. 三步验证从自然语言到可播放的 Lottie JSON配置好通道之后真正的重头戏来了。我把整个链路拆成三步生成 JSON、本地预览、导出交付。每一步都有明确的成功标志你可以对照着确认。4.1 第一步安装 Lottie 生成技能并产出 JSONClaude Code 支持 Skills 机制你可以把它理解成「给 Agent 装插件」。社区里有一个专门做 Text-to-Lottie 的开源技能包安装命令是一行npx skills add diffusionstudio/lottie这行命令跑完之后你的 Claude Code 就多了一项「根据描述生成 Lottie 动画」的能力。接下来在 Claude Code 的对话里用自然语言描述你想要的动效。比如我想要一个类似 Apple 发布会风格的图标入场动画可以这样写提示词Create a Lottie animation for a logo reveal. The logo should fade in from the bottom with a spring easing, then scale up slightly with an ease-out curve. Apply a premium gradient similar to Apple keynote style, keep the background transparent, and set FPS to 60 with a total duration of 1.5 seconds. Expose the background color and the logo scale as adjustable parameters.这段提示词里有几个关键点值得说我明确写了缓动类型spring、ease-out、写了渐变风格Apple keynote style、写了 FPS 和时长、还写了要暴露哪些可调参数。这些信息越具体生成出来的 JSON 越接近你要的效果。Claude Code 收到提示后会在你的项目里创建一个工作区自动生成 Lottie JSON通常放在public/projects/project/scene/lottie.json这样的路径下。同时它会打开一个内置播放器你可以实时预览、拖动时间线看每一帧的效果。这一步的成功标志很明确项目目录下出现了 lottie.json 文件且文件内容是合法的 JSON可以用node -e JSON.parse(require(fs).readFileSync(路径,utf8))快速校验。4.2 第二步本地预览验证动画效果生成完 JSON 不代表就能直接用你得先确认它在浏览器里播出来是什么样。最省事的办法是写一个最小的 HTML 页面引入 lottie-web把 JSON 加载进去。!DOCTYPE html html langzh head meta charsetUTF-8 titleLottie 预览/title script srchttps://unpkg.com/lottie-web5.12.2/build/player/lottie.min.js/script /head body stylebackground:#111;display:flex;justify-content:center;align-items:center;height:100vh;margin:0; div idlottie stylewidth:400px;height:400px;/div script lottie.loadAnimation({ container: document.getElementById(lottie), renderer: svg, loop: true, autoplay: true, path: ./lottie.json }); /script /body /html把这份 HTML 和生成的 lottie.json 放在同一个目录下然后用任意静态服务器起一下比如npx serve .打开浏览器访问对应端口你应该能看到动画在循环播放。如果动画正常播放、渐变和缓动都符合预期这一步就过了。如果画面空白或者报错先看浏览器控制台的报错信息大概率是 JSON 路径不对或者 JSON 结构有问题。4.3 第三步导出交付到实际项目预览没问题之后就可以把 lottie.json 接入真实项目了。不同平台的接入方式略有差异我列一个对照表方便你查平台播放方案关键依赖Weblottie-weblottie.loadAnimationReact Nativereact-native-skia 的 Skottieshopify/react-native-skiaiOSlottie-iosLottieAnimationViewAndroidlottie-androidLottieAnimationViewFlutterlottie 包Lottie.asset以 Web 为例你只需要把 lottie.json 放到静态资源目录然后在组件里加载它就行。交付的时候记得把 JSON 文件和对应的素材如果有外部图片一起打包避免路径丢失。这一步的成功标志是在真实项目的页面里动画能正常播放且性能没有明显掉帧。如果动画很复杂、帧率很高建议在播放器里开启renderer: canvas试试有时候比 SVG 渲染更流畅。5. 本篇常见错误排查我在实测过程中踩过几个坑这里集中列一下你遇到类似报错可以对照排查。401 Unauthorized这个基本就是 Key 配错了。检查ANTHROPIC_AUTH_TOKEN字段名有没有写对值是不是完整的sk-开头字符串。另外确认一下 TaoToken 控制台里这个 Key 的状态是「启用」而不是「禁用」。404 Not Found多半是ANTHROPIC_BASE_URL写错了。确认地址是https://taotoken.net/api结尾没有多余的斜杠也没有拼错字母。生成的 JSON 播放空白先用 JSON 校验工具确认文件本身是合法 JSON。如果 JSON 合法但画面空白检查一下动画的图层是不是被设成了隐藏或者画布尺寸是不是 0。有时候模型生成的w和h字段是 0播放器就什么都不显示。动画卡顿或掉帧如果 JSON 里图层数量特别多、或者用了大量位图播放性能会下降。可以尝试在提示词里要求「减少图层数量」「使用矢量路径而非位图」或者换 canvas 渲染器。技能包安装失败npx skills add这步如果报网络错误先确认你的 npm 源是通的。如果一直失败可以手动把技能包 clone 到本地再按 README 的说明手动注册。Claude Code 不读配置确认 settings.json 的路径对不对。用户级配置在~/.claude/settings.json项目级在项目根/.claude/settings.json。改完之后重启一下 Claude Code 会话让它重新加载配置。6. 把这条链路用起来写到这里整条链路其实已经很清楚了TaoToken 提供稳定的 API 通道Claude Code 负责把自然语言翻译成 Lottie JSON你负责预览验证和交付。三步走完一个发布会级的动效就能落地。如果你后面要长期做这类动效生成或者想把 Claude Code 用在更重的编码任务上可以考虑 TaoToken 的 Coding Plan它在连续调用和额度管理上会更省心。想先验证模型效果的可以直接去模型对话页面试几轮提示词感受一下生成质量再决定要不要接入项目。接入配置和排障TaoToken API Keyshttps://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentapi_keys配合接入文档https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentdoc一起看配置字段和报错码都能对上。验证模型生成效果模型对话https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentchat长期编码和 Agent 任务Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentcoding_plan最后分享一个我自己的小经验生成 Lottie 的时候提示词里把「素材」给足效果会好很多。比如你手上有一个 SVG 图标直接把 SVG 的路径或者文件丢给 Claude Code让它基于这个路径做描边动画比纯文字描述「画一个图标然后让它动起来」要精准得多。动效这件事模型不怕你要求多就怕你说得模糊。