[2026最新] Claude Code 接入 apipifa 中转实战：10 分钟零基础跑通 + 生成一个 SaaS 落地页（免翻墙·人民币·保姆级）

你可能刷到过一堆"AI 帮我写完了一个网站"的视频，心里痒痒想试，结果一动手就卡在门口：

要翻墙——Claude Code 直连官方，网络这一关就劝退一大半人；
要外币卡——官方按美元结算，绑 Visa/Master 信用卡，很多人根本没有；
怕封号——好不容易开了官方账号，用着用着提示风控、掉登录态，心态崩了；
还有 5 小时额度墙——官方订阅制下，跑一会儿就撞到用量限制，正干着活突然被打断。

这篇教程换一条路：用 apipifa 中转接入 Claude Code。它是正规的人民币 API 服务，国内直连不用翻墙，支付宝/微信充值，按量计费（用多少扣多少，没有官方那道 5 小时额度墙）。全程零基础，我们的目标很明确——

10 分钟，从零开始，让 Claude Code 帮你生成一个真正能在浏览器里打开的 SaaS 落地页。

跟着编号步骤走，每一步都有命令可以复制。走完你不光会用 Claude Code，还会亲手跑出第一个 AI 生成的页面。

先看一眼全流程（心里有个数）

第 1 步  装 Node + Claude Code            （约 3 分钟）
第 2 步  改一个配置文件，把后端指向 apipifa （约 2 分钟）
第 3 步  验证接通                          （约 1 分钟）
第 4 步  新建项目，给 AI 一段 Prompt        （约 2 分钟）
第 5 步  npm run dev，浏览器看页面出来      （约 1 分钟）
第 6 步  改一句话，让 AI 迭代               （约 1 分钟）

准备好一个终端（Mac 用「终端」App，Windows 用 PowerShell），我们开始。

第 1 步：装 Node 和 Claude Code

Claude Code 是一个跑在命令行里的 AI 编程助手，靠 Node.js 运行。

1）先装 Node.js（≥ 18）。 去 nodejs.org 下 LTS 版本，一路下一步装完。装完在终端里验证：

node -v
# 看到 v20.x.x 之类的版本号就 OK

2）再全局安装 Claude Code：

npm install -g @anthropic-ai/claude-code

国内 npm 慢或卡住，加一个国内镜像源：

> npm install -g @anthropic-ai/claude-code --registry=https://registry.npmmirror.com
>

3）验证装好了：

claude --version
# 打印出版本号，说明安装成功

到这一步，工具装好了，但它现在还指着官方后端（要翻墙、要外币卡）。下一步我们把它改指到 apipifa。

第 2 步：把 Claude Code 的后端指向 apipifa

原理很简单：Claude Code 认两个环境变量——后端地址和密钥。我们把这两个值改成 apipifa 的，它就走国内中转、按人民币计费了。

1）先去 apipifa 后台拿一个 Key。

打开 apipifa 官网注册登录，进后台；
用支付宝/微信充值（人民币按量，用多少扣多少；具体价格见官网价格页/后台，比官方省）；
在后台新建令牌——默认就是 auto 全模型通用池，一份 Key 全模型通用，按你实际调用的模型名自动路由计费，不用手动分组；
复制这个 Key，后面要填。

2）打开（或新建）Claude Code 的配置文件 ~/.claude/settings.json，在 env 块里填两行：

{
  "env": {
    "ANTHROPIC_BASE_URL": "https://api.apipifa.com/v1",
    "ANTHROPIC_AUTH_TOKEN": "把你从 apipifa 后台复制的 Key 粘到这里"
  }
}

- ~ 是你的用户主目录（Mac 是 /Users/你的用户名，Windows 是 C:\Users\你的用户名）。 - 如果 .claude 文件夹或 settings.json 不存在，手动建一个即可。 - apipifa 的 base 是 https://api.apipifa.com/v1——它原生兼容 Anthropic 协议（同一个 base 也兼容 OpenAI 协议），所以 Claude Code 直连就能用，不需要在本地额外开什么路由/代理工具。

3）（可选）如果启动时卡在官方的联网/登录验证，补两个开关跳过它：

编辑 ~/.claude.json，加一行 "hasCompletedOnboarding": true；
编辑 ~/.claude/config.json，加一行 "primaryApiKey": "any-string"（随便填个字符串占位即可）。

