企业官网建设流程全解析

如果你和我一样，是个习惯把需求丢给聊天窗口、再把代码手工贴回工程的全栈开发者，我强烈建议你试试 Claude Code。上个周末我把一个搁置了快一个月的全栈 AI 应用项目翻出来收尾，改用 Claude Code 在终端里从头跑了一遍：初始化目录、搭后端、写前端、联调、修 bug，全程几乎没离开过同一个会话。这篇就是这次实战的完整记录——包括安装配置、核心工作流、一个真实的全栈项目推进过程，以及我从踩坑里总结出来的使用边界。适合准备用 Claude Code 干活、但还没摸清它脾气的人看。

1. Claude Code 是什么：从“聊天助手”到“驻场程序员”

1.1 它和 ChatGPT、GitHub Copilot 的本质区别

很多人第一次听说 Claude Code，第一反应是“又一个 AI 写代码工具”。但我实际用下来，它和 ChatGPT、GitHub Copilot 根本不是一个物种。

ChatGPT 这类聊天窗口的运作方式，是你把代码片段复制进去、把报错贴进去、再把生成的代码搬回来。它看不到你的整个工程结构，不知道哪些文件互相依赖，更没法自己运行你的程序去验证改完的结果。你俩之间的信息传输，全靠复制粘贴这个动作。一次两次还行，一旦项目跨到十几个文件，这个模式基本就崩了。

GitHub Copilot 则是另一种形态，它是“行级补全”，在你写代码的时候猜下一行。对单函数、单文件很顺手，但它没有“计划”的概念，不会主动说“你这块逻辑应该放到 service 层去”，更不会为了验证一个改动去跑一遍测试。

Claude Code 的核心差异，是它直接住进你的项目目录里。它有权限读取仓库里的任何文件、修改代码、执行终端命令、运行测试并读取输出。它干活的循环是：先读代码理解现状，然后规划改动，动文件，运行命令验证，看到报错再自己修，整套流程不在你的监督下也能跑。它更像一个坐在你旁边的驻场程序员，而不是一个回答问题的人工智能。

1.2 它真正擅长的场景

我用下来的体感，下面几类场景是它的主场：

• 从零搭建一个完整项目：给它一句“做一个什么技术栈、什么功能的东西”，它可以在一轮对话里把目录结构、配置文件、前后端代码、数据库初始化全部铺开。
• 跨文件的系统性改动：比如“把所有接口的错误返回格式统一成 { error: string }”，它会自己去翻每个 route 文件，逐个修改。
• 自己跑命令、自己看报错：这是我最喜欢的能力。它执行 npm test、node server.js，看到报错后能自己定位到文件去修，不需要我把终端输出复制给它。
• 写测试和自动化脚本：让它补单元测试、写数据迁移脚本，效率和覆盖面都远高于你手动提示。

1.3 别指望它什么

它也不是万能的。依赖它的第一天我就意识到，有三类事情不该甩给它：

• 产品决策：问它“这个功能到底该不该做”，它只会给你一个工整但中庸的答案。它不适合当你产品经理。
• 你完全不懂的领域代码：如果你自己都没有验收标准，AI 生成的代码跑起来之后你根本判断不了对不对。你可以让它当执行者，但得自己当验收人。
• 极度敏感或合规受限的代码：把一个公司的私有代码库交给任何外部 AI 工具前，先过一遍你的安全合规流程。代码不出你机器是一回事，但命令执行和数据传输路径值得你想清楚再动手。

2. 安装与登录：Windows、macOS、Ubuntu 三条路

2.1 环境前提

Claude Code 是一个 Node.js 命令行工具，所以第一件事是确认你的机器上有 Node.js 18 或更高版本。我手里三台机器，一台 Windows、一台 macOS、一台 Ubuntu，全部先跑了一下：

node -v

如果你输出的是 v18 以下，或者压根没有 Node，先去装一个 LTS 版本的 Node.js 再回来。Claude Code 本身不挑操作系统，只要能跑 Node 就行。Windows 上原生终端可以用，不用非得住进 WSL；当然你习惯 WSL 也没问题，两边我实测都没遇到问题。

2.2 三条安装路径（npm / 原生脚本 / VS Code 扩展）

官方推荐的方式是 npm 全局安装：

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

macOS 和 Linux 上也可以用官方安装脚本一步到位：

curl -fsSL https://claude.ai/install.sh | bash

