企业官网建设流程全解析

先聊聊我为什么盯上了 Claude Code

这段时间我一直在拿 Claude Code 做真实项目，最大感受就是——它真的像个坐在你旁边的高级工程师，而不是一个只会补全代码的智能输入法。市面上 AI 编程工具不少，但 Claude Code 选了一条完全不同的路：它不是藏在 IDE 角落里的面板，而是直接守在终端里，能读你的项目、改你的文件、跑你的命令，出了问题还能自己翻日志解决。这篇文章就是我从安装到实战"全栈 AI 应用"的完整记录，包含每一步的操作、我踩过的坑，以及一些普通文档里不会写的经验细节。

先说明一下使用场景：我本地的开发环境是 macOS 终端 + Node.js，项目整体技术栈选择了 Node.js 全家桶。无论你用 Windows 还是 Linux，核心流程都是一样的，只是在个别环境变量和命令书写上有差异。我尽量把差异点标出来，方便你照着自己环境调整。

1. Claude Code 到底是什么，为什么值得拿它做全栈

1.1 终端里的 AI 工程师，而不是对话框里的话痨

第一次启动claude命令的时候，我以为它就是个聊天机器人，只是能在终端里打字回复。但真正用起来才发现，它可以做三层事情：第一层是对话和问答，第二层是读写项目文件，第三层是执行终端命令并观察输出结果。这三层叠加起来，它就不再是"聊天框"，而是一个真正有手有脚的开发协作对象。

举个例子，你跟它说"帮我看看这个项目为什么启动报错"，它不会只给你一段解释，而是会主动帮你查看 package.json、找到入口文件、执行node index.js，然后把报错堆栈拿回来分析。这种"能动手就不动口"的工作方式，在实际开发里省掉的不是一星半点时间。

有个概念很关键，叫做 Agent 循环（Agentic Loop）。Claude Code 会不断重复"读取上下文、思考方案、执行动作、观察结果"这个循环，直到完成你的目标。整个过程中你可以随时打断、纠正、补充需求，它像极了一个听话又能干的同事，而不是一个一次性的问答接口。

1.2 它和普通 AI 编程插件差在哪

我用过不少 IDE 里的 AI 补全工具，体验上的差异其实非常明显。补全类工具擅长的是"你写了一半，它帮你想另一半"，本质上解决的是单点和局部的效率问题。但 Claude Code 擅长的是"你说一个目标，它帮你把整条路径走完"，解决的是整个任务和流程的协调问题。

举一个直观的对比场景：如果你要在普通 AI 插件里做一个"用户注册接口"，可能需要手动创建路由、写控制器、定义数据模型、安装依赖、测试接口，每一步都自己复制粘贴 AI 返回的代码。但在 Claude Code 里，你只需要说"帮我在当前项目里加一个用户注册接口，用 Express 实现，数据存到 SQLite，并写一个简单的测试脚本"，它就会自动规划文件结构、生成代码、安装依赖，然后运行测试给你看结果。

另外对全栈开发来说，它的另一个优势是全局理解。因为它是站在终端里工作，能同时看到你项目里的所有文件，所以在改动一个接口时，它会主动去检查前端调用代码、数据库表结构、路由配置是否匹配。这种跨文件、跨技术栈的联动能力，正是全栈开发最需要的。

1.3 适合谁用，不适合谁用

先说结论：如果你会最基础的终端操作，比如cd、ls、npm install这种程度，这工具你就可以直接用。它不需要你懂复杂的提示词工程，也不需要你记忆一堆晦涩的命令参数，自然语言就是你的操作界面。

它尤其适合这几种人：

• 全栈开发者：需要在前后端、数据库、部署脚本之间来回切换，Claude Code 能帮你统一协调。
• 独立开发者：一个人要干三四个人的活，Claude Code 可以当你的外包初级工程师，帮你处理重复和琐碎的部分。
• 产品经理或技术出身的管理者：你不需要每一行代码自己写，但你希望快速做出一个可演示的原型。

不适合什么人呢？一种是完全没有任何编程基础、指望一句"帮我做个 App"就交付产品的人。Claude Code 再强，它也不是许愿机，你需要能读懂它给出的方案，需要在它跑偏时拉它回来，否则代码能跑，但你完全不知道它在干什么，后面维护会很痛苦。另一种是追求极致代码控制力的团队，如果希望每一行都是"亲手写的艺术"，那这类 Agent 工具会让你觉得太主动了。

