1. 为什么在 Claude Code 里装 emil-design-eng 之前先把请求切到 TaoToken在 Claude Code 里装emil-design-eng这个 SKILL 之前我建议先把请求通道切到 TaoToken到 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_code_emil_skill_intro 拿 Key然后把 Claude Code 的 Base URL 指向https://taotoken.net/api。这样 Claude Code 执行 SKILL 时消耗的 Token 走 TaoToken 统一结算后面装技能、试动画规则、做 review 都不会因为供应商配置而卡住。用 Claude Code 生成界面时功能层面的推进通常很快但只要进入动效和视觉细节问题就会集中出现入场曲线给反了阴影和边框的层级也用错了单独看每处都能解释合起来却不够精致。emil-design-eng这类 SKILL 想解决的正是这层“设计工程”问题——把有经验的设计工程师的判断整理成模型能读取、能执行的规则。它不是一个跑起来就出结果的工具而是一组 SKILL 文件覆盖动画审查、动效机会识别、UI 库选型、苹果设计原则等方向。但这里有个容易被忽略的前提SKILL 本身不产生 TokenClaude Code 在读取 SKILL、分析代码、生成修改建议时仍然要调用模型。也就是说你必须先让 Claude Code 有一个稳定可用的模型入口。TaoToken 提供兼容 Anthropic 风格的 Base URLhttps://taotoken.net/api可以直接写进 Claude Code 的配置里。后面安装emil-design-eng、在项目里执行动画审查、让模型按规则改 CSS都会消耗这个通道上的 Token。本文按可复现的顺序来写先配 TaoToken 的 Key 和 Base URL再安装emil-design-engSKILL然后给出一组动画规则应用对照最后用 Claude Code 的提示词模板把 SKILL 跑起来。如果你同时用 Codex记住 Codex 走的是config.toml不要把 Claude Code 的ANTHROPIC_*变量套过去。2. 先把 Claude Code 的 Base URL 指向 TaoTokensettings.json 与环境变量两种写法Claude Code 的配置入口通常有两类用户级~/.claude/settings.json以及项目级.claude/settings.json。项目级更适合团队共享用户级更适合个人全局使用。核心字段是env里面放ANTHROPIC_BASE_URL、ANTHROPIC_AUTH_TOKEN或ANTHROPIC_API_KEY、以及可选的ANTHROPIC_MODEL。先到官网控制台创建 Keyhttps://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_code_emil_skill_keys 。创建时建议用YOUR_API_KEY这个占位符先写配置确认链路通了再替换成真实 Key。2.1 用 settings.json 写入 Claude Code 配置在项目根目录创建.claude/settings.json内容如下{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: YOUR_API_KEY, ANTHROPIC_MODEL: claude-sonnet-4-5 } }如果你的 Claude Code 版本只认ANTHROPIC_API_KEY把ANTHROPIC_AUTH_TOKEN换成{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: YOUR_API_KEY, ANTHROPIC_MODEL: claude-sonnet-4-5 } }模型 ID 不要照抄本文的claude-sonnet-4-5以 TaoToken 控制台当前可用模型列表为准。如果模型名写错常见表现是请求返回 404 或模型不存在而不是 Key 错误。2.2 用环境变量临时覆盖macOS / Linux / Git Bashexport ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_AUTH_TOKENYOUR_API_KEY export ANTHROPIC_MODELclaude-sonnet-4-5PowerShell$env:ANTHROPIC_BASE_URLhttps://taotoken.net/api $env:ANTHROPIC_AUTH_TOKENYOUR_API_KEY $env:ANTHROPIC_MODELclaude-sonnet-4-5Windows CMDset ANTHROPIC_BASE_URLhttps://taotoken.net/api set ANTHROPIC_AUTH_TOKENYOUR_API_KEY set ANTHROPIC_MODELclaude-sonnet-4-5设置完之后重新打开终端再启动 Claude Code。环境变量和settings.json同时存在时通常项目级配置优先但不同版本可能有差异。如果发现请求还是走到旧地址先把环境变量清掉只保留settings.json做排查。2.3 用 CC Switch 管理三件套如果你用 CC Switch 这类切换工具本质上也是填三件套Base URL、API Key、模型。对应关系是Base URLhttps://taotoken.net/apiAPI KeyYOUR_API_KEY模型按 TaoToken 控制台实际模型 ID 填写CC Switch 不会改变 Claude Code 的请求协议它只是帮你把多套配置写入不同 profile。切换前确认当前 profile 的 Base URL 没有写成https://taotoken.net/api/这种带尾斜杠的形式部分客户端会把尾斜杠拼进路径导致 404。2.4 Codex 不要套用 ANTHROPIC_*如果你同时用 Codex请记住 Codex 的配置入口是config.toml不是 Claude Code 的settings.json也不应该把ANTHROPIC_BASE_URL写进去。Codex 的供应商配置有自己的一套结构混用只会让你在排障时找不到方向。本文只处理 Claude Code TaoToken 这条链路。配置完成后可以在 Claude Code 里问一个简单问题验证链路请只回复一句TaoToken 链路已连通。如果返回正常说明 Base URL 和 Key 都生效了。接下来再装 SKILL才是可复现的顺序。3. 安装 emil-design-eng SKILL 到 Claude CodeClaude Code 的 SKILL 机制通常按目录加载项目根目录下的.claude/skills/每个技能一个子目录里面至少有SKILL.md。emil-design-eng是emilkowalski/skills仓库里的主技能以动画为主也包含部分设计建议。推荐先用 skills CLI 安装npx skillslatest add emilkowalski/skills这个命令会把仓库里的 SKILL 安装到当前项目的.claude/skills/下。安装完成后检查目录ls -la .claude/skills你应该能看到类似结构.claude/ skills/ emil-design-eng/ SKILL.md review-animations/ SKILL.md improve-animations/ SKILL.md find-animation-opportunities/ SKILL.md animation-vocabulary/ SKILL.md apple-design/ SKILL.md pick-ui-library/ SKILL.md如果 CLI 安装失败也可以手动复制。把emilkowalski/skills仓库中对应技能目录复制到项目的.claude/skills/下确保目录名和技能名一致。例如只装主技能.claude/skills/emil-design-eng/SKILL.mdSKILL.md通常包含 frontmatter例如name和description。如果这两个字段缺失或目录名不匹配Claude Code 可能不会把它识别为可调用技能。重启 Claude Code或者在会话里让它列出可用 skills确认emil-design-eng已经出现。这里要再次强调SKILL 安装本身不消耗 Token但你在 Claude Code 里让它读取 SKILL、扫描项目、生成修改建议时消耗的是模型调用。Base URL 已经指向https://taotoken.net/api所以这些消耗都会走 TaoToken。如果你还没拿 Key可以先到官网了解入口https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_code_emil_skill_config 。4. emil-design-eng 到底改了什么动画规则应用对照emil-design-eng的价值不在于它给了某个固定 CSS 片段而在于它把“为什么这样更好”写成了模型能执行的规则。下面是一组常见对照适合直接拿来做审查清单。场景常见错误emil-design-eng 倾向原因入场动画ease-inease-out或 spring开始快、结束慢更符合“进入视野”的直觉阴影层级实线边框半透明阴影、背景层级阴影更柔和不切割布局动画属性width、height、margintransform、opacity避免触发布局重排帧率更稳动画时长500ms 以上150ms 到 300ms交互反馈要干脆过长会显得拖沓Toast手写一个用 sonner 等成熟库边界情况更少行为更一致动效数量每个元素都加只在注意力转移处加克制才显得高级弹层直接 display 切换transform opacity 过渡视觉连续性更好按钮反馈只改颜色轻微 scale 阴影变化反馈更明确但不浮夸把上表放到具体 CSS 里常见错误写法.card { transition: width 600ms ease-in, height 600ms ease-in; border: 1px solid #d0d0d0; } .card:hover { width: 320px; height: 420px; }按 SKILL 倾向改写后.card { transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease-out, box-shadow 220ms ease-out; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); will-change: transform, opacity; } .card:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); }再比如弹层入场错误做法是直接切换display正确做法是保持元素在 DOM 中用opacity和transform做过渡.popover { opacity: 0; transform: translateY(6px) scale(0.98); transition: opacity 160ms ease-out, transform 160ms cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .popover[data-opentrue] { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }这些规则不是让你机械替换而是让 Claude Code 在生成 UI 时有判断依据。review-animations会按严格标准审查你已有的动画improve-animations会扫描代码库并按优先级给出改进方案find-animation-opportunities则负责找出真正值得加动效的位置同时告诉你哪些地方不该加。animation-vocabulary能帮你用更准确的术语描述动画apple-design把 WWDC 上讲的流畅动效原则整理成 Web 可用的版本pick-ui-library则让模型基于可信库做选型而不是随手手搓一个 toast。5. 在 Claude Code 里触发 emil-design-eng 的提示词与工作流装好 SKILL 后关键是让 Claude Code 在正确的任务里调用它。下面给几组可直接复制的提示词。审查单个组件动画使用 emil-design-eng 技能审查当前组件的入场动画。 重点检查 easing、duration、transform 属性、阴影层级和边框使用。 先输出问题列表再给出修改后的完整代码。扫描整个目录用 improve-animations 扫描 src/components 下的所有动画。 按影响面排序输出优先级列表并为每个问题给出可应用的 patch。 不要修改与动画无关的文件。寻找动效机会用 find-animation-opportunities 检查这个页面。 列出 3 个值得加动效的位置并说明触发条件和推荐时长。 再列出 2 个不该加动效的位置说明原因。用术语描述需求用 animation-vocabulary 帮我把“弹出来自然一点”翻译成准确的动效描述 包括 easing、duration、transform 起止值和可能的 spring 参数。选 UI 库用 pick-ui-library 评估当前需求需要一个轻量 toast 和可访问的 dialog。 基于作者信任的库给出选型不要手搓。这些提示词会在 Claude Code 内触发 SKILL 读取和模型推理Token 消耗走 TaoToken。如果你不确定该选哪个模型可以先去模型对话页试一轮https://taotoken.net/models/detail/chat?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_code_emil_skill_chat 。试完再回到 Claude Code把模型 ID 写进settings.json。一个实际工作流可以这样安排用find-animation-opportunities找出页面里值得加动效的位置。用emil-design-eng生成第一版动画实现。用review-animations审查第一版重点看 easing、时长、属性选择。用improve-animations扫描全库把同类问题一次性修掉。把最终规则沉淀到项目内的动效规范文档后续让 Claude Code 直接读取。这套流程的好处是SKILL 不只是“生成一次代码”而是把审查、改进、选型串成可重复的工程动作。6. 排障SKILL 不生效、请求 401、模型不存在怎么办问题一Claude Code 请求返回 401 或 Unauthorized。先检查YOUR_API_KEY是否已经替换成真实 KeyKey 是否复制完整前后有没有多余空格。然后确认 Base URL 是https://taotoken.net/api不是带 UTM 参数的地址。UTM 参数只用于官网追踪不要写进工具配置。问题二返回 404 或 model not found。通常是模型 ID 写错。把settings.json里的ANTHROPIC_MODEL改成 TaoToken 控制台显示的模型 ID。不同客户端的模型名大小写敏感不要凭记忆写。问题三SKILL 列表里没有 emil-design-eng。检查目录是否是.claude/skills/emil-design-eng/SKILL.md。如果放在用户级~/.claude/skills/下确认当前项目没有覆盖配置。重启 Claude Code 后再试。如果SKILL.md的 frontmatter 缺少name或description也可能不被识别。问题四SKILL 被调用了但输出没有按规则改动画。在提示词里明确写出“使用 emil-design-eng 技能”和“按 review-animations 标准审查”。如果只写“帮我优化动画”模型可能不会主动读取 SKILL。你可以在项目里放一个CLAUDE.md写明 UI 任务优先参考.claude/skills/emil-design-eng。问题五想确认请求到底走到哪里。可以用调试模式启动 Claude Code观察请求地址。不同版本命令不同常见做法是加--debug或在环境变量里打开日志。确认 Base URL 没有被子进程环境变量覆盖。Windows 用户注意系统环境变量和终端临时变量可能同时存在。问题六同时用 Codex。Codex 的配置在config.toml不要写ANTHROPIC_*。Claude Code 的settings.json只服务 Claude Code。两者混用会导致你以为 Key 失效实际是配置写错了文件。问题七担心 Token 消耗。SKILL 请求会消耗 Token尤其是improve-animations扫描全库时。建议先限定目录比如src/components/ui再逐步扩大范围。如果只是试规则可以先用模型对话页做小样本测试再回到 Claude Code 跑全量。7. 文末 CTA模型对话 → Coding Plan → 创建 Key → Claude Code 文档如果你已经准备好把 Claude Code 的请求切到 TaoToken按下面顺序走一遍即可先到模型对话页试模型效果https://taotoken.net/models/detail/chat?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_code_emil_skill_chat需要长期高频使用看 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_code_emil_skill_plan在控制台创建 API Keyhttps://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_code_emil_skill_keys按 Claude Code 文档完成最终配置https://taotoken.net/doc/ClaudeCodeAnthropic?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_code_emil_skill_doc官网入口再放一次方便你拿 Key 和查看完整能力https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_code_emil_skill_end 。配置记住三件事Base URL 用https://taotoken.net/apiKey 用YOUR_API_KEY占位后替换Claude Code 的settings.json里写ANTHROPIC_*。装好emil-design-eng后先让它审查一个小组件再逐步扩大到整个项目。动效这件事规则越早进入工作流后面返工越少。