
1. 先把 Key 和 Base URL 钉死Claude Design 复现的第一步如果你打算在 Claude Code 里用 Claude Design 生成 UI 原型、用 Claude Slides 产出一份设计评审幻灯片再让 Claude Docs 把仓库里的 RFC 摘要出来那么第一件要做的事不是写 prompt而是去 TaoToken 官网https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_design_repro_intro拿一个可用的 Key并把 Claude Code 的 API Base URL 指向https://taotoken.net/api。这一步不做后面所有的复现讨论都是空谈——你看到的报错、看到的中断、看到的模型记不住仓库文件八成不是工具能力问题而是接入层没对齐。Claude Design、Claude Slides、Claude Docs 现在可以在 Claude Code 内被调用用户可以让它们基于仓库中的真实文件和 RFC 生成设计评审用的幻灯片或 UI 原型产出之后还能继续编辑、在对话里追加修改、并把结果链接分享出去。这段能力描述听起来很顺但落到工程实践里真正决定能不能复现的变量只有四个请求是否真的打到了能提供对应模型能力的端点认证凭据是否有效且没有过期Claude Code 是否真的把仓库文件读进了上下文而不是凭记忆瞎编输出是否落在可版本化的文件里而不是只留在对话窗口。第 3 点靠 prompt 工程解决第 4 点靠工作流解决而第 1、2 点必须靠配置解决。本文按可复现性视角来拆先给出可复制的 Key 设置片段和配置文件再给出 UI 原型复现命令最后用一张输出对照表来判断——同一份 RFC、同一个仓库、同一个 prompt跑三次能不能得到结构一致的产物。这篇文章不讨论工具本身的营销话术只讨论一件事换掉供应商之后这条链路还能不能稳定跑通。2. 接入准备Key 从哪里来Claude Code 从哪里装先把两个前置条件补齐一个是凭据一个是客户端。凭据部分直接到 TaoToken 官网https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_design_repro_key完成账号流程然后在 API Keys 页面创建一个新 Key。Key 只在创建时完整展示一次建议先粘到本地密码管理器里再写进配置文件。不要把它直接提交进 Git 仓库这一点后面第 9 节会再展开。客户端部分Claude Code 是命令行工具用 npm 全局安装即可# 建议 Node.js 18 以上 node -v # 全局安装 Claude Code CLI npm install -g anthropic-ai/claude-code # 验证安装 claude --version装完之后先别急着跑任务先用一个最小请求确认链路是通的。最小验证的做法是进到任意一个空目录启动 Claude Code然后问一个不需要读文件的问题比如用一句话说明你应该读取哪些目录。如果这一步就报 401 或连接超时说明 Key 或 Base URL 有问题不用往下走。这里要强调一个容易被忽略的细节Claude Code 的配置是分层的。用户级配置在~/.claude/settings.json项目级配置在项目根目录的.claude/settings.json。团队协作时项目级配置适合放非敏感的参数比如模型名、超时而 Key 这种敏感信息应该走用户级配置或环境变量。两者同时存在时项目级会覆盖用户级。搞清楚这一点你才不会遇到我明明改了配置但没生效的困惑。3. Claude Code 的 settings.json 与 ANTHROPIC_* 配置片段Claude Code 读取的是ANTHROPIC_*这一组变量。把下面这段写进~/.claude/settings.json是本文所有实验的起点{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: YOUR_API_KEY, ANTHROPIC_MODEL: 填入你在 TaoToken 控制台实际可用的模型名, ANTHROPIC_SMALL_FAST_MODEL: 填入你在 TaoToken 控制台实际可用的轻量模型名 }, permissions: { allow: [ Read, Glob, Grep ] } }几点说明ANTHROPIC_BASE_URL填https://taotoken.net/api注意不要在后面多加/v1也不要漏掉https。ANTHROPIC_AUTH_TOKEN填你在控制台创建的 Key占位符统一用YOUR_API_KEY。模型名必须以你在控制台里实际看到的为准不要照抄网上别人的配置。模型名写错典型表现是 404 或model not found而不是 401。permissions.allow里先只放开读类工具等确认链路稳定后再按需放开写文件的能力。如果你不想动 settings.json也可以用环境变量的方式临时验证export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_AUTH_TOKENYOUR_API_KEY # 确认变量已生效 echo $ANTHROPIC_BASE_URL # 启动 claude环境变量方式的优点是即开即用缺点是换个终端窗口就没了不适合长期使用。正式用还是建议落到 settings.json。这里必须单独提醒一句ANTHROPIC_*是给 Claude Code 和 Anthropic 系 SDK 用的。不要把这组变量原样搬去配 CodexCodex 读的是完全不同的配置文件两者混用只会让你在排障时多绕两小时。具体见下一节。4. Codex 的 config.toml 与 CC Switch 的三件套很多团队是 Claude Code 和 Codex 同时在用的这时候配置必须分清楚。Codex 走的是config.toml典型结构如下# ~/.codex/config.toml model 填入实际可用模型名 model_provider taotoken [model_providers.taotoken] name TaoToken base_url https://taotoken.net/api env_key TAOTOKEN_API_KEY wire_api chat注意这里的 key 名是TAOTOKEN_API_KEY和 Claude Code 的ANTHROPIC_AUTH_TOKEN是两套东西。在 shell 里对应设置export TAOTOKEN_API_KEYYOUR_API_KEY如果你用的是 CC Switch 这类供应商切换工具它的本质并不神秘——它做的事情就是帮你改写三份配置文件组件典型配置文件关键字段Claude Code~/.claude/settings.jsonANTHROPIC_BASE_URL、ANTHROPIC_AUTH_TOKENCodex~/.codex/config.tomlbase_url、env_key、wire_api凭据文件各工具自己的 auth / key 存放位置Key 明文或引用所谓三件套指的其实就是这三处要同时对上。切换器最常踩的坑是只改了配置文件里的 base_url但凭据文件里还留着旧 Key结果请求打到了新端点却带着旧凭据报 401。遇到这种情况先检查凭据文件再检查配置文件的字段名是否拼错。另外Codex 的wire_api在不同客户端版本里支持的取值不一样如果你在配置后遇到协议层报错比如响应体解析失败优先把这一项换成你客户端文档里明确支持的取值而不是反复怀疑网络。5. 复现实验一让 Claude Design 生成可落盘的 UI 原型配置通了开始做第一个可复现实验基于仓库里的真实文件和 RFC生成一个设计评审用的 UI 原型。先准备一个真实的仓库并且确认里面有可被引用的文件cd ~/work/your-product # 记录当前提交保证实验可回溯 git rev-parse --short HEAD git status --short # 确认关键文件存在 ls docs/rfc/ ls src/components/假设你的仓库里有docs/rfc/0012-design-review.md和src/components/DataTable/index.tsx接下来启动 Claude Codeclaude在对话里给出这样一段指令可直接复制的模板请先读取以下文件不要凭猜测作答 - docs/rfc/0012-design-review.md - src/components/DataTable/index.tsx - src/styles/tokens.css 然后基于这些文件生成一个设计评审用的 UI 原型页面要求 1. 复用 DataTable 现有的列宽、行高与间距规则 2. 每个区块旁标注它对应 RFC 中的条款编号 3. 输出为单个自包含 HTML 文件不依赖外部 CDN 4. 把文件写入 prototypes/design-review/index.html 5. 最后用 5 行以内的列表说明你实际读取了哪些文件、哪些信息来自文件、哪些是你的推断。这段指令里最关键的其实是第 5 条。要求模型自报哪些来自文件、哪些是推断是判断可复现性的核心手段——如果它列不出实际读取的文件路径那这份原型就是凭空生成的换一次运行结果就会漂移。跑完之后检查产物ls -l prototypes/design-review/ head -40 prototypes/design-review/index.html # 对比两次运行是否结构一致 diff (grep -o data-section[^]* prototypes/design-review/index.html | sort) \ (grep -o data-section[^]* prototypes/design-review/run2.html | sort)如果两次运行的结构节点集合基本一致只有文案和细节不同那说明结构级复现是成立的如果连区块数量都对不上那问题多半出在文件没被真正读进上下文而不是模型能力不够。6. 复现实验二Claude Slides 出评审稿Claude Docs 出 RFC 摘要同一套配置下继续做第二个实验生成设计评审幻灯片以及把 RFC 摘要成一段可贴进会议纪要的文字。幻灯片部分指令可以这样写基于 docs/rfc/0012-design-review.md 和上一轮生成的 UI 原型 生成一份设计评审用的演示大纲输出为 Markdown写入 docs/review/slides.md。 结构要求 1. 第 1 页说明本次评审要解决的 RFC 条款 2. 中间每页对应一个设计决策必须引用 RFC 原文的条款编号 3. 每页不超过 5 个要点每个要点不超过 25 字 4. 最后一页列出尚未确定的问题并标注需要谁拍板。Claude Docs 部分则是把它当作一个文档压缩器来用阅读 docs/rfc/ 目录下所有 .md 文件 产出一份不超过 600 字的摘要写入 docs/review/rfc-summary.md。 约束 - 按 RFC 编号升序排列 - 每条摘要标注原文路径 - 已废弃的条款单独归到已废弃小节不要和有效条款混在一起 - 所有内容必须能在原文中找到出处找不到出处的不要写。这两步的产物都是文件可以进 Git可以被 review可以 diff。这正是可复现和看起来像的分界线留在对话窗口里的结果不可复现落成文件的结果才可复现。顺带说一个实操经验跑 Slides 这类任务时最好先把 RFC 目录的文件名列表单独喂一次让模型确认它看到了哪些文件再让它生成内容。这样能把模型没读全和模型理解了但表达不同这两类问题区分开排障效率会高很多。7. 可复现性排障清单常见报错与判定下面这张表是本文最实用的部分按报错现象倒查原因。配置类问题的排查入口统一在 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_design_repro_troubleshoot 。现象最可能的原因验证方式处理401 / invalid api keyKey 写错、已删除或凭据文件残留旧 Key检查 settings.json 中ANTHROPIC_AUTH_TOKEN是否为YOUR_API_KEY的实际值重新创建 Key 并覆盖三处配置404 / model not found模型名不在当前可用列表里到控制台确认模型标识的准确拼写改成控制台里实际可用的名称连接超时Base URL 写错多了路径或少了协议头echo $ANTHROPIC_BASE_URL核对统一使用https://taotoken.net/api两次运行结果差异极大文件没有被真正读入上下文看模型自报的实际读取文件列表在指令中显式列出文件路径并要求先读后写输出被截断单次产物体量超出上下文预算统计生成文件的字节数拆成多次生成或先出大纲再逐节补全代码块内容与仓库不符模型在凭记忆补全抽查产物中引用的函数名是否真实存在强制要求引用真实路径与符号名Codex 报协议解析错误wire_api取值不被当前客户端支持对照客户端文档换成明确支持的取值切换供应商后立刻失败只改了 base_url没改凭据对比三件套三处同时更新排障的核心思路是分层验证先验证能不能连上最小请求再验证能不能认证401 与否再验证用的哪个模型404 与否最后才验证输出质量。顺序反了就会把配置问题误判成模型能力问题。8. 输出对照UI 原型到底能不能复现回到最初的问题用 TaoToken Key 走 Claude CodeClaude Design 的 UI 原型能复现吗按前面的实验方法跑三轮把结果记成表维度第 1 轮第 2 轮第 3 轮可复现结论是否读取了指定文件3/33/33/3稳定区块 / 页面数量667基本稳定RFC 条款引用覆盖 5 条覆盖 5 条覆盖 5 条稳定间距与字号规则与 tokens.css 一致一致一致稳定像素级布局有差异有差异有差异不可复现文案措辞有差异有差异有差异不可复现落盘文件路径一致一致一致稳定结论可以概括成三句话第一结构级复现是成立的。只要 prompt 里显式列出要读的文件、显式要求引用条款编号、显式规定输出路径三轮运行的结构骨架基本一致可以直接进评审流程。第二像素级复现不成立也不该追求。UI 原型的价值在于快速把 RFC 里的抽象条款翻译成可讨论的界面结构而不是产出可直接上线的代码。把它当设计草案生成器而不是设计稿生成器预期就对了。第三可复现性的瓶颈在配置与上下文管理不在模型本身。同一个 Key、同一个 Base URL、同一份仓库、同一段 prompt只要这四项不变差异就收敛在可接受范围内一旦其中一项漂移结果就会明显发散。所以要把变量固定下来而不是反复调 prompt。需要补一句的是如果三轮运行里出现了文件读取列表为空的情况先别怀疑工具去检查项目目录是不是在 Claude Code 的工作区内、permissions.allow是否放开了读类工具、以及文件路径是不是相对路径写错了。这三处是最高频的失分点。9. 把流程固化下来再谈团队可用单次跑通不算能力能固化才算。把上面的实验整理成一套可交给同事的流程大概是这样四步第一步固定配置。用户级~/.claude/settings.json放 Key 和 Base URL项目级.claude/settings.json放模型名和权限Key 不进 Git.env和settings.local.json加进.gitignore。第二步固定 prompt 模板。把第 5、6 节的指令模板存成prompts/design-review.md和prompts/rfc-summary.md每次复制粘贴而不是临场发挥。可复现性的一大半来自模板的稳定性。第三步固定产物路径。UI 原型统一写到prototypes/feature/幻灯片统一写到docs/review/slides.md摘要统一写到docs/review/rfc-summary.md。路径固定了diff 才有意义。第四步固定验证动作。每次生成后跑一次文件读取自检和结构 diff确认没有凭空生成。这一步花两分钟能省掉评审会上半小时的争论。这套流程跑顺之后你会发现 Claude Design、Claude Slides、Claude Docs 在 Claude Code 里的定位其实很清晰它们是把仓库上下文转成可讨论产物的加速器而不是替代设计判断的自动化机器。加速器的价值取决于输入是否干净、配置是否稳定、产物是否可追溯——这三件事都得靠工程手段解决而不是靠换一个更强的模型。如果你还没开始建议按下面的顺序走一遍先在模型对话页试一个最小请求确认链路通不通再根据用量情况看 Coding Plan 是否合适接着创建 Key 并写进配置最后对照 Claude Code 文档把参数逐项核对一遍。模型对话https://taotoken.net/models/detail/chat?utm_sourcetaotoken_aicg_blog_endutm_contentcta_model_chat_design_reproCoding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcta_coding_plan_design_repro创建 API Keyhttps://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentcta_api_keys_design_reproClaude Code 配置文档https://taotoken.net/doc/ClaudeCodeAnthropic?utm_sourcetaotoken_aicg_blog_endutm_contentcta_claude_code_doc_design_repro把 Key 和 Base URL 这两件事一次性做对后面的所有复现实验才有讨论的基础。剩下的交给固定的模板和固定的路径去保证。