装完之后运行claude --version，能看到版本号就说明装好了。升级也很简单，终端里执行claude update，或者在会话里输入/update，它会自己拉最新版本。这里要提醒一句：它的更新频率非常高，基本一两周就有新版本，强烈建议你养成定期更新的习惯，旧版本上有些明显的 bug 是等新版本修掉的。

如果你习惯在 VS Code 里干活，还可以从扩展市场搜“Claude Code for VS Code”，装官方扩展。它和 CLI 共用一套配置：你在 VS Code 里打开终端跑claude，或者在扩展侧边栏直接对话都行。第一次用它时会提示你把配置同步到 VS Code，你可以在 CLI 会话里输入/vscode完成同步。我的实际感受是：纯命令行体验最好，但 VS Code 扩展适合需要同时在编辑器里盯着代码改动的场景。

2.3 登录鉴权：订阅账号与 API Key 两种玩法

装好只是第一步，登录才是容易卡人的地方。Claude Code 有两种登录方式，对应两种计费口径：

方式一：用 Claude 账号登录

运行：

claude login

它会弹浏览器走 OAuth 授权。这个方式适合购买了 Claude Pro 或 Max 订阅的用户，登录后直接用订阅额度跑 Claude Code，不需要额外充值。优点是省心，缺点是订阅额度在会话多的时候烧得挺快的。

方式二：用 Anthropic API Key

如果你走的是按量付费路线，先去 Anthropic 的开发者控制台创建一个 API Key，然后设置环境变量：

export ANTHROPIC_API_KEY=你的key

之后再启动claude，它就直接用这个 Key 计费，按 token 走。我的建议是：重度使用、每天会话很多的场景，走 API Key 并设置好消费上限更透明。控制台里可以设预算警报，不然月底账单容易吓人。

2.4 不同平台最容易栽的三个坑

我帮朋友排查安装问题时，见到的报错基本就三种，干脆整理成一张表：

3. 工作流核心：CLAUDE.md、权限模型与两种运行模式

3.1 CLAUDE.md：给项目的“记忆胶囊”

Claude Code 之所以在大型项目里不像普通聊天 AI 那样“转头就忘”，靠的是一个叫CLAUDE.md的文件。它相当于项目的记忆胶囊：每次新会话启动，Claude Code 会自动读取这个文件，把自己的行为规则对齐到上面。

第一次进入项目目录跑claude，你可以直接输入/init，它会扫描一遍工程，自动生成一份 CLAUDE.md。但我更推荐你手动补一层，把我下面这种“给项目的规矩”写进去：

# 任务盒子 ## 技术栈 - 前端: React 18 + Vite, 组件在 client/src/components - 后端: Express + node:sqlite, 入口 server/index.js - AI: @anthropic-ai/sdk, key 从环境变量 ANTHROPIC_API_KEY 读取 ## 常用命令 - 前端: cd client && npm run dev (端口 5173) - 后端: npm run server (端口 3001) - 测试: npm test ## 约定 - 所有 API 返回 JSON, 错误格式统一为 { error: string } - 不让 AI 自动升级依赖大版本 - 界面文案一律用中文

写清楚技术栈、命令、代码风格、禁区之后，Claude Code 的行为会明显变稳。我见过很多吐槽“AI 改着改着把项目带偏了”的人，其实一半情况是没给它足够的上下文约束。你还可以在用户主目录建一个~/.claude/CLAUDE.md，放所有项目通用的规则，它就相当于一个“全局默认值”。

3.2 权限系统：谁动我的文件、谁跑我的命令

Claude Code 能改文件、能执行终端命令，这既是它强大之处，也是安全隐患。它默认的权限模型是“逐个询问”：每当它要改文件或者跑命令，会弹出确认选项，让你选择“放行一次”“本次会话都放行”或者“拒绝并打开设置”。

实际用的时候，我建议你把握这样一个尺度：小范围改动放行单次，涉及依赖安装、删除文件、git 强制操作这类敏感命令，一定要先看清它要干什么。另外它有一个危险参数--dangerously-skip-permissions，加了这个参数它会跳过所有权限确认，连续执行一系列命令。我自己的规矩是：这个参数只在自己完全信任的探索性目录里用，绝不在生产环境或者不熟悉的开源仓库里挂着它跑。

顺带回答一个很多新手问的问题：能不能让 Claude Code 直接执行终端命令？能。默认交互模式下你想让它跑命令，直接说“运行 npm run build 并看一眼结果”，它执行前还是会问你要授权。你还可以在同一个终端里自己敲命令，它会读取到终端输出，然后基于最新状态继续干活。这个“人机混用终端”的体验，是我觉得它比任何纯对话框工具都顺滑的地方。

