编程Agent 装 emilkowalski/skills，TaoToken 接住 Claude Code 请求

1. 给 Claude Code 装 emilkowalski/skills 前，先用 TaoToken 接住请求

给 Claude Code 装完 emilkowalski/skills，我让它把 Toast 入场改成 ease-out，它仍然返回transition-timing-function: ease-in，阴影部分还是写了border: 1px solid #e5e7eb。这不是提示词不够细，而是请求链路和 SKILL 执行没有接好。我的处理顺序是：先到 TaoToken 官网 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_content=skill_first_key 拿 Key，再把 Claude Code 的 Base URL 指向https://taotoken.net/api，让 Claude Code 在触发 emil-design-eng、review-animations 这类 SKILL 时消耗 Token。这样 SKILL 规则、模型请求、返回代码都在同一条可观察链路里，排障时不用猜是提示词问题还是配置问题。

emilkowalski/skills 解决的是“编程 Agent 缺少设计规则”这件事。它把作者在 Vercel、Linear 等团队积累的动效与界面经验，整理成 Claude Code 可以读取的 SKILL。作者也是 sonner、vaul 等前端组件的维护者，核心判断很直接：Agent 缺的不是生产力，而是设计品味。它分不清入场该用 ease-out 还是 ease-in，也说不清为什么实线边框会显得廉价。装上 SKILL 后，Claude Code 在处理 UI 任务时能参考这些规则，从“能跑”往“看着舒服”靠拢。

下面按可复现顺序写：TaoToken 拿 Key、Claude Code settings.json 配置、emilkowalski/skills 安装、SKILL 触发模板、ease-out/阴影/边框/hover/弹窗的 before-after 对照，以及 401、SKILL 不生效、CC Switch 三件套错位时的排查方式。

2. 在 TaoToken 创建 Key，并把 Claude Code 的 Base URL 指向 https://taotoken.net/api

Claude Code 默认请求 Anthropic 官方地址。要让 TaoToken 接住请求，需要改两个核心变量：ANTHROPIC_BASE_URL和ANTHROPIC_AUTH_TOKEN。Base URL 固定写https://taotoken.net/api，不要在后面拼/v1，也不要加 UTM。UTM 只用于官网入口追踪，不用于工具配置。

第一步，打开 TaoToken 官网 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_content=claude_code_base_url ，注册或登录。进入控制台后找到 API Keys，创建一个 Key。Key 只显示一次，复制后放到本地密码管理器或临时环境变量，不要写进 Git 仓库。

第二步，配置 Claude Code。Claude Code 支持settings.json，也支持 shell 环境变量。推荐用用户级~/.claude/settings.json，这样所有项目都能生效，同时不会把 Key 暴露在项目仓库里。

{ "env": { "ANTHROPIC_BASE_URL": "https://taotoken.net/api", "ANTHROPIC_AUTH_TOKEN": "YOUR_API_KEY", "ANTHROPIC_MODEL": "claude-sonnet-4-5", "ANTHROPIC_SMALL_FAST_MODEL": "claude-3-5-haiku-latest" } }

如果你的 Claude Code 版本读取的是ANTHROPIC_API_KEY，也可以只保留一个：

{ "env": { "ANTHROPIC_BASE_URL": "https://taotoken.net/api", "ANTHROPIC_API_KEY": "YOUR_API_KEY", "ANTHROPIC_MODEL": "claude-sonnet-4-5" } }

模型 ID 以 TaoToken 控制台或 Claude Code 文档展示为准。不同账号可见的模型可能不同，不要盲抄模型名。如果模型名不匹配，常见表现是 404 或“model not found”，而不是 SKILL 不生效。

第三步，用 shell 环境变量做快速验证。临时终端会话可以这样写：

export ANTHROPIC_BASE_URL="https://taotoken.net/api" export ANTHROPIC_AUTH_TOKEN="YOUR_API_KEY" export ANTHROPIC_MODEL="claude-sonnet-4-5"

然后启动 Claude Code：

claude --version claude

