再见 Cursor，从0到1用上Claude Code后，惊呼这才是生产力工具｜保姆级教程

最近，为了给我的一个AI项目做功能升级，我算是把Cursor给“盘”明白了。但说实话，越用越觉得有点“不得劲”。

一个不是很复杂的功能，在Cursor里，这事儿就变得特别“拧巴”：我得手动@一堆相关文件，一遍遍地跟它解释上下文，结果AI还是经常“跑偏”，改出来的代码要么不符合项目原有的设计模式，要么就直接引入新bug。

折腾了两周，我感觉自己不是在用AI提效，而是在给AI“擦屁股”，效率没提上来，人先“红温”了。

这时我想起了 Claude Code，一直听说它是最强 AI 编程，但我一直没空去用。这次决定试下。

不试不知道，一试吓一跳！

先说结论，Cursor和Claude Code，根本就是两种完全不同的开发哲学。

• Cursor是“辅助编码”：你依然是主导者，AI是你手里的“锤子”，你需要精确地告诉它敲哪里。
• Claude Code是“代理式开发”：你更像个“项目经理”，提出目标后，AI会自己变成一个“开发团队”，自主完成规划和执行。

今天，我们就来彻底搞懂Claude Code。从保姆级的安装配置教程，到核心功能的深度解析，再到一个完整的实战案例，带你一步一步，搞懂这个当下最强的 AI 编程工具。

安装与配置：保姆级教程

要使用 Claude Code，必须确保本地环境满足其运行要求，并完成必要的配置。以下是确保您顺利安装并运行的完整步骤。

第一步：环境准备 (Node.js)

Claude Code 依赖于 Node.js 环境。请确保您的系统中已安装 Node.js 18 或更高版本。

1. 1. 安装 Node.js:

1. 2. 验证安装:

在终端中输入以下命令，如果能正确返回版本号，则表示安装成功。

node --version

第二步：安装 Claude Code

通过 npm (Node.js 包管理器) 全局安装 Claude Code。

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

安装完成后，通过以下命令验证：

claude --version

成功安装将显示具体的版本号。

第三步：首次运行与账户配置

1. 1. 启动 Claude Code: 在您的项目目录或任意位置的终端中，输入 claude 命令。

claude

首先会让你选择一个主题，下面Preview是主题的预览

1. 2. 账户登录与授权: 首次运行时，Claude Code 会引导您进行配置。它支持两种主要的登录方式：

• Claude account with subscription: 使用您订阅了 Pro 或 Max 套餐的 Claude 网页端账户。这是性价比最高的方案，费用固定可预测。
• Anthropic Console account: 使用 Anthropic API 开发者账户，按 token 使用量计费。

选择后者，后面介绍白嫖 100 美金额度的方法 ⬇️

1. 3. 切换至项目路径

因为我是直接打开 Terminal，claude 提醒我这是 home 文件夹，让我切换到项目文件夹下，这样比较好管理文件。

怎么做呢？用cd命令，这是切换当前路径的命令

重新打开 Terminal，输入 cd 注意后面有个空格，然后把新建好的文件夹拖进去

如下图，就看到我们切换到了文件夹claudecodetest里了

1. 4. 白嫖 100 美金 API 额度

国内API 中转站Any Router 现在搞活动，新人注册就送100美金额度。

打开链接https://anyrouter.top/register?aff=Wmh1，用 github 登录就行。

注意一定要用我的这个邀请链接来注册才有额度赠送。

注册完就能看到了。

新建 Token

建议设置成无限额度

配置好模型，可以只用 claude4，怕额度不够的就把 3.7 加上

毕竟我们要用到 Claude Code 的都是比较复杂的需求，尽量就不用 3.5 了

回到终端 Terminal，先退出Claude Code ，输入以下配置

# 设置 API 密钥
export ANTHROPIC_AUTH_TOKEN=sk-...【这里填你刚才新建的 Token】
# 设置代理服务器地址
export ANTHROPIC_BASE_URL=https://anyrouter.top
# 重新启动 claude
claude

看到这里显示我们自己设置的中转地址就证明成功了。

为避免每次都需手动设置，可将 export 命令添加到您的终端配置文件中（如 .bashrc 或 .zshrc）。

参考：

echo -e '\n export ANTHROPIC_AUTH_TOKEN=sk-...' >> ~/.bash_profile
echo -e '\n export ANTHROPIC_BASE_URL=https://anyrouter.top' >> ~/.bash_profile
echo -e '\n export ANTHROPIC_AUTH_TOKEN=sk-...' >> ~/.bashrc
echo -e '\n export ANTHROPIC_BASE_URL=https://anyrouter.top' >> ~/.bashrc
echo -e '\n export ANTHROPIC_AUTH_TOKEN=sk-...' >> ~/.zshrc
echo -e '\n export ANTHROPIC_BASE_URL=https://anyrouter.top' >> ~/.zshrc

⚠️ 踩坑经验：

1. 1. 注意，据说 Any Router 会收集使用的数据，所以才这么低价；确保大家只是在做案例或者测试的时候使用，不要涉及个人信息
2. 2. 想用第三方 API 中转的话，需要提前先在 Claude Code 里退出登录/log out

第四步：IDE 集成与优化

Claude Code 能与主流 IDE 无缝集成，实现终端与图形化界面的联动。

