1. 产品经理原型部署的真实卡点为什么本地 HTML 发不出去做产品经理的原型画完那一刻是最爽的但接下来往往是最尴尬的老板说「发我看看」你只能截图开发说「我想点一下交互」你只能说「来我工位」。原型躺在prototypes/目录里本质就是一堆静态 HTML 文件可它偏偏没法像 Figma 链接那样随手甩出去。我试过最原始的办法把 HTML 拖进浏览器地址栏是file:///Users/xxx/prototypes/2026-08/login.html发给别人等于没发。后来用python -m http.server 8000起个本地服务局域网内能访问但换个 WiFi、关个电脑就断老板在地铁上根本打不开。再往后想上云就得手动 FTP、手动建目录、手动写入口页每加一个原型重复一遍原型一多服务器上乱成一锅粥自己都找不到哪个是哪个。这一篇要解决的就是这「最后一公里」用 Claude Code 技能包deploy-prototypes把本地prototypes/目录一键扫描、分类、生成入口页、增量部署到云服务器最后拿到一个谁都能打开的线上地址。整条链路里npm 依赖装不上、meta 标签写错导致分类乱掉、部署脚本报local proxy failed或401是最常见的三个坑下面会逐个拆开讲。适合谁看已经用 Claude Code 做过原型、手里有一堆 HTML 文件、想让老板和开发直接点链接体验交互的产品经理。不需要你懂运维但需要你能复制粘贴命令、能改一个 JSON 配置文件。核心检索词就三个Claude Code 部署原型、deploy-prototypes 技能包、HTML 原型一键上线。把这三个词记住后面所有操作都围绕它们展开。在动手之前先把整体链路在脑子里过一遍避免中途迷路。整条链路分五步第一步本地prototypes/目录里放好 HTML 原型每个原型头部写一个meta标签声明它是手机端还是电脑端第二步项目根目录准备deploy/config.json里面填服务器连接信息和部署路径第三步package.json里配好deploy脚本底层指向deploy/sync.js第四步在 Claude Code 里说一句「部署原型」技能包触发npm run deploy脚本递归扫描、增量上传、生成入口页第五步脚本回传线上访问地址你打开验证把链接发给老板。这五步里第一、二、三步是一次性配置配好之后每次新增原型只需要重复第四、五步。很多人卡住不是因为不会写代码而是因为配置项散落在三个文件里改错一个就整条链路跑不通。所以下面我会把三个文件的内容完整贴出来你照着改就行。还有一个容易被忽略的点原型部署和正式前端项目部署不是一回事。正式项目要打包、要构建、要走 CI原型不需要。原型就是静态 HTML部署脚本要做的只是「把文件传上去 生成一个能点进去的目录页」。理解这一点你就不会在 npm 依赖上过度纠结——deploy/sync.js依赖的包很少通常就是ssh2-sftp-client加glob装不上多半是网络或镜像源问题不是包本身复杂。2. TaoToken 前置准备统一 Key 与 API 通道怎么配在跑部署脚本之前先把 TaoToken 的通道配好。为什么部署原型还要配 API 通道因为deploy-prototypes技能包在部署成功后会做两件事一是联动决策索引检查新原型是否登记二是把这次部署的踩坑和耗时回写经验库。这两个动作都需要调用模型走的就是 TaoToken 的统一 Key 和 API 通道。如果你只想要纯静态部署、不要这些联动也可以跳过这一步但既然标题是「TaoToken 配置指南」我们就把完整链路走通。TaoToken 在这里的角色是「统一入口」你不需要为每个模型单独申请 Key也不需要记一堆不同的 Base URL。一个 Key、一个 Base URL就能在 Claude Code、Cline、Codex 这些工具之间切换。对产品经理来说最大的好处是配置一次后面所有技能包复用同一套凭证不用每次换工具就重新折腾一遍。先拿 Key。打开官网 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 注册登录后进控制台在 API Keys 页面创建一个新 Key。创建时给它起个能认出来的名字比如pm-prototype-deploy方便以后区分。Key 只在创建时完整显示一次复制下来存到安全的地方别直接写进会提交到 Git 的文件里。拿到 Key 之后记下两个地址Base URL 是https://taotoken.net/api注意这个地址不带任何查询参数就是干净的 API 根路径。模型对话入口在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 这两个页面建议先各扫一眼后面排障会用到。配置环境变量的时候推荐用系统级环境变量而不是写死在代码里。macOS 或 Linux 下在~/.zshrc或~/.bashrc里加两行export TAOTOKEN_API_KEYsk-你刚才复制的Key export TAOTOKEN_BASE_URLhttps://taotoken.net/apiWindows 下用 PowerShell 设置用户级环境变量[Environment]::SetEnvironmentVariable(TAOTOKEN_API_KEY, sk-你刚才复制的Key, User) [Environment]::SetEnvironmentVariable(TAOTOKEN_BASE_URL, https://taotoken.net/api, User)设完记得重开终端或者source ~/.zshrc让变量生效。验证变量是否生效跑一句echo $TAOTOKEN_BASE_URL能打印出https://taotoken.net/api就对了。如果你用的是 Claude Code它的配置不走环境变量而是走settings.json。这个文件通常在~/.claude/settings.json内容长这样{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: sk-你刚才复制的Key } }注意这里的 Key 和 Base URL 要和上面环境变量里的一致不要一个填 A 一个填 B。Claude Code 读的是ANTHROPIC_BASE_URL和ANTHROPIC_API_KEY这两个变量名别写成TAOTOKEN_前缀那样它认不出来。如果你用的是 Cline 或者 Codex配置位置不一样但三件套一样Base URL 填https://taotoken.net/apiKey 填你创建的那个Model ID 填你实际要用的模型名。Cline 在设置面板里填Codex 在auth.json里填。三件套缺一不可少填一个就会报401或者model not found。配好之后先别急着跑部署脚本用模型对话入口 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 发一句「你好」测试通道是否通。能正常返回说明 Key 和 Base URL 没问题可以进入下一步。如果这里就报错先解决通道问题别往下走否则后面部署脚本报的错你会分不清是通道问题还是部署问题。3. 可复制配置deploy/config.json 与 package.json 完整片段这一节是整篇的核心三个文件的内容我完整贴出来你照着改路径和服务器信息就行。先说清楚目录结构避免你放错位置your-project/ ├── package.json ├── deploy/ │ ├── config.json │ └── sync.js └── prototypes/ ├── 2026-08/ │ ├── login.html │ └── dashboard.html └── 2026-09/ └── order-list.htmldeploy/config.json是部署配置内容如下{ host: your-server-ip, port: 22, username: deploy, privateKeyPath: ~/.ssh/id_rsa, remoteRoot: /var/www/prototypes, publicBaseUrl: https://proto.yourdomain.com, localRoot: ./prototypes, entryFile: index.html, incremental: true, categoryMetaName: prototype-category }逐项说明host填你云服务器的 IPport默认 22如果你改过 SSH 端口就填实际端口username是登录服务器的用户建议单独建一个deploy用户而不是用 rootprivateKeyPath是 SSH 私钥路径用密钥登录比密码安全也避免脚本里存明文密码remoteRoot是服务器上存放原型的目录publicBaseUrl是最终对外访问的地址脚本生成入口页时会用它拼链接localRoot是本地原型目录默认./prototypesentryFile是生成的入口页文件名incremental设为true开启增量部署只传新增和修改的文件categoryMetaName是分类用的 meta 标签名默认prototype-category。package.json里加一个deploy脚本并声明依赖{ name: pm-prototype-deploy, version: 1.0.0, scripts: { deploy: node deploy/sync.js }, dependencies: { ssh2-sftp-client: ^11.0.0, glob: ^10.4.0 } }依赖只有两个ssh2-sftp-client负责 SFTP 上传glob负责递归扫描 HTML 文件。装依赖用npm install如果npm install卡住或者报网络错误先换镜像源npm config set registry https://registry.npmmirror.com npm install装完确认node_modules里有这两个包ls node_modules | grep sftp能看到ssh2-sftp-client就对了。接下来是原型 HTML 头部的 meta 标签这是分类的关键。手机端原型这样写!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta nameprototype-category contentmobile title登录页原型/title /head body !-- 原型内容 -- /body /html电脑端原型把content改成desktopmeta nameprototype-category contentdesktop这个 meta 标签的作用是让部署脚本自动分类。脚本扫描到contentmobile就归到手机端contentdesktop或没写就归到电脑端。为什么用 meta 而不是按目录分因为「手机端还是电脑端」是原型本身的属性写在 HTML 里跟着文件走不会因为放错目录而分类错误。你新建原型时顺手写一行 meta比记「这个该放哪个目录」可靠得多。deploy/sync.js是部署脚本本体逻辑不复杂核心就四步读配置、扫描本地 HTML、对比远端已存在文件、上传差异文件并生成入口页。如果你不想自己写可以让 Claude Code 根据上面的配置生成一份提示词大概是「读 deploy/config.json用 ssh2-sftp-client 和 glob 写一个增量部署脚本扫描 prototypes 下所有 HTML按 meta 标签分类生成入口页只上传新增和修改的文件」。生成后自己过一遍确认路径和配置项对得上。配置改完跑一次干跑模式确认无误。在sync.js里加一个--dry-run参数支持或者直接在 Claude Code 里说「部署原型先干跑不实际上传」。干跑会打印出「将上传 N 个文件、跳过 M 个文件」你核对一下 N 和 M 是否符合预期确认没问题再去掉干跑参数正式执行。4. 验证请求与成功结果从本地原型到线上可访问地址配置就绪后正式跑部署。在项目根目录执行npm run deploy正常输出大概是这样[deploy] 读取配置 deploy/config.json [deploy] 扫描本地原型prototypes/ [deploy] 发现 HTML 文件 6 个 [deploy] 连接服务器 your-server-ip:22 [deploy] 远端已存在文件 4 个 [deploy] 本次上传 2 个跳过 4 个 [deploy] 上传 prototypes/2026-09/order-list.html [deploy] 上传 prototypes/2026-09/order-list.html 完成 [deploy] 生成入口页 index.html [deploy] 上传入口页完成 [deploy] 部署成功访问地址https://proto.yourdomain.com看到最后一行「部署成功」和访问地址就说明链路通了。打开这个地址应该能看到一个入口页左边手机端、右边电脑端按月份分组每个原型点进去就能在线体验。手机端原型在手机上打开会自动适配电脑端原型在桌面浏览器打开布局正常。验证的时候重点看三件事。第一入口页的分类对不对手机端原型有没有出现在手机端那一栏电脑端有没有出现在电脑端那一栏。如果分类错了多半是 meta 标签写错或者漏写回去检查 HTML 头部。第二点进去能不能正常交互原型里的按钮、跳转、弹窗能不能点如果点了没反应可能是原型里引用了本地路径的资源部署时没传上去。第三增量是否生效改一个已有原型再跑一次npm run deploy输出里「跳过」的数量应该增加「上传」的数量应该只有你改的那一个。增量部署的意义在这里体现得最明显。原型多了以后全量重传又慢又费流量增量只传新增和修改的秒级完成。输出里的「跳过文件数」就是告诉你哪些是已存在被跳过的这个数字越大说明增量机制工作得越好。部署成功后脚本还会做两件联动的事。一是检查这次的原型是否已在决策索引里登记新原型会提示你补登记二是把这次部署的踩坑和耗时回写经验库。这两个动作走的就是第 2 节配好的 TaoToken 通道。如果你在第 2 节跳过了配置这里会看到「联动跳过」的提示不影响部署本身但经验沉淀就没了。把线上地址发给老板他在自己手机、自己电脑上随时打开不用你陪着。改了一版再「部署原型」一次增量更新链接不变。这就是从「每次手动折腾半小时」到「一句话、几秒钟」的变化。如果你想让部署更省心可以在 Claude Code 里直接说「部署原型」技能包会自动触发npm run deploy并报告结果。说「更新线上原型」「同步原型」「原型上线」也能触发效果一样。部署完它会告诉你上传了几个、跳过了几个、访问地址是什么失败就贴错误日志你照着日志排查就行。5. 本篇常见错排查401、local proxy failed、reading choices、OAuth部署链路跑不通报错基本集中在四类。下面按报错原文对照排查每条都给定位方法和修复动作。报错一401 Unauthorized完整报错通常长这样Error: 401 Unauthorized at deploy/sync.js:88:15 response: { status: 401, body: {error:invalid api key} }这个错分两种场景。如果是在部署脚本调用模型联动时出现说明 TaoToken 的 Key 配错了或者过期了。检查settings.json或环境变量里的 Key 是否和 TaoToken 控制台里创建的一致注意 Key 只在创建时完整显示一次如果你复制时漏了字符重新创建一个。如果是在 SFTP 上传时出现说明服务器 SSH 认证失败检查deploy/config.json里的username和privateKeyPath是否匹配私钥文件权限是不是600chmod 600 ~/.ssh/id_rsa。报错二local proxy failed完整报错Error: local proxy failed cause: connect ECONNREFUSED 127.0.0.1:7890这个错说明你的终端里配了本地代理但代理服务没启动或者端口不对。部署脚本走 SFTP 直连服务器不需要代理代理反而会拦截连接。检查环境变量http_proxy、https_proxy、all_proxy临时清掉unset http_proxy https_proxy all_proxy npm run deploy如果清了还报检查~/.npmrc里有没有proxy配置有就注释掉。注意这里说的是本地开发环境的代理配置问题和网络访问方式无关纯粹是环境变量干扰。报错三reading choices完整报错TypeError: Cannot read properties of undefined (reading choices) at deploy/sync.js:120:30这个错说明模型返回的响应结构和你代码里取的不一致。常见原因是 Base URL 填错比如填成了https://taotoken.net而不是https://taotoken.net/api导致请求打到了网页而不是 API返回的是 HTML 不是 JSON。检查ANTHROPIC_BASE_URL或TAOTOKEN_BASE_URL确认结尾是/api。另一个原因是 Model ID 填错模型名不存在时返回体里没有choices字段去接入文档 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 核对正确的模型名。报错四OAuth相关报错完整报错Error: OAuth token expired at ClaudeCodeClient.request这个错说明 Claude Code 的认证方式冲突了。如果你同时配了 OAuth 登录和 API KeyClaude Code 可能优先走 OAuth而 OAuth token 过期后就报这个错。解决办法是明确走 API Key检查~/.claude/settings.json里ANTHROPIC_API_KEY是否填了填了之后在 Claude Code 里执行一次登出再登入让它重新读配置。如果还是报把~/.claude/下的缓存文件清掉重试。排障的时候记住一个原则先确认通道通不通再确认部署脚本逻辑对不对。通道问题用模型对话入口 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 发一句「你好」就能测部署逻辑问题看脚本输出的「上传/跳过」数量是否符合预期。两类问题分开定位不要混在一起猜。还有一个隐蔽的坑meta 标签写对了但分类还是错。检查 meta 标签是不是写在head里写在body里脚本扫不到。另外content的值大小写敏感Mobile和mobile会被当成两个不同的分类统一用小写。6. 长期编码与 Agent 场景把部署接进你的工作流单次部署跑通只是开始真正省时间的是把部署接进日常原型工作流。产品经理的原型迭代频率高一天改三版很正常如果每次都要手动跑命令、手动发链接省下的时间又还回去了。下面几个做法能让部署变成「顺手的事」。第一个做法在 Claude Code 里把「部署原型」做成固定触发词。技能包已经支持「部署原型」「发布原型」「更新线上原型」「同步原型」「原型上线」这几个说法你只要在对话里说出来它就会触发npm run deploy。配合前面几篇的技能包一个需求从 PRD 到任务到原型到标注到上线整条链路不用离开 Claude Code。第二个做法把部署和决策索引联动用起来。部署成功后脚本会检查新原型是否登记没登记就提示你补。这个提示别忽略它是把「原型上线」和「需求可验证」两个状态对齐的时机。趁部署完顺手补登记比事后单独补要自然得多。第三个做法经验回写。每次部署的踩坑和耗时都会沉淀回经验库跑多了你会发现某些原型总是传得慢、某些 meta 写法总是分类错这些规律积累下来下次新建原型时就能避开。如果你部署频率很高或者想让 Agent 自动处理部署后的联动动作可以考虑 Coding Plan。它适合长期编码和 Agent 场景把模型调用、部署联动、经验回写这些动作串成自动化流程。入口在 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 具体套餐和额度以页面说明为准。日常排障和接入相关的资料集中在 API Keys 页面 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 和接入文档 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 遇到 401、Base URL 填错、模型名不对这类问题先去这两个页面核对。模型对话入口 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 用来快速验证通道是否通部署前先测一句能省掉很多「到底是通道问题还是脚本问题」的纠结。最后说一个我踩过的坑deploy/config.json里的publicBaseUrl一定要填对外可访问的域名别填服务器内网 IP。脚本生成入口页时会用这个地址拼链接填错了入口页里的链接点不开。改完配置记得重新跑一次部署入口页会重新生成。到这里一个需求从 PRD、到任务、到原型、到标注、到上线给人看整条链路已经不需要离开 Claude Code 了。下一篇聊外部设计类技能包先评测一个参数很唬人的《UI 设计67 风格 161 配色实测》看看它是不是噱头。