1. 先把 Codex 的 SKILL 调用切到 TaoTokenKey、config.toml、环境变量把 Codex 的 SKILL 调用切到 TaoToken最省事的入口是先在 TaoToken 官网 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentcodex_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_sourcetaotoken_aicg_blog_endutm_contentcodex_skill_key 进入控制台创建 API Key。创建后先复制到本地不要直接提交到仓库。本文统一用YOUR_API_KEY占位。然后确认 Codex 版本和配置文件位置codex --version ls -la ~/.codex如果~/.codex不存在先启动一次 Codex或者手动创建mkdir -p ~/.codexCodex 和 Claude Code 的配置体系不是一回事。Codex 走的是config.toml常用model_provider、model_providers、env_keyClaude 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这里有几个关键点base_url用https://taotoken.net/api不要在后面随意追加/v1。工具配置以 TaoToken 文档和实际兼容端点为准备先按这个地址测。env_key写的是环境变量名不是 Key 本身。也就是说Codex 会去读TAOTOKEN_API_KEY。wire_api先试responses。如果你的 Codex 版本或当前 TaoToken 端点要求 Chat Completions 兼容格式再改成chat。model先填你确认可用的模型名。如果启动后报model not found去 TaoToken 的模型对话页确认当前可用模型再替换。环境变量按系统设置。macOS / Linuxexport TAOTOKEN_API_KEYYOUR_API_KEY如果希望长期生效echo export TAOTOKEN_API_KEYYOUR_API_KEY ~/.zshrc source ~/.zshrcWindows PowerShell$env:TAOTOKEN_API_KEYYOUR_API_KEY持久化到用户环境setx TAOTOKEN_API_KEY YOUR_API_KEY设置完成后在终端里验证变量是否存在echo $TAOTOKEN_API_KEYWindows PowerShell 用echo $env:TAOTOKEN_API_KEY如果这里输出为空Codex 就会拿着空 Key 去请求表现通常就是401 Unauthorized。这种情况不是 SKILL 安装失败而是环境变量没被当前终端会话读到。1.3 用 CC Switch 管理时三件套要这样填如果你用 CC Switch 管理多个供应商核心就是三件套供应商名称TaoToken Base URLhttps://taotoken.net/api API KeyYOUR_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 CLInpx 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_sourcetaotoken_aicg_blog_endutm_contentcodex_skill_install 的模型对话页可以用来确认当前 Key 和模型是否正常避免把配置问题和 SKILL 安装问题混在一起排查。安装完成后在项目根目录启动 Codexcd your-frontend-project codex在会话里明确点名 SKILL使用 improve-animations SKILL 扫描当前代码库。如果 Codex 没有识别先确认三点是否在项目根目录启动而不是在上级目录或子目录。SKILL.md是否在 Codex 能读取的 skills 目录。当前 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_sourcetaotoken_aicg_blog_endutm_contentcodex_skill_scan 进入模型对话或控制台查看。不要把 Key 写进 Codex 的提示词里也不要让 Codex 把YOUR_API_KEY打印到日志或提交到仓库。4. 动画整改清单Codex 扫完后按这份优先级修improve-animations会给出很多建议但最终要落到代码里。下面这份清单可以作为人工复核顺序。4.1 P0性能与无障碍优先级最高的是会影响交互流畅度和可访问性的问题。动画属性只用transform和opacity。避免对width、height、top、left、margin做持续 transition。这些属性会触发布局计算列表和弹层一多就容易卡。增加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; } }不要用动画阻塞交互。按钮、输入框、菜单这类高频操作动画时长要短避免每次点击都等 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.tomlenv_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_sourcetaotoken_aicg_blog_endutm_contentcodex_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 URLhttps://taotoken.net/api API KeyYOUR_API_KEY 环境变量TAOTOKEN_API_KEY Claude Code 配置文件~/.claude/settings.json 供应商TaoToken Base URLhttps://taotoken.net/api API KeyYOUR_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真正开始扫代码。建议按这个顺序补齐先到模型对话确认当前可用模型避免model not foundhttps://taotoken.net/models/detail/chat?utm_sourcetaotoken_aicg_blog_endutm_contentcodex_skill_cta_chat再按使用强度选择 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcodex_skill_cta_plan然后到 API Keys 创建自己的 Key替换YOUR_API_KEYhttps://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentcodex_skill_cta_keys最后对照 Claude Code 文档区分 Codex 的config.toml和 Claude Code 的settings.json不要混用ANTHROPIC_*https://taotoken.net/doc/ClaudeCodeAnthropic?utm_sourcetaotoken_aicg_blog_endutm_contentcodex_skill_cta_doc回到实际动作拿到 Key 后把 Codex 的 Base URL 指向https://taotoken.net/api安装improve-animations在项目根目录启动 Codex用“只读扫描”提示词先出清单再按 P0、P1、P2 分批修。这样 Codex 消耗的每一次 Token 都落在具体文件和具体动画问题上而不是泛泛地“把界面变好看”。