注意：Claude Code 对运行环境有官方区域支持限制。如果你的网络环境无法正常访问官方服务，请先确认自己所处地区是否在官方支持范围内，这一步我没办法展开讲，但按官方文档核对一遍总没有坏处。

2. 动手安装与初始配置（含踩坑记录）

2.1 前置条件与安装命令

安装 Claude Code 之前需要确认两件事：第一，你的机器上要有 Node.js 18.0 以上版本；第二，要有 npm 包管理工具。我自己的机器上 Node.js 版本是 20.x，全程没有出现过兼容性问题。如果你还没装 Node.js，可以去官网下载 LTS 版本，安装完成后在终端里执行node -v和npm -v确认一下。

安装命令非常简单，只有一行：

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

装完以后，在终端输入claude或者claude --version，如果能看到版本号，就说明安装成功了。我不知道你是不是会遇到下载慢的问题，如果 npm 官方源很慢，可以临时换个国内镜像源，比如npm config set registry https://registry.npmmirror.com，装完之后可以再改回去。

这里要提一个我踩过的坑：全局安装之后，如果你的终端用的是 zsh 或 bash，偶尔会遇到claude: command not found。绝大多数情况是 npm 的全局 bin 目录没有加到 PATH 环境变量里。可以用npm prefix -g查看全局安装路径，然后把那个路径下的 bin 目录加到 PATH 里，例如：

export PATH="$(npm prefix -g)/bin:$PATH"

如果你不确定怎么加，可以把这行加到~/.zshrc或~/.bashrc的末尾，然后重启终端。

2.2 登录与项目目录初始化

安装完成后，在项目目录里运行claude就会进入对话界面。我第一次运行的时候，它会先让你完成身份验证。Claude Code 支持两种方式：一种是使用订阅账号登录，另一种是使用 API Key。我建议长期使用的人走账号登录，因为会话上下文管理会更完整；如果你想按量付费、把每一笔调用都算清楚，API Key 方式更合适。

登录完成之后，它会问你一个很实际的问题：允许 Claude Code 在你的电脑上执行哪些操作。这个权限设置非常重要，默认情况下是"受限模式"，也就是说每次它想执行命令或者修改文件之前，都会先征求你的同意。如果你是第一次使用，我强烈建议先留在受限模式，跑几次真实任务、熟悉它的行为节奏，再决定要不要放宽。

另一个值得重点说的是CLAUDE.md这个文件。Claude Code 会在项目目录下读取它，把它当成"项目级记忆"来使用。你可以在里面写清楚项目的技术栈、目录结构、代码规范、危险命令清单等。每次会话开始时，Claude Code 会自动加载这些内容，这样它就不会一遍遍重复问你"这个项目用什么框架""代码风格是什么"这类基础问题。

我一般在项目的一开始就会创建这个文件，像这样：

# 项目指引 - 技术栈：Node.js + Express + SQLite + 原生前端 - 项目目录：src/ 放后端代码，public/ 放前端静态文件 - 数据库：使用 better-sqlite3，不要使用 sequelize - 注意：不要删除 data/ 目录下的任何文件

这个文件写得越清楚，后面 Claude Code 的发挥空间就越大。它相当于你给一个刚入职的工程师看的项目交接文档。

2.3 掌握权限模型：Claude Code 是怎么执行命令的

很多第一次用 Claude Code 的人都会困惑：它到底怎么执行终端命令？你不需要给它开一个什么特殊通道，Claude Code 本质上就是通过你当前用户的 shell 环境来工作。它执行npm install、node index.js这类命令时，权限和你本人在终端里操作是一样的。

不过这里必须分清楚命令的"危险等级"。比如npm install这种命令通常风险很低，Claude Code 在受限模式下会直接询问你"是否允许执行"，你按一下y回车即可。但对于rm -rf、git push --force这类高危操作，它在受限模式下也会发出明确警告。这时候不要因为嫌麻烦就一路点允许，还是要看清楚它到底要干嘛。

