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_sourcetaotoken_aicg_blog_endutm_contentskill_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/apiClaude Code 默认请求 Anthropic 官方地址。要让 TaoToken 接住请求需要改两个核心变量ANTHROPIC_BASE_URL和ANTHROPIC_AUTH_TOKEN。Base URL 固定写https://taotoken.net/api不要在后面拼/v1也不要加 UTM。UTM 只用于官网入口追踪不用于工具配置。第一步打开 TaoToken 官网 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_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_URLhttps://taotoken.net/api export ANTHROPIC_AUTH_TOKENYOUR_API_KEY export ANTHROPIC_MODELclaude-sonnet-4-5然后启动 Claude Codeclaude --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/apiAPI Key 填YOUR_API_KEYModel 填你在 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_KEYYOUR_API_KEY再次强调Claude Code 用ANTHROPIC_*Codex 用config.tomlTAOTOKEN_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查看仓库里有哪些 SKILLfind /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/afterSKILL 的价值不在代码量而在背后的判断规则。下面用常见前端组件做对照。左列是未加载 SKILL 时编程 Agent 容易生成的写法右列是加载 SKILL 后更接近设计工程标准的写法。场景未加载 SKILL 常见输出加载 SKILL 后期望输出原因入场动画transition: all .3s ease-in;transition: transform .2s ease-out, opacity .2s ease-out;入场应快速响应、缓慢停下ease-out 更自然阴影border: 1px solid #e5e7eb;box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.12);半透明阴影有层次实线边框容易显得硬hovertransform: scale(1.2);transform: translateY(-2px); 阴影变化位移比放大更克制适合按钮loading大图标无限旋转短时长 skeleton 或 opacity 过渡动效为反馈服务不应抢占注意力列表进出display: none直接切换opacitytranslateY过渡避免布局跳动和生硬闪现弹窗animation: pop .5s ease-in-out;opacity .2s ease-out, transform .2s cubic-bezier(.2,0,0,1);弹窗需要即时反馈和方向感遮罩无过渡opacity .2s ease-out;遮罩淡入能建立层级错误提示红色边框 抖动淡入 轻微位移 可访问性提示动效不应只靠颜色和抖动传达错误再给一组可复制的 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-stateclosed] { opacity: 0; transform: translateY(8px) scale(.98); }注意点不要用transition: all。它会让不必要的属性也产生动画导致性能问题和不可预测的视觉结果。入场用 ease-out离开可以用 ease-in 或更短时长。很多 Agent 会把两者写反。阴影比边框更适合做层级。边框适合分隔不适合表达悬浮。hover 的幅度要小。translateY(-2px)通常比scale(1.2)更稳。弹窗需要方向感。从触发源附近出现比从屏幕中心突然放大更自然。让 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 existsBase URL 应为https://taotoken.net/api。如果写成https://taotoken.net/api/v1Claude Code 可能拼接出错误路径。Key 去 TaoToken 控制台重新创建https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentcreate_key 。创建后更新settings.json或 CC Switch。问题三404 或 model not found。检查ANTHROPIC_MODEL是否在 TaoToken 模型列表中。不同账号、不同套餐可见模型不同。可以去模型对话页面确认模型 IDhttps://taotoken.net/models/detail/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chat 。问题四CC Switch 三件套错位。CC Switch 里通常有三项Base URL、API Key、Model。Base URL 用https://taotoken.net/apiAPI Key 用YOUR_API_KEYModel 用你在 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 PlanSKILL 扫描不要全仓库无差别进行emilkowalski/skills 里的improve-animations和find-animation-opportunities会扫描代码库。扫描范围越大发给模型的上下文越多Token 消耗越高。控制方式限定目录。只扫描src/components、src/pages不要扫描node_modules、dist、coverage。先单文件审查再目录扫描。先review-animations看一个组件确认规则生效再improve-animations看目录。要求输出 diff不要输出完整文件。完整文件会重复带入大量无关代码。限制每次输出条数。例如“最多列 10 条按优先级排序”。把重复出现的规则写进项目级提示而不是每次让模型重新推导。如果你高频用 Claude Code 执行 SKILL可以关注 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_plan 。它适合需要连续对话、多轮修改、扫描代码库的编程场景。如果只是偶尔验证一个组件直接用 API Keys 创建 Key 即可。TaoToken 在这里的角色是接住 Claude Code 请求。Claude Code 执行 SKILL 时消耗 TokenSKILL 本身不产生网络请求请求由 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 文档写配置。模型对话https://taotoken.net/models/detail/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chat先用对话验证模型是否可用贴一段 Button.tsx让它按 ease-out 阴影规则输出 diff。确认返回质量后再接入 Claude Code。Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_plan如果你要连续用 Claude Code 执行 SKILL、扫描组件、多轮修改选适合编程场景的套餐。创建 Keyhttps://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentcreate_key创建后复制 Key填入settings.json的ANTHROPIC_AUTH_TOKEN或ANTHROPIC_API_KEY。不要把 Key 提交到 Git。Claude Code 文档https://taotoken.net/doc/ClaudeCodeAnthropic?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_code_doc对照文档确认 Base URL、模型 ID、环境变量名。Base URL 用https://taotoken.net/api不要加 UTM。如果你还想回到官网入口可以从这里进https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentfinal_cta 。完整流程复述一遍# 1. 拿 Key 后配置 Claude Code export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_AUTH_TOKENYOUR_API_KEY export ANTHROPIC_MODELclaude-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 URLYOUR_API_KEY是凭证emilkowalski/skills 负责让 Claude Code 在生成 UI 时按 ease-out、阴影层级、克制 hover、弹窗方向感这些规则执行。配置一次后后续每个前端任务都能复用。
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_sourcetaotoken_aicg_blog_endutm_contentskill_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/apiClaude Code 默认请求 Anthropic 官方地址。要让 TaoToken 接住请求需要改两个核心变量ANTHROPIC_BASE_URL和ANTHROPIC_AUTH_TOKEN。Base URL 固定写https://taotoken.net/api不要在后面拼/v1也不要加 UTM。UTM 只用于官网入口追踪不用于工具配置。第一步打开 TaoToken 官网 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_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_URLhttps://taotoken.net/api export ANTHROPIC_AUTH_TOKENYOUR_API_KEY export ANTHROPIC_MODELclaude-sonnet-4-5然后启动 Claude Codeclaude --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/apiAPI Key 填YOUR_API_KEYModel 填你在 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_KEYYOUR_API_KEY再次强调Claude Code 用ANTHROPIC_*Codex 用config.tomlTAOTOKEN_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查看仓库里有哪些 SKILLfind /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/afterSKILL 的价值不在代码量而在背后的判断规则。下面用常见前端组件做对照。左列是未加载 SKILL 时编程 Agent 容易生成的写法右列是加载 SKILL 后更接近设计工程标准的写法。场景未加载 SKILL 常见输出加载 SKILL 后期望输出原因入场动画transition: all .3s ease-in;transition: transform .2s ease-out, opacity .2s ease-out;入场应快速响应、缓慢停下ease-out 更自然阴影border: 1px solid #e5e7eb;box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.12);半透明阴影有层次实线边框容易显得硬hovertransform: scale(1.2);transform: translateY(-2px); 阴影变化位移比放大更克制适合按钮loading大图标无限旋转短时长 skeleton 或 opacity 过渡动效为反馈服务不应抢占注意力列表进出display: none直接切换opacitytranslateY过渡避免布局跳动和生硬闪现弹窗animation: pop .5s ease-in-out;opacity .2s ease-out, transform .2s cubic-bezier(.2,0,0,1);弹窗需要即时反馈和方向感遮罩无过渡opacity .2s ease-out;遮罩淡入能建立层级错误提示红色边框 抖动淡入 轻微位移 可访问性提示动效不应只靠颜色和抖动传达错误再给一组可复制的 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-stateclosed] { opacity: 0; transform: translateY(8px) scale(.98); }注意点不要用transition: all。它会让不必要的属性也产生动画导致性能问题和不可预测的视觉结果。入场用 ease-out离开可以用 ease-in 或更短时长。很多 Agent 会把两者写反。阴影比边框更适合做层级。边框适合分隔不适合表达悬浮。hover 的幅度要小。translateY(-2px)通常比scale(1.2)更稳。弹窗需要方向感。从触发源附近出现比从屏幕中心突然放大更自然。让 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 existsBase URL 应为https://taotoken.net/api。如果写成https://taotoken.net/api/v1Claude Code 可能拼接出错误路径。Key 去 TaoToken 控制台重新创建https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentcreate_key 。创建后更新settings.json或 CC Switch。问题三404 或 model not found。检查ANTHROPIC_MODEL是否在 TaoToken 模型列表中。不同账号、不同套餐可见模型不同。可以去模型对话页面确认模型 IDhttps://taotoken.net/models/detail/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chat 。问题四CC Switch 三件套错位。CC Switch 里通常有三项Base URL、API Key、Model。Base URL 用https://taotoken.net/apiAPI Key 用YOUR_API_KEYModel 用你在 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 PlanSKILL 扫描不要全仓库无差别进行emilkowalski/skills 里的improve-animations和find-animation-opportunities会扫描代码库。扫描范围越大发给模型的上下文越多Token 消耗越高。控制方式限定目录。只扫描src/components、src/pages不要扫描node_modules、dist、coverage。先单文件审查再目录扫描。先review-animations看一个组件确认规则生效再improve-animations看目录。要求输出 diff不要输出完整文件。完整文件会重复带入大量无关代码。限制每次输出条数。例如“最多列 10 条按优先级排序”。把重复出现的规则写进项目级提示而不是每次让模型重新推导。如果你高频用 Claude Code 执行 SKILL可以关注 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_plan 。它适合需要连续对话、多轮修改、扫描代码库的编程场景。如果只是偶尔验证一个组件直接用 API Keys 创建 Key 即可。TaoToken 在这里的角色是接住 Claude Code 请求。Claude Code 执行 SKILL 时消耗 TokenSKILL 本身不产生网络请求请求由 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 文档写配置。模型对话https://taotoken.net/models/detail/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chat先用对话验证模型是否可用贴一段 Button.tsx让它按 ease-out 阴影规则输出 diff。确认返回质量后再接入 Claude Code。Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_plan如果你要连续用 Claude Code 执行 SKILL、扫描组件、多轮修改选适合编程场景的套餐。创建 Keyhttps://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentcreate_key创建后复制 Key填入settings.json的ANTHROPIC_AUTH_TOKEN或ANTHROPIC_API_KEY。不要把 Key 提交到 Git。Claude Code 文档https://taotoken.net/doc/ClaudeCodeAnthropic?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_code_doc对照文档确认 Base URL、模型 ID、环境变量名。Base URL 用https://taotoken.net/api不要加 UTM。如果你还想回到官网入口可以从这里进https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentfinal_cta 。完整流程复述一遍# 1. 拿 Key 后配置 Claude Code export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_AUTH_TOKENYOUR_API_KEY export ANTHROPIC_MODELclaude-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 URLYOUR_API_KEY是凭证emilkowalski/skills 负责让 Claude Code 在生成 UI 时按 ease-out、阴影层级、克制 hover、弹窗方向感这些规则执行。配置一次后后续每个前端任务都能复用。