这两个只在你遇到官方引导/验证卡关时才需要，一般填好第 2 步就够了。

第 3 步：验证接通（别跳过，1 分钟省半天排错）

配置改完，先确认它真的通了，再去干正事。打开终端，随便找个空目录，敲：

claude

进入 Claude Code 交互界面后，直接打一句：

你好，请用一句话确认你现在能正常回复

只要它正常回你一句话，就说明 Claude Code 已经通过 apipifa 接通了。 这时候你就已经在用人民币、免翻墙地驱动 Claude 了。

想指定模型可以在会话里用 /model 切换，常用的有 claude-opus-4-8（最强）、claude-sonnet-5、claude-sonnet-4-6、claude-haiku-4-5（后两个是 Claude Code 里日常最常用、性价比高的档）。默认模型直接用也行。

如果这一步报错，先别慌，跳到文末 FAQ 排错 对号入座，90% 是 base 尾缀或 Key 的小问题。

第 4 步：新建项目，给 AI 一段 Prompt

接通了，现在让它干活——生成一个 SaaS 落地页。

1）先建一个空项目文件夹并进去：

mkdir my-saas-landing
cd my-saas-landing

2）在这个目录里启动 Claude Code：

claude

3）把下面这段 Prompt 完整复制进去，回车。 这段话已经帮你把技术栈、页面结构、风格都交代清楚了，零基础照抄即可：

帮我从零创建一个 SaaS 产品的落地页项目，要求：

技术栈：
- 用 Vite + React + TypeScript 搭建
- 用 Tailwind CSS 做样式
- 帮我把项目初始化好，装好所有依赖，保证 npm run dev 能直接跑起来

页面内容（单页，从上到下依次是）：
1. 顶部导航栏：左边一个产品 Logo 文字「FlowDesk」，右边有「功能 / 价格 / 登录 / 免费试用」几个入口
2. 主视觉 Hero 区：一句有冲击力的大标题 + 一句副标题 + 一个「免费试用」主按钮和一个「看演示」次按钮
3. 三栏功能卡片：展示产品的三个核心卖点，每张卡片有小图标（用 emoji 代替）、标题、一句描述
4. 一个数据展示区：横向排 3~4 个数字指标（比如「10 万+ 团队在用」）
5. 价格区：三档定价卡片（免费版 / 专业版 / 团队版），中间那档标注「最受欢迎」并高亮
6. 底部 Footer：版权信息和几个链接

设计风格：
- 现代 SaaS 风，干净清爽，主色用蓝紫色渐变
- 响应式，手机上也要好看
- 适当加圆角、阴影和 hover 效果

请一步步创建文件，创建完后告诉我用什么命令启动。

4）接下来看着它干活。 Claude Code 会：读需求 → 建文件 → 写代码 → 帮你装依赖。中途它可能会问你「是否允许执行某命令 / 是否创建某文件」，看一眼没问题就确认放行。这一步它会自己跑 npm install 之类的命令，稍等它跑完。

💡 小白提示：它做的每一步都会显示出来，你不用懂代码，只要在它请求权限时点确认、跑完等它说"完成"就行。

第 5 步：npm run dev，让页面在浏览器里出来

Claude Code 干完会告诉你启动命令，通常就是：

npm run dev

跑起来后，终端会打印一个本地地址，一般是：

  ➜  Local:   http://localhost:5173/

复制这个地址，粘到浏览器打开。 你应该能看到刚才描述的 SaaS 落地页——导航栏、蓝紫渐变的大标题、三栏功能卡、价格表，全在那儿。

这就是你的第一个 AI 生成的页面，10 分钟内跑通。 从装工具到浏览器里出页面，全程没翻墙、花的是人民币。

如果 npm run dev 报错，把报错原文直接复制回 Claude Code，让它自己修——它能读懂报错并改代码，这也是 Claude Code 最爽的地方。

第 6 步：改一句话，让 AI 迭代

真正体会 AI 编程的爽点，在"改需求"这一步。页面开着别关，回到 Claude Code 里，直接用大白话提要求，比如：

把主标题改成「让团队协作快 10 倍」，
Hero 区的背景渐变从蓝紫改成青绿色，
再在价格区上面加一个「用户评价」区块，放 3 条客户好评。