我自己的经验是：给它执行权限之前，心里快速过一遍"这个命令如果出错了，我能恢复吗"。能恢复就放行，不能恢复就让它解释清楚再决定。有一次它帮我重构代码的时候想把旧版目录整个删掉，我拦了一下，改成重命名备份，结果当天下午就用上了那个备份。这个习惯帮我避免过不止一次翻车事故。

3. 实战：从零构建《全栈 AI 营养食谱助手》

3.1 项目背景与整体设计

这次实战我选了一个小巧但五脏俱全的场景——"AI 营养食谱助手"。为什么选这个？一是它覆盖了全栈开发的几个核心模块：后端 API、数据库存储、前端界面、AI 能力集成；二是它的业务逻辑足够接地气，哪怕你不是做餐饮相关领域的，也能一眼看懂这个应用在解决什么问题。

应用的功能设计是这样的：用户在网页上输入自己的饮食偏好（比如：偏好素食、不吃香菜）、健康目标（比如：减脂、增肌）、以及每天可用的烹饪时间，点击生成之后，后端调用 AI 生成一份当日食谱，包含早中晚三餐的具体建议和热量估算。同时，所有历史生成记录都会被保存下来，用户以后可以回来查看。

项目的技术栈我做了精简：

• 后端：Node.js + Express
• 数据存储：better-sqlite3（轻量、不需要额外配置服务）
• 前端：原生 HTML + CSS + JavaScript 单页应用
• AI 能力：通过 Anthropic API 调用大模型生成食谱内容

之所以不引入 React 或者 Vue，是为了降低整个项目的搭建复杂度。做一个全栈 AI 应用，核心目标是先把全链路打通，再考虑工程化的花活。Claude Code 的一大强项也在这里——它能很快帮你把整个框架搭起来。

3.2 第一步：让 Claude Code 搭好后端骨架

我在一个空目录下启动 Claude Code，然后输入了第一段需求：

帮我在当前目录初始化一个 Node.js 项目，使用 Express 框架，创建一个简单的健康检查接口 GET /health，返回 { status: 'ok' }。项目使用 CommonJS 模块规范。

Claude Code 立刻开始干活：它执行了npm init -y，创建了index.js和package.json，然后安装了 express。中间它还会主动问我安装依赖的动作是否允许执行，这就是之前说的权限模型。整个过程不到一分钟，一个能跑起来的后端入口已经出来了。

然后我继续追加需求：

创建 src 目录，把入口文件移动到 src/index.js，调整 package.json 中的 main 字段。同时创建 src/routes/health.js 和 src/app.js，把健康检查接口拆分到独立路由模块。

这里我想提醒你一个经验：做项目拆解时，别一次提太多抽象需求，尽量一次一个具体动作。Claude Code 的记忆和推理能力虽然强，但给它的指令越具体，输出质量越稳定。所谓的"具体"，指的是包含明确的技术栈、明确的文件路径、明确的接口路径，而不是"帮我整理一下项目结构"这种含糊说法。

拆分完成后，我让它启动服务测试了一下：

node src/index.js

终端里出现了Server running at http://localhost:3000，我在浏览器里访问/health，返回了{"status":"ok"}。第一个里程碑达成。

3.3 第二步：接入数据存储与历史记录

后端能跑通之后，下一步是给应用加上"记忆"。我用 better-sqlite3 来保存历史食谱，你可能会问为什么不用 MongoDB 或者 MySQL，因为对这个场景来说，一个单文件数据库足够了。better-sqlite3 不需要额外安装数据库服务，数据直接落在本地文件里，对学习和原型阶段来说是最省心、最不容易出幺蛾子的方案。

我给 Claude Code 的指令是这样的：

安装 better-sqlite3，创建 src/db.js，负责初始化数据库。数据表名为 recipes，字段包括 id、preferences、goal、cooking_time、recipe_content、created_at。再创建 src/routes/recipes.js，提供两个接口： 1. POST /api/recipes —— 接收偏好、目标、烹饪时间参数，将记录插入数据库 2. GET /api/recipes —— 返回所有历史记录，按时间倒序

Claude Code 在执行时会遇到一个非常典型的坑：better-sqlite3依赖 Node.js 原生编译模块，在某些环境下安装时会触发编译过程，如果失败会报各种奇怪的错误。遇到这种情况不要慌，先确认 Node.js 版本和 node-gyp 依赖是否正常，然后把node_modules删掉重新npm install一次，大概率能解决。

