把Codex 的 SKILL 调用改到 TaoToken，再让 improve-animations 扫代码

1. 先把 Codex 的 SKILL 调用切到 TaoToken：Key、config.toml、环境变量

把 Codex 的 SKILL 调用切到 TaoToken，最省事的入口是先在 TaoToken 官网 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_content=codex_skill_intro 创建 Key，再把 Codex 的 Base URL 改成 https://taotoken.net/api。很多同学用 Codex 做前端重构时，前面improve-animations明明已经装好，结果一执行就遇到401、404、model not found，或者 SKILL 读出来了但会话没有真正按规则扫描代码。问题通常不在 SKILL 本身，而在 Codex 还走着旧的供应商配置：Key 没写进环境变量、config.toml的env_key和实际变量名不一致、base_url多写了/v1、wire_api和 TaoToken 的兼容端点不匹配。

所以这篇按可复现路径来：先到官网拿 Key，再把 Codex 的配置文件改到 TaoToken，然后安装improve-animations，最后让 Codex 在项目根目录里扫动画并输出按优先级排好的整改清单。整个过程中，Codex 读取 SKILL、扫描文件、生成补丁、跑检查都会消耗 Token；把范围切小、先只读不写、分批扫描，可以明显减少无效消耗。下面从配置开始。

1.1 获取 TaoToken Key 并确认 Codex 版本

访问 TaoToken 官网 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_content=codex_skill_key ，进入控制台创建 API Key。创建后先复制到本地，不要直接提交到仓库。本文统一用YOUR_API_KEY占位。然后确认 Codex 版本和配置文件位置：

codex --version ls -la ~/.codex

如果~/.codex不存在，先启动一次 Codex，或者手动创建：

mkdir -p ~/.codex

Codex 和 Claude Code 的配置体系不是一回事。Codex 走的是config.toml，常用model_provider、model_providers、env_key；Claude Code 才用settings.json和ANTHROPIC_*环境变量。不要把ANTHROPIC_BASE_URL、ANTHROPIC_AUTH_TOKEN写进 Codex 的config.toml，否则很容易出现鉴权头对不上、模型列表拉不到、请求路径不匹配的问题。

1.2 写入 Codex 的 config.toml

打开或新建~/.codex/config.toml，加入 TaoToken 供应商配置。下面是一个可复制示例：

model = "gpt-5-codex" model_provider = "taotoken" [model_providers.taotoken] name = "TaoToken" base_url = "https://taotoken.net/api" env_key = "TAOTOKEN_API_KEY" wire_api = "responses"

这里有几个关键点：

1. base_url用https://taotoken.net/api，不要在后面随意追加/v1。工具配置以 TaoToken 文档和实际兼容端点为准备，先按这个地址测。
2. env_key写的是环境变量名，不是 Key 本身。也就是说，Codex 会去读TAOTOKEN_API_KEY。
3. wire_api先试responses。如果你的 Codex 版本或当前 TaoToken 端点要求 Chat Completions 兼容格式，再改成chat。
4. model先填你确认可用的模型名。如果启动后报model not found，去 TaoToken 的模型对话页确认当前可用模型，再替换。

环境变量按系统设置。macOS / Linux：

export TAOTOKEN_API_KEY="YOUR_API_KEY"

如果希望长期生效：

echo 'export TAOTOKEN_API_KEY="YOUR_API_KEY"' >> ~/.zshrc source ~/.zshrc

Windows PowerShell：

$env:TAOTOKEN_API_KEY="YOUR_API_KEY"

持久化到用户环境：

setx TAOTOKEN_API_KEY "YOUR_API_KEY"

设置完成后，在终端里验证变量是否存在：

echo $TAOTOKEN_API_KEY

Windows PowerShell 用：

echo $env:TAOTOKEN_API_KEY

如果这里输出为空，Codex 就会拿着空 Key 去请求，表现通常就是401 Unauthorized。这种情况不是 SKILL 安装失败，而是环境变量没被当前终端会话读到。

1.3 用 CC Switch 管理时，三件套要这样填

如果你用 CC Switch 管理多个供应商，核心就是三件套：

供应商名称：TaoToken Base URL：https://taotoken.net/api API Key：YOUR_API_KEY

然后在 CC Switch 里选择对应的目标工具：

