1. Claude Code 里调 Claude Design先把 TaoToken Key 落到 ANTHROPIC_BASE_URL先到 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_design_intro 取 TaoToken Key再把 Claude Code 的 API Base URL 设为 https://taotoken.net/api。这是本篇 UI 原型交付流程的第一步。很多人在 Claude Code 会话里输入“用 Claude Design 基于 RFC 生成 UI 原型”结果遇到401 invalid x-api-key、404 not found或者模型名不匹配第一反应是提示词有问题实际上更常见的原因是 Claude Code 仍然指向旧的供应商配置或者 Key 没有写进正确的settings.json。Claude Design、Claude Slides、Claude Docs 已经可以在 Claude Code 会话里被调用。你可以让 Claude Code 读取仓库中的真实文件、RFC、接口文档再产出设计评审幻灯片、UI 原型和交付文档。生成之后还能继续在对话里改也可以把分享链接交给评审人。但如果底层模型调用链路没有接好这些工具层面的能力就只会停在入口报错页。本文从原型交付视角出发把 TaoToken Key 的设置、Claude Code 的ANTHROPIC_*环境变量、UI 原型生成命令、Claude Slides 和 Claude Docs 的协作方式以及分享链接对照表串成一条可复现流程。这里的关键不是把 Claude Code 当成一个聊天窗口而是把它当成“读取仓库上下文 调用模型 产出可交付文件”的工程入口。UI 原型交付通常有三个输入RFC 里的业务约束、仓库里的真实组件和页面、设计评审要回答的问题。Claude Design 负责把这三类输入变成可打开、可评审、可继续修改的原型Claude Slides 负责把原型和 RFC 映射成评审幻灯片Claude Docs 负责沉淀 Decision Log、风险和待办。TaoToken 的 Key 与 Base URL 是这些动作的底层通道。2. 从官网取 Key 到 settings.jsonUI 原型流程的最小闭环先到 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_design_key_flow 获取 TaoToken Key。然后在 API Keys 页面创建或复制 Keyhttps://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_design_keys 。拿到 Key 后不要直接写进代码仓库也不要提交到 Git。推荐写入用户级~/.claude/settings.json或者项目级.claude/settings.json具体取决于你是否希望团队成员共享同一套供应商配置。Claude Code 这一侧使用ANTHROPIC_*变量。最小可运行配置如下{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: YOUR_API_KEY, ANTHROPIC_MODEL: claude-sonnet-4-20250514, ANTHROPIC_SMALL_FAST_MODEL: claude-3-5-haiku-20241022 } }如果你更习惯在 shell 里临时验证可以这样做export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_AUTH_TOKENYOUR_API_KEY export ANTHROPIC_MODELclaude-sonnet-4-20250514 export ANTHROPIC_SMALL_FAST_MODELclaude-3-5-haiku-20241022 claude进入 Claude Code 后先做一个连接自检请确认当前会话使用的模型名称并列出当前仓库根目录下的一级目录。不要修改任何文件。如果这一步能正常返回仓库目录和模型信息说明 Key、Base URL 和模型名基本正确。接下来再让 Claude Design 读取 RFC。如果这里仍然报401优先检查ANTHROPIC_AUTH_TOKEN是否被其他 shell 配置覆盖如果报404优先检查ANTHROPIC_BASE_URL是否被手动改成了https://taotoken.net/api/v1之类的路径。产品事实给出的 Base URL 是https://taotoken.net/api工具配置时不要自行拼接 UTM 参数也不要额外加斜杠路径除非 TaoToken 的 Claude Code 文档明确说明。文档入口在文末 CTA 中。还要注意一点Claude Code 使用ANTHROPIC_*Codex 使用config.toml两者不能混用。不要把ANTHROPIC_BASE_URL写进 Codex 配置也不要把 Codex 的model_provider塞进 Claude Code 的settings.json。多工具并行时Key 可以复用但配置文件和环境变量名要各归各的。3. 让 Claude Design 读 RFC 生成 UI 原型可直接复用的命令模板原型交付视角下最重要的不是“生成一个页面”而是“生成一个能追溯到 RFC 和源码的页面”。所以在 Claude Code 里给 Claude Design 的指令要包含输入文件、输出路径、状态要求、引用要求和分享要求。下面是一段可直接改路径使用的命令请使用 Claude Design 生成一个设计评审用的 UI 原型。 输入文件 - docs/rfc/design-review-rfc.md 的 3.2 节 - src/components/Button.tsx - src/pages/Checkout.tsx - docs/api/order-api.md 交付要求 1. 输出到 prototype/design-review/index.html 2. 页面必须标注每个交互对应的 RFC 章节和源码路径 3. 给出 6 个可评审状态默认、加载、空、错误、禁用、成功 4. 生成一个分享链接占位符并列出后续可编辑点 5. 只读取当前仓库文件不要连接生产数据库或外部业务系统 6. 如果 RFC 与源码冲突在页面底部列出冲突项不要自行编造接口这段指令比“帮我画一个结账页”更接近可交付原型。原因是它把上下文来源固定到了仓库文件把输出路径固定到了prototype/design-review/index.html并且要求标注 RFC 章节和源码路径。评审人打开原型时不只是在看视觉效果还能看到每个交互背后的业务依据。生成后可以在本地预览python3 -m http.server 4173 --directory prototype/design-review然后浏览器打开http://localhost:4173。如果原型里包含分享链接字段可以先用占位符例如share_url.prototype。等评审通过后再把真实分享链接替换进去。这里不要连接生产数据库也不要让工具直接跑生产 SQL。所有命令和检查都由你在本地执行Claude Code 只负责读取仓库文件和生成产物。一个常见的失败场景是RFC 太长Claude Design 只读了开头后面的状态定义和异常流程没有进入原型。解决办法不是让它“再努力一点”而是拆成两轮。第一轮让 Claude Code 先总结 RFC 中和 UI 相关的约束请只读取 docs/rfc/design-review-rfc.md提取与 UI 原型有关的约束输出到 docs/review/rfc-ui-constraints.md。要求按页面、状态、异常、验收标准四类整理不要生成代码。第二轮再基于这个摘要生成原型请使用 Claude Design基于 docs/review/rfc-ui-constraints.md 和 src/pages/Checkout.tsx 生成 UI 原型输出到 prototype/design-review/index.html。每个状态都要标注对应的约束编号。这样做的另一个好处是评审时可以把“RFC 约束摘要”和“UI 原型”放在同一份分享链接里。评审人看到的不只是页面还能看到页面为什么长这样。4. Claude Slides 评审幻灯片把原型、RFC 和未决问题放进同一分享链接UI 原型生成后下一步通常是设计评审幻灯片。Claude Slides 在 Claude Code 里的价值不是做一套好看的模板而是把原型、RFC、源码路径和未决问题串成评审路径。可以继续在同一个 Claude Code 会话里发指令请使用 Claude Slides 基于 prototype/design-review/index.html 和 docs/rfc/design-review-rfc.md 生成设计评审幻灯片。 要求 - 8 页 - 第 1 页评审目标与参与角色 - 第 2 页UI 原型分享链接与入口说明 - 第 3 页流程主路径引用 RFC 3.1 节 - 第 4 页异常状态与空状态引用 RFC 3.2 节 - 第 5 页未决问题列出需要会议决策的 3 到 5 项 - 第 6 页与 src/pages/Checkout.tsx 的差异对照 - 第 7 页验收标准与埋点建议 - 第 8 页下一步任务与负责人占位 - 输出到 docs/review/design-review-slides.md - 生成分享链接后给出可继续修改的 3 个方向这里有一个很好用的技巧让 Claude Slides 在每页底部保留“引用来源”字段。例如每页底部增加一行 来源RFC 章节 / 源码路径 / 原型路径这样幻灯片不会变成脱离仓库的独立文件。评审人如果对某一页有疑问可以直接回到 RFC 或源码确认。生成后可以继续让 Claude Code 修改请把第 5 页的未决问题按“影响范围、需要谁决策、最晚时间”重排并保持引用来源不变。或者请基于当前会话把第 4 页的错误状态补充成表格列出来源约束编号、原型状态名、验收标准。分享链接对照可以这样维护产物本地路径分享链接字段评审人可编辑点回滚方式UI 原型prototype/design-review/index.htmlshare_url.prototype状态、文案、布局git checkout -- prototype/design-review设计评审幻灯片docs/review/design-review-slides.mdshare_url.slides页序、结论、待办git revert对应提交交付文档docs/review/design-review-docs.mdshare_url.docs决策记录、风险、负责人git revert对应提交这张表的意义是让“分享链接”不是散落在聊天记录里的临时 URL而是和仓库路径、回滚方式绑定。Claude Design、Claude Slides、Claude Docs 生成的内容最终都要回到可版本管理的目录里。否则评审结束后没人知道哪一版原型对应哪一版 RFC。5. Claude Docs 交付文档Decision Log、风险表与评审链接对照设计评审结束后还需要一份可检索的交付文档。Claude Docs 可以在 Claude Code 里继续生成或修订这份文档。建议把 Decision Log、风险、待办和分享链接都放进去。指令可以这样写请使用 Claude Docs 生成设计评审交付文档输出到 docs/review/design-review-docs.md。 文档结构 1. 评审背景与目标 2. 输入材料RFC 路径、UI 原型路径、幻灯片路径 3. 主流程决策记录决策、备选方案、理由、影响范围 4. 异常流程决策记录 5. 未决问题与负责人 6. 风险表风险、概率、影响、缓解措施 7. 分享链接对照原型、幻灯片、文档 8. 下一步计划 要求 - 每个决策都标注来源RFC 章节、源码路径或会议结论占位 - 不要编造会议结论没有结论的地方写“待确认” - 不要连接生产数据库只整理当前仓库和会话中的材料如果会议中已经形成了结论可以在对话里补充会议结论 - 错误状态保留重试按钮但重试次数上限为 3 次 - 空状态文案改为“暂无可结算订单” - 禁用状态原因必须显示 tooltip 请把这些结论写入 docs/review/design-review-docs.md 的决策记录并同步更新 prototype/design-review/index.html 和 docs/review/design-review-slides.md。这时 Claude Code 可以同时修改文档、原型和幻灯片。修改完成后再做一次本地检查git diff --stat git diff -- docs/review/design-review-docs.md git diff -- docs/review/design-review-slides.md git diff -- prototype/design-review/index.html检查重点不是代码风格而是三份产物是否一致。例如幻灯片第 5 页的未决问题是否已经变成文档里的“已决策”原型里的错误状态是否已经同步成三次重试。分享链接对照也要同步更新避免评审人打开旧链接。6. CC Switch 三件套与 Codex config.toml多工具并行不串 Key如果你同时使用 Claude Code、Codex 和 CC Switch最容易出问题的不是 Key 本身而是配置串台。CC Switch 这类工具通常帮你管理多套供应商配置但落到文件层面本质是三件套供应商名称、API Key、Base URL。Claude Code 这一套写ANTHROPIC_*Codex 这一套写config.toml。两者可以共用同一个 TaoToken Key但不要共用同一组环境变量名。先看 Claude Code 的完整配置{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: YOUR_API_KEY, ANTHROPIC_MODEL: claude-sonnet-4-20250514, ANTHROPIC_SMALL_FAST_MODEL: claude-3-5-haiku-20241022 } }再看 Codex 的~/.codex/config.tomlmodel gpt-5-codex model_provider taotoken [model_providers.taotoken] name TaoToken base_url https://taotoken.net/api env_key TAOTOKEN_API_KEY wire_api chatCodex 对应的环境变量单独设置export TAOTOKEN_API_KEYYOUR_API_KEY注意这里没有ANTHROPIC_*。Codex 不读 Claude Code 的ANTHROPIC_BASE_URLClaude Code 也不读 Codex 的model_provider。如果你在 CC Switch 里切换供应商后发现 Claude Code 仍然走旧通道优先检查~/.claude/settings.json是否被项目级.claude/settings.json覆盖或者 shell 里是否残留了旧的环境变量。可以用下面的命令排查env | grep -E ANTHROPIC|TAOTOKEN|OPENAI如果输出里同时出现多个 Base URL就要明确当前终端会话最终生效的是哪一个。CC Switch 可以帮你做切换但切换后最好新开一个终端或者在工具提供的“当前生效配置”页面确认。对于团队协作场景建议把YOUR_API_KEY留空或者使用占位符把真实 Key 放到本机环境变量或密钥管理工具里避免把 Key 写进仓库。如果你需要在 TaoToken 官网重新确认配置入口可以回到 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_design_multitool 在控制台里查看 API Keys 和 Claude Code 文档。多工具并行的原则很简单Claude Code 走ANTHROPIC_*Codex 走config.tomlCC Switch 只做切换不改变底层变量名。只要三件套写清楚Claude Design、Claude Slides、Claude Docs 的调用链路就不会因为 Codex 配置而串台。7. 401/404/模型名报错排查原型交付链路里的高频故障在 UI 原型交付流程里报错通常集中在四个位置Key 没生效、Base URL 写错、模型名不匹配、长上下文导致流式中断。下面这张表可以作为排查清单。报错或现象常见原因修复动作401 invalid x-api-keyKey 未写入settings.json或 shell 里旧变量覆盖了新变量检查ANTHROPIC_AUTH_TOKEN确认YOUR_API_KEY已替换为真实 Key404 not foundBase URL 被手动加了/v1/messages或多余路径保持https://taotoken.net/api不要自行拼路径model not found模型名不是当前文档支持的名字按 Claude Code 文档改ANTHROPIC_MODEL和ANTHROPIC_SMALL_FAST_MODELClaude Design 不读文件指令里没有给出仓库相对路径或文件不在当前工作目录在命令中列出docs/rfc/...、src/...等相对路径流式中断一次塞入过多 RFC 和源码请求时间过长先摘要 RFC再分段生成原型和幻灯片分享链接打不开只更新了本地文件没有替换分享链接占位符检查share_url.prototype、share_url.slides、share_url.docs幻灯片和原型不一致多轮修改后未同步三份产物用git diff对照文档、幻灯片和原型再让 Claude Code 统一修订其中401和404最容易在刚接入时出现。401优先看 Key404优先看 Base URL。模型名报错则要看 Claude Code 当前支持的模型列表不要凭记忆填写。流式中断通常和上下文长度有关尤其是设计评审场景里RFC 可能很长原型还可能引用多个组件。比较稳妥的做法是先把 RFC 拆成 UI 约束摘要再让 Claude Design 基于摘要和少量关键源码生成原型最后让 Claude Slides 和 Claude Docs 基于同一份摘要生成评审材料。还有一个容易被忽略的问题是工作目录。Claude Code 默认在当前项目目录运行如果你在错误的目录下启动它就读不到docs/rfc/design-review-rfc.md。可以在 Claude Code 里先执行请输出当前工作目录并列出 docs/rfc、src/pages、src/components、prototype 四类目录是否存在。如果目录不存在就不要继续让工具生成先回到正确仓库根目录。原型交付的可靠性来自路径、文件、配置三者一致而不是来自某一句更长的提示词。8. 文末 CTA模型对话、Coding Plan、创建 Key 与 Claude Code 文档当 Claude Code 已经能通过 TaoToken 正常调用模型下一步就是把 UI 原型流程固定下来用settings.json固定ANTHROPIC_BASE_URL和ANTHROPIC_AUTH_TOKEN用 Claude Design 读取 RFC 和仓库文件生成原型用 Claude Slides 生成评审幻灯片用 Claude Docs 沉淀决策与风险用分享链接对照表管理交付物。团队里每个人都可以复现这条链路而不是依赖某台机器上的临时环境变量。如果你还没有 Key可以按这个顺序走模型对话https://taotoken.net/models/detail/chat?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_design_chat 先确认模型调用和基础问答链路。Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_design_plan 查看适合 Claude Code 原型交付的套餐入口。创建 Keyhttps://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_design_keys 生成并复制YOUR_API_KEY。Claude Code 文档https://taotoken.net/doc/ClaudeCodeAnthropic?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_design_doc 核对ANTHROPIC_*、Base URL 和模型名的最新配置。也可以先回到 TaoToken 官网总览https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_design_final 。把 Key 写进 Claude Code 的settings.json把 Base URL 设为https://taotoken.net/api然后在仓库里发第一条 Claude Design 指令。只要底层通道稳定UI 原型、设计评审幻灯片和交付文档就能在同一条会话链路里持续迭代分享链接也能一直对应到可回滚的仓库版本。 04 用 Claude Code 调 Claude Design：TaoToken 的 Key 怎样走 UI 原型流程
1. Claude Code 里调 Claude Design先把 TaoToken Key 落到 ANTHROPIC_BASE_URL先到 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_design_intro 取 TaoToken Key再把 Claude Code 的 API Base URL 设为 https://taotoken.net/api。这是本篇 UI 原型交付流程的第一步。很多人在 Claude Code 会话里输入“用 Claude Design 基于 RFC 生成 UI 原型”结果遇到401 invalid x-api-key、404 not found或者模型名不匹配第一反应是提示词有问题实际上更常见的原因是 Claude Code 仍然指向旧的供应商配置或者 Key 没有写进正确的settings.json。Claude Design、Claude Slides、Claude Docs 已经可以在 Claude Code 会话里被调用。你可以让 Claude Code 读取仓库中的真实文件、RFC、接口文档再产出设计评审幻灯片、UI 原型和交付文档。生成之后还能继续在对话里改也可以把分享链接交给评审人。但如果底层模型调用链路没有接好这些工具层面的能力就只会停在入口报错页。本文从原型交付视角出发把 TaoToken Key 的设置、Claude Code 的ANTHROPIC_*环境变量、UI 原型生成命令、Claude Slides 和 Claude Docs 的协作方式以及分享链接对照表串成一条可复现流程。这里的关键不是把 Claude Code 当成一个聊天窗口而是把它当成“读取仓库上下文 调用模型 产出可交付文件”的工程入口。UI 原型交付通常有三个输入RFC 里的业务约束、仓库里的真实组件和页面、设计评审要回答的问题。Claude Design 负责把这三类输入变成可打开、可评审、可继续修改的原型Claude Slides 负责把原型和 RFC 映射成评审幻灯片Claude Docs 负责沉淀 Decision Log、风险和待办。TaoToken 的 Key 与 Base URL 是这些动作的底层通道。2. 从官网取 Key 到 settings.jsonUI 原型流程的最小闭环先到 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_design_key_flow 获取 TaoToken Key。然后在 API Keys 页面创建或复制 Keyhttps://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_design_keys 。拿到 Key 后不要直接写进代码仓库也不要提交到 Git。推荐写入用户级~/.claude/settings.json或者项目级.claude/settings.json具体取决于你是否希望团队成员共享同一套供应商配置。Claude Code 这一侧使用ANTHROPIC_*变量。最小可运行配置如下{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: YOUR_API_KEY, ANTHROPIC_MODEL: claude-sonnet-4-20250514, ANTHROPIC_SMALL_FAST_MODEL: claude-3-5-haiku-20241022 } }如果你更习惯在 shell 里临时验证可以这样做export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_AUTH_TOKENYOUR_API_KEY export ANTHROPIC_MODELclaude-sonnet-4-20250514 export ANTHROPIC_SMALL_FAST_MODELclaude-3-5-haiku-20241022 claude进入 Claude Code 后先做一个连接自检请确认当前会话使用的模型名称并列出当前仓库根目录下的一级目录。不要修改任何文件。如果这一步能正常返回仓库目录和模型信息说明 Key、Base URL 和模型名基本正确。接下来再让 Claude Design 读取 RFC。如果这里仍然报401优先检查ANTHROPIC_AUTH_TOKEN是否被其他 shell 配置覆盖如果报404优先检查ANTHROPIC_BASE_URL是否被手动改成了https://taotoken.net/api/v1之类的路径。产品事实给出的 Base URL 是https://taotoken.net/api工具配置时不要自行拼接 UTM 参数也不要额外加斜杠路径除非 TaoToken 的 Claude Code 文档明确说明。文档入口在文末 CTA 中。还要注意一点Claude Code 使用ANTHROPIC_*Codex 使用config.toml两者不能混用。不要把ANTHROPIC_BASE_URL写进 Codex 配置也不要把 Codex 的model_provider塞进 Claude Code 的settings.json。多工具并行时Key 可以复用但配置文件和环境变量名要各归各的。3. 让 Claude Design 读 RFC 生成 UI 原型可直接复用的命令模板原型交付视角下最重要的不是“生成一个页面”而是“生成一个能追溯到 RFC 和源码的页面”。所以在 Claude Code 里给 Claude Design 的指令要包含输入文件、输出路径、状态要求、引用要求和分享要求。下面是一段可直接改路径使用的命令请使用 Claude Design 生成一个设计评审用的 UI 原型。 输入文件 - docs/rfc/design-review-rfc.md 的 3.2 节 - src/components/Button.tsx - src/pages/Checkout.tsx - docs/api/order-api.md 交付要求 1. 输出到 prototype/design-review/index.html 2. 页面必须标注每个交互对应的 RFC 章节和源码路径 3. 给出 6 个可评审状态默认、加载、空、错误、禁用、成功 4. 生成一个分享链接占位符并列出后续可编辑点 5. 只读取当前仓库文件不要连接生产数据库或外部业务系统 6. 如果 RFC 与源码冲突在页面底部列出冲突项不要自行编造接口这段指令比“帮我画一个结账页”更接近可交付原型。原因是它把上下文来源固定到了仓库文件把输出路径固定到了prototype/design-review/index.html并且要求标注 RFC 章节和源码路径。评审人打开原型时不只是在看视觉效果还能看到每个交互背后的业务依据。生成后可以在本地预览python3 -m http.server 4173 --directory prototype/design-review然后浏览器打开http://localhost:4173。如果原型里包含分享链接字段可以先用占位符例如share_url.prototype。等评审通过后再把真实分享链接替换进去。这里不要连接生产数据库也不要让工具直接跑生产 SQL。所有命令和检查都由你在本地执行Claude Code 只负责读取仓库文件和生成产物。一个常见的失败场景是RFC 太长Claude Design 只读了开头后面的状态定义和异常流程没有进入原型。解决办法不是让它“再努力一点”而是拆成两轮。第一轮让 Claude Code 先总结 RFC 中和 UI 相关的约束请只读取 docs/rfc/design-review-rfc.md提取与 UI 原型有关的约束输出到 docs/review/rfc-ui-constraints.md。要求按页面、状态、异常、验收标准四类整理不要生成代码。第二轮再基于这个摘要生成原型请使用 Claude Design基于 docs/review/rfc-ui-constraints.md 和 src/pages/Checkout.tsx 生成 UI 原型输出到 prototype/design-review/index.html。每个状态都要标注对应的约束编号。这样做的另一个好处是评审时可以把“RFC 约束摘要”和“UI 原型”放在同一份分享链接里。评审人看到的不只是页面还能看到页面为什么长这样。4. Claude Slides 评审幻灯片把原型、RFC 和未决问题放进同一分享链接UI 原型生成后下一步通常是设计评审幻灯片。Claude Slides 在 Claude Code 里的价值不是做一套好看的模板而是把原型、RFC、源码路径和未决问题串成评审路径。可以继续在同一个 Claude Code 会话里发指令请使用 Claude Slides 基于 prototype/design-review/index.html 和 docs/rfc/design-review-rfc.md 生成设计评审幻灯片。 要求 - 8 页 - 第 1 页评审目标与参与角色 - 第 2 页UI 原型分享链接与入口说明 - 第 3 页流程主路径引用 RFC 3.1 节 - 第 4 页异常状态与空状态引用 RFC 3.2 节 - 第 5 页未决问题列出需要会议决策的 3 到 5 项 - 第 6 页与 src/pages/Checkout.tsx 的差异对照 - 第 7 页验收标准与埋点建议 - 第 8 页下一步任务与负责人占位 - 输出到 docs/review/design-review-slides.md - 生成分享链接后给出可继续修改的 3 个方向这里有一个很好用的技巧让 Claude Slides 在每页底部保留“引用来源”字段。例如每页底部增加一行 来源RFC 章节 / 源码路径 / 原型路径这样幻灯片不会变成脱离仓库的独立文件。评审人如果对某一页有疑问可以直接回到 RFC 或源码确认。生成后可以继续让 Claude Code 修改请把第 5 页的未决问题按“影响范围、需要谁决策、最晚时间”重排并保持引用来源不变。或者请基于当前会话把第 4 页的错误状态补充成表格列出来源约束编号、原型状态名、验收标准。分享链接对照可以这样维护产物本地路径分享链接字段评审人可编辑点回滚方式UI 原型prototype/design-review/index.htmlshare_url.prototype状态、文案、布局git checkout -- prototype/design-review设计评审幻灯片docs/review/design-review-slides.mdshare_url.slides页序、结论、待办git revert对应提交交付文档docs/review/design-review-docs.mdshare_url.docs决策记录、风险、负责人git revert对应提交这张表的意义是让“分享链接”不是散落在聊天记录里的临时 URL而是和仓库路径、回滚方式绑定。Claude Design、Claude Slides、Claude Docs 生成的内容最终都要回到可版本管理的目录里。否则评审结束后没人知道哪一版原型对应哪一版 RFC。5. Claude Docs 交付文档Decision Log、风险表与评审链接对照设计评审结束后还需要一份可检索的交付文档。Claude Docs 可以在 Claude Code 里继续生成或修订这份文档。建议把 Decision Log、风险、待办和分享链接都放进去。指令可以这样写请使用 Claude Docs 生成设计评审交付文档输出到 docs/review/design-review-docs.md。 文档结构 1. 评审背景与目标 2. 输入材料RFC 路径、UI 原型路径、幻灯片路径 3. 主流程决策记录决策、备选方案、理由、影响范围 4. 异常流程决策记录 5. 未决问题与负责人 6. 风险表风险、概率、影响、缓解措施 7. 分享链接对照原型、幻灯片、文档 8. 下一步计划 要求 - 每个决策都标注来源RFC 章节、源码路径或会议结论占位 - 不要编造会议结论没有结论的地方写“待确认” - 不要连接生产数据库只整理当前仓库和会话中的材料如果会议中已经形成了结论可以在对话里补充会议结论 - 错误状态保留重试按钮但重试次数上限为 3 次 - 空状态文案改为“暂无可结算订单” - 禁用状态原因必须显示 tooltip 请把这些结论写入 docs/review/design-review-docs.md 的决策记录并同步更新 prototype/design-review/index.html 和 docs/review/design-review-slides.md。这时 Claude Code 可以同时修改文档、原型和幻灯片。修改完成后再做一次本地检查git diff --stat git diff -- docs/review/design-review-docs.md git diff -- docs/review/design-review-slides.md git diff -- prototype/design-review/index.html检查重点不是代码风格而是三份产物是否一致。例如幻灯片第 5 页的未决问题是否已经变成文档里的“已决策”原型里的错误状态是否已经同步成三次重试。分享链接对照也要同步更新避免评审人打开旧链接。6. CC Switch 三件套与 Codex config.toml多工具并行不串 Key如果你同时使用 Claude Code、Codex 和 CC Switch最容易出问题的不是 Key 本身而是配置串台。CC Switch 这类工具通常帮你管理多套供应商配置但落到文件层面本质是三件套供应商名称、API Key、Base URL。Claude Code 这一套写ANTHROPIC_*Codex 这一套写config.toml。两者可以共用同一个 TaoToken Key但不要共用同一组环境变量名。先看 Claude Code 的完整配置{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: YOUR_API_KEY, ANTHROPIC_MODEL: claude-sonnet-4-20250514, ANTHROPIC_SMALL_FAST_MODEL: claude-3-5-haiku-20241022 } }再看 Codex 的~/.codex/config.tomlmodel gpt-5-codex model_provider taotoken [model_providers.taotoken] name TaoToken base_url https://taotoken.net/api env_key TAOTOKEN_API_KEY wire_api chatCodex 对应的环境变量单独设置export TAOTOKEN_API_KEYYOUR_API_KEY注意这里没有ANTHROPIC_*。Codex 不读 Claude Code 的ANTHROPIC_BASE_URLClaude Code 也不读 Codex 的model_provider。如果你在 CC Switch 里切换供应商后发现 Claude Code 仍然走旧通道优先检查~/.claude/settings.json是否被项目级.claude/settings.json覆盖或者 shell 里是否残留了旧的环境变量。可以用下面的命令排查env | grep -E ANTHROPIC|TAOTOKEN|OPENAI如果输出里同时出现多个 Base URL就要明确当前终端会话最终生效的是哪一个。CC Switch 可以帮你做切换但切换后最好新开一个终端或者在工具提供的“当前生效配置”页面确认。对于团队协作场景建议把YOUR_API_KEY留空或者使用占位符把真实 Key 放到本机环境变量或密钥管理工具里避免把 Key 写进仓库。如果你需要在 TaoToken 官网重新确认配置入口可以回到 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_design_multitool 在控制台里查看 API Keys 和 Claude Code 文档。多工具并行的原则很简单Claude Code 走ANTHROPIC_*Codex 走config.tomlCC Switch 只做切换不改变底层变量名。只要三件套写清楚Claude Design、Claude Slides、Claude Docs 的调用链路就不会因为 Codex 配置而串台。7. 401/404/模型名报错排查原型交付链路里的高频故障在 UI 原型交付流程里报错通常集中在四个位置Key 没生效、Base URL 写错、模型名不匹配、长上下文导致流式中断。下面这张表可以作为排查清单。报错或现象常见原因修复动作401 invalid x-api-keyKey 未写入settings.json或 shell 里旧变量覆盖了新变量检查ANTHROPIC_AUTH_TOKEN确认YOUR_API_KEY已替换为真实 Key404 not foundBase URL 被手动加了/v1/messages或多余路径保持https://taotoken.net/api不要自行拼路径model not found模型名不是当前文档支持的名字按 Claude Code 文档改ANTHROPIC_MODEL和ANTHROPIC_SMALL_FAST_MODELClaude Design 不读文件指令里没有给出仓库相对路径或文件不在当前工作目录在命令中列出docs/rfc/...、src/...等相对路径流式中断一次塞入过多 RFC 和源码请求时间过长先摘要 RFC再分段生成原型和幻灯片分享链接打不开只更新了本地文件没有替换分享链接占位符检查share_url.prototype、share_url.slides、share_url.docs幻灯片和原型不一致多轮修改后未同步三份产物用git diff对照文档、幻灯片和原型再让 Claude Code 统一修订其中401和404最容易在刚接入时出现。401优先看 Key404优先看 Base URL。模型名报错则要看 Claude Code 当前支持的模型列表不要凭记忆填写。流式中断通常和上下文长度有关尤其是设计评审场景里RFC 可能很长原型还可能引用多个组件。比较稳妥的做法是先把 RFC 拆成 UI 约束摘要再让 Claude Design 基于摘要和少量关键源码生成原型最后让 Claude Slides 和 Claude Docs 基于同一份摘要生成评审材料。还有一个容易被忽略的问题是工作目录。Claude Code 默认在当前项目目录运行如果你在错误的目录下启动它就读不到docs/rfc/design-review-rfc.md。可以在 Claude Code 里先执行请输出当前工作目录并列出 docs/rfc、src/pages、src/components、prototype 四类目录是否存在。如果目录不存在就不要继续让工具生成先回到正确仓库根目录。原型交付的可靠性来自路径、文件、配置三者一致而不是来自某一句更长的提示词。8. 文末 CTA模型对话、Coding Plan、创建 Key 与 Claude Code 文档当 Claude Code 已经能通过 TaoToken 正常调用模型下一步就是把 UI 原型流程固定下来用settings.json固定ANTHROPIC_BASE_URL和ANTHROPIC_AUTH_TOKEN用 Claude Design 读取 RFC 和仓库文件生成原型用 Claude Slides 生成评审幻灯片用 Claude Docs 沉淀决策与风险用分享链接对照表管理交付物。团队里每个人都可以复现这条链路而不是依赖某台机器上的临时环境变量。如果你还没有 Key可以按这个顺序走模型对话https://taotoken.net/models/detail/chat?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_design_chat 先确认模型调用和基础问答链路。Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_design_plan 查看适合 Claude Code 原型交付的套餐入口。创建 Keyhttps://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_design_keys 生成并复制YOUR_API_KEY。Claude Code 文档https://taotoken.net/doc/ClaudeCodeAnthropic?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_design_doc 核对ANTHROPIC_*、Base URL 和模型名的最新配置。也可以先回到 TaoToken 官网总览https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_design_final 。把 Key 写进 Claude Code 的settings.json把 Base URL 设为https://taotoken.net/api然后在仓库里发第一条 Claude Design 指令。只要底层通道稳定UI 原型、设计评审幻灯片和交付文档就能在同一条会话链路里持续迭代分享链接也能一直对应到可回滚的仓库版本。