3.3 交互模式与脚本模式（-p）

大多数人是通过交互模式接触它的：终端里敲claude，进入一个对话式 REPL，你来我往地推进任务。但如果你想把它变成自动化工具链的一部分，就要用到脚本模式：

# 非交互：让 Claude Code 给 README 补一段快速开始 claude -p "给 README.md 补一段《快速开始》章节，包含安装、启动两条命令" # 管道用法：把日志塞给它，让它先归类再给修复建议 cat error.log | claude -p "这是构建日志，先告诉我最上面的三个错误分别是什么，再给修复命令"

这个-p模式（print mode）很适合写进 shell 脚本、配合find和grep做批量任务。我的一个常用姿势是：

find src -name "*.js" | claude -p "把标准输入里列出的文件中的 console.log 全部替换成 logger.info，只改这几个文件，不要动其他目录"

另外，在开始大改动之前，先让 Claude Code 进入“只规划不动手”的状态很关键。你可以直接说：“先不要改任何文件，把这次改动涉及哪些文件、每步怎么改列成方案给我确认，我同意之后再动手。”等方案确认了再让它执行。这一下能省掉大量来回返工，新版里也有对应的 plan 模式，用起来都一样：方案先行，落地随后。

4. 实战：用 Claude Code 从零做一个全栈 AI 待办应用

4.1 第一次对话：把需求讲成人话

与其空谈概念，不如看我这次真实跑完的项目“任务盒子”——一个带 AI 周总结功能的待办应用。我的第一句指令是这样的：

帮我在当前目录初始化一个全栈待办应用，技术栈用 React(前端) + Express(后端) + SQLite(数据库)。功能包括：增删改查待办、标记完成、按标签筛选。后端提供 REST API，前端用 Vite 搭。先不要调用任何 AI 能力，把基础功能跑通即可。每一步执行完请告诉我你做了什么、下一步计划做什么，不要一次改太多文件。

这句话包含了几个关键信息：技术栈、功能边界、交付顺序、反馈格式。中文指令完全没问题，Claude Code 对中文的理解很到位。但它生成的报错信息、代码注释、依赖说明基本是英文，这也正常，不影响使用。

4.2 看它生成的工程骨架

它没有急着写代码，而是先扫描目录，然后生成了这么一套结构：

taskbox/ ├── CLAUDE.md ├── README.md ├── package.json ├── server/ │ ├── index.js │ ├── db.js │ └── routes/ │ ├── todos.js │ └── summary.js └── client/ ├── index.html ├── vite.config.js └── src/ ├── main.jsx ├── App.jsx ├── api.js └── components/ ├── TodoList.jsx └── SummaryPanel.jsx

这里有个细节我很喜欢：数据库这块它检查了当前 Node 版本后，选择了用 Node 22 内置的node:sqlite模块，而不是去装sqlite3这个需要原生编译的包。等于在一开始就避开了一个潜在的编译坑。选型逻辑是对的：全栈 demo 优先考虑跑通，而不是引入不必要的复杂依赖。

4.3 叠代 AI 功能：让待办自动生成每周总结

基础功能跑通后，我开始叠代 AI 能力。这次我刻意把需求限定得很小：

在现有项目上加一个“AI 周总结”：点击按钮后，后端调用 Claude API 把最近 7 天未完成的待办按标签聚合成一段中文周计划。接口 POST /api/weekly-summary，前端在页面右侧加一个面板展示总结，加载中要有状态提示。

后端这段代码是它生成的，核心逻辑非常直接：

