企业官网建设流程全解析

要让我给这两年 AI 编程工具排个名，Claude Code 在我这里一定排前三。它和普通聊天式 AI 最大的区别在于，不是给你贴一段代码让你自己复制粘贴，而是直接在你项目的文件系统里干活：建文件、改代码、跑命令、读报错，一条龙下来，一个能跑的工程就立起来了。我最近用 Claude Code 从零搭了一个宠物生命周期管理 App，用来记录家里两只猫的疫苗、驱虫、体检和体重变化，整个过程中项目初始化、数据建模、接口开发到页面渲染，大部分编码工作都由 AI 辅助完成。这篇就把整条流程完整复盘一遍：我是怎么提需求的、怎么把任务拆给 AI、遇到哪些典型的坑，以及让 AI 编程真正提高效率的几个技巧。如果你已经会一点 Python 或者 Web 开发，正准备尝试 AI 辅助从零搭建项目，这篇应该能给你一份可以直接抄作业的样本。

先说清楚适用人群。这个项目不是给完全零基础的人准备的，你至少得看得懂 Python 基本语法、知道 Django 的大致概念，否则 AI 生成的代码出了问题，你连往哪个方向排查都不知道。但也不必是资深工程师，因为 Claude Code 可以帮你处理很多重复性编码，你需要做的是把业务需求想清楚、把验收标准定明白。对我来说，这个宠物生命周期管理 App 的难度刚刚好：麻雀虽小，五脏俱全，非常适合做全流程 AI 开发的实战样本。

1. 项目开局：为什么宠物生命周期管理 App 是一个恰到好处的练手项目

1.1 先想清楚它要解决什么真实问题

养猫的人都知道，疫苗有小程序记录，驱虫靠手机备忘录，体检报告散落在各个医院公众号里，体重变化更是全凭感觉。我家里两只猫，一只橘猫叫团子，一只黑猫叫煤球，它们的疫苗时间、驱虫周期完全不一样，靠脑子记根本不现实。这个 App 的核心价值，就是把“这只猫在生命周期里经历了什么、接下来该做什么”统一管理起来，形成一条清晰的时间线。

从这个角度看，它不是一个单纯的 CRUD 练习，而是有明确业务规则的应用：每种事件类型对应不同的提醒周期，疫苗需要记录接种日期和下次接种日期，驱虫按品种不同周期不同，体重记录要能形成趋势。这样的复杂度，刚好够用来检验 AI 编程工具对业务需求的理解能力。如果项目太简单，比如纯待办事项，AI 的协作能力体现不出来；如果项目太复杂，比如带支付、权限、消息队列的电商系统，AI 的上下文又会被各种环境配置消耗殆尽。宠物生命周期管理正好卡在“能展示完整流程”和“不会过于庞大”之间。

1.2 技术栈选择：Django + Bootstrap + SQLite 的组合逻辑

技术选型上，我选了 Django 而不是 FastAPI 或 Flask。原因有三点。第一，Django 自带 ORM、Admin 后台、表单处理和迁移机制，很多基础设施不用重复造轮子；第二，Claude Code 对 Django 这种热门框架的熟悉程度很高，生成的代码风格、目录规范都比较靠谱；第三，对于这类以数据录入和展示为主的应用，Django 的模板系统足够用，不需要额外引入前端构建链。前端用 Bootstrap 5，直接从 CDN 引入，不折腾本地打包。数据库用 SQLite，因为开发阶段最省心的就是零配置数据库，等以后真有部署需要，再切换到 PostgreSQL 也很简单，Django 的 ORM 层面不需要大改。

说实话，在选型的时候我也纠结过要不要上 React + Node，但冷静分析了一下，前后端分离意味着要多维护一套 Node 工程、处理跨域和构建流程，AI 的上下文会被环境问题消耗掉一大截。对一个小型工具型 App 来说，Django 模板渲染足够撑住。我这个判断在后续开发里被验证了：Claude Code 在处理 Django 模板和视图时非常顺手，几乎不需要我反复描述页面结构。

提示：如果你的项目目标是“快速验证 + 低维护 + 能展示完整流程”，优先选择主流且简单的技术栈；如果你的目标是“学习工程化”，再考虑前后端分离。别让技术选型本身变成项目的最大复杂度来源。