代码生成之后，我自己写了一段测试数据手动插入，验证两个接口的返回结果。这里追加一个容易忽略的小细节：在 POST 接口里一定要做参数校验，因为 AI 生成的食谱请求可能缺失某个字段，不校验直接入库会导致前端渲染时各种报错。

3.4 第三步：前端界面与 AI 能力联动

后端接口就绪之后，我开始搭前端。这次我选择纯静态页面，放在public/目录，通过表单和后端交互。为了省事，我让 Claude Code 直接用原生 HTML + CSS 写了一个简洁的界面，包含三个输入框（饮食偏好、健康目标、烹饪时间）和一个生成按钮，下方用卡片展示历史记录。

然后到最核心的环节——AI 能力接入。我需要实现一个接口POST /api/generate-recipe，这个接口负责把用户输入转发给大模型 API，然后把返回的文本解析成结构化的食谱内容。

以下是后端调用大模型的核心代码，用到的依赖是 Anthropic 官方 SDK：

const Anthropic = require('@anthropic-ai/sdk'); const anthropic = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY, }); async function generateRecipe({ preferences, goal, cookingTime }) { const prompt = `你是一位专业营养师。请根据以下要求设计一份三餐食谱： 饮食偏好：${preferences} 健康目标：${goal} 每日烹饪时间：${cookingTime} 分钟 请以 JSON 格式返回，包含： - breakfast、lunch、dinner 三个字段 - 每个字段包含 food_items（菜品列表）和 calories（预估热量） - 最后加一行 total_calories 作为全天总热量`; const response = await anthropic.messages.create({ model: 'claude-3-5-sonnet-latest', max_tokens: 1500, messages: [{ role: 'user', content: prompt }], }); const contentText = response.content[0].text; // 解析 JSON 返回 const textMatch = contentText.match(/\{[\s\S]*\}/); if (!textMatch) { throw new Error('模型返回格式异常'); } return JSON.parse(textMatch[0]); }

这里有几个非常关键的信息要强调。第一，API Key 不要硬编码在代码里，我用的是环境变量，创建了一个.env文件来存放，并且把.env加进.gitignore。第二，给模型的提示词要明确要求输出 JSON，否则它可能返回大段散文，后续解析就很麻烦。第三，用正则\{[\s\S]*\}从返回文本中提取 JSON 片段，是一种防呆策略，因为模型偶尔会在 JSON 前后夹带解释性文字，直接JSON.parse整个文本会报错。

我在让 Claude Code 实现这个接口时，它甚至主动帮我加了 try/catch 错误处理和超时设置，这些细节如果自己写很容易漏掉。

3.5 第四步：跑通全流程与调优

所有模块都写好之后，我运行node src/index.js，在浏览器里打开页面，输入了"喜欢海鲜、不吃香菜、减脂、每天只有 30 分钟做饭"这几个条件，点击生成按钮。

几秒之后，页面上展示出了一份相当完整的食谱：

• 早餐：水煮蛋 2 个 + 无糖酸奶 1 杯 + 蓝莓 50g，热量约 320kcal
• 午餐：香煎三文鱼 150g + 糙米饭 100g + 清炒西兰花 150g，热量约 520kcal
• 晚餐：虾仁蔬菜沙拉（橄榄油醋汁）+ 紫薯 1 个，热量约 380kcal
• 全天总计：约 1220kcal

这说明整个链路已经完全打通了：前端收集参数 → 后端接收处理 → 调用 AI 模型 → 返回结构化结果 → 存储到数据库 → 前端渲染展示。看到这个结果的时候，那种"全栈 AI 应用被我自己动手做出来"的成就感，还是相当实在的。

调优方面，我做了两件事。第一是给所有 AI 生成接口增加了 10 秒超时，如果模型响应过慢就返回友好提示。第二是给前端加了 loading 状态，避免用户在等待过程中反复点击生成按钮，导致数据库里出现一堆重复记录。

4. 常见问题与排查技巧实录

4.1 安装与登录篇

从后台数据和我的亲身经历来看，安装阶段出现频率最高的三个问题：claude: command not found、npm 安装超时、登录验证失败。

command not found的解决办法在 2.1 节已经说过了，核心就是检查全局 bin 目录是否在 PATH 中。npm 安装超时，优先换镜像源再重试。登录验证失败的时候，先确认你的账号状态正常，再确认当前网络环境能正常访问官方服务。

如果你在公司内网或者某些受限网络中遇到连接问题，请优先检查网络策略和代理设置，这些需要你本地自行处理，我不展开讲，但有一条原则：任何绕过限制的操作都不要碰，老老实实按官方支持方式和合规网络环境来。

4.2 上下文与令牌管理篇

使用中最大的感受是：Claude Code 处理长项目时会累积大量上下文，会话越长，模型思考时间越久。我试过在一个会话里连续干四五个小时，到了后期，反应明显变慢，甚至会遗漏一些早期讨论过但实际上很重要的约定。

解决方案很简单但很多人不知道：Claude Code 支持使用/compact命令压缩当前会话上下文。它会把对话历史做一份摘要，理解保留关键约定，然后从摘要上继续。我在每次完成一个里程碑之后，都会运行一次/compact，相当于给 AI 同事"刷新一下短期记忆"。

另外令牌用量也是一笔隐性成本。尤其是频繁让 AI 重读大文件或执行大量命令时，令牌消耗会明显上升。如果你在用 API Key 计费模式，建议设置用量告警，避免某个夜晚忘了关会话导致账单暴涨。

4.3 终端命令执行与权限篇

有一个很多人问过的问题：Claude Code 能不能直接执行终端命令，而不需要每次都询问？答案是能，但需要你手动改动权限配置。Claude Code 提供了一套权限规则文件，你可以在里面定义哪些命令自动放行，哪些命令需要确认。

我的建议是分层授权，不要一刀切：

还有一个安全习惯：Claude Code 给你看完整命令内容时，别只看前半段就回车。有些很长的命令会在一屏之外，如果省略了中间参数，可能导致它执行了和你预期不同的动作。多花三秒钟读完整命令，是所有高级用户都有的习惯。

4.4 项目维护与提示词管理篇

用了一阵子之后，你会发现最值得维护的不是代码，而是提示词和上下文记录。我强烈建议你为每个项目维护一个PROMPTS.md文件，里面沉淀你反复用到的关键指令。

比如，我这个项目的PROMPTS.md里存了这么几条：

• 每次启动新会话时，先让 Claude Code 阅读CLAUDE.md和README.md。
• 每次完成接口修改后，运行一次现有的测试脚本验证。
• 当 Claude Code 连续两次给出不靠谱的方案时，主动中断，改用/compact后重新陈述需求。

这些经验型提示词的积累价值，会随着项目复杂度提升越来越大。它本质上是在给 AI 工具建立一套你的个人偏好和项目规范，让它越用越顺手。另外，如果你的团队有多个人一起使用同一项目，把这些文件纳入版本管理，大家都能受益。

5. 一些体感总结，希望能帮到你

根据我自己的实际项目体验，Claude Code 现阶段最适合的用法是"由你掌控方向，它负责执行细节"。别把它当成全能的神，也别把它当成一个只会聊天的玩具。你定清楚目标、给足背景信息、在关键节点把关，它就能把那些琐碎、重复、跨文件的脏活累活包掉。

有一个小技巧我最后想单独分享：如果你希望 Claude Code 能很好地配合你长期维护项目，可以把"它会定期打开哪些文件、检查哪些状态"写进CLAUDE.md。这相当于给 AI 同事写了一份每日工作清单。它每次进入项目就知道先看什么，而不是指望你一遍遍重复项目背景。

拿这个营养食谱助手项目来说，后期我往CLAUDE.md里加了一句："每次会话开始后，先检查data/目录是否存在，如果不存在就创建，并且查看最新的历史记录数量。"从那以后，它每次都能主动感知数据状态，省去了我很多提醒的功夫。

以上就是我做这个"全栈 AI 应用"的全部过程了。你可能注意到了，整条路从安装到上线用时不到半天，但真正有价值的是过程中那些判断和取舍。工具在变，AI 能力在变，但"明确目标、合理拆解、小心授权、持续沉淀"这四件事，在任何技术栈里都不过时。