进入 Claude Code 后，先让它做一次最小请求，确认请求确实走到 TaoToken：

只输出当前会话是否已配置自定义 Base URL，不要输出任何 Key，不要编造模型名称。

接着检查环境变量是否被正确读取：

echo "$ANTHROPIC_BASE_URL" # 期望输出：https://taotoken.net/api test -n "$ANTHROPIC_AUTH_TOKEN" && echo "token exists" # 期望输出：token exists

不要用echo $ANTHROPIC_AUTH_TOKEN打印完整 Key。如果必须确认，只看前后几位。

如果你用 CC Switch 管理多套配置，记住三件套：Base URL、API Key、Model。Base URL 填https://taotoken.net/api，API Key 填YOUR_API_KEY，Model 填你在 TaoToken 选定的 Claude 模型。切换配置后重启 Claude Code，避免旧环境变量残留。

Codex 用户不要复用ANTHROPIC_*。Codex 用config.toml，凭证变量另起名字。下面是最小示例，具体字段按你的 Codex 版本调整：

# ~/.codex/config.toml model_provider = "taotoken" [model_providers.taotoken] name = "TaoToken" base_url = "https://taotoken.net/api" env_key = "TAOTOKEN_API_KEY"

再设置：

export TAOTOKEN_API_KEY="YOUR_API_KEY"

再次强调：Claude Code 用ANTHROPIC_*，Codex 用config.toml+TAOTOKEN_API_KEY。把ANTHROPIC_BASE_URL写进 Codex 配置里，通常不会生效，还会让排障方向跑偏。

3. 安装 emilkowalski/skills：用户级、项目级、手动复制三种方式

SKILL 安装的本质，是把包含SKILL.md的目录放到 Claude Code 能读取的位置。常见位置有两个：

• 用户级：~/.claude/skills
• 项目级：项目根目录下的.claude/skills

用户级适合个人常用技能，项目级适合团队共享。如果项目要提交到 Git，只提交 SKILL 文件，不要提交 Key。

最直接的方式是克隆仓库后复制。先拉取到临时目录：

rm -rf /tmp/emil-skills git clone --depth 1 https://github.com/emilkowalski/skills.git /tmp/emil-skills

查看仓库里有哪些 SKILL：

find /tmp/emil-skills -maxdepth 4 -name "SKILL.md" -print

你应该能看到类似以下目录：

/tmp/emil-skills/skills/emil-design-eng/SKILL.md /tmp/emil-skills/skills/review-animations/SKILL.md /tmp/emil-skills/skills/improve-animations/SKILL.md /tmp/emil-skills/skills/find-animation-opportunities/SKILL.md /tmp/emil-skills/skills/animation-vocabulary/SKILL.md /tmp/emil-skills/skills/apple-design/SKILL.md /tmp/emil-skills/skills/pick-ui-library/SKILL.md

以实际仓库结构为准。如果有skills/目录，就复制skills/下的每个技能目录到用户级：