1.3 功能清单与优先级

动手之前，我先列了一个功能清单，并按优先级排序：

1. 宠物档案：新增、编辑、查看、删除。
2. 生命周期事件：关联宠物，记录疫苗、驱虫、体检、里程碑。
3. 首页提醒：展示 7 天内到期或已过期的事件。
4. 体重记录：以列表或折线图展示趋势。
5. 用户扩展：后续再加账号体系和多用户隔离。

这个清单的作用是给 Claude Code 一个明确边界：第一期只做 1 和 2，3 作为优先增强，4 作为独立模块，5 暂时不做。AI 编程最怕的就是“帮我做一个宠物管理 App”这种无限开放的需求，因为你给它的自由越多，它发挥偏的几率越大。先圈定范围，再逐步扩，是我用 Claude Code 这一类 Agent 工具最重要的心得。

2. 环境搭建与 Claude Code 初始化

2.1 安装和升级：标准流程两步走

先说说怎么装 Claude Code。它本质是一个 Node.js CLI 工具，所以第一步是确认本机有 Node.js 18 及以上版本。打开终端执行：

node -v

没有 Node.js 的话先去官网装一个 LTS 版，然后执行：

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

装好之后输入claude启动，首次启动按提示完成账号登录就行。日常如果想升级到最新版，直接执行：

claude update

这里有一个非常容易踩的坑：npm 全局包的安装路径和当前终端环境的 PATH 不一致，导致明明装好了却提示claude: command not found。解决办法是把 npm 的全局 bin 目录加到 PATH 里。你可以在终端执行npm prefix -g查看全局目录，然后把对应的bin目录加进 shell 配置。

我用的是 VS Code + Claude Code 扩展的组合。在 VS Code 的扩展市场搜索 Claude Code 官方扩展并安装后，在编辑器终端里启动claude，AI 在改动文件时，编辑器会以 diff 的形式展示变更内容，我可以在接受或拒绝之间做选择。这个体验比纯命令行好很多，尤其是看到它会改动哪个文件，心里更有数，也更敢大胆让它干活。

2.2 先搭空壳，再让 AI 填肉

强烈建议不要一上来就让 AI“从零生成整个项目”。我试过一次，它很卖力地猜目录结构，但猜出来的结果跟我想要的基本两样。正确顺序是：

1. 手动创建 Django 工程和应用：django-admin startproject petlife_manage、python manage.py startapp pets。
2. 初始化 Git 仓库，保证每一步都有 diff 可查。
3. 启动claude，让它基于已有工程结构去设计数据模型和业务逻辑。

我启动 Claude Code 后的第一句话不是“开始写代码”，而是让它先给方案：

这是一个 Django 工程，结构已经创建好，应用名是 pets。我要做一个宠物生命周期管理 App，核心是宠物档案和生命周期事件。请你先梳理这两个数据模型的设计方案：字段、类型、关联关系、校验规则。先不要写代码，先给设计说明。

为什么要先方案后代码？因为 AI 生成代码的还原度依赖它对需求的理解。让它先写设计方案，相当于逼着它把理解过程显式化，我们可以在它动手前纠正偏差。实测下来，这一步能减少至少一半的返工。Claude Code 写代码的速度太快了，快到你还没来得及发现问题，它已经生成了几百行代码，与其事后改，不如事前对齐。

2.3 CLAUDE.md：给 AI 立规矩

Claude Code 支持在项目根目录放一个CLAUDE.md文件，它每次启动都会自动读取。这个文件就是 AI 的“项目宪法”，非常适合固化跨会话的约定。我的CLAUDE.md里写了这些内容：

• 技术栈：Django 4.2、Python 3.11、SQLite、Bootstrap 5。
• 命名规范：所有模型字段使用 snake_case；日期字段用 DateField；布尔字段用 is_ 前缀。
• API 约定：返回格式统一为{code, data, message}；成功 code 为 0，失败为 1。
• 模板规范：页面继承 base.html；中文文案直接写模板里，不做 i18n。