• 管理 Codex：生成或写入~/.codex/config.toml，环境变量名对应TAOTOKEN_API_KEY。
• 管理 Claude Code：生成或写入~/.claude/settings.json，环境变量走ANTHROPIC_BASE_URL、ANTHROPIC_AUTH_TOKEN。

不要因为两个工具都支持对话，就把 Claude Code 的变量套到 Codex 上。Codex 的请求头、端点、配置项都不同。切换完成后，重新打开终端，让新的环境变量和config.toml生效。

2. 把 improve-animations 装进 Codex 能读取的 SKILL 目录

emilkowalski/skills这套仓库不是传统 npm 包，而是一组给编程 Agent 读取的 SKILL。它的重点不是“跑一个命令自动美化页面”，而是把界面动效和设计细节拆成 Agent 能执行的规则。比如入场动画应该优先ease-out，退场通常用ease-in；阴影比生硬边框更容易做出层次；动画尽量只碰transform和opacity，避免height、top、left这类会触发布局重算的属性。

这套技能里比较常用的有：

• emil-design-eng：主技能，偏动画，也包含设计建议。
• review-animations：审查现有动画，指出不符合标准的地方。
• improve-animations：扫描代码库里所有动画，给出按优先级排序的整改方案。
• find-animation-opportunities：找出真正值得加动效的位置，也提示哪些地方不该加。
• animation-vocabulary：帮你用更准确的术语描述动画，减少“快一点、顺滑一点”这种模糊指令。
• apple-design：把苹果界面设计和流畅动效原则转成 Web 可用的规则。
• pick-ui-library：让 Agent 基于成熟库做选型，而不是临时手搓一个 toast 或引入没人维护的包。

本篇重点用improve-animations。安装时可以用 skills CLI：

npx skills add emilkowalski/skills

执行后按提示选择 Codex 作为目标 Agent，并在技能列表里勾选improve-animations。如果你的 CLI 版本支持直接指定技能，可以尝试：

npx skills add emilkowalski/skills --skill improve-animations

安装完成后，检查 Codex 能读取的 SKILL 目录。常见位置是用户级：

ls -la ~/.codex/skills ls -la ~/.codex/skills/improve-animations

如果项目级也支持，可以在项目根目录放：

mkdir -p .codex/skills ls -la .codex/skills

目录里至少应该能看到SKILL.md以及相关说明文件。如果只有仓库缓存，没有进入 Codex 的 skills 目录，Codex 在会话里就不会自动读取这套规则。安装 SKILL 时，TaoToken 官网 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_content=codex_skill_install 的模型对话页可以用来确认当前 Key 和模型是否正常，避免把配置问题和 SKILL 安装问题混在一起排查。

安装完成后，在项目根目录启动 Codex：

cd your-frontend-project codex

在会话里明确点名 SKILL：

使用 improve-animations SKILL 扫描当前代码库。

如果 Codex 没有识别，先确认三点：

1. 是否在项目根目录启动，而不是在上级目录或子目录。
2. SKILL.md是否在 Codex 能读取的 skills 目录。
3. 当前 Codex 版本是否支持这类 SKILL 调用方式。

3. 让 Codex 执行 improve-animations 扫代码库：提示词与 Token 消耗控制

SKILL 安装好之后，不要直接说“帮我优化动画”。这种提示词会让 Codex 自由发挥，输出很泛，还会把大量 Token 花在无关文件上。更好的方式是把任务切成“只读扫描”和“按优先级修复”两个阶段。

第一阶段只读扫描，不修改文件。提示词可以这样写：

使用 improve-animations SKILL 扫描当前代码库。 范围：src/**/*.{tsx,jsx,vue,svelte,css,scss} 先不要修改文件，只输出整改清单。 每项包含： 1. 文件:行号 2. 问题类型：缓动、时长、性能、阴影、边框、无障碍 3. 当前写法 4. 建议写法 5. 优先级：P0 / P1 / P2 6. 预估改动量 按优先级排序，优先处理会影响交互性能和无障碍的项。 忽略 node_modules、dist、build、coverage。

这样 Codex 在读取improve-animations规则后，会按文件范围扫描，而不是全仓库乱翻。输出可能类似：