mkdir -p ~/.claude/skills cp -R /tmp/emil-skills/skills/* ~/.claude/skills/

如果仓库结构不同，可以用循环只复制包含SKILL.md的目录：

mkdir -p ~/.claude/skills cd /tmp/emil-skills for skill_md in $(find . -maxdepth 4 -name "SKILL.md"); do skill_dir="$(dirname "$skill_md")" skill_name="$(basename "$skill_dir")" cp -R "$skill_dir" "$HOME/.claude/skills/$skill_name" done

复制完成后验证：

ls ~/.claude/skills

期望看到：

emil-design-eng review-animations improve-animations find-animation-opportunities animation-vocabulary apple-design pick-ui-library

如果是项目级安装：

mkdir -p .claude/skills cp -R /tmp/emil-skills/skills/* .claude/skills/

项目级适合把 SKILL 和代码一起管理。建议在.gitignore里排除.claude/settings.local.json这类可能包含本地凭证的文件。

安装完成后，重启 Claude Code。Claude Code 通常会在启动时扫描 SKILL 目录。可以用一个最小提示确认它能看到技能：

列出你当前可用的 SKILL 名称，只列与动画、设计、UI 库相关的。

如果它列不出emil-design-eng、review-animations，先不要继续调 UI，先回去检查~/.claude/skills下是否存在SKILL.md。

4. 触发 SKILL 的正确方式：别只装不问，把 SKILL 名写进任务

SKILL 装好之后，Claude Code 不会自动对所有 UI 任务都应用。你需要在提示里明确任务边界、SKILL 名称、目标文件和期望输出。否则它可能仍然按通用代码生成习惯写transition: all .3s ease-in。

错误提问通常是这样：

帮我优化一下这个按钮，让它看起来高级一点。

这种提问没有指定 SKILL，也没有限定文件、动效类型和禁止项。Claude Code 可能只改颜色，或者加一个scale(1.1)。

更可复现的提问模板：

使用 emil-design-eng SKILL，检查 src/components/Button.tsx 的入场动画和阴影。 要求： 1. 入场使用 ease-out，禁止 ease-in； 2. 阴影优先于 1px 实线边框； 3. hover 使用位移或阴影变化，不要放大按钮； 4. 只改动画和阴影，不改业务逻辑； 5. 输出修改后的完整代码块和原因。

review-animations适合审查已有代码：

使用 review-animations SKILL，审查 src/components/Toast.tsx 中所有 transition 和 animation。 按严重程度列出问题，每条给出可直接替换的 CSS/TSX 代码块。 重点检查：缓动曲线、时长、transform、opacity、阴影、边框。

improve-animations适合扫描目录：

使用 improve-animations SKILL，扫描 src/ 下所有 CSS 和 TSX 文件。 找出可以改进的动画，按优先级排序，输出 diff。 不要扫描 node_modules、dist、coverage。 每次最多输出 10 条，避免一次性消耗过多 Token。

find-animation-opportunities适合做动效取舍：

使用 find-animation-opportunities SKILL，分析当前页面的交互。 列出 3 个值得加动效的地方和 3 个不该加动效的地方。 对每个地方说明用户目的、触发条件、建议时长和缓动曲线。

animation-vocabulary适合把模糊需求翻译成专业描述：

使用 animation-vocabulary SKILL，把我的需求“让弹窗出来得更自然”改写成专业动效描述。 必须包含 duration、easing、transform、opacity、transform-origin。

apple-design适合做流畅度校准：

使用 apple-design SKILL，按苹果界面动效原则检查这个 Web 弹窗。 输出：进入动画、退出动画、遮罩层动画、手势跟随逻辑。

pick-ui-library适合选型：

使用 pick-ui-library SKILL，为 React 项目选一个 Toast 库。 要求可维护、动效完整、有活跃社区，避免手搓 toast 和安装无人维护的包。

每次执行 SKILL 都会把 SKILL 规则、代码上下文和你的要求发给模型，因此会消耗 Token。扫描范围越大，消耗越高。建议先review-animations看单文件，再improve-animations看目录，最后find-animation-opportunities做页面级取舍。

5. 界面细节对照：ease-out、阴影、边框、hover、弹窗的 before/after

SKILL 的价值不在代码量，而在背后的判断规则。下面用常见前端组件做对照。左列是未加载 SKILL 时编程 Agent 容易生成的写法，右列是加载 SKILL 后更接近设计工程标准的写法。

再给一组可复制的 CSS 对照。

未加载 SKILL 时，编程 Agent 可能生成：

.button { transition: all .3s ease-in; border: 1px solid #e5e7eb; } .modal { animation: pop .5s ease-in-out; } @keyframes pop { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

加载emil-design-eng后，更合理的版本：

.button { border: 0; transition: transform .2s cubic-bezier(.2, 0, 0, 1), box-shadow .2s ease-out, background-color .15s ease-out; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .12); } .button:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 12px 32px rgba(0, 0, 0, .16); } .button:active { transform: translateY(0); transition-duration: .08s; } .modal { transition: opacity .2s ease-out, transform .2s cubic-bezier(.2, 0, 0, 1); } .modal[data-state="closed"] { opacity: 0; transform: translateY(8px) scale(.98); }

注意点：

1. 不要用transition: all。它会让不必要的属性也产生动画，导致性能问题和不可预测的视觉结果。
2. 入场用 ease-out，离开可以用 ease-in 或更短时长。很多 Agent 会把两者写反。
3. 阴影比边框更适合做层级。边框适合分隔，不适合表达悬浮。
4. hover 的幅度要小。translateY(-2px)通常比scale(1.2)更稳。
5. 弹窗需要方向感。从触发源附近出现，比从屏幕中心突然放大更自然。

让 Claude Code 按这些规则修改时，可以直接把上表贴进提示，要求它只输出 diff：

使用 emil-design-eng 和 review-animations 两个 SKILL，按下面规则修改 Button.tsx 和 Modal.tsx： - 入场 ease-out，禁止 ease-in； - 移除 1px 实线边框，改用两层半透明阴影； - hover 使用 translateY(-2px)，不要 scale； - 弹窗使用 opacity + translateY + scale(.98) 组合； - 输出 unified diff，不要输出完整文件。

6. 排障：SKILL 不生效、401、模型名不匹配、CC Switch 三件套错位

问题一：SKILL 不生效。先检查目录：

find ~/.claude/skills -maxdepth 2 -name "SKILL.md" -print

如果没有输出，说明安装位置不对。确认~/.claude/skills/emil-design-eng/SKILL.md是否存在。然后重启 Claude Code。如果仍然不生效，在提示里显式写 SKILL 名称，例如“使用 review-animations SKILL”。

问题二：401 或 403。通常是 Key 错误、Key 被删除、或者环境变量没被读取。检查：

echo "$ANTHROPIC_BASE_URL" test -n "$ANTHROPIC_AUTH_TOKEN" && echo "token exists"

Base URL 应为https://taotoken.net/api。如果写成https://taotoken.net/api/v1，Claude Code 可能拼接出错误路径。Key 去 TaoToken 控制台重新创建：https://taotoken.net/console/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=create_key 。创建后更新settings.json或 CC Switch。

问题三：404 或 model not found。检查ANTHROPIC_MODEL是否在 TaoToken 模型列表中。不同账号、不同套餐可见模型不同。可以去模型对话页面确认模型 ID：https://taotoken.net/models/detail/chat?utm_source=taotoken_aicg_blog_end&utm_content=model_chat 。

问题四：CC Switch 三件套错位。CC Switch 里通常有三项：Base URL、API Key、Model。Base URL 用https://taotoken.net/api，API Key 用YOUR_API_KEY，Model 用你在 TaoToken 选定的模型。切换配置后重启 Claude Code。不要在不同工具之间复制ANTHROPIC_*到 Codex 的config.toml。

问题五：请求能通但 SKILL 规则没进上下文。Claude Code 执行 SKILL 时消耗 Token，但前提是 SKILL 被正确加载并触发。可以要求它先复述规则：

在使用 emil-design-eng SKILL 之前，先用一句话说明这个 SKILL 对入场缓动曲线的要求。

如果它答不出，说明 SKILL 没有进入上下文，先回到安装目录检查。

问题六：调试日志。可以用 debug 模式启动：

claude --debug

观察请求地址、模型名、错误码。不要在日志里泄露完整 Key。如果要贴日志，先把 Key 替换成YOUR_API_KEY。

问题七：Codex 配置混用。Codex 用config.toml，不要写ANTHROPIC_BASE_URL。如果你同时用 Claude Code 和 Codex，建议用 CC Switch 分开管理，或者用不同终端会话，避免环境变量互相污染。

7. Token 消耗与 Coding Plan：SKILL 扫描不要全仓库无差别进行

emilkowalski/skills 里的improve-animations和find-animation-opportunities会扫描代码库。扫描范围越大，发给模型的上下文越多，Token 消耗越高。控制方式：

1. 限定目录。只扫描src/components、src/pages，不要扫描node_modules、dist、coverage。
2. 先单文件审查，再目录扫描。先review-animations看一个组件，确认规则生效，再improve-animations看目录。
3. 要求输出 diff，不要输出完整文件。完整文件会重复带入大量无关代码。
4. 限制每次输出条数。例如“最多列 10 条，按优先级排序”。
5. 把重复出现的规则写进项目级提示，而不是每次让模型重新推导。

如果你高频用 Claude Code 执行 SKILL，可以关注 Coding Plan：https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding_plan 。它适合需要连续对话、多轮修改、扫描代码库的编程场景。如果只是偶尔验证一个组件，直接用 API Keys 创建 Key 即可。

TaoToken 在这里的角色是接住 Claude Code 请求。Claude Code 执行 SKILL 时消耗 Token，SKILL 本身不产生网络请求，请求由 Claude Code 发往https://taotoken.net/api。所以配置正确后，你可以在 TaoToken 控制台观察请求量、模型调用和消耗。如果发现 SKILL 触发一次就消耗异常高，先检查是不是把整个仓库塞进了上下文。

建议的 Token 控制提示模板：

使用 improve-animations SKILL，只扫描 src/components 下的 .tsx 文件。 排除 node_modules、dist、coverage、*.test.tsx。 每条改进只输出代码 diff 和一句话原因。 最多输出 8 条，按影响范围排序。

8. 从模型对话到 Claude Code 文档：按顺序完成接入

如果你还没有 Key，先走一遍高转化路径。顺序不要乱：先试模型对话，再选 Coding Plan，然后创建 Key，最后对照 Claude Code 文档写配置。

1. 模型对话：https://taotoken.net/models/detail/chat?utm_source=taotoken_aicg_blog_end&utm_content=model_chat
   先用对话验证模型是否可用，贴一段 Button.tsx，让它按 ease-out + 阴影规则输出 diff。确认返回质量后，再接入 Claude Code。

2. Coding Plan：https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding_plan
   如果你要连续用 Claude Code 执行 SKILL、扫描组件、多轮修改，选适合编程场景的套餐。

3. 创建 Key：https://taotoken.net/console/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=create_key
   创建后复制 Key，填入settings.json的ANTHROPIC_AUTH_TOKEN或ANTHROPIC_API_KEY。不要把 Key 提交到 Git。

4. Claude Code 文档：https://taotoken.net/doc/ClaudeCodeAnthropic?utm_source=taotoken_aicg_blog_end&utm_content=claude_code_doc
   对照文档确认 Base URL、模型 ID、环境变量名。Base URL 用https://taotoken.net/api，不要加 UTM。

如果你还想回到官网入口，可以从这里进：https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_content=final_cta 。

完整流程复述一遍：

# 1. 拿 Key 后，配置 Claude Code export ANTHROPIC_BASE_URL="https://taotoken.net/api" export ANTHROPIC_AUTH_TOKEN="YOUR_API_KEY" export ANTHROPIC_MODEL="claude-sonnet-4-5" # 2. 安装 emilkowalski/skills rm -rf /tmp/emil-skills git clone --depth 1 https://github.com/emilkowalski/skills.git /tmp/emil-skills mkdir -p ~/.claude/skills cp -R /tmp/emil-skills/skills/* ~/.claude/skills/ # 3. 验证 SKILL 目录 find ~/.claude/skills -maxdepth 2 -name "SKILL.md" -print # 4. 启动 Claude Code claude

然后在 Claude Code 里用这条提示触发：

使用 emil-design-eng 和 review-animations SKILL，检查 src/components/Button.tsx。 要求：入场 ease-out，禁止 ease-in；移除 1px 实线边框，改用半透明阴影；hover 用 translateY(-2px)，不要 scale；只输出 diff。

这套组合把“请求链路”和“设计规则”分开管：TaoToken 负责接住 Claude Code 请求，https://taotoken.net/api是 Base URL，YOUR_API_KEY是凭证，emilkowalski/skills 负责让 Claude Code 在生成 UI 时按 ease-out、阴影层级、克制 hover、弹窗方向感这些规则执行。配置一次后，后续每个前端任务都能复用。