这个文件的效果立竿见影。我有一次同时开三个会话，一个做模型、一个做 API、一个做前端模板，每个会话启动后第一件事都是先读CLAUDE.md，三个会话产出的代码风格高度一致，几乎没有出现字段风格互相打架的问题。这才是多 AI 协作的正确姿势，不是让多个 AI 各干各的，而是让它们共享同一套上下文共识。没有这套共识，AI 越多，项目越乱。

3. 核心功能拆解与 AI 协作实现

3.1 数据模型：宠物和生命周期事件

先看宠物模型。我让 Claude Code 生成的初版已经基本可用，但我手动改了几个地方，比如把体重字段命名为weight_kg而不是weight，避免和“快递重量”“猫粮重量”等概念混淆。这个细节是 AI 不会替你做的业务语义决策。

from django.db import models class Pet(models.Model): class Species(models.TextChoices): CAT = "cat", "猫" DOG = "dog", "狗" OTHER = "other", "其他" name = models.CharField("名字", max_length=50) species = models.CharField("物种", max_length=10, choices=Species.choices) breed = models.CharField("品种", max_length=100, blank=True) birth_date = models.DateField("出生日期", null=True, blank=True) adopted_date = models.DateField("领养日期", null=True, blank=True) weight_kg = models.DecimalField("体重(kg)", max_digits=4, decimal_places=2, null=True, blank=True) notes = models.TextField("备注", blank=True) created_at = models.DateTimeField("创建时间", auto_now_add=True) updated_at = models.DateTimeField("更新时间", auto_now=True) def __str__(self): return self.name class Meta: ordering = ["-created_at"]

生命周期事件模型要表达的核心关系是：一只宠物可以有多条事件，每条事件有类型、日期和可选的下次提醒日期。

class LifecycleEvent(models.Model): class EventType(models.TextChoices): VACCINE = "vaccine", "疫苗" DEWORM = "deworm", "驱虫" CHECKUP = "checkup", "体检" GROOMING = "grooming", "美容" MILESTONE = "milestone", "里程碑" OTHER = "other", "其他" pet = models.ForeignKey(Pet, on_delete=models.CASCADE, related_name="events") event_type = models.CharField("事件类型", max_length=20, choices=EventType.choices) title = models.CharField("标题", max_length=100) occurred_at = models.DateField("发生日期") next_due_at = models.DateField("下次提醒日期", null=True, blank=True) description = models.TextField("详情", blank=True) created_at = models.DateTimeField(auto_now_add=True) def __str__(self): return f"{self.pet.name} - {self.title}"

生成模型后，我让 Claude Code 顺手做了 Admin 后台注册和简单的表单校验，这两块都是 Django 里的热门场景，它完成得很轻松。我只需要在 Admin 后台里确认数据能正常录入，就已经能验证模型字段是否合理了。这也是快速验证 AI 产出质量的一个好办法：不用急着写 API 和页面，先在 Admin 里点一遍，字段和关系对不对一目了然。

3.2 用 REST API 把业务能力暴露出来

为了让前端页面对接数据，也为了让后续如果要写手机端有基础，我决定提供 REST API。这里用 Django REST Framework 是最顺手的。我让 Claude Code 生成了序列化器和视图集：

from rest_framework import serializers, viewsets from .models import Pet, LifecycleEvent class PetSerializer(serializers.ModelSerializer): class Meta: model = Pet fields = "__all__" class LifecycleEventSerializer(serializers.ModelSerializer): pet_name = serializers.CharField(source="pet.name", read_only=True) class Meta: model = LifecycleEvent fields = "__all__"

视图集部分，Claude Code 默认给每个视图集加了IsAuthenticated权限。这个选择本身没错，但在开发阶段，我还没有接入账号体系，前端一调接口就 403。当时我花了不少时间找原因，后来直接在提示词里说明：“当前是开发模式，请把 API 权限临时设为 AllowAny，并把它做成一个单独的配置项，方便后续切换。”这个修正很快完成。

这个经历让我总结出一个规律：AI 倾向于生成“符合最佳实践”的代码，但它不知道你目前的开发阶段。所以每次让它生成涉及权限、认证、安全的代码时，都要在提示词里明确当前阶段，否则会撞上各种“安全正确但无法运行”的墙。不要觉得这是 AI 笨，换一个角度看，它默认用安全配置其实是好的，只是你需要主动沟通开发上下文。

