精益价值流映射与 DevOps 交付效能：WIP、DORA 与 MaaS
2026/9/18 23:09:51
1. 为什么在 Claude Code 里装 emil-design-eng 之前，先把请求切到 TaoToken
在 Claude Code 里装emil-design-eng这个 SKILL 之前，我建议先把请求通道切到 TaoToken：到 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_content=claude_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 本身不产生 Token，Claude Code 在读取 SKILL、分析代码、生成修改建议时，仍然要调用模型。也就是说，你必须先让 Claude Code 有一个稳定可用的模型入口。TaoToken 提供兼容 Anthropic 风格的 Base URL，https://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 指向 TaoToken：settings.json 与环境变量两种写法
Claude Code 的配置入口通常有两类：用户级~/.claude/settings.json，以及项目级.claude/settings.json。项目级更适合团队共享，用户级更适合个人全局使用。核心字段是env，里面放ANTHROPIC_BASE_URL、ANTHROPIC_AUTH_TOKEN或ANTHROPIC_API_KEY、以及可选的ANTHROPIC_MODEL。
先到官网控制台创建 Key：https://taotoken.net/console/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=claude_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 Bash：
export ANTHROPIC_BASE_URL="https://taotoken.net/api" export ANTHROPIC_AUTH_TOKEN="YOUR_API_KEY" export ANTHROPIC_MODEL="claude-sonnet-4-5"PowerShell：
$env:ANTHROPIC_BASE_URL="https://taotoken.net/api" $env:ANTHROPIC_AUTH_TOKEN="YOUR_API_KEY" $env:ANTHROPIC_MODEL="claude-sonnet-4-5"Windows CMD：
set ANTHROPIC_BASE_URL=https://taotoken.net/api set ANTHROPIC_AUTH_TOKEN=YOUR_API_KEY set ANTHROPIC_MODEL=claude-sonnet-4-5设置完之后重新打开终端，再启动 Claude Code。环境变量和settings.json同时存在时，通常项目级配置优先，但不同版本可能有差异。如果发现请求还是走到旧地址，先把环境变量清掉，只保留settings.json做排查。
2.3 用 CC Switch 管理三件套
如果你用 CC Switch 这类切换工具，本质上也是填三件套：Base URL、API Key、模型。对应关系是：
- Base URL：
https://taotoken.net/api - API Key：
YOUR_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 Code
Claude Code 的 SKILL 机制通常按目录加载：项目根目录下的.claude/skills/，每个技能一个子目录，里面至少有SKILL.md。emil-design-eng是emilkowalski/skills仓库里的主技能，以动画为主，也包含部分设计建议。
推荐先用 skills CLI 安装：
npx skills@latest 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_source=taotoken_aicg_blog_end&utm_content=claude_code_emil_skill_config 。
4. emil-design-eng 到底改了什么：动画规则应用对照
emil-design-eng的价值不在于它给了某个固定 CSS 片段，而在于它把“为什么这样更好”写成了模型能执行的规则。下面是一组常见对照，适合直接拿来做审查清单。
| 场景 | 常见错误 | emil-design-eng 倾向 | 原因 |
|---|---|---|---|
| 入场动画 | ease-in | ease-out或 spring | 开始快、结束慢，更符合“进入视野”的直觉 |
| 阴影层级 | 实线边框 | 半透明阴影、背景层级 | 阴影更柔和，不切割布局 |
| 动画属性 | width、height、margin | transform、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-open="true"] { 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_source=taotoken_aicg_blog_end&utm_content=claude_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是否已经替换成真实 Key，Key 是否复制完整，前后有没有多余空格。然后确认 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_source=taotoken_aicg_blog_end&utm_content=claude_code_emil_skill_chat
- 需要长期高频使用，看 Coding Plan：https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=claude_code_emil_skill_plan
- 在控制台创建 API Key：https://taotoken.net/console/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=claude_code_emil_skill_keys
- 按 Claude Code 文档完成最终配置：https://taotoken.net/doc/ClaudeCodeAnthropic?utm_source=taotoken_aicg_blog_end&utm_content=claude_code_emil_skill_doc
官网入口再放一次，方便你拿 Key 和查看完整能力：https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_content=claude_code_emil_skill_end 。
配置记住三件事：Base URL 用https://taotoken.net/api，Key 用YOUR_API_KEY占位后替换，Claude Code 的settings.json里写ANTHROPIC_*。装好emil-design-eng后，先让它审查一个小组件，再逐步扩大到整个项目。动效这件事，规则越早进入工作流，后面返工越少。