四天前，我还只会跟AI聊天写文案，今天已经坐在终端前让Claude Code自动生成一整个网页的代码。变化来得比我想象中快，这个进度我自己都有点意外。今天是学习AI编程的第四天，核心任务两件事：把Claude Code部署到本地电脑跑起来，以及彻底搞明白“Landing page（落地页）”到底是个什么概念。这两件事看起来一个偏工具一个偏概念，但实际上它们是一体的——工具是用来干活的，而“落地页”就是我这个阶段最适合拿来练手的第一类真实项目。这篇文章就把我第四天的完整经历写下来，包括部署过程中踩的坑、配置第三方模型的方法、以及我是怎么用Claude Code从零生成一个落地页的，给同样在自学AI编程的人一个可以直接照着抄的参考。
1. 第四天的新课题：为什么同时碰Claude Code和Landing Page
1.1 从“看教程”到“写代码”的临界点
前三天我做的事情基本是：学习提示词的基本写法、在网页版AI里反复实验、看别人是怎么用AI生成代码的。看完的最大感受是，好像会了，又好像什么都不会。因为网页版对话里生成的代码，你得手动复制到编辑器里，再手动调试，来来回回非常折腾。真正想用AI干活，必须把AI拉进开发环境里，让它直接读你的文件、改你的代码、执行命令。
Claude Code就是干这个的。它是Anthropic官方出的终端AI编程工具，装好之后你可以在命令行里开启一个AI会话，它能读取当前项目目录下的文件，能修改代码、运行测试、提交git，甚至能自己根据报错信息修复问题。它和网页版的区别，类似于“在食堂点菜”和“把厨师请进你家厨房”的区别。网页版把代码生成出来就结束了，而Claude Code是在你的项目现场工作，能直接操作你电脑上的真实文件。
选择第四天做部署，其实是刻意安排的。前三天的知识铺垫已经够了，再不进入真实项目，学的东西就会慢慢蒸发。部署工具会暴露很多环境问题，而解决这些问题的过程，本身就是在学AI编程。我建议所有想学AI编程的人，都把“部署一个终端AI编程工具”这件事提前，而不是拖到学完一堆理论之后。
1.2 Landing Page为什么是AI编程的“Hello World”
Landing page，中文叫落地页，指的是用户点击广告、搜索结果或者某个链接后，看到的第一个独立页面。它的核心目的非常单一：让用户在这个页面上完成一个动作。可以是注册账号、下载App、提交表单、购买商品，也可以是加一个微信或者关注公众号。
落地页和普通官网首页不一样。官网首页讲究信息架构和导航，恨不得把所有页面都串起来；落地页是封闭的，通常没有导航栏，或者只有极少的链接，目的就是让用户专注地走向唯一的转化按钮。这就像一个只卖一道招牌菜的餐厅，菜单上就一个选项，顾客进店之后不需要纠结，直接点那道菜就完了。
为什么说落地页是AI编程最好的入门项目？因为它足够小，通常就是一个HTML文件加一个CSS文件，可能再配一点JavaScript。页面结构清晰，有头部、主视觉、特性介绍、用户评价、常见问题、行动按钮这些固定模块。没有复杂的后端逻辑，没有数据库，没有登录注册。新手用AI做这样一个页面，能快速看到完整的成果，获得正反馈。同时它又非常实用，无论是将来做自己的产品推广，还是帮朋友的公司做一个活动页面，这套技能都能直接用上。
还有一个原因是，落地页的评判标准很明确：转化率高不高、页面是否足够吸引人、加载快不快、在手机上看起来是否舒服。这种“好坏一目了然”的项目，特别适合用来训练自己的审美和代码审查能力。
2. 部署之前的准备：账号、运行环境与模型选型
2.1 账号与订阅档位：免费和付费到底差在哪
部署Claude Code之前，先要搞清楚账号的问题。我当时查了一圈资料，看到好多人问“注册账号和不注册有啥不同”。我的实际经验是：如果你完全没登录，Claude Code可能连跑都跑不起来，更别谈正常使用了。
Claude Code的登录方式有两种主流路径。一种是用Claude账号的订阅权限，登录后直接使用Pro或Max订阅中包含的额度。另一种是用Anthropic API的API Key，按实际调用量计费。两条路各有适用场景。如果你已经在用Claude的Pro订阅，那直接关联账号是最省事的，不需要额外折腾API计费的事情。如果你只是偶尔用一下，或者想接入其他模型（比如DeepSeek、Qwen、GLM这类），那走API Key路线更灵活。
我第四天部署时选择的是通过配置API密钥的方式接入，原因很简单：我想同时试几个不同的模型看效果，而不是被绑定在一个固定的模型上。后来我还用了CC Switch这个工具来做不同模型之间的快速切换，这个后面细说。
需要特别提醒的是，有一些企业或者组织用户会遇到一个报错，提示“Your organization has disabled Claude subscription access for Claude Code”。这个提示的意思是，你们的组织管理员在后台策略里关闭了Claude Code的订阅权限，不是你个人账号有毛病。遇到这种提示，别慌，先去找你们公司的IT管理员确认策略，或者直接用个人账号和API Key方式绕过组织限制。我见过很多人在这个报错卡了好几天，其实就是一个组织策略开关的问题。
2.2 运行环境准备：Windows、macOS、Ubuntu一个都不能少
Claude Code本质上是Node.js编写的命令行工具，所以不管什么操作系统，第一件事就是确保电脑上有Node.js环境。我用的版本是Node.js 18以上，新版本更好。如果你的电脑上还没装Node.js，去官网下载LTS长期支持版本装好就行，装完在终端输入node -v能看到版本号就说明成功了。
三个平台的安装方式有点小区别，我实际都试过：
Windows这边，最稳妥的做法是先装好Node.js，然后打开PowerShell或者CMD窗口，用npm全局安装命令把Claude Code装上去。Windows的用户要注意一点，别用那种旧版本的安装包直接解压覆盖，容易触发“与64位版本的Windows不兼容”的报错。这个报错我后面在第5章会详细讲。装完之后，在终端输入claude，第一次运行会进入一个初始化流程，让你确认是否信任当前文件夹、是否允许Claude Code读取文件等，一路确认下去就行。
macOS这边相对省心，也是先确认Node.js存在，然后同样的npm命令安装。装完之后可能需要给终端授权，第一次运行macOS会弹出一个安全提示，问你是否允许控制终端，允许就行。如果你是用Homebrew管理环境的话，也可以走brew的安装路径，但我个人感觉npm的版本更新更及时，优先推荐npm。
Ubuntu或者Debian这类Linux系统，坑主要在权限上。如果直接用sudo npm install全局安装，可能会遇到npm的全局目录权限问题。我的做法是用nvm管理Node.js版本，这样不用sudo就能直接全局安装，后面更新Claude Code也不会碰到权限卡壳。Ubuntu下还需要确认系统里有git，因为Claude Code在操作项目文件时会深度依赖git来做变更管理和回滚。
2.3 模型选型：官方模型、第三方API与本地模型怎么选
部署Claude Code的时候，最大的一个选择是：你到底要用哪个模型来干活。别看Claude Code这个名字，它并不死板地只能连Anthropic的官方模型。通过修改环境变量或者配置，它可以接上任何兼容Anthropic API格式的服务。
官方模型是首选，效果最稳定，工具调用的契合度最高。如果你有Claude的订阅或者API额度，直接用官方模型体验是最好的。特别是在处理复杂代码逻辑、长上下文理解这些场景，官方模型对Claude Code内置的许多工具（读文件、改代码、执行命令）理解得最好。
第三方API是性价比路线。我身边有不少朋友把Claude Code接到DeepSeek、通义千问Qwen、智谱GLM这些模型上。操作逻辑其实很统一：把接口地址设置为ANTHROPIC_BASE_URL，把对应的密钥设置为ANTHROPIC_AUTH_TOKEN，Claude Code就会把请求发到那个兼容端点去。用第三方API的好处是便宜，有些模型的定价比官方低一大截；坏处是兼容性偶尔会有小问题，比如某些工具调用的参数解析不过，或者返回格式不够标准。
本地模型是一类更极客的玩法。通过LM Studio这类工具，在本地跑一个开源模型，比如Qwen或者Llama的量化版本，然后让Claude Code调用本地模型的接口。这样做的好处是完全离线、数据不出本机，对隐私要求高的项目特别合适；缺点是对电脑配置要求很高，普通笔记本跑大参数模型会非常卡。
给刚开始上手的人一个建议：第一天部署的时候先别折腾本地模型，直接用官方模型把自己的第一个流程跑通。等你知道正常状态下的Claude Code该是什么表现之后，再去切换第三方API或者本地模型，心里才有底。不然出了报错，你根本分不清是模型的问题还是配置的问题。
3. 部署实操：从安装到接入多种模型的完整步骤
3.1 安装与初始化：五分钟跑通第一个命令
下面是我在Windows和Ubuntu上都验证过的完整流程。打开终端，依次执行下面几行命令，你就可以拥有一个能用的Claude Code：
npm install -g @anthropic-ai/claude-code这一步装的是Claude Code本体。安装完成后，输入claude --version，能看到版本号就说明安装成功。接下来就是初始化：
claude首次运行会要求你进行身份验证。如果走账号订阅路径，它会生成一段验证码，让你用浏览器打开某个地址、登录账号、输入验证码完成授权。整个过程类似GitHub登录。如果走API Key路径，你需要先到Anthropic控制台申请一个API Key，然后在环境变量里配置好：
# Windows PowerShell 示例 $env:ANTHROPIC_API_KEY = "sk-ant-xxxxxxxx" # macOS / Ubuntu 示例 export ANTHROPIC_API_KEY="sk-ant-xxxxxxxx"配置好之后再输入claude，它就会正常启动。启动后你会看到一个交互式终端界面，光标处可以直接输入自然语言指令。我第一句问的是“帮我看看当前目录下有哪些文件”，Claude Code立刻调用了读目录的工具把文件列表列了出来。那一刻我就明白，这个工具和网页版AI的区别已经体现出来了。
需要说明的是，有些教程会让你用npm install -g @anthropic-ai/claude-code@latest来装最新版。这个命令本身没问题，只是如果你已经装过旧版，加上@latest可以强制更新到最新版，避免版本缓存带来的坑。
3.2 settings.json：你最先要配置的文件
Claude Code的配置文件叫settings.json，默认放在你用户目录下的.claude文件夹里。这个文件很重要，它决定了Claude Code的行为边界。我第一次配置的时候忽略了它，结果后面很多问题都是因为没配置好settings.json导致的。
常见的配置项包括项目白名单、权限模式、模型参数等。下面是我用的一份基础配置，你可以直接参考：
{ "permissions": { "defaultMode": "default", "allow": [ "Read", "Glob", "Bash(npm run test)", "Bash(git diff)", "Edit" ], "deny": [ "Bash(rm -rf *)", "Bash(sudo *)" ] }, "model": "claude-sonnet-4-5", "includeCoAuthoredBy": true }这份配置的意思是一开始就允许Claude Code读取文件、搜索文件、运行测试命令和git比较命令、编辑文件，同时明确禁止删除文件和sudo权限操作。权限配置的逻辑是“最小够用”原则：只给当前项目必需的权限，其余操作在每次执行时再问你要不要批准。千万别为了省事把所有权限都默认允许，尤其是涉及删除、格式化和执行危险命令的操作。
关于模型参数，如果你一开始拿不准用哪个模型，可以在配置里暂时不写model字段，让它用默认配置。等跑起来之后再用对话里的模型切换功能调整。
3.3 接入第三方API与本地模型：DeepSeek、Qwen、GLM、LM Studio
我第四天部署的时候，最想试的就是把Claude Code接到不同的模型上，毕竟成本是长期要考虑的事情。这里给出两种方式，一种手动改环境变量，一种用CC Switch工具切换。
手动改环境变量的方式，核心就两个变量：
export ANTHROPIC_BASE_URL="https://your-api-provider.com/anthropic-endpoint" export ANTHROPIC_AUTH_TOKEN="your-token"设置好ANTHROPIC_BASE_URL之后，Claude Code发送请求的目标地址就变了；设置ANTHROPIC_AUTH_TOKEN之后，鉴权信息跟着变。实测下来，DeepSeek、通义千问、智谱GLM这类提供Anthropic兼容接口的模型，都可以用这个方式接入。要注意的是，不同服务商的接口路径可能不同，有的需要在地址后面加上特定后缀，你去对应平台的控制台查一下就知道了。
LM Studio方式稍微复杂一点。你需要在LM Studio里加载一个本地模型，然后在开发者设置里开启本地API服务，并记下端口地址（一般是http://localhost:1234）。接着在终端执行：
export ANTHROPIC_BASE_URL="http://localhost:1234/anthropic" export ANTHROPIC_AUTH_TOKEN="lm-studio"这样Claude Code就能把请求转发到你本地的LM Studio上。我用一个7B参数的模型试过，反应速度能接受，但复杂逻辑的处理能力明显不如云端大模型。本地模型比较适合做代码补全、关键词提取这类轻量任务，不适合让它独立完成整个项目。
CC Switch是我后来发现的一个省心工具。它可以帮你同时维护多套API配置，界面里点一下就能从Claude官方模型切到DeepSeek，再点一下又切到Qwen。对于经常需要在不同模型之间对比效果的人来说，比每次手动改环境变量方便太多了。它的原理也是修改环境变量，只不过把配置管理可视化，避免手打命令出错。装好Claude Code之后，再装一个CC Switch，基本可以解决90%的模型切换需求。
3.4 VSCode插件配置：把Claude Code嵌进编辑器里
命令行里用Claude Code已经很顺手了，但如果你主力开发工具是VSCode，那建议再装一个Claude Code的官方插件。装完之后，你会看到侧边栏里多了一个专门的面板，可以直接在编辑器里跟Claude Code对话。它和命令行版本共用同一个会话环境，也就是说你在命令行里跟Claude Code说的话，到VSCode插件里还能接着聊，不会断上下文。
VSCode插件的核心优势是代码定位。Claude Code在修改代码的时候，你能实时看到改动发生在哪些行，比如说它改了哪个函数，你会立刻看到高亮之处。遇到问题的时候，可以直接选中一段代码发给它，让它单独解释或者修改，不用像命令行那样描述半天“请看一下某个文件某个函数”。
插件的配置其实不需要额外改什么，只要命令行版的Claude Code能正常跑，插件登录状态会自动继承。我唯一遇到的小问题就是插件更新后偶尔要求重新登录，重新走一遍浏览器验证流程就行，整个过程不超过两分钟。
4. 实战：用Claude Code从零搭一个Landing Page
4.1 明确需求：先写清楚“这个页面要达成什么目标”
工具部署好之后，我正式进入今天的第二个主题：用Claude Code做一个Landing page。动手之前，我强迫自己先回答几个问题。这个页面是给谁看的？用户看完之后应该做什么？页面的风格是科技极简风还是活力彩色风？这些问题如果不提前想清楚，直接让AI生成页面，出来的东西大概率是四不像。
我给自己定的需求是：做一个面向独立开发者的AI工具推广落地页，目标动作是让访客点击“免费试用”按钮并跳转到注册页面，整体风格走深色科技风，要有产品功能列表、用户评价、常见问题区和页脚。我把这段需求原封不动地写成了给Claude Code的第一条指令：
请为一个AI代码审查工具制作一个落地页。目标用户是独立开发者和技术团队负责人。页面目标：引导访客点击“免费试用”按钮。风格要求：深色背景、现代科技感、渐变点缀，字体清晰。请输出完整的HTML文件、CSS文件和一个基础JavaScript文件，支持响应式布局。第一版生成出来的页面结构已经相当完整，标题、副标题、行动按钮、产品功能卡片、用户评价列表、FAQ手风琴、底部导航全都齐了。加载速度也不错，因为没有引入任何庞大的框架库，纯原生三件套大概三十多KB。
4.2 迭代细节：别让AI放飞自我，你得会提修改意见
第一版页面能用，但不够好。问题主要在三个方面：颜色的对比度不够，深色背景下文字和背景挨得太近，看着累；按钮的位置是居中的，但我希望它固定在页面的核心视觉区域，突出得更明显；用户评价的部分是静态文本，我想让它变成一个简单的轮播图。
我把这三个问题写成修改意见回了过去：
页面存在三个问题需要调整：第一，正文文字颜色和背景的对比度不够，请调整到符合WCAG AA标准；第二，免费试用按钮请放Hero区域右侧，并做成渐变高亮样式；第三，把用户评价改成每5秒自动切换的轮播图，要有淡入淡出效果。Claude Code非常利落地完成了修改。它自己读取了HTML和CSS文件，改好了对比度，把按钮样式替换成了渐变背景，还写了一个十几行的JavaScript轮播逻辑。这个过程只用了不到两轮对话。这给我最大的启发是：跟AI协作写代码，最值钱的能力其实是“发现问题”和“表达需求”。AI不会知道你的页面对比度有问题，你得先有这个敏感度，才能提出来让它改。
顺便说一句，在这个环节里我顺便验证了一下它的大文件处理能力。网上有些人会输电了1M上下文的长文本能力，但我这个落地页项目太小，还用不上。不过我把一个几百行的小项目整个给它读了一遍，它依然能准确记住各个文件的职责，这一点对项目维护来说非常实用。
4.3 验收清单：落地页做完不是终点，要按转化逻辑检查
页面生成完毕之后，我按以前做营销页的经验，列了一个验收清单，每一项都让Claude Code配合检查：
第一，手机端表现。在移动端访问网页时，菜单是否可用、按钮是否够大、文字会不会溢出屏幕。第二，加载性能。精简图片资源、删除无用CSS类名，避免加载多余的库文件。第三，可访问性。图片有没有alt文本，表单有没有label，键盘能不能正常操作。第四，转化路径。从用户进入页面的第一眼到点击按钮，路径上有没有干扰项。
这套验收清单对AI生成的页面特别重要，因为AI写代码容易在视觉上做到八十分，却在细节上用了一个不适合的标签或者少了无障碍属性。在我的验收过程中，Claude Code检查出了两个可访问性问题，还主动提出了把图片换成WebP格式来减少体积。这说明一个配置得当的Claude Code，已经不只是代码生成器，更像一个会主动思考的初级前端工程师。
这个实战项目跑下来，我真实的感受是：做落地页这类小型网页项目，Claude Code完全够用。从需求到功能实现，再到细节优化，它可以在一个工作会话里全程陪伴，你不需要来回复制粘贴代码，大部分改动它自己就能完成。
5. 常见问题与排查技巧实录
5.1 安装和登录阶段的高频报错
部署Claude Code的过程中，我见过最多的问题是安装阶段的各种报错。这里把几个高频问题集中说一下。
“由于与64位版本的Windows不兼容”这个报错，通常不是Claude Code的问题，而是你下载的安装包或运行环境出了问题。我见过有人用了网上流传的绿色版、精简版安装包，结果系统其实根本不兼容那个版本。解决办法很简单：卸载掉旧的安装，去Node.js官网重新下载官方64位版本，然后用npm命令重新安装Claude Code。千万别用那些来路不明的安装包。
“CLI执行此命令时发生意外错误: InternetOpenUrl() failed”这个报错我在Windows上遇到过一次。它的意思是系统底层访问网络失败，通常和网络环境配置有关，也可能是因为Windows的Internet选项设置被安全软件改动过。排查思路是：先检查自己的网络是否正常，再看看是否需要配置系统代理，最后看终端能不能正常访问外网。我当时的处理方法是重置了Windows的Internet设置，重启终端后就好了。
还有一类高频问题是登录循环。明明已经在浏览器里完成了账号授权，回到终端还是一直让你登录。这种情况多半是终端缓存了旧的登录状态，执行一下claude --logout再重新登录，或者清理用户目录下.claude文件夹里的auth缓存文件，基本能解决。
5.2 调用模型时的配置坑与上下文管理
接入第三方API之后，最常遇到的问题是请求成功但返回内容异常，比如响应截断、格式错乱、突然重复某段话。出现这种状况，先不要怀疑Claude Code本身，你要做的是在设置里打开调试日志，把API请求和响应的原始内容记录下来，然后去对应的模型服务商文档里检查是不是兼容性差异。很多时候是因为第三方模型对工具调用的理解不如官方模型稳定，换一个更大的模型版本就能明显改善。
上下文管理也是实战里一定会碰到的问题。Claude Code默认能记住很长一段会话历史，但在大型代码库中，如果你不控制对话范围，它可能会去读取一堆无关文件，导致上下文快速耗尽。几个我验证过好用的习惯：在会话开始时就明确说“只关注src目录下的文件，不要读node_modules”；每次改完一个文件，提示它“更新一下你的记忆”；如果已经聊了很久，直接开一个新的会话，把关键需求再次说明，而不是在旧会话里继续纠缠。
网上还有一个高频话题是“Claude Code在STM32这类嵌入式项目里怎么用”。我虽然没有在这种环境里深入跑过，但根据目前看到的信息，嵌入式项目的文件结构、编译链都比较特殊，Claude Code能做的主要是帮助阅读芯片手册、生成外设配置代码框架、辅助解释别人的代码，真正涉及编译烧录的关键步骤，还是得靠开发者自己把控。用AI做嵌入式项目，有一个铁律：AI生成的底层配置代码必须经过人工逐行审查，因为一个寄存器配错，硬件可能直接烧掉。
5.3 给初学者的避坑清单
最后总结几条我这四天踩出来的避坑经验，短小精悍但价值很高：
第一，权限设置宁严勿松。别给Claude Code完全自由的操作权限，尤其是删除类和安装类命令，让它在执行危险操作前请示你。第二，关于Skill（技能包），它就是把常用的提示词和指令封装成插件。新手一开始不用着急装一堆Skill，先用默认能力把基础项目跑通，遇到反复要写同一类需求再去装对应的Skill。第三，所有AI生成的代码，你必须自己能看懂大概逻辑。第四，每次重大项目变更前，让git成为你的保险丝。运行git init并提交一次初始版本，然后每次AI改完觉得没问题就提交一次。这样就算改废了也能一键回滚，不会被AI的“自信改动”坑到。
还有一个很多人忽略的小点：Claude Code在大型代码库中的表现，和项目本身的组织方式有很强的关系。如果代码库本身就是一坨乱麻，AI进去也只能迷路。反过来，如果目录结构清晰、文件命名规范、函数职责单一，AI的处理效率和准确率都会有质的提升。所以别光指望AI帮你重构代码，先把项目收拾利索才是关键。
我自己在实际操作中还有一个体会：白天用官方模型处理复杂任务，晚上测试新版本或者跑一些录入性工作时切到第三方模型，长远来看能省下不少费用。这个用法可能不适合所有人，但对于自学的开发者来说，是一个兼顾效果和成本的思路。如果你后续想继续深挖，还可以让Claude Code结合飞书机器人做自动通知，写一个用完代码后自动把摘要推送到聊天工具的脚本。不过这就是第五天之后的事情了，先把今天的部署和落地页练熟，你已经走得很扎实了。