3.3 前端页面：明确布局细节比自由发挥更可靠

前端部分我用了 Django 模板引擎，外面套 Bootstrap 5。这样做的考量是：不需要额外起一个 Node 开发服务器，模板直接由 Django 渲染并返回，开发调试链路短，Claude Code 在处理这类项目时也更不容易出错。公共布局我单独放在模板根目录的base.html里，所有页面继承它：

{% load static %} <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>{% block title %}宠物生命周期管理{% endblock %}</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <div class="container"> <a class="navbar-brand" href="{% url 'pet_list' %}">宠物生命周期管理</a> </div> </nav> <main class="container my-4"> {% block content %}{% endblock %} </main> </body> </html>

页面我分了三个：首页仪表盘展示宠物列表和即将到期提醒；宠物详情页展示档案信息和事件时间线；事件表单页用于录入新事件。每个页面的模板由 Claude Code 生成，但在布局细节上我给了比较具体的约束，比如“宠物卡片用一行三列，在窄屏变成单列”“按钮统一放在卡片底部右侧”。不给这些指令，它生成的页面往往内容都对，但视觉上总有说不出的别扭。AI 对“好看”的理解和人对“好看”的理解之间，仍有不小的距离。

4. 实操过程中的问题与排查技巧实录

4.1 最典型的坑：给了“正确但不合需求”的代码

我用 Claude Code 实现首页提醒功能时，我的需求是“展示 7 天内需要疫苗的事件”，它实现了“展示最新的几条事件”。逻辑上没错，但是答非所问。这种情况在纯聊天式 AI 中很常见，但在 Claude Code 里也照样存在。

我的解决办法是让它在代码前后都加上解释。功能性提示词末尾固定追加一句：“完成后请解释你的实现逻辑，以及它在哪些场景下可能不满足需求。”这能逼着 AI 想一遍边界条件，而我也能从它的解释里看出它是否真正理解了需求。更重要的是，让 AI 解释代码，相当于一次轻量级 code review，对发现隐藏的偏差很有帮助。几次下来你会发现，它解释得很顺畅的地方通常没什么问题，解释得含糊的地方往往就是埋雷的地方。

4.2 数据库表不存在的尴尬

模型建好之后，我以为 Claude Code 会自动跑迁移，结果启动开发服务器时一直报no such table: pets_pet。后来才意识到，AI 默认不会主动执行命令，除非你明确允许它调用 Bash 工具。这是很多人第一次用这类 Agent 工具时最容易忽略的一点。

正确操作是让它生成迁移文件，然后你人工执行，或者明确指示它执行迁移并反馈错误。我后来的指令一般是：

请先执行 python manage.py makemigrations pets，然后执行 python manage.py migrate，如果执行过程中有任何报错，把完整错误信息贴给我，不要自己猜测修复。

加上“不要自己猜测修复”非常关键，否则它会自动改代码来“迎合”报错，结果越改越乱。这个教训我印象很深：有一次它遇到一个时间字段的默认值问题，不是去改迁移文件，而是直接删掉了我模型里的auto_now_add参数，导致后续所有时间戳都没了。从那时起，我就严格要求它先贴报错、再讨论方案、最后动手改。

4.3 对话上下文漂移与 CLAUDE.md 兜底

当一个会话持续很久，或者一个项目开了多个会话，最容易出现的问题是上下文漂移。表现为：前面刚约定好字段叫event_type，后面某个文件里又冒出来eventType；前面说好接口返回{code: 0, data: ...}，后面某个视图又变成了直接返回列表。

我的兜底方案有两层。第一层是CLAUDE.md，把命名、接口格式、目录约定全部写死；第二层是让 AI 在动手前先“读当前代码”，也就是让它先执行grep或打开相关文件，基于真实代码修改，而不是凭记忆猜。这两个方法配合下来，上下文漂移出现的频率大幅下降。你也可以在每轮对话开始时加一句“先查看 pets/models.py 的现有定义，再开始修改”，这句话能有效防止它凭空发挥。

4.4 高频问题速查表