P0 src/components/Modal.tsx:88 问题：入场使用 ease-in，退场 400ms，且对 height 做 transition。 建议：入场 ease-out 180ms，退场 ease-in 120ms，仅动画 opacity/transform。 P1 src/components/Toast.tsx:42 问题：多个 toast 同时出现，没有 stagger，也没有 prefers-reduced-motion 处理。 建议：列表项间隔 30-50ms，增加 reduced-motion 媒体查询。 P2 src/pages/Dashboard.tsx:120 问题：卡片 hover 使用实线边框变色，层次偏硬。 建议：改用半透明边框加双层阴影，hover 位移控制在 1-2px。

第二阶段再让 Codex 改代码：

按上一条清单里的 P0 项逐个修复。 每改一个文件，运行一次 lint 和 typecheck。 不要一次性重写整个组件，只做最小改动。 改完后输出变更文件和需要人工确认的点。

Token 消耗主要发生在这几个地方：读取SKILL.md、扫描源文件、生成清单、生成 patch、运行检查并读取错误输出。控制方法有：

• 先限定src目录和文件后缀，不要全仓库扫描。
• 先只读输出清单，确认清单合理后再让 Codex 改。
• 大仓库按模块分批，比如先src/components，再src/pages。
• 不要让 Codex 一次重写整个组件树，要求最小 diff。
• 检查阶段只跑相关文件的 lint 和 typecheck，避免全量输出。

如果你需要确认当前 TaoToken Key 的用量、模型或入口状态，可以从 TaoToken 官网 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_content=codex_skill_scan 进入模型对话或控制台查看。不要把 Key 写进 Codex 的提示词里，也不要让 Codex 把YOUR_API_KEY打印到日志或提交到仓库。

4. 动画整改清单：Codex 扫完后按这份优先级修

improve-animations会给出很多建议，但最终要落到代码里。下面这份清单可以作为人工复核顺序。

4.1 P0：性能与无障碍

优先级最高的是会影响交互流畅度和可访问性的问题。

1. 动画属性只用transform和opacity。
   避免对width、height、top、left、margin做持续 transition。这些属性会触发布局计算，列表和弹层一多就容易卡。

2. 增加prefers-reduced-motion。
   用户系统设置减少动态效果时，应该降低或关闭动画。

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }

3. 不要用动画阻塞交互。
   按钮、输入框、菜单这类高频操作，动画时长要短，避免每次点击都等 300ms 以上。

4.2 P1：缓动曲线与时长

improve-animations最常抓的问题就是缓动曲线用反。

• 入场：优先ease-out，快速开始、缓慢结束，视觉上更自然。
• 退场：通常用ease-in，快速离开，不拖沓。
• 小元素：150ms 到 200ms。
• 大面板：250ms 到 300ms。
• 超过 500ms 的 UI 动画要非常谨慎。

可以统一成 CSS 变量：

:root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --duration-enter: 180ms; --duration-exit: 140ms; } .card-enter { animation: card-in var(--duration-enter) var(--ease-out) both; } .card-exit { animation: card-out var(--duration-exit) var(--ease-in) both; } @keyframes card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes card-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-4px); } }

4.3 P2：阴影、边框、hover 与 stagger

这些是界面“显廉价”的高频来源。

• 少用纯黑实线边框，改用低透明度边框加多层阴影。
• hover 位移控制在 1-2px，不要大幅跳动。
• 列表入场加 stagger，但间隔不要太长，30-50ms 足够。
• Toast、Modal、Drawer 优先做退场，不要只做入场。

.card { border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.08); transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out); } .card:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08), 0 12px 32px rgba(15, 23, 42, 0.12); }

如果 Codex 一次给出几十条建议，不要全部照改。先让 Codex 把 P0 和 P1 分开，然后按文件分批处理。每批改完跑一次浏览器检查，重点看弹层、列表、路由切换和移动端菜单。

5. 常见报错排查：401、404、模型名、SKILL 不生效

配置 TaoToken 后，如果 Codex 仍然报错，按下面顺序排查。

5.1 401 Unauthorized

表现：Codex 一启动或一请求就返回 401。

排查：

echo $TAOTOKEN_API_KEY

确认当前终端能读到变量。如果读不到，重新export或重启终端。然后检查~/.codex/config.toml：

env_key = "TAOTOKEN_API_KEY"