import Anthropic from '@anthropic-ai/sdk'; const client = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY }); router.post('/api/weekly-summary', async (req, res) => { const todos = await db.getRecentUnfinished(); if (!todos.length) { return res.json({ summary: '最近一周没有待办，可以休息一下。' }); } const message = await client.messages.create({ model: 'claude-sonnet-4-20250514', // 具体型号 ID 以官方文档为准 max_tokens: 1024, messages: [ { role: 'user', content: `请根据以下待办生成中文周总结，按标签分组并给出建议优先级：\n${JSON.stringify(todos, null, 2)}` } ] }); res.json({ summary: message.content[0].text }); });

前端部分它自动加了一个加载中状态，接口返回前按钮是禁用状态，返回后展示在右侧面板。这一步叠代大概只花了两轮对话：第一轮生成代码，第二轮我发现按钮点击两次会重复请求，让它加了防重复提交。

4.4 运行、报错、修错的三轮闭环

写代码只是开始，真正体现 Claude Code 价值的，是后续的报错闭环。我这趟跑了三轮回合：

第一轮，npm run dev启动时发现后端端口 3000 被别的服务占了。它自己检查到端口占用，直接改了监听端口到 3001，还顺手把 README 里的启动说明更新了。整个过程我没有手动改过任何文件。

第二轮，前端浏览器调接口时报跨域。它读到前端 fetch 的路径，又看到后端没有配 CORS，主动加了一个cors中间件，前后端联调秒过。这种“报错——定位——修代码——再验证”的闭环，在传统聊天 AI 里几乎没法实现，因为聊天 AI 看不到你服务器端的报错输出。

第三轮也是最有意思的：AI 周总结功能第一次调用时，因为环境变量里没配ANTHROPIC_API_KEY，后端直接 401。它没有把这个错误抛给前端就完事，而是自己做了一个启动时检测：发现没有配置 Key，就自动给前端返回一段友好提示“未配置 API Key，AI 总结暂时不可用”，等配置好之后功能自动恢复。这种防御性的处理，说实话比我预期的高了一个层级。

5. 让 Claude Code 干活更稳的进阶技巧

5.1 拆任务：一次只让它走完一个台阶

我见过不少人的失败模式，是一口气把整个项目描述给 AI，然后期望它一次性交付。Claude Code 在单个会话里确实能处理很大的任务，但它不是无限上下文，处理步骤越长，中途跑偏的概率越高。我的做法是把大需求切成台阶：先搭骨架，再逐个叠功能，每个台阶完成后要求它总结改动内容和当前状态。

更微妙的是，当会话进行到二三十轮之后，模型对前期细节的记忆会明显变淡。这时候可以输入/compact让它在内部压缩上下文，提炼出关键信息继续运行。如果任务实在太长，干脆开一个新会话，用claude --continue接续上次对话，或者把关键约定写进 CLAUDE.md 作为新会话的起点。

5.2 用 -p 模式把它变成自动化流水线

脚本模式不只是聊天窗口的替代品，它更大的价值在于让 Claude Code 进入自动化流水线。我举两个实际场景：

场景一，批量机械任务：

# 把多个 markdown 文档里的旧命令替换成新命令 ls docs/*.md | claude -p "逐个读取标准输入中的文件，把里面 npm install xx 改为 pnpm add xx，改完不要逐一问我"

场景二，把它接进 Git 提交前的检查流程。我写过一个简单的 shell 脚本，在 commit 前把暂存区的 diff 丢给 Claude Code 做一轮快速 review，有问题就自动打断提交：

git diff --cached | claude -p "这是一次代码变更的 diff，请挑出明显的问题：安全漏洞、逻辑错误、遗漏的边界条件，如果没问题就回复 OK，有问题就逐条列出。"

这种用法把 AI 从“对话工具”变成了“工程师团队里的自动质检员”。但要注意，-p模式跑一次就计费一次，批量任务前先在小样本上验证提示词，不然钱花得冤枉。

5.3 换模型与自定义接入：Harness 与模型能否解耦

很多人问过一个问题：Claude Code 的外壳（Harness）能不能不登录 Claude 账号、接别的模型用？

先给结论：Claude Code 是 Anthropic 官方针对自家 Claude 模型调优的 agent，默认绑定 Anthropic 账号鉴权。你当然可以用 API Key 而不是订阅登录，这是正常路径。但你要是想换成“非 Anthropic 家的模型”，官方文档并没有支持这种玩法。

实际可操作的范围是：通过--model参数在 Claude 各型号之间切换：

# 简单机械任务用便宜快速的模型 claude -p "把注释里的 TODO 整理成 docs/todo.md" --model claude-haiku # 大型架构重构用更强的模型 claude --model claude-opus

此外，Claude Code 支持通过环境变量ANTHROPIC_BASE_URL和ANTHROPIC_MODEL指向兼容 Anthropic API 的端点。企业用户更常见的做法是走 AWS Bedrock 或 Google Vertex AI 托管的官方 Claude 模型通道，这种接入方式解决的是企业采购和合规需求。至于市面上那些来源不明的第三方“兼容端点”，我的态度很明确：CLI 是官方按自家模型验证过的，换成未知端点出了问题没人给你兜底，数据安全更是风险，别在正经项目里省这个钱。

如果你确实想用别的厂商模型做编码 agent，更稳的路线是换开源编码代理框架，或者直接用 Anthropic 官方的 Claude Agent SDK，把这一套 agent 循环嵌入到自己的应用里，按自己的模型策略去编排。这适合有定制需求的团队，普通开发者现阶段不需要走到这么深。

5.4 控制 token 成本与上下文长度的经验

用 Claude Code 最大的隐性成本不是安装配置，是 token。一个长期会话跑下来，如果放任不管，消费可能高得吓人。我分享几个控制成本的硬经验：

• 会话里随时敲/cost看一眼当前消费，养成每几轮对话就检查一次的习惯。
• 优先用/compact压缩长会话，别老舍不得换新会话。旧会话带过来的大部分历史都是上下文贫穷资产。
• 大仓库里只让它看需要的部分。通过claude --add-dir src/packages/某模块限定哪些目录对 AI 可见，或者直接在子目录里启动会话，不让它扫描整个 monorepo。
• 机械性任务选 haiku 档模型，常规功能开发选 sonnet，复杂架构重构才上 opus。用对档位，成本差异好几倍。

Anthropic 控制台里也支持设置消费上限和预算提醒。我个人建议：第一次跑真实项目前，先设一个硬性消费上限，比如 10 美元。跑完一个完整项目你心里就有数了，再决定要不要放开。

6. 实战一周后的边界与反思

6.1 长任务跑偏的典型症状与人工节流阀

连续用了一周，我摸清了它的一个脾气：任务越长，越容易干“超纲”的事。典型的症状包括：改你不想它动的文件、自作主张重命名模块、在不相关的文件里顺手“优化”代码风格。这些行为单看都合理，合起来就会让你的 diff 爆炸。

我的对策是加一个“人工节流阀”：每个里程碑做完，先让它git diff给我摘要，我确认无误后再让它继续。跑偏了就用/rewind回滚到之前的检查点重新来。这个节制的过程，本质上是你要清楚知道 AI 每动一下的代价——它不是零成本的自动挡，而是一个需要你踩油门的副驾驶。

6.2 大型代码库的上下文超载问题

越大的仓库，上下文窗口的压力越明显。症状是做到后面，它会开始重复问你已经确认过的信息，或者按照早期约定做事时出现偏差。这不是模型“笨”，是上下文窗口就这么大，塞满了就必须挤出旧记忆。

解决思路不是硬扛，而是切分：缩小工作目录、把关键规则写进 CLAUDE.md、按模块分会话推进。我试过一个 10 万文件的巨型仓库，直接整库塞给它，效果远不如只把当前模块的相关目录给它。工程上的隔离思维，在这儿同样适用。

6.3 安全底线：命令执行与代码审查

它拥有执行命令的能力，这意味着安全底线必须由你来守。我给自己定了三条铁律：

• 权限最小化。绝对不在生产环境挂--dangerously-skip-permissions跑长任务。
• 陌生仓库先只读。从 GitHub 拉下来的项目，第一轮先让它分析结构而不是改代码。
• 提交前必须人工过 diff。无论它改得多流畅，commit 前我都会看一眼git diff，尤其盯着依赖变更、网络请求、文件删除这三类敏感操作。

AI 生成的代码不会因为你用了 Claude Code 就自动变安全，它只是让开发效率更高。安全审查的责任，永远在签下名字的人身上。

6.4 可用性边界与官方支持渠道

最后讲一个很多人在安装时就会撞见的现实问题：官方会不定期更新 Claude Code 支持的国家和地区列表，你所在的位置是否在支持范围内，以官方文档为准。如果是通过订阅账号登录这条路受限，还可以评估 AWS Bedrock 和 Google Vertex AI 这条官方企业通道，它们托管的是同一个 Claude 模型系列，走的是企业采购和合规路径，适合有这方面需求的团队。

另外，现在网上能看到一些所谓“Claude Code 桌面版”的第三方封装。官方目前发布的形态是 CLI、VS Code 扩展，以及可嵌入的 Claude Agent SDK。非官方的封装版本没经过官方验证，升级节奏和稳定性都不可控，下载前多留个心眼。

聊完这些边界，回头看我这次全栈项目的过程，最让我感慨的其实不是 AI 写代码本身，而是“对话式开发”这件事真的变成日常了：你描述意图，它在仓库里落地，你验收结果，再把边界往外推。如果你准备拿 Claude Code 做第一个全栈 AI 应用，我的建议很简单——别上来就搞大架构，先挑一个周末能跑完的小项目，从头到尾走一遍它“读代码、改代码、执行、反馈”的闭环。跑通一次，你对它的信任边界、成本感知、提示词手感，就全都有了。