这张表里每一条我都实际遇到或者看别人踩过。最后一条尤其值得展开说说：Claude Code 的 Agent 能力很强，但如果你不给它划定边界，它会出于“善意”去动一些与当前任务无关的文件。所以每次给任务时，我习惯在结尾加上一句“本次任务只修改项目中的 pets 应用目录和 templates 目录，其他位置不要动”。这个方法初看有点保守，但在项目文件多了之后，能避免很多无谓的冲突，尤其是当你同时开着多个会话的时候。

5. 对全流程 AI 搭建项目的复盘与扩展想法

5.1 哪些环节 AI 确实省时间

我复盘整个项目后，最大的感受是：AI 省时间的部分集中在“编码执行”层面，而不是“思考决策”层面。具体说，ORM 模型、序列化器、视图集、模板文件和配置文件的编写，AI 比我手写快得多，而且错误率很低。甚至在写一些标准化的 CRUD 逻辑时，它生成的代码几乎可以直接用。

另一个特别省时间的环节是“重构”。当我提出“把宠物列表页的卡片布局改成一行三列”，或者“把设置页拆成独立的 app”，AI 能在几秒钟内完成本来需要我手动翻不少文件的改动，并且因为它在文件系统层面操作，连带引用的模板、视图、URL 配置都会同步调整，这种一致性手动改很容易漏。所以我的建议是：小步快跑式地让 AI 改代码，每次改动后马上验证，效果远好于一次性让它生成一大坨。

5.2 哪些环节必须人工把关

第一，需求边界和验收标准。AI 不会对我说“你没想清楚”，它只会努力去做。如果我自己没想明白要什么，结果大概率是得到一个平滑运行的错误产品。第二，数据模型与业务语义。AI 会把字段生成得很规范，但“体重字段要不要加单位”“领养日期可不可以为空”这类决策必须由人定。第三，安全与权限。AI 会默认用最保守的权限策略，但一个真正上线的产品该用什么权限、谁能编辑宠物信息、数据怎么备份，这些需要人来定。

我甚至建议，不要轻易用 AI 生成的测试来证明“功能正确”。它生成的测试往往和它写的代码共享同一套错误理解，两个都错的时候测试是绿的。更可靠的做法是，你自己手动执行一遍核心流程，或者让 AI 写测试后，你再人工补充两个你自己设计的边界用例。比如我手动设计了“一只宠物还没有任何事件时，首页提醒应当为空”这个用例，结果还真发现它生成的视图在空列表时抛了异常。这类问题靠 AI 自查是发现不了的。

5.3 这个项目的后续扩展方向

宠物生命周期管理 App 还有很多可以扩展的点：

• 多账号隔离：引入 Django 自带的 User 模型，让每只宠物归属到具体用户。
• 提醒通知：接入邮件或 Webhook，在next_due_at到期当天把提醒发给主人。
• 体重曲线：用 Chart.js 在前端画折线图，记录每次体重并可视化。
• 图片存储：宠物头像和体检报告附件，用 Django 的 ImageField 处理。
• 部署上线：用 Gunicorn + Nginx 部署到一台云服务器，或者用 Docker 打包。

这些扩展每一条都能独立成为一次 Claude Code 辅助开发的练习，本质上因为基础架构是清晰的，后续就是在既有骨架上长肉的过程。如果你也想拿这个项目练手，建议从多账号隔离开始做，因为这一层牵涉的数据模型改动最多，最能考验 AI 在既有代码上做增量修改的能力。

最后分享一点我自己的经验吧。刚开始用 Claude Code 的时候，我犯过最大的错误是给它的任务太“大”：直接说“帮我把这个 App 全部搭好”，结果它吭哧吭哧写了半天，产出一堆我根本不想用的东西。后来我把需求拆成一个个可以验证的小步骤，每一步完成都有明确的检查点，整体效率反而高了很多。AI 编程工具的核心用法，不是把思考外包给它，而是把执行外包给它。你负责想清楚，它负责写明白，这样才能真正从“能跑”变成“好用”。

如果你也打算拿 Claude Code 搭一个自己的小项目，记住三件事：先搭好工程空壳再让 AI 填内容；用 CLAUDE.md 把约定固化下来；每轮任务都给它明确的数据来源和检查方式。做到这三点，你会觉得它不再是那个总跑偏的代码生成器，而是一个靠谱的结对编程搭子。