今天是学习 AI 编程的第四天。前三天我基本在“用”AI：写提示词让聊天机器人解释代码，开个编辑器插件让它补全函数，把报错信息粘贴出去求助。工具换了好几轮，但对 AI 编程的认知始终停留在一问一答的层面。第四天终于不一样了：我搞定了 Claude Code 的部署，还顺手搞清了 Landing page 是什么，并且用这套组合拳从头做出了一个能直接打开的页面。这篇文章就把第四天的完整过程记录下来——从安装命令，到第一个落地页，再到踩坑记录，希望能帮正在自学 AI 编程的人少走一点弯路。
1. 部署前必须想清楚的一件事：Claude Code 到底是什么
在敲安装命令之前，我建议你先花两分钟搞清楚它是什么，否则装完也不知道怎么用。Claude Code 是 Anthropic 推出的编程代理工具，本质是一个跑在终端里的 AI 助手，它和普通聊天机器人的最大区别是：它能“动手干活”。它可以在项目目录里读写文件、执行终端命令、运行测试、修改多个文件后再给你总结。你给它一个目标，它自己规划步骤、自己调用工具完成，而不是只丢给你一段代码让你自己复制粘贴。
我用一个类比帮你理解：传统的 AI 编程插件像给键盘装了个自动补全，你敲代码它猜下一段；Claude Code 更像请了个坐在你旁边的实习生，你交代一句“帮我改好登录页的样式”，它会自己打开文件、找到对应 CSS、改完再回来跟你汇报。这个差异非常关键，因为你的角色从“写代码”变成了“拆解任务 + 验收结果”。第四天最让我震撼的瞬间就是第一次看到它在终端里自主操作文件，那一刻我才意识到，AI 编程的核心不是让 AI 替你“敲”，而是让 AI 替你“做”。
1.1 运行形态：CLI 才是主战场
Claude Code 的主要形态是一个命令行工具，安装后在任意项目目录里输入claude就能启动交互式会话。你输入的每一行指令，它都会在后台拆解成多个动作：查看文件、搜索符号、修改变量、运行命令。这个设计的好处是，它没有把 AI 锁在某一个编辑器里——你用 VS Code、Vim、JetBrains 或纯终端都可以。实际上很多第三方 API 转发工具也是基于这个 CLI 引擎做的，比如热门的 cc switch 就是通过修改配置把 Claude Code 的请求转向 DeepSeek、通义千问 Qwen、智谱 GLM 等兼容模型，核心仍然是这套命令行工作流。
1.2 和常见 AI 编程工具的核心差异
我画了一张对比表，第四天我做完部署后认真整理过，方便你快速理解它为什么值得单独学：
| 工具 | 运行位置 | 自动化程度 | 适合场景 |
|---|---|---|---|
| GitHub Copilot | 编辑器内 | 行级补全 | 写代码时加速输入 |
| Cursor | 编辑器内 | 编辑器级补全、局部重构 | 需要实时反馈的编码 |
| Claude Code | 终端/CI | 文件读写、命令执行、跨文件修改 | 从零做一个功能或整个页面 |
这个对比说明一件事：Claude Code 的前两层能力——读文件和执行命令——是普通编辑器插件很少具备的。它等于把“AI 编程”从“下一个字”升级到了“完成一个任务”。所以如果你已经会基础的提示词，第四天完全可以直接上手它，不用像我从第一天开始慢慢试。
2. 完整部署步骤：从环境检查到让 Claude 跑起来
部署本身不难，但有几个前置条件没准备好，后面的报错会让人头大。第四天我在安装阶段就遇到了好几个经典报错，最后整理成了一套稳定的流程，照这个顺序走基本不会翻车。
2.1 环境准备：Node.js 版本是第一道门槛
Claude Code 是 npm 包，意味着你的电脑里必须先有 Node.js 环境。很多人卡在这一步，不是因为你不会装，而是因为你用的 Node 版本太老。官方要求 Node 18 以上，我建议直接装 20 以上的 LTS 版本，省心很多。
安装前先检查：
node -v npm -v如果提示找不到命令，说明 Node.js 还没装，去官网下载对应平台的 LTS 安装包，一路默认安装就行。Windows 用户安装完记得重启终端让 PATH 生效。这一步没什么技术含量，但非常重要——我见过很多人安装时跳过这步，后面执行claude --version直接报错。
注意：macOS 用户建议通过 Homebrew 安装 Node，Linux 用户建议用 nvm 管理版本，Windows 用户直接装官方安装包最省事。千万别从网上随便下载“绿色版”或“精简版”，系统架构不匹配会引发后面“与 64 位 Windows 不兼容”那类问题。
2.2 安装命令与认证激活
环境确认没问题后，安装命令其实只有一条：
npm install -g @anthropic-ai/claude-code安装完成后用claude --version验证版本号。如果能看到版本号，说明 CLI 装好了。这时候在任意项目目录里输入claude，工具就会进入交互式模式。
首次启动会要求你完成账号认证。你需要注册 Anthropic 账号，浏览器里完成授权后，把生成的长字符串贴回终端，就算激活成功了。这里有个很多新手问的点：注册账号和不注册账号到底有什么不同？我的实测答案是，不登录基本没法正常使用，登录后你才能用订阅或按量付费的方式来调度模型；如果你不想绑定官方账号，也可以参考后面说的 cc switch 方案，把请求转发到 DeepSeek、Qwen、GLM 这类第三方兼容接口上，这类方案对团队协作和成本控制都更友好。
2.3 在 VS Code 里完成接入
虽然 Claude Code 本身是终端工具，但配合 VS Code 使用体验会好很多，第四天我就是这样做的。先在扩展商店里搜 “Claude Code for VS Code” 安装扩展，然后在 VS Code 里打开终端运行claude，这样你能一边看代码，一边用自然语言指挥它改代码。它的指令是基于项目的，所以不用手动告诉它“打开哪个文件”，它会自己读取工作区里的结构。
第一次在 VS Code 里启动时，可能会看到权限确认提示，因为 Claude Code 要做文件写入或命令执行。建议先允许它操作当前目录，等熟悉之后再去精细化管理权限。如果遇到“无法执行终端命令”或需要调用本地模型等需求，可以在配置里指定 OpenAI 兼容的本地服务地址。比如想用 LM Studio 跑本地模型，就把它提供的本地接口地址填入 API Base URL，再配上对应的模型名，它就能在离线环境下用低成本模型做开发实验，不过生成质量会比云端模型波动大一些，适合隐私优先的场景。
3. 第一次实战：用 Claude Code 生成一个 Landing page
工具跑起来之后，第四天最重要的实战开始了。我选择的任务非常明确：让 Claude Code 从零做一个 Landing page。这个任务不大不小，刚好能体现它的核心能力——创建文件、写样式、启动本地预览、迭代修改。
3.1 给 Claude 的提示词，不是越复杂越好
很多人第一次用这类工具时，容易犯两个毛病：要么一句话说得太笼统——“给我做个网页”，结果 AI 自由发挥得你完全没法用；要么事无巨细地写长篇需求，把 AI 的思考空间堵死。我的经验是，把你的真实目标、约束条件和输出格式写清楚就够了，具体的美术细节可以交给 AI。
我当时用的提示词大概是这样的：
你是一个资深前端工程师。请为我创建一个独立产品的 Landing page（落地页）。 产品：一个帮助个人开发者记录每日学习进度的 Web 应用。 要求： 1. 输出 index.html，使用内联 CSS，纯静态，不要依赖外部 CDN 2. 响应式布局，适配移动端 3. 文案用中文 4. 结构包含：导航栏、Hero 区、3个功能特点、3档价格方案、FAQ、底部 CTA 5. 视觉风格：简洁现代，主色 #2563EB，背景浅灰 6. 完成后启动本地预览服务器，告诉我预览地址注意，我没有写任何具体的代码规范，而是给了它“结构、风格、输出形式”三个维度的约束。Claude Code 收到之后，会自动规划要创建哪些文件，然后在终端里把计划列出来，再逐个执行。它创建完 index.html 之后，还会执行类似python -m http.server 8000这样的命令把预览服务器跑起来，然后把地址告诉你。打开浏览器看到页面那一刻，你会感受到“提示词就是生产力”这句话的真实含义。
3.2 它真的会自己执行终端命令
热词里有个高频问题：Claude Code 如何直接执行终端命令？第四天我也专门观察了这一点。当它需要启动服务器、安装依赖或运行脚本时，终端里会出现一条命令执行请求，你需要确认后它才会真正执行。这是安全机制，但很多新手会误以为是卡住了。
我建议你把“直接执行终端命令”的开关打开，同时把命令限定在当前项目目录里，这样 Claude Code 的工作流会很顺畅。比如它改完样式后可以直接重启预览服务器，不用你手动敲命令。这大幅提升了迭代效率。你需要记住一点：工具本身不会自动执行危险命令，但如果你把权限完全放开，它有可能会执行删除文件或大范围修改的命令，所以确认前的短暂停顿其实是保护你的。
3.3 从落地页到产品页：迭代才是日常
第一个版本出来后，我继续追加了几条指令让它迭代，比如“在 Hero 区加一个按钮，点击后跳转到注册页面”“把价格区改成推荐的三档，突出第二档”。它每次都能准确定位到对应的 HTML 结构并完成修改，而不是重新生成一个文件。这种“增量修改”能力是代理型工具和聊天机器人的显著区别——你会感觉自己真的在带一个实习生干活，而不是每次都要从头描述需求。
4. 什么是 Landing page，为什么学 AI 编程绕不开它
第四天我把一半时间花在部署上，另一半时间就是在搞懂 Landing page 这个概念。它看起来是个简单的词，但很多新手并不清楚它和普通网站首页到底有什么区别。
4.1 一句话定义：一个只为转化而存在的页面
Landing page，中文通常叫“落地页”或“着陆页”，指的是用户点击广告、搜索结果、邮件链接或扫码之后进入的那个独立页面。它的核心特征是：整个页面只为完成一个目标而存在，这个目标通常叫 CTA（Call To Action，行动号召），比如注册、下载、购买、预约。
用生活化的方式理解，它像商场门口的活动摊位：摊位不会把整个商场逛遍，也不会给你一堆路线指引，它就是把你引到一个小区域，让你做一件事——扫码拿优惠券。Landing page 的设计哲学也一样：砍掉导航栏、砍掉无关链接、用文案和视觉把所有力量集中在“让访客采取一个动作”上。
4.2 Landing page 和普通网站首页的几个关键区别
| 维度 | 普通网站首页 | Landing page |
|---|---|---|
| 目标 | 多目标：展示、导航、分流 | 单目标：促成一次转化 |
| 元素 | 顶部菜单、多个链接、功能入口 | 无多余导航，CTA 按钮突出 |
| 入口 | 用户直接输入域名进入 | 广告、活动链接、二维码进入 |
| 生命周期 | 长期维护，随产品迭代 | 按活动周期快速上线和下线 |
很多开发者会忽略一个事实：普通个人网站的产品页，本质上是“展示型页面”，而 Landing page 是“转化型页面”。两者的差异决定了内容的组织方式。如果你用 AI 写 Landing page，就必须在提示词里写明最终转化动作，否则 AI 很容易生成一个“好看但不知道该让用户干什么”的页面。
4.3 为什么学 AI 编程时，落地页是最好的练手项目
新学 AI 编程的人，最痛苦的问题是“不知道让它做什么任务”。写一个复杂的后台系统，AI 会失控；写一个单函数，又体现不出代理工具的价值。Landing page 刚好卡在中间：结构清晰、代码量适中、验证标准明确——“打开页面看看能不能在手机上正常显示并完成点击”。
而且落地页是独立开发者最常遇到的真实需求。你想验证一个产品、做一次活动推广、给开源项目做介绍，第一件事往往就是写一个 Landing page。学好它就意味着你拥有了一种“随时生成、随时迭代”的活动页工作流。这不只是学前端，更是学习如何用 AI 把一个营销目标翻译成代码任务。
5. 四天踩坑实录：常见问题与排查对照表
第四天最值钱的不是顺利跑通，而是踩了一串坑。这些坑如果不记下来，下次换个电脑又要重新踩一遍。我把高频问题整理成一张速查表，你可以直接把它加入收藏。
5.1 部署阶段的高频报错速查表
| 现象 | 可能原因 | 处理办法 |
|---|---|---|
internetopenurl() failed 0x80072EFD | 系统网络访问异常、代理设置冲突 | 检查网络连通性，清理系统代理缓存，重启终端后再试 |
your organization has disabled claude subscription access | 企业账号限制了 Claude 订阅权限或消费额度 | 联系管理员开启权限，或切换个人账号 |
安装后claude不是可执行命令 | npm 全局路径未加入 PATH，或 Node 架构不匹配 | 重新安装 Node LTS，确认终端里 PATH 包含 npm 全局目录 |
| 与 64 位 Windows 不兼容 | 系统架构或安装包位数不对 | 更新到官方 64 位 Node.js，卸载后重装 Claude Code |
claude启动后长时间无响应 | 首次启动需要预热，或网络请求等待超时 | 多等一会儿；如果持续无响应，检查网络和账号状态 |
这类问题里，网络相关报错是最常见的，但不要一看到“网络”就想到去折腾系统配置。多数情况下是终端代理缓存、系统防火墙或 DNS 解析问题，先把这些排查干净，基本都能解决。我还要特别提醒一句：不要因为工具提示当前区域或网络不支持，就去寻找奇怪的第三方“加速”或“替代渠道”，那很容易引入安全风险。官方支持列表、等待后续更新、或切换成可用的第三方 API 转发方案，才是更稳妥的选择。
5.2 使用中的产品级避坑经验
第一个经验是“别让它一口气改整个项目”。Claude Code 虽然能做跨文件重构，但如果你在一个大项目里直接给它一个全局任务，它可能会改乱很多你不希望动的地方。第四天我犯过一次：让它优化样式，结果它顺手调整了一个无关组件的布局。后来我学会了把它每次的操作范围控制在“当前点开的文件”或“指定目录”里。
第二个经验是“控制会话长度”。CLI 工具的上下文窗口是有限的，它会把你和它的整个对话都算进上下文。一个会话聊太久，效果会下降，token 消耗也会变大。我的习惯是：每个小任务开一个新会话，只带上关键文件和目标描述，做完就收工。
第三个经验是关于 cc switch 这类第三方 API 接入工具的。它的价值在于你可以把请求指向 DeepSeek、Qwen、GLM 等多个兼容模型，一方面可以降低对单一服务的依赖，另一方面也可以控制成本。但要注意：切换不同模型后，同一个请求的生成质量可能完全不同。调试时最好固定同一个模型，别频繁切来切去，否则你很难判断是提示词的问题还是模型差异造成的。
5.3 给自学者的三条实操建议
第四天结束，我把我的经验压缩成三条建议，特别适合和我一样自学的朋友：
第一，不要只搜教程，要给自己一个具体的交付物。像我一样指定“做一个能打开的 Landing page”，把它跑出来、改三遍、推给朋友看。这个闭环本身比看十个视频都有用。
第二，记录你自己的报错对照表。每个人的环境不一样，你遇到的报错大概率别人也会遇到。每次解决问题之后，花两分钟把现象、原因、操作记下来，过一两个月你回头看，会发现那是你最有价值的 AI 编程笔记。
第三，学会“拆任务”。Claude Code 最擅长的不是大而全，而是把一个大目标拆成多个小步骤。你作为指挥者，接到一个需求后先自己在脑子里拆一遍，再让 AI 去完成其中一部分。这个力和“写代码”无关，但它决定你能用 AI 做出多复杂的东西。
我个人在实际操作中有一个体会：第四天让我真正转变的不是安装成功那一刻，而是听见 Claude Code 在终端里自己执行命令、自己建文件、然后我把浏览器打开看到完整落地页的那几秒钟。它让我明白，学 AI 编程的分水岭不是“会不会写代码”，而是“会不会把目标拆成足够清晰的指令”。所以如果你正在自学，我强烈建议你给自己安排一个类似的单页任务：别追求复杂，就把 Landing page 做出来、跑起来、再改三遍，整个过程比刷十篇教程都管用。
