企业官网建设流程全解析

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_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，注册登录后进控制台，在 API Keys 页面创建一个新 Key。创建时给它起个能认出来的名字，比如pm-prototype-deploy，方便以后区分。Key 只在创建时完整显示一次，复制下来存到安全的地方，别直接写进会提交到 Git 的文件里。

拿到 Key 之后，记下两个地址：Base URL 是https://taotoken.net/api，注意这个地址不带任何查询参数，就是干净的 API 根路径。模型对话入口在 https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，接入文档在 https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，这两个页面建议先各扫一眼，后面排障会用到。

配置环境变量的时候，推荐用系统级环境变量而不是写死在代码里。macOS 或 Linux 下，在~/.zshrc或~/.bashrc里加两行：

export TAOTOKEN_API_KEY="sk-你刚才复制的Key" export TAOTOKEN_BASE_URL="https://taotoken.net/api"

Windows 下用 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/api，Key 填你创建的那个，Model ID 填你实际要用的模型名。Cline 在设置面板里填，Codex 在auth.json里填。三件套缺一不可，少填一个就会报401或者model not found。

配好之后，先别急着跑部署脚本，用模型对话入口 https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_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.html

deploy/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填你云服务器的 IP；port默认 22，如果你改过 SSH 端口就填实际端口；username是登录服务器的用户，建议单独建一个deploy用户而不是用 root；privateKeyPath是 SSH 私钥路径，用密钥登录比密码安全，也避免脚本里存明文密码；remoteRoot是服务器上存放原型的目录；publicBaseUrl是最终对外访问的地址，脚本生成入口页时会用它拼链接；localRoot是本地原型目录，默认./prototypes；entryFile是生成的入口页文件名；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 lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="prototype-category" content="mobile"> <title>登录页原型</title> </head> <body> <!-- 原型内容 --> </body> </html>

电脑端原型把content改成desktop：

<meta name="prototype-category" content="desktop">

这个 meta 标签的作用是让部署脚本自动分类。脚本扫描到content="mobile"就归到手机端，content="desktop"或没写就归到电脑端。为什么用 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是否匹配，私钥文件权限是不是600（chmod 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_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= 核对正确的模型名。

报错四：OAuth相关报错

完整报错：

Error: OAuth token expired at ClaudeCodeClient.request

这个错说明 Claude Code 的认证方式冲突了。如果你同时配了 OAuth 登录和 API Key，Claude Code 可能优先走 OAuth，而 OAuth token 过期后就报这个错。解决办法是明确走 API Key：检查~/.claude/settings.json里ANTHROPIC_API_KEY是否填了，填了之后在 Claude Code 里执行一次登出再登入，让它重新读配置。如果还是报，把~/.claude/下的缓存文件清掉重试。

排障的时候记住一个原则：先确认通道通不通，再确认部署脚本逻辑对不对。通道问题用模型对话入口 https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_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_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，具体套餐和额度以页面说明为准。

日常排障和接入相关的资料，集中在 API Keys 页面 https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= 和接入文档 https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，遇到 401、Base URL 填错、模型名不对这类问题，先去这两个页面核对。模型对话入口 https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= 用来快速验证通道是否通，部署前先测一句，能省掉很多「到底是通道问题还是脚本问题」的纠结。

最后说一个我踩过的坑：deploy/config.json里的publicBaseUrl一定要填对外可访问的域名，别填服务器内网 IP。脚本生成入口页时会用这个地址拼链接，填错了入口页里的链接点不开。改完配置记得重新跑一次部署，入口页会重新生成。

到这里，一个需求从 PRD、到任务、到原型、到标注、到上线给人看，整条链路已经不需要离开 Claude Code 了。下一篇聊外部设计类技能包，先评测一个参数很唬人的《UI 设计：67 风格 161 配色实测》，看看它是不是噱头。