• VS Code & JetBrains IDEs: 在 IDE 内置的终端中首次运行 claude，它会自动提示并安装相应的插件。安装后，您可以通过快捷键 Command + ESC (macOS) 或 Ctrl + ESC (Windows/Linux) 快速唤出 Claude Code 面板。
• 差异查看器: 当 Claude Code 修改代码时，它能调用 IDE 的 diff 工具来可视化变更。通过 /config 命令将 diffTool 设置为 auto 即可启用此功能。

常用斜杠命令

斜杠命令/是与 Claude Code 交互的主要方式

以下是部分核心命令的摘要：

核心特性解析

• 上下文记忆 (CLAUDE.md): 这是一个特殊的 Markdown 文件，您可以在其中定义项目的高级规则、编码规范、技术栈偏好等。Claude Code 在每次对话开始时都会读取此文件，作为其行动的“最高指示”，这能显著提升其输出的准确性和一致性。
• 图像识别: 对于前端开发或 UI 调试尤其有用。您可以直接将 UI 截图、设计稿或包含错误的界面截图粘贴到终端中（使用 Ctrl+V），并向其提问，例如：“请用 HTML 和 CSS 实现这个设计”或“分析这个截图中的错误原因”。
• 深度思考模式: 当面临复杂任务时，可以使用 think、think harder 或 ultrathink 等关键词来引导模型进行更深层次的规划和思考。ultrathink 消耗的 token 最多，但规划也最为详尽。
• 模型上下文协议 (MCP): MCP 是一种开放标准，允许 AI 代理调用外部工具。例如，通过安装 XcodeBuildMCP 可以让 Claude Code 更好地构建和测试 iOS/macOS 应用；安装 browsermcp 则能增强其与浏览器交互以进行网站开发的能力。

实战演练：从 0到一添加新功能

光说不练假把式，我们拿个简单项目来实操一下 Claude Code，并在此过程中应用多个核心命令。

正好前段时间用扣子空间做了一期从 0 到 1 打造出海 APP 原型的内容 从0到1，我如何用“扣子空间”攻克本土化难题，为我的智能猫砂盆打造出海APP原型，为我的智能猫砂盆打造出海APP原型，但说实话效果不是很满意，刚好这会拿 CC 来跑跑看。

第一步：理解现有项目

先把产品开发需求文档扔到项目文件夹里

然后让它阅读文档，搞清楚我们现在要干嘛，同时也测一下 Claude Code 是否能跑通？

阅读当前项目的产品开发需求文档，搞清楚需要开发什么样的 app 产品原型 html

OK，跑起来了，可以看到 Claude Code调用了工具来做查找文档然后分析

第二步：直接跑

直接把这段生成 APP 原型的提示词复制黏贴进去：

接下来更进一步，请根据需求文档以及以下的要求，运用你全部的专业知识和创造力，创作一个单页HTML网页：展示一套功能完善、视觉出众的高保真交互原型。

直接输出完整HTML，不需要前后置引导语。

现在需要输出高保真的原型图，请通过以下方式帮我完成所有界面的原型设计，并确保这些原型界面可以直接用于开发：
1、用户体验分析：先分析这个 App 的主要功能和用户需求，确定核心交互逻辑。
2、产品界面规划：作为产品经理，定义关键界面，确保信息架构合理。
3、高保真 UI 设计：作为 UI 设计师，设计贴近真实 iOS/Android 设计规范的界面，使用现代化的 UI 元素，使其具有良好的视觉体验。
4、HTML 原型实现：使用 HTML + Tailwind CSS（或 Bootstrap）生成所有原型界面，并使用 FontAwesome（或其他开源 UI 组件）让界面更加精美、接近真实的 App 设计。
拆分代码文件，保持结构清晰：
5、每个界面应作为独立的 HTML 文件存放，例如 home.html、profile.html、settings.html 等。
- index.html 作为主入口，不直接写入所有界面的 HTML 代码，而是使用 iframe 的方式嵌入这些 HTML 片段，并将所有页面直接平铺展示在 index 页面中，而不是跳转链接。
- 真实感增强：
  - 界面尺寸应模拟 iPhone 15 Pro，并让界面圆角化，使其更像真实的手机界面。
  - 使用真实的 UI 图片，而非占位符图片（可从 Unsplash、Pexels、Apple 官方 UI 资源中选择）。
  - 添加顶部状态栏（模拟 iOS 状态栏），并包含 App 导航栏（类似 iOS 底部 Tab Bar）。
请按照以上要求生成完整的 HTML 代码，并确保其可用于实际开发。


这个html页面要求同时展示APP的多个页面，也就是说有多个iphone 15 pro的界面平铺在页面中，以便用户能直观看到全部产品页面。

可以看到 Claude 的规划能力在线的

Claude 的水平没毛病，生成了多个 html 文件

最终效果长这样：

至此，我们完成了 Claude Code 从 0 到 1 的安装，并配上了第三方中转 API，最后通过一个小实践，真正踏上了 Claude Code 的提效之旅～

对了，刚才分析文档➕开发原型的需求，总共跑了 37591Tokens，耗费 0.95🔪

跑的是 claude4，这成本你觉得还可以接受吗？

关注我，下一期继续分享 Claude Code 的使用技巧。