1. 从 Claude Code 的视觉小错切入先把 Base URL 接对如果你正在用 Claude Code 生成前端界面先别急着让它直接产出页面。更稳的流程是先到 TaoToken 官网 拿一个 Key再把 Claude Code 的 Base URL 指向https://taotoken.net/api。这样 Claude Code 在执行emilkowalski/skills里的 SKILL 时模型调用会走 TaoTokenToken 消耗也能在控制台统一看。很多视觉细节问题不是 Claude Code 不会写组件而是它在动画、阴影、边框、hover 反馈这些地方缺少“设计规则层”。最常见的就是入场动画用了ease-in弹窗从scale(0)弹出来卡片阴影只有一层0 1px 2px分割线堆得到处都是过渡写成了transition: all .3s。单看每一处都能运行放在一起就像后台原型。emilkowalski/skills的价值是把一批前端设计经验整理成 Claude Code 可读、可执行的本地说明TaoToken 负责让 Claude Code 真正有模型能力去读规则、扫代码、出 diff。两者不是替代关系一个是审美约束一个是调用通道。下面按可复现的顺序走拿 Key、配 Base URL、装 SKILL、用 SKILL 审查组件、最后排障。2. emilkowalski/skills 解决的不是“组件不会写”而是“细节没有判据”这套技能包不是一个 npm 组件也不是一个跑起来就出结果的工具。它更像一组给编程 Agent 看的规则文件每个 SKILL 负责一类判断。Claude Code、Codex 这类支持 SKILL 机制的 Agent 装上之后在处理界面任务时就能参考这些规则从“能跑就行”往“看着舒服”靠拢。里面常见的 SKILL 可以这样分SKILL作用适合什么时候叫它emil-design-eng主技能以动画为主也含部分设计建议新写弹窗、抽屉、Toast、按钮反馈时review-animations按严格标准审查动画哪里不对已有组件动画看着别扭但说不上来improve-animations扫描代码库给出排好优先级的改进方案接手老项目动画散落各处find-animation-opportunities找出真正值得加动效的地方也告诉你哪些不该加产品经理说“加点动效”时animation-vocabulary用准确术语描述动画让模型更懂你你只会说“丝滑一点”“高级一点”时apple-design把苹果 WWDC 的界面与流畅动效原则转成 Web 版本做移动端 Web、PWA、手势交互时pick-ui-library让模型基于可信库选型而不是手搓 toast需要选型、避免装维护差的包时关键点在于这些 SKILL 本身不消耗 Token它们是本地 Markdown 规则。真正消耗 Token 的动作是 Claude Code 读取这些规则、扫描你的组件代码、分析问题、生成修改建议和 diff。所以你要做的第一件事不是装 SKILL而是先让 Claude Code 能正常调用模型。否则 SKILL 装得再全也只是躺在目录里的文档。3. 先准备 TaoToken拿 Key、认清 Base URL、别把官网 UTM 和 API 地址混了第一步是拿 Key。打开 TaoToken 官网进入控制台创建 API Key。创建后你会拿到类似sk-...的字符串。本文统一用占位符YOUR_API_KEY表示实际配置时替换成你自己的 Key。第二步是认清两个地址官网入口https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_content...这是给人点的带 UTM 参数用于统计来源。API Base URLhttps://taotoken.net/api这是给 Claude Code、Codex 这类工具填的不加 UTM也不要自己在后面拼/v1或奇怪路径。按产品事实工具配置里就填https://taotoken.net/api。第三步是准备模型 ID。Claude Code 需要知道用哪个模型。你可以在 TaoToken 的模型对话页或 Claude Code 文档里找当前可用的模型 ID不要凭记忆猜。配置里用YOUR_CLAUDE_CODE_MODEL_ID占位。如果你只是先验证 SKILL 效果可以先在模型对话里试 prompt如果要长期在项目里让 Claude Code 反复读 SKILL、扫组件、出 diff就考虑 Coding Plan。这个顺序后面文末会再给一遍。4. Claude Code 可复制配置settings.json、环境变量与 CC Switch 三件套Claude Code 的配置有两种常用方式写进settings.json或者用环境变量临时启动。推荐项目级或用户级settings.json稳定且可复用。4.1 用户级 settings.json路径通常是~/.claude/settings.json。如果文件不存在就新建内容如下{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: YOUR_API_KEY, ANTHROPIC_MODEL: YOUR_CLAUDE_CODE_MODEL_ID } }注意几点JSON 不支持注释不要把说明文字写进去。ANTHROPIC_AUTH_TOKEN填 TaoToken 创建出来的 Key。ANTHROPIC_MODEL填控制台或文档里给出的 Claude Code 可用模型 ID。Key 不要提交到 Git不要放进公开仓库。4.2 项目级 settings.json如果团队想统一项目配置可以在项目根目录建.claude/settings.json{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: YOUR_API_KEY, ANTHROPIC_MODEL: YOUR_CLAUDE_CODE_MODEL_ID } }但项目级配置容易把 Key 带进仓库建议只放非敏感字段Key 用本机环境变量注入。更稳的方式是项目级只写 Base URL 和模型Key 放在个人用户级配置或系统环境变量里。4.3 环境变量临时验证如果你只想在当前终端会话里试一次可以这样export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_AUTH_TOKENYOUR_API_KEY export ANTHROPIC_MODELYOUR_CLAUDE_CODE_MODEL_ID然后重启 Claude Code或者在当前终端里重新打开 Claude Code。验证时可以让它简单解释一个文件确认请求能通。4.4 CC Switch 三件套怎么填如果你用 CC Switch 管理 Claude Code 供应商核心三件套是 Base URL、API Key、默认模型。供应商名只是备注可以写成 TaoToken。供应商名称TaoToken Base URLhttps://taotoken.net/api API KeyYOUR_API_KEY 默认模型YOUR_CLAUDE_CODE_MODEL_ID这里特别提醒CC Switch 如果管的是 Claude Code就填ANTHROPIC_*对应的这套。如果你同时用 Codex不要把这套ANTHROPIC_*复制到 Codex 配置里Codex 走config.toml后面单独说。5. 安装 emilkowalski/skills让 Claude Code 在 UI 任务里自动加载规则Claude Code 支持 SKILL 机制后安装这类规则包通常可以走 skills CLI。可复现命令如下npx skills add emilkowalski/skills执行后按交互提示选择目标 Agent比如 Claude Code再选择你需要的 SKILL。不要一次全装也可以前端项目常用的是emil-design-eng、review-animations、improve-animations、find-animation-opportunities、animation-vocabulary、apple-design、pick-ui-library。如果你希望只在当前项目生效先进入项目根目录再执行cd your-project npx skills add emilkowalski/skills安装后检查项目级技能目录ls -la .claude/skills如果希望全机器所有项目都能用检查用户级目录ls -la ~/.claude/skills如果当前环境的 skills CLI 不可用也可以手动放置把对应 SKILL 目录放到.claude/skills/skill-name/每个技能目录里应包含SKILL.md。目录名保持小写短横线比如emil-design-eng、review-animations。不要随意改SKILL.md里的 name 和 descriptionClaude Code 触发技能时会读这些信息。装完后最稳的调用方式是显式点名。比如请使用本地已安装的 emil-design-eng 和 review-animations 两个 SKILL。 只审查 src/components/Dialog.tsx 和 src/components/Toast.tsx。 按以下顺序输出 1. 找出所有动画、阴影、边框、hover 细节问题 2. 给出 unified diff 3. 给出优先级 P0/P1/P2 4. 说明为什么这样改引用 SKILL 中的规则名。 不要重构业务逻辑不要新增依赖。这样 Claude Code 会先读技能规则再扫你指定的文件最后输出可执行修改。Token 消耗主要发生在读文件、分析代码和生成 diff 这一步。限定文件范围能显著降低成本。6. 视觉细节对照表把“不好看”翻译成 Claude Code 能执行的具体修改SKILL 最大的作用是把“感觉不对”拆成可验证的规则。下面这张对照表可以直接放进 prompt也可以当 code review checklist。场景常见错误更稳的规则Claude Code 提示模板入场动画ease-in、linear优先ease-out或短促的自定义 cubic-bezier“入场动画改为 ease-out时长 160-220ms”退出动画ease-out拖沓可用ease-in时长更短“退出动画用 ease-in控制在 120-160ms”过渡属性transition: all .3s只过渡transform、opacity、filter等“禁止 transition all列出需要过渡的属性”阴影实线边框加浅灰背景分层半透明阴影减少硬边框“用两层 rgba 阴影替代 1px solid 边框”弹窗scale(0)到scale(1)scale(.96)opacity 0到 1“弹窗入场从 .96 开始不要从 0 开始”hover同时改颜色、大小、位移小幅 transform 或阴影变化“hover 只改 transform 和 box-shadow”动效机会每个元素都加动画只给状态切换、空间关系、操作反馈加“列出值得加动效的 3 处并列出不该加的 3 处”库选型手搓 toast、装无人维护包用成熟库避免重复造轮子“用 pick-ui-library 规则评估现有依赖”几个背后的原因最好也在 prompt 里让 Claude Code 说出来。入场动画用ease-out是因为它开始快、结束慢符合元素进入视野时的减速感退出用ease-in是因为元素离开时应该加速消失不要拖泥带水。transition: all的问题是它会隐式过渡许多不必要属性容易掉帧也容易产生意外布局抖动。阴影比实线边框更高级是因为阴影能表达层级和空间而边框容易把界面切碎。scale(0)弹窗会显得廉价是因为真实世界物体很少从无到有地“炸开”从.96到1更像从远处进入。这些规则不是要 Claude Code 死记硬背而是让它在你给出“弹窗不够高级”“按钮反馈太硬”这类模糊描述时有一组可执行的判据。7. 实战让 Claude Code 用 SKILL 审查弹窗与 Toast假设你有一个Dialog.tsx当前 CSS 是这样的.dialog { transition: all .3s ease-in; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; } .dialog-enter { transform: scale(0); opacity: 0; } .dialog-enter-active { transform: scale(1); opacity: 1; }这段代码能跑但视觉上容易显得生硬。让 Claude Code 调用review-animations和emil-design-eng后比较理想的修改方向是.dialog { border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 12px 32px -8px rgba(16, 24, 40, .18); transition: opacity .18s ease-out, transform .22s cubic-bezier(.22, 1, .36, 1); } .dialog-enter { opacity: 0; transform: scale(.96) translateY(4px); } .dialog-enter-active { opacity: 1; transform: scale(1) translateY(0); }你可以让 Claude Code 输出的不仅是代码还包括验证步骤请基于上面的修改给我一份浏览器验证清单 1. 打开 Chrome DevTools 的 Animations 面板确认入场动画是 ease-out 且不超过 250ms 2. 确认退出动画比入场更快 3. 确认没有 transition all 4. 确认弹窗没有从 scale(0) 开始 5. 确认阴影在深色和浅色背景上都不显脏。如果项目里有很多动画不要一上来就全仓库扫描。先用improve-animations让它列出候选文件再挑 P0 组件逐个改。这样做有两个好处Token 消耗可控diff 也更容易 review。8. Codex 与 CC Switch配置要分家config.toml 不要套 ANTHROPIC_*很多开发者同时用 Claude Code 和 Codex。这里必须分清楚Claude Code 用settings.json/ANTHROPIC_*Codex 用config.toml。不要把ANTHROPIC_BASE_URL、ANTHROPIC_AUTH_TOKEN塞进 Codex 配置Codex 不认这套。Codex 的配置示例model_provider taotoken model YOUR_CODEX_MODEL_ID [model_providers.taotoken] name TaoToken base_url https://taotoken.net/api env_key TAOTOKEN_API_KEY然后在终端里注入 Keyexport TAOTOKEN_API_KEYYOUR_API_KEY注意base_url仍然是https://taotoken.net/api不要加 UTM也不要写成 Claude Code 的ANTHROPIC_*变量。Codex 读取的是TAOTOKEN_API_KEY这是为了避免和 Claude Code 的 Key 混在一起。如果你用 CC Switch 管理多个供应商建议建两个条目Claude Code 条目Base URLhttps://taotoken.net/apiAPI KeyYOUR_API_KEY模型YOUR_CLAUDE_CODE_MODEL_ID。Codex 条目在config.toml里写model_provider taotokenenv_key TAOTOKEN_API_KEY模型YOUR_CODEX_MODEL_ID。这样切换时不会串配置。尤其不要出现“Claude Code 正常Codex 401”的情况大多数时候就是变量名套错了。9. 常见排障401、404、SKILL 不触发、模型名错、Token 消耗异常9.1 401 Unauthorized优先检查四件事YOUR_API_KEY是否替换成了真实 Key。Key 是否复制完整前后有没有空格或换行。ANTHROPIC_AUTH_TOKEN是否在 Claude Code 能读到的环境里生效。改完settings.json后是否重启了 Claude Code。临时验证可以看环境变量是否存在但不要把完整 Key 打印到公共日志echo ${ANTHROPIC_BASE_URL} echo ${ANTHROPIC_AUTH_TOKEN:0:6}...9.2 404 或路径错误Base URL 必须按工具配置填https://taotoken.net/api。常见错误是写成了官网首页带了一串 UTM 参数多写了/v1少写了/api末尾多了斜杠后又拼了重复路径。官网链接用于打开控制台API 地址用于工具配置这两个不要混。9.3 模型名不对ANTHROPIC_MODEL不要凭感觉写。去 TaoToken 官网 的模型对话页或 Claude Code 文档里复制当前可用模型 ID。模型名错时常见表现是 400、404 或提示无法识别模型。9.4 SKILL 不触发先确认安装位置ls -la .claude/skills ls -la ~/.claude/skills再看SKILL.md是否存在目录名是否和技能名一致。最后在 prompt 里显式点名比如“使用 review-animations 审查这个文件”。显式点名比依赖自动触发稳。9.5 Token 消耗异常SKILL 本身不耗 Token。消耗来自模型读规则、读代码、分析、生成修改。控制方法只指定要审查的文件不要全仓库先让模型列候选问题再让它改大项目分组件审查用improve-animations时先出优先级不要一次改几十个文件。如果只是试 prompt可以先在模型对话里验证如果每天都要在 Claude Code 里跑 SKILL再考虑 Coding Plan。10. 文末 CTA按这个顺序走一遍如果你准备把 Claude Code emilkowalski/skills跑起来建议按下面路径走先用模型对话验证 SKILL prompt 效果TaoToken 模型对话如果日常高频使用看 Coding Plan 是否适合TaoToken Coding Plan创建并管理你的 API KeyTaoToken API Keys按文档把 Claude Code 的 Base URL 配到https://taotoken.net/apiClaude Code 文档配置时记住三句话官网拿 Key工具里填https://taotoken.net/apiSKILL 本地安装、调用时消耗 Token。把这三步做对Claude Code 写前端时才不只是“功能能跑”而是能在动画、阴影、边框、hover 反馈这些细节上少犯低级错误。