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

4.8

0热度

Claude Code 凭借其强大的功能，彻底改变了作者的编程方式。本文从安装配置到核心功能解析，再到实战案例，全方位展示了 Claude Code 的强大生产力，助你从 0 到 1 高效开发。

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

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

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

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

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

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

对了，很多人会对 CC 的昂贵吓退，别担心接下来会介绍如何白嫖 100 美金额度，先让你免费用爽。

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

安装与配置：保姆级教程

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

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

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

1. 安装 Node.js:访问Node.js 官方网站
https://nodejs.org/en/download/current，下载并安装适用于您操作系统的 LTS (长期支持) 版本。

2. 验证安装:

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

注意：对于 Windows 用户，Claude Code 需要在 Windows Subsystem for Linux (WSL) 环境中运行。请先安装并配置好 WSL。

第二步：安装 Claude Code

通过 npm (Node.js 包管理器) 全局安装 Claude Code。npm install -g @anthropic-ai/claude-code

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

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

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

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

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

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

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

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

3. 切换至项目路径

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

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

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

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

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# 重新启动 claudeclaude

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

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

参考：echo -e ‘n export ANTHROPIC_AUTH_TOKEN=sk-…’ >> ~/.bash_profileecho -e ‘n export ANTHROPIC_BASE_URL=https://anyrouter.top’ >> ~/.bash_profileecho -e ‘n export ANTHROPIC_AUTH_TOKEN=sk-…’ >> ~/.bashrcecho -e ‘n export ANTHROPIC_BASE_URL=https://anyrouter.top’ >> ~/.bashrcecho -e ‘n export ANTHROPIC_AUTH_TOKEN=sk-…’ >> ~/.zshrcecho -e ‘n export ANTHROPIC_BASE_URL=https://anyrouter.top’ >> ~/.zshrc

⚠️ 踩坑经验：

1. 注意，据说 Any Router 会收集使用的数据，所以才这么低价；确保大家只是在做案例或者测试的时候使用，不要涉及个人信息

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 的规划能力在线的