这里的变量名必须和实际环境变量完全一致，大小写也要一致。不要写成TAOTOKEN_KEY、TAOTOKEN_API或OPENAI_API_KEY。

5.2 404 Not Found

表现：请求路径不对，或者返回接口不存在。

排查：

base_url = "https://taotoken.net/api"

先按这个地址配置。不要凭感觉加/v1、/chat/completions、/responses。如果当前 Codex 版本要求 Chat 兼容格式，把：

wire_api = "responses"

改成：

wire_api = "chat"

然后重启 Codex 再试。

5.3 model not found

表现：模型名不可用。

排查：去 TaoToken 模型对话页确认当前 Key 可用的模型名，再替换config.toml里的model。不要直接抄网上别人的模型名。模型可用性和你的账号、Key、当前供应商配置有关。可以从 TaoToken 官网 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_content=codex_skill_troubleshoot 进入模型对话确认。

5.4 SKILL 不生效

表现：Codex 能对话，但不按improve-animations规则扫描。

排查：

ls -la ~/.codex/skills/improve-animations

确认SKILL.md存在。然后确认启动目录：

pwd

应该在项目根目录。提示词里明确写：

使用 improve-animations SKILL 扫描当前代码库。

如果还是不行，先在会话里让 Codex 列出可用 skills：

列出当前可用的 skills。

确认improve-animations在列表里。

6. 别把 Claude Code 的 ANTHROPIC_* 写进 Codex

这是配置环节最容易混的地方。Claude Code 使用settings.json和环境变量ANTHROPIC_BASE_URL、ANTHROPIC_AUTH_TOKEN。示例：

{ "env": { "ANTHROPIC_BASE_URL": "https://taotoken.net/api", "ANTHROPIC_AUTH_TOKEN": "YOUR_API_KEY" } }

注意，这个示例只用于 Claude Code。Codex 不读ANTHROPIC_*。Codex 应该用~/.codex/config.toml，配置model_providers.taotoken，并通过env_key = "TAOTOKEN_API_KEY"读取环境变量。

如果你同时用 CC Switch，记住：

Codex： 配置文件：~/.codex/config.toml 供应商：TaoToken Base URL：https://taotoken.net/api API Key：YOUR_API_KEY 环境变量：TAOTOKEN_API_KEY Claude Code： 配置文件：~/.claude/settings.json 供应商：TaoToken Base URL：https://taotoken.net/api API Key：YOUR_API_KEY 环境变量：ANTHROPIC_BASE_URL / ANTHROPIC_AUTH_TOKEN

两边可以都用 TaoToken，但配置字段不要交叉。混用后的典型症状是：Codex 里写了ANTHROPIC_AUTH_TOKEN，但 Codex 去找TAOTOKEN_API_KEY，结果 401；或者 Claude Code 里写了TAOTOKEN_API_KEY，但 Claude Code 只认 Anthropic 变量，结果请求没有鉴权头。

7. 文末 CTA：模型对话 → Coding Plan → 创建 Key → Claude Code 文档

如果你已经跟着配完 Codex 的config.toml，下一步就是让improve-animations真正开始扫代码。建议按这个顺序补齐：

1. 先到模型对话确认当前可用模型，避免model not found：
   https://taotoken.net/models/detail/chat?utm_source=taotoken_aicg_blog_end&utm_content=codex_skill_cta_chat

2. 再按使用强度选择 Coding Plan：
   https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=codex_skill_cta_plan

3. 然后到 API Keys 创建自己的 Key，替换YOUR_API_KEY：
   https://taotoken.net/console/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=codex_skill_cta_keys

4. 最后对照 Claude Code 文档，区分 Codex 的config.toml和 Claude Code 的settings.json，不要混用ANTHROPIC_*：
   https://taotoken.net/doc/ClaudeCodeAnthropic?utm_source=taotoken_aicg_blog_end&utm_content=codex_skill_cta_doc

回到实际动作：拿到 Key 后，把 Codex 的 Base URL 指向https://taotoken.net/api，安装improve-animations，在项目根目录启动 Codex，用“只读扫描”提示词先出清单，再按 P0、P1、P2 分批修。这样 Codex 消耗的每一次 Token 都落在具体文件和具体动画问题上，而不是泛泛地“把界面变好看”。