回车，Claude Code 会定位到对应文件、改代码。Vite 支持热更新，你不用重启，浏览器会自动刷新，几秒后新版本就出现了。

想加功能、换配色、调文案，就这样一句句说。你负责提需求，AI 负责写代码——这就是零基础也能做出东西的关键。

到这里，一个完整闭环你已经走通了：装工具 → 接 apipifa → 生成页面 → 迭代修改。

FAQ 排错（遇到问题先看这里）

Q1：报 401 / Unauthorized，提示鉴权失败？ A：Key 的问题。检查两点：① ~/.claude/settings.json 里 ANTHROPIC_AUTH_TOKEN 填的是不是 apipifa 后台那个 Key，有没有多复制空格/引号；② 后台账户是否有余额（按量计费，余额为 0 会被拒）。改完退出 Claude Code 重开再试。

Q2：base 地址到底带不带 /v1？ A：apipifa 接入 Claude Code 用 https://api.apipifa.com/v1，逐字符核对、别漏 /v1。地址错了通常表现为连接失败或 404。按上面这个原样填即可。

Q3：报 404 / Not Found？ A：多半是 base 尾缀写错，或把地址写成了别的路径。确认 ANTHROPIC_BASE_URL 就是 https://api.apipifa.com/v1，不要自己在后面拼 /messages、/chat 之类的东西——Claude Code 会自动补全路径，你只给到 /v1 这一层就对了。

Q4：提示模型名不存在 / 无可用模型？ A：用当前在线的模型名：claude-opus-4-8、claude-sonnet-5、claude-sonnet-4-6、claude-haiku-4-5。老的 opus-4-6、opus-4-7 已经下线，别再写。用 /model 命令切换即可。

Q5：改完配置没生效？ A：环境变量类配置改完要退出 Claude Code 重新启动才读得到。先 Ctrl+C 退出，再重新 claude 进入。

Q6：npm install 或 npm run dev 卡住/报错？ A：网络问题多，npm install 加国内镜像 --registry=https://registry.npmmirror.com。代码报错就把报错原文丢回 Claude Code 让它修——这类问题它自己能解决。

Q7：卡在官方登录/联网验证界面进不去？ A：按第 2 步的第 3 小点补 hasCompletedOnboarding 和 primaryApiKey 两个开关跳过。因为走的是中转、不依赖官方登录态，这两个占位值填上就能过。

为什么用 apipifa 接 Claude Code（对比官方直连）

同样是跑 Claude Code，走 apipifa 中转和硬啃官方直连，体验差在这几点：

一份 Key 全模型——同一个 Key 不止能跑 Claude，Codex（GPT 系）、Grok 也在同一套账号里，auto 通用池按模型名自动路由，不用为每个模型各配一套；
人民币付费，无需外币卡——支付宝/微信直接充，告别 Visa/Master 绑卡；
国内直连，不用翻墙——网络这道最劝退的坎直接没了；
原生兼容协议、直连不用本地路由——base 同时兼容 OpenAI 和 Anthropic 协议，Claude Code 改两行配置就通，不用在本地额外开代理/路由工具；
按量计费，没有 5 小时额度墙——官方订阅那种"跑一会儿就被限流"的墙没有了，用多少算多少；
不碰官方账号封号风险——中转不走官方登录态，所以不涉及官方账号被封这件事（网络稳定性、第三方服务本身不打包票，但至少不会因为"用得多"把你官方号搞没）。

对刚想试 AI 编程、还没建立起一套"翻墙 + 外币卡 + 官方订阅"基建的新手来说，这条路的启动成本低得多。

下一步：去开号，把这 10 分钟走一遍

看完不动手，等于没看。现在就做三件事：

注册 apipifa → 支付宝/微信充一点额度（按量计费，试水花不了几个钱，具体价格看官网价格页/后台）；
在后台新建一个令牌（默认就是 auto 全模型通用池，一份 Key 全模型通用）；
按第 1~2 步装好 Claude Code、把 Key 填进 settings.json，然后用本文第 4 步那段 Prompt，亲手跑出你的第一个 SaaS 落地页。

一份 Key 在手，Claude、Codex、Grok 全都能调，从写页面到写脚本、改 bug，全程人民币、免翻墙、按量走。去 apipifa 开个号，把这 10 分钟走一遍，你会回来谢自己今天动了手。