1. 从一张示意图到一台机器anatomy 想解决的真实痛点写技术文档的人大概都经历过这种循环给「令牌桶限流」配图画一个桶、几个箭头、几行注释画完自己都觉得像流程图模板给「缓存键命中」配图画一个方框套方框读者看完还是不知道命中那一刻发生了什么。框图加箭头这套语言天生只能表达「谁连着谁」表达不了「它怎么动起来」。anatomy 这个项目换了个思路不画框图直接给概念造一台机器机器的运作本身就是解释。anatomy 是一个 Claude Code 技能Skill装完之后在对话里说一句「解释一下令牌桶限流」它会先发明一台能对应这个概念的机械装置再把这台装置画成可交互的等轴测图纸。悬停能拨动零件按键能点火读数会跟着零件动。它四天拿到 3,719 星靠的不是模型多强而是把「物体即解释」这条思路落成了一条可审计的几何管线。它适合谁写技术文档的工程师、做开发者教育的人、需要给抽象概念配可交互插图的团队。它不适合谁想拿它替代 CAD 画正式工程图的人几何是示意化的管路可能接错端口事实正确性最后一步仍然靠人复核。这篇文章不复述它的星数故事而是带你在本地用 Claude Code 配合 SKILL.md 和 Node 环境把同类项目复现出来可复制的 SKILL.md 配置、Node 启动命令、WebGL 渲染验证步骤以及通过 TaoToken 统一 Key 调用模型的接入示例和报错排查清单。核心检索词先摆出来anatomy 是一个用 AI 生成可交互 WebGL 机器来解释抽象概念的 Claude Code 技能SKILL.md 是它的行为说明书Node 20.10 是它的运行底座WebGL 着色器负责画火焰、水、光这类线条画不出的东西。下面按「先跑通、再理解、后排查」的顺序来。2. TaoToken 统一 Key 前置让 Claude Code 稳定调用模型复现 anatomy 这类技能第一步不是写代码而是让 Claude Code 能稳定调到模型。Claude Code 默认走 Anthropic 官方通道但很多人在本地会遇到两个问题一是多项目多 Key 管理混乱二是切换模型时环境变量改来改去。TaoToken 的作用是把这些收敛成一个统一 Key通过一个 Base URL 接入Claude Code、Cline、Codex 都能复用同一套凭证。先说清楚它是什么TaoToken 是一个模型 API 聚合接入服务提供统一的 Base URL 和 API Key让你在 Claude Code 里通过环境变量指向它就能调用背后的模型。官网在 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 端点是 https://taotoken.net/api 注意 API 地址不带 UTM 参数。接入 Claude Code 的关键是三件套Base URL、API Key、Model ID。这三样缺一不可后面 §3 的配置片段和 §5 的排查清单都围绕它们展开。你需要先去控制台创建一个 Key控制台入口在 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content Key 管理页在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。创建完把 Key 复制出来形如sk-开头的一串字符不要提交到 Git。为什么强调「统一 Key」因为 anatomy 的复现流程里Claude Code 要读 SKILL.md、要跑 Node 脚本、要起 headless Chrome 做自检中间可能切换不同模型档位。如果每个环节一套 Key排错时你根本分不清是 Key 失效还是模型不对。统一 Key 之后401 就是 401模型不存在就是模型不存在问题边界清晰。这里要提醒一句TaoToken 是合规的 API 接入服务不是所谓「中转」。你通过它调用模型走的是标准 API 协议Claude Code 侧看到的仍然是标准的 Anthropic 兼容接口。配置时只改 Base URL 和 Key不要动其他协议字段。模型选择上复现 anatomy 这类需要长上下文和代码生成的任务建议用 Claude 系列里支持长上下文的档位。具体 Model ID 以你控制台里列出的为准常见形如claude-sonnet-4-5这类标识。如果你要长期跑编码和 Agent 任务可以看 Coding Plan 页面 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 按用量规划比临时充值更省心。想先验证模型通不通用模型对话页 https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 发一句话最快。3. 可复制配置SKILL.md、settings.json 与 Node 启动命令这一节是全文最该动手的部分。我把它拆成三块Claude Code 的 settings 配置、anatomy 风格的 SKILL.md、以及 Node 侧的启动与审计命令。每一块都给可复制的片段路径和字段名保持一致。3.1 Claude Code settings.json 配置片段Claude Code 读取环境变量的方式最稳的是写进 settings 文件。在项目根目录创建.claude/settings.json内容如下{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: sk-你的TaoToken密钥, ANTHROPIC_MODEL: claude-sonnet-4-5 }, permissions: { allow: [ Bash(node:*), Bash(npm:*), Read, Write, Edit ] } }三件套对应关系ANTHROPIC_BASE_URL是 Base URL填https://taotoken.net/apiANTHROPIC_API_KEY是你的 KeyANTHROPIC_MODEL是 Model ID。permissions.allow里放行node和npm是因为 anatomy 的审计脚本要靠 Node 跑不放行的话 Claude Code 每次执行都会被拦。如果你用 Codex配置落在~/.codex/auth.json结构不同但三件套一样{ OPENAI_BASE_URL: https://taotoken.net/api, OPENAI_API_KEY: sk-你的TaoToken密钥, model: claude-sonnet-4-5 }注意 Codex 的字段名是OPENAI_前缀但 Base URL 仍然指向 TaoToken 的 API 端点。Cline 或 MCP 场景下在 MCP 配置里同样填这三样Base URL 用https://taotoken.net/api不要带任何查询参数。3.2 SKILL.md 配置片段anatomy 的核心思路写在 SKILL.md 里只有一句「物体即解释」。你要复现同类项目SKILL.md 至少要让 Claude Code 明白四件事概念先于几何、零件清单先于绘制、审计必须非零退出、失败形态要自检。下面是一份可用的骨架--- name: anatomy-like description: 用可交互等轴测机器解释抽象概念 --- # 物体即解释 ## 工作顺序 1. 先确定要解释的概念写出它的运作机制。 2. 发明一台能对应这个机制的机器列出零件清单。 3. 零件少于 40 个不算完工回到第 2 步。 4. 几何绘制放在零件清单确认之后。 ## 绘制规则 - 实心零件按画家算法从后往前画。 - 四个色调按受光面分配顶面最亮左面次之右面再次底面最暗。 - 火、水、光这类线条画不出的东西加一层 WebGL 着色器。 - 着色器跑在前后两张 SVG 中间同一个等轴测相机。 ## 审计规则 - 每个零件记录真实三维形状。 - 对屏幕上每一对重叠零件做射线投射算出谁在前。 - 深度键由证明得出不靠目测微调。 - 间隙、端点悬空、弯折自叠、锥度抖动、深度序任何一项不过直接非零退出。 ## 失败形态 - 太抽象堆叠色块没人看得懂。 - 太单调大板子没有细节可发现。 - 解法都是造一台认得出来的真机器。这份 SKILL.md 放在.claude/skills/anatomy-like/SKILL.mdClaude Code 启动时会自动加载。注意 frontmatter 里的name和description要写清楚否则技能列表里认不出来。3.3 Node 启动与审计命令anatomy 的绘图套件零依赖只用 Node 内置模块最低 Node 20.10。先确认版本node -v # 期望输出 v20.10.0 或更高如果低于 20.10用 nvm 切一下nvm install 20.10 nvm use 20.10项目结构建议这样组织mkdir -p anatomy-like/kit anatomy-like/figures cd anatomy-like npm init -ykit/audit.mjs是审计入口核心逻辑是射线投射算深度序。一个最小可跑的版本// kit/audit.mjs import { readFileSync } from node:fs; const parts JSON.parse(readFileSync(./figures/parts.json, utf8)); function raycast(a, b) { // 简化版按包围盒中心 z 值判断前后 return a.z b.z ? a : b; } function settle(list) { const sorted [...list].sort((x, y) x.z - y.z); return sorted; } function auditOrExit(list) { const errors []; for (let i 0; i list.length; i) { for (let j i 1; j list.length; j) { const front raycast(list[i], list[j]); if (!front) errors.push(深度序冲突: ${list[i].id} vs ${list[j].id}); } } if (errors.length) { console.error(errors.join(\n)); process.exit(1); } console.log(审计通过); } auditOrExit(settle(parts));启动命令node kit/audit.mjs审计通过输出审计通过任何一项不过直接非零退出。这就是 anatomy 那条「机器自证清白」的管线的最小复现。真实项目里raycast要做完整的射线与三角形求交这里用包围盒中心 z 值示意你可以在parts.json里给每个零件补上真实三维形状。4. 验证请求WebGL 渲染与模型调用成功结果配置写完得验证两件事模型调用通不通WebGL 渲染出不出画面。分开验证出问题好定位。4.1 验证模型调用先用模型对话页发一句话确认 Key 有效。打开 https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 输入「用一句话解释令牌桶限流」能正常返回就说明 Key 和 Base URL 没问题。再在 Claude Code 里验证。启动 Claude Codeclaude输入/status看当前模型和 Base URL 是否指向 TaoToken。然后发一句解释一下令牌桶限流先发明一台机器再列出零件清单。如果 Claude Code 开始输出机器设计和零件清单说明 SKILL.md 加载成功、模型调用正常。这一步的期望结果是它不会直接画框图而是先给你一台机器的描述比如「一个带阀门的桶阀门开度对应令牌生成速率」。4.2 验证 WebGL 渲染anatomy 的 WebGL 着色器跑在前后两张 SVG 中间同一个等轴测相机。验证渲染需要起一个本地页面。先写一个最小的 HTML!DOCTYPE html html head meta charsetutf-8 titleanatomy-like 渲染验证/title style body { margin: 0; background: #1a1a1a; } canvas { display: block; width: 100vw; height: 100vh; } /style /head body canvas idgl/canvas script typemodule const canvas document.getElementById(gl); const gl canvas.getContext(webgl); if (!gl) { document.body.innerHTML p stylecolor:#fffWebGL 不可用/p; throw new Error(WebGL not supported); } canvas.width window.innerWidth; canvas.height window.innerHeight; gl.clearColor(0.1, 0.1, 0.1, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); console.log(WebGL 上下文创建成功渲染器:, gl.getParameter(gl.RENDERER)); /script /body /html用 Node 起一个静态服务npx serve . -l 3000浏览器打开http://localhost:3000按 F12 看控制台。期望输出类似WebGL 上下文创建成功渲染器: WebKit WebGL如果控制台报WebGL not supported说明浏览器没开硬件加速或者 headless 模式没配好。anatomy 的自检环节要一个 Chromeheadless 模式下要显式开启 WebGLgoogle-chrome --headless --disable-gpu --enable-webgl --no-sandbox \ --screenshotout.png http://localhost:3000--enable-webgl是关键不加的话 headless Chrome 默认关掉 WebGL截图会是空白。4.3 验证审计管线把 §3.3 的parts.json填上几个零件跑审计node kit/audit.mjs期望输出审计通过。故意把两个零件的 z 值改成一样再跑一次期望输出深度序冲突并返回非零退出码。用echo $?确认退出码是 1。这一步验证的是「审计看得见几何看不见标记」这条边界审计能证明深度序但证明不了你的机器画得像不像。5. 常见报错排查清单401、local proxy failed、reading choices、OAuth复现过程中最容易卡住的几个报错我按出现频率排一下每个都给定位方法和修复动作。5.1 401 Unauthorized报错长这样API Error: 401 Unauthorized - invalid api key定位Key 没填对或者 Base URL 和 Key 不匹配。先检查.claude/settings.json里的ANTHROPIC_API_KEY是不是sk-开头、有没有多余空格。再去 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 确认这个 Key 还在有效期内。修复重新复制 Key注意不要带上换行。如果用的是环境变量而不是 settings 文件确认echo $ANTHROPIC_API_KEY输出正确。三件套里 Base URL 必须是https://taotoken.net/api多一个斜杠或少一个/api都会 401。5.2 local proxy failed报错长这样Error: local proxy failed to connect定位Claude Code 或 Codex 在本地起了代理层代理层连不上上游。常见原因是 Base URL 写成了带路径的形式比如https://taotoken.net/api/v1多出来的/v1让代理层拼错地址。修复Base URL 严格用https://taotoken.net/api不要加/v1或任何后缀。如果你在 Codex 的auth.json里配字段名是OPENAI_BASE_URL值同样是这个。改完重启 Claude Code代理层会重新读配置。5.3 reading choices 报错报错长这样TypeError: Cannot read properties of undefined (reading choices)定位模型返回体结构不对通常是 Model ID 写错了上游返回了错误对象而不是标准的 choices 数组。检查ANTHROPIC_MODEL是不是控制台里列出的有效 ID。修复去控制台确认 Model ID 拼写常见错误是把claude-sonnet-4-5写成claude-sonnet-4.5或claude-4-5-sonnet。改完在模型对话页发一句话验证通了再回 Claude Code。5.4 OAuth 相关报错报错长这样OAuth token expired or invalid定位Claude Code 默认走 OAuth 登录你配了 API Key 之后它可能还在尝试 OAuth 通道。两者冲突时优先报 OAuth 错。修复在 settings 里显式声明用 API Key不要同时保留 OAuth 凭证。检查~/.claude/下有没有残留的 OAuth token 文件有的话移走。然后重启 Claude Code用/status确认当前走的是 API Key 通道。5.5 WebGL 相关报错报错长这样WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost定位headless Chrome 没开 WebGL或者显存不够。anatomy 的 3D 模式在 380 个零件压测时桌面约 20 帧手机档 13 到 15 帧性能本来就紧。修复headless 模式加--enable-webgl --disable-gpu或者改用有头模式跑自检。零件数先降到 40 个以内验证管线再逐步加。3D 全角度审计一轮要二十三分钟别在验证阶段就跑全量。5.6 审计非零退出报错长这样深度序冲突: part-07 vs part-12定位两个零件在屏幕上重叠射线投射算不出谁在前。这是审计的正常行为不是 bug。修复检查这两个零件的三维形状有没有真实记录。anatomy 的做法是每个零件记录真实三维形状settle 函数对每一对重叠零件做射线投射。如果你的parts.json里零件只有二维坐标补上 z 值和包围盒。补完再跑直到输出审计通过。6. 把 anatomy 思路接进你的文档工作流跑通之后真正有价值的是把它接进日常。我的用法很明确文档里最难讲的概念各配一台机器从 Figure 档试起3D 模式等它出 beta 再碰。Figure 档四到八十个零件约半小时到九十分钟这个成本对一篇技术文档是可接受的。具体操作上先让 Claude Code 读你的概念输出零件清单你确认清单合理再让它画。零件少于四十个不算完工这条规则要守住否则很容易退化成堆叠色块。审计脚本每次改完几何都跑一遍非零退出就回去修别靠肉眼微调。模型调用侧统一 Key 的好处这时候体现出来你可以在 Claude Code 里切不同档位跑不同环节Key 和 Base URL 不用动。长期跑编码和 Agent 任务的话Coding Plan 页面 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 有按用量的方案比临时充值好规划。接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content Claude Code 专项说明在 https://taotoken.net/ClaudeCodeAnthropic?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 配置字段有疑问先翻这两处。最后留一个我踩过的坑headless Chrome 自检时--enable-webgl和--disable-gpu要一起加只加一个会出各种奇怪报错。还有审计脚本的process.exit(1)一定要保留去掉之后 CI 里审计失败会被当成通过几何问题就漏到线上了。