说实话我一开始对这个标题是有点怀疑的——Claude Code 我也用过写点小脚本、补个测试、改个样式都很顺手但“从零搭建一个新项目”还带“全流程”这跨度有点大。更别说要做一个宠物生命周期管理 App涉及数据建模、业务逻辑、前端页面、提醒机制这么多环节AI 真能一路带着走完这个周末我专门试了一把。结果比我想象中靠谱得多从空目录开始到跑通一个能录入宠物档案、记录体重、管理疫苗驱虫、自动算生命周期阶段和提醒日期的完整 App我只用了一个下午加一个晚上。全程的代码、数据库模型、API、页面基本都是 Claude Code 写的我只负责做决策、验收和纠偏。这篇就把整个过程拆开讲。内容分四块先说为什么选 Claude Code 和这套技术栈再讲数据模型和核心业务逻辑怎么让 AI 给你设计出来然后是前端交互和 API 联调的实测过程最后集中讲我踩过的坑和排查套路。不管你是想用 AI 来搞自己的 side project还是琢磨着把 AI 编程工具真正用进生产项目这篇应该都能给你一些可直接抄作业的东西。1. 需求拆解与方案选型先别急着让 AI 写代码很多人用 AI 编程工具翻车不是 AI 不行是自己没想清楚就上了。你说一句“帮我做个宠物 App”Claude Code 也能给你生成一堆代码但大概率不是你想要的。所以第一步不是写代码而是把需求拆到 AI 能理解的颗粒度。1.1 宠物生命周期管理 App 的核心业务边界我给自己定的产品边界就一条帮养宠物的主人管好“宠物从出生到老去的所有关键健康数据”。听起来挺大但拆成 MVP 就四个模块宠物档案昵称、品种、性别、出生日期、绝育状态、基础信息。体重记录定期记录体重能看趋势、算增长是否异常。疫苗与驱虫管理记录接种和驱虫历史自动推算下一次到期日。生命周期判断根据年龄自动判断幼年、成年、老年阶段给出这个阶段该注意什么。提醒机制也先做成最朴素的形态打开首页就能看到“哪些疫苗/驱虫快到期了”不做短信推送、不做邮件提醒那些都是后话。边界清楚之后我做了第二件事把这些需求写进了一个给 Claude Code 看的需求文档然后在里面明确写了“先出方案再干活”。这一步非常关键——你让 AI 做事之前先让它把理解到的需求复述一遍比啥都不说直接开干稳十倍。1.2 技术栈选型的逻辑技术栈我选了 Next.js TypeScript Prisma SQLite这个组合在 Claude Code 的训练语料里出现频率极高它写起来最顺手踩坑概率最低。为什么不用前后端分离就一个理由一个小项目拆成 React 前端 一个后端框架 两套部署维护成本翻倍。Next.js 的 App Router 天然支持 API Routes一个项目里既能写页面又能写接口尤其适合 AI 全程辅助开发的场景——它在同一个上下文里就能把前后端串起来改。SQLite 则是省事之王。不需要额外装数据库服务一个文件搞定Claude Code 操作起来也简单不会在环境配置上卡壳。等以后真需要多人协作或者数据量大到不行再平滑迁到 PostgreSQL 也不迟。Prisma 的价值更多是给 AI 一个明确的数据模型锚点。schema.prisma 文件里面的每一张表、每一个字段AI 在生成 API 和页面的时候都要反复回过头来参考等于给它一个“数据契约”让它不会凭空发明字段。1.3 人机分工哪些必须自己拍板哪些放手让 AI 干我实测下来最有效的分工模式是这样我负责需求边界、技术选型、验收标准、UI 风格的大方向、以及所有“这版不行改掉”的决策。Claude Code 负责把需求翻译成数据模型、生成 CRUD 代码、补测试、做页面样式、重构、排查报错。说白了AI 是超级执行者不是决策者。这种模式下Claude Code 的能力全部释放出来它不会累、改代码飞快、重构起来毫不在意推翻自己十分钟前写的东西。而你要做的就是在关键节点上把好关别让它跑偏。2. 数据模型设计让 Claude Code 先画“骨架”数据模型是整个 App 的地基。这一步我做的最重要的一件事就是让 Claude Code 先设计三张核心表的结构然后我逐条审。2.1 从需求到 Prisma Schema 的转化过程我的做法是把需求文档里的功能清单直接粘贴给 Claude Code然后加上一句请为以下功能设计 Prisma 数据模型包括宠物、体重记录、疫苗记录、驱虫记录四张表注意字段类型、索引、关系和外键约束先把 schema 完整写出来给我审不要写其他代码。它很快给了第一版我看完提了两处修改意见一是体重记录要加单位字段二是疫苗和驱虫记录里面都加一个 notes 字段存备注。改完之后最终版长这样model Pet { id Int id default(autoincrement()) name String species String // cat / dog breed String? gender String // male / female birthday DateTime neutered Boolean default(false) avatarUrl String? createdAt DateTime default(now()) updatedAt DateTime updatedAt weights WeightRecord[] vaccines VaccineRecord[] dewormings DewormingRecord[] } model WeightRecord { id Int id default(autoincrement()) petId Int pet Pet relation(fields: [petId], references: [id], onDelete: Cascade) weightKg Float note String? recordedAt DateTime createdAt DateTime default(now()) index([petId, recordedAt]) } model VaccineRecord { id Int id default(autoincrement()) petId Int pet Pet relation(fields: [petId], references: [id], onDelete: Cascade) vaccineName String doseDate DateTime nextDueDate DateTime? notes String? createdAt DateTime default(now()) index([petId, nextDueDate]) } model DewormingRecord { id Int id default(autoincrement()) petId Int pet Pet relation(fields: [petId], references: [id], onDelete: Cascade) productName String doseDate DateTime nextDueDate DateTime? notes String? createdAt DateTime default(now()) index([petId, nextDueDate]) }有几个细节值得说。第一外键全部加了 onDelete: Cascade意思是删掉一只宠物它的体重、疫苗、驱虫记录会跟着一起删避免留下一堆孤儿数据。第二疫苗和驱虫的查询主要集中在 petId 加上 nextDueDate 上“我的这只宠物哪些快到期了”所以联合索引直接建在这个组合上。第三我的宠物表统一用 Int 主键没搞 UUID——这项目规模用不上自增主键最简单等以后真要分布式再说。2.2 为什么坚持让 AI“先建模、后开发”这一步我吃了不少亏才总结出来的经验。让 Claude Code 先出 schema不直接写页面写接口有三个好处AI 一旦把数据模型定下来后面所有 API 和页面都会锚定这些字段不会出现页面用了 A 字段、API 返回 B 字段这种低级错乱。你可以在最早期纠正模型的错误这时候改一行 schema 的成本极低。Prisma Generate 之后AI 可以直接从生成的类型定义里拿到完整的字段列表不用反复折腾。如果你想快速验证模型有没有问题可以让 Claude Code 先生成一个 Prisma Studio 的可视化页面手动造几条数据用你的真实业务逻辑去感受一下。我当时就让它在 Studio 里录了三只宠物、各配了几条体重和疫苗记录然后才开始写业务代码。2.3 数据模型中的三个容易忽略的坑第一个坑是时间字段。最初 AI 给的体重记录只有 recordedAt没有 createdAt这就导致一个问题用户补录一条一个月前的体重时间被记成录入时间“趋势曲线”直接乱了。最后加了 createdAt 记录真实录入时间recordedAt 记录测量时间两条时间线分开。第二个坑是单位。体重如果只存数字不留单位后面做国际化和单位切换就没法搞。虽然 MVP 全用公斤但字段上先留个隐患没必要。第三个坑是年龄段规则。宠物生命周期判断有两种实现思路一是每次访问都实时算二是存字段存阶段值。我选了实时算——因为阶段规则后期大概率要调如果把结果落库改规则就得刷数据得不偿失。3. 核心业务逻辑的实现提醒、趋势、生命阶段这段是整个项目的灵魂。光有 CRUD 的 App 一文不值能算出“我的猫 11 个月该换成猫粮了”“疫苗还有 7 天到期”这种真正有用的信息才叫生命周期管理。3.1 疫苗与驱虫的到期提醒逻辑提醒逻辑的核心是三个日期上次接种日、下次到期日、今天。其中下次到期日可以有两种存法一种是在录入的时候直接让用户填“什么时候该打下一针”另一种是系统根据疫苗种类自动推。我采用了混合策略数据库里存 nextDueDate 用户自定义优先级最高但如果没填系统走一套内置规则自动推算。内置规则先按常见疫苗和驱虫产品的标准周期写死const VACCINE_INTERVAL_DAYS: Recordstring, number { 猫三联: 365, 狂犬疫苗: 365, 犬瘟热疫苗: 365, 犬细小疫苗: 365, }; const DEWORMING_INTERVAL_DAYS: Recordstring, number { 体内驱虫: 90, 体外驱虫: 30, 内外同驱: 90, };这个策略的妙处在于AI 帮我写了一个计算函数 getNextDueDate从所有疫苗和驱虫记录中找出最新的一条加上对应周期再和今天比较就能算出状态type ReminderStatus overdue | dueSoon | ok; function getReminderStatus(nextDueDate: Date, today: Date): ReminderStatus { const daysUntilDue Math.ceil( (nextDueDate.getTime() - today.getTime()) / (1000 * 60 * 60 * 24) ); if (daysUntilDue 0) return overdue; if (daysUntilDue 7) return dueSoon; return ok; }“7 天”这个阈值是让 Claude Code 配的页面里 overdue 标红、dueSoon 标黄、ok 标绿。红黄绿三色让用户一眼就知道情况这个体验比给一堆表格强多了。3.2 体重趋势计算体重模块在数据层面就是一张 WeightRecord 表每一条记录有一个体重值和一个日期。但光有列表没意义得算趋势。这里我让 AI 实现的是一个简单的线性回归斜率利用所有体重记录拟合一条 y ax b 的直线斜率 a 就是趋势方向。a 明显大于 0 说明在快速增重a 明显小于 0 说明在掉体重。对于宠物来说掉体重比长胖更值得警惕。代码逻辑写出来十几行但展示层我做了点文章趋势对比找最近两次记录算出变化百分比在页面上用一个向上的箭头显示增重向下的箭头显示减重。如果百分比超过 10%同时提示一句“体重变化较大建议咨询兽医”。这里有一个细节值得说代码是 AI 写的但“超过 10% 要告警”这个业务阈值是我拍的。这类业务经验 AI 不会帮你做决策它只会中规中矩把所有的“异常”都标红——那样用户天天看到红色早就不理你了。3.3 生命周期阶段判断生命周期判断是这个小 App 最有“产品灵魂”的功能。我用的是最常见的宠物年龄换算规则猫第一年约等于人的 15 岁第二年约等于 24 岁之后每一年加 4 岁。小型犬和猫类似大型犬老得更快第一年 15 岁之后每年约加 6 岁。然后按人类年龄分阶段0-1 岁幼年、1-7 岁成年、7 岁以上老年显示对应建议function getLifeStage(pet: Pet): LifeStage { const ageInYears getAgeInYears(pet.birthday); if (ageInYears 1) return { stage: puppy, label: 幼年, advice: 高营养饮食定期接种疫苗 }; if (ageInYears 7) return { stage: adult, label: 成年, advice: 保持规律运动控制体重 }; return { stage: senior, label: 老年, advice: 每年体检关注关节和牙齿健康 }; }这个模块我特意让 Claude Code 把年龄换算公式和阶段阈值单独抽到一个纯函数里方便以后调整。顺便说一句这个部分也是整个项目里最容易“改需求”的部分——我后来就把七年改成按体型分了玩具犬和大型犬的老年线根本不该一样。如果你也想做类似功能建议一开始就把“按物种和体型区分规则”这个维度想进去。4. 前端页面与交互联调Claude Code 的审美怎么约束后端逻辑跑通之后重头戏来了前端页面。Claude Code 写前端有个显著特点——功能极快样式巨丑。它默认生成的界面就像 2005 年的后台管理系统白底、无间距、默认字体。4.1 项目整体的页面结构规划我实际规划的页面只有五个但每个都有明确功能首页 Dashboard宠物卡片列表 顶部全局提醒栏疫苗/驱虫到期情况。宠物详情页基本信息、生命周期阶段卡片、体重趋势图。体重记录页带图表展示趋势支持新增记录。疫苗管理页历史疫苗列表突出下一次到期信息。驱虫管理页同上。关于路由全部用 Next.js App Router 的文件系统路由。这一点上我卡过壳因为 Claude Code 默认会在根目录 layout 和页面里面放一堆样式代码然后我发现样式互相覆盖页面变得乱七八糟。所以第一次跑起来之前务必让它把所有全局样式文件清一遍只保留最基础的 reset然后按每个页面单独写模块样式。4.2 写 Prompt 让 AI 直奔“好看”这里直接上我实测以后最有效的一套模板比你在那反复说“好看一点”“高级一点”管用一百倍请为宠物详情页设计 UI。页面采用浅色背景卡片式布局圆角 16px阴影用低透明度。生命周期卡片放在最顶部用渐变色背景。下面是体重趋势卡片用折线图展示。字体使用系统默认字体不要引入外部字体库。所有间距统一使用 16px 的倍数不要使用内联样式组件内使用 CSS Modules。这套 Prompt 里藏着几个关键点明确指定“浅色”“圆角”“卡片式”这类的视觉语言指定组件方案CSS Modules指定间距规则16px 倍数禁止内联样式。只要这些约束给到了Claude Code 产出的颜值在线概率极高。关于图表库我选的是 Recharts。让 Claude Code 配好折线图让我省了不少事坐标轴、Tooltip、数据格式解析它一条龙搞定。我最开始企图让它用纯 CSS 画一个简单的折线结果试了三次都差点意思最后乖乖用上成熟的图表库。这个经验就是提醒你别重用 AI 做任何它不擅长的事选一个它训练数据里大量的、生态成熟的库你就省了一晚上的时间。4.3 联调时最容易出现的三类错误这个项目虽然全程 AI 操刀但我不是没有遇到报错。实测下来是这三类高频问题类型不匹配API 返回的数据里字段名和前端定义的类型对不上。这个多半因为 Prisma 生成的类型是服务端类型前端请求时是另一个结构。解决方式是在项目根目录 CLAUDE.md 里面明确写“前端接口调用统一在 API 层做类型转换禁止把服务端类型直接传给客户端组件”。AI 一旦记住了这个规则这类报错大幅度减少。组件水合不一致SSR 环境和客户端渲染结果对不上主要原因是一些随机数或者浏览器专用 API 被用在了服务端渲染阶段。排查方法就是看报错信息里提示的组件然后把这个组件的动态部分包进 useEffect。样式覆盖混乱Claude Code 会频繁使用内联样式做快速验证但全局样式稍不留神就互相覆盖。我最后统一规定所有组件用 CSS Modules只在全局样式文件里放重置样式和主题变量这个规则也写进了 CLAUDE.md。5. 质量保障测试、记忆机制、迭代闭环AI 写代码快的另一面是它写出来的代码隐患多。为了不让项目变成一堆“能跑但没人敢改”的代码我做了三件事让 AI 写测试、让 AI 记住项目约定、用 git 管理每一轮迭代。5.1 让 CLAUDE.md 成为项目的“长期记忆”Claude Code 有一个机制是跨会话读取项目根目录的 CLAUDE.md 文件作为上下文。这个文件就是它的“记忆体”。我第一天踩过最大的坑就是在新的会话里让它改代码它完全不记得昨天定的规则把接口风格改成了另一种页面样式也乱套。后来我把沉淀下来的规则都写进了 CLAUDE.md内容大概是这个结构# 项目约法三章 ## 技术栈 - Next.js App Router TypeScript Prisma SQLite - 样式一律使用 CSS Modules禁止内联样式 - 图表使用 Recharts ## 数据模型 - 所有时间字段区分 createdAt录入时间和 recordedAt业务时间 - 所有外键关系必须设置 onDelete: Cascade ## 前端规范 - 禁止把服务端类型直接传给 Client Component必须在 API 层做转换 - 所有页面间距统一使用 16px 倍数 - 生命周期阶段判断使用实时计算禁止落库 ## 测试 - 所有公共工具函数必须有单元测试 - API 层必须包含错误处理这个文件的作用是“把上下文锚定”下次新会话 AI 自动会读一遍就不会再犯低级的规则错误。这是我这次实践里面收获最大的一个技巧强烈建议所有用 AI 编程的人搞起来。5.2 TDD 模式让 AI 先写测试再写实现Claude Code 本身支持 TDD 模式做法是把“先实现再补测试”的顺序完全反过来。我实测最舒服的用法是这样的把核心工具函数的需求描述清楚输入参数、输出格式、边界情况。让 AI 先写单元测试把所有能想到的 case 列出来。再让 AI 写实现跑测试直到全绿。比如生命周期判断函数测试用例会覆盖刚出生的幼猫、满一岁但不满七岁的成年猫、七岁以上的老年猫以及特殊品种大型犬切线不同。写测试的过程实际上是逼 AI 想清楚边界条件这比写实现本身重要得多。如果你在一个人用 AI 干活TDD 还有一个隐藏好处当 AI 迭代到第十八版时你不需要自己一遍遍试老功能有没有被改坏直接跑测试就全知道了。这种安全感是手写代码都不一定有的。5.3 git 与版本管理的组合拳所有 AI 的重大修改我都会盯一眼 git diff确认没有动到不该动的东西跑测试通过之后再提交。这里有一个关键技巧每轮大改动起步前先让 AI 把改动计划的 TODO 列出来然后我看一眼说“开始”它才动手。如果它自作主张改了一堆无关文件我能从 git status 里第一时间看到然后 git checkout 回滚。Claude Code 有一个会话续接功能用起来就像一个可以持续生长的“程序员”。它支持你在上一次会话结束的地方直接往下续记忆还在上下文不断。我在这个项目里用了好几轮长会话从建模到写完核心逻辑中间就没断过直到页面阶段才开的新会话。6. 实测避坑与高频问题排查实录这一节集中把我两天里踩过的、在社区里看到别人也踩过的坑整理一下。每个问题后面附上排查思路这部分我建议你收藏着真遇到同类问题能少走不少弯路。6.1 “AI 动不动就改坏别人的代码”怎么办这是所有 AI 编程工具最被吐槽的问题。我摸索出来的一套办法是把“路线图”说清楚让 AI 只干一件事。比如你要加一个体重趋势算法那就明确说“只改 lib/trend.ts新增函数 calculateTrend”不要让它顺手把页面也改了。如果 AI 确实改乱了先 git diff 看看改动范围把与任务无关的改动单独 checkout 掉。你使用 git 越熟练就越敢大胆让 AI 干活因为你知道随时可以一键回到之前某版。6.2 上下文糊了文件太散、指令太虚AI 的上下文窗口是有限的项目代码一多它很容易“忘事”。我遇到最典型的一回它已经把体重记录 API 建好了我让它写前端图表的时候它居然从宠物表重新生成了一套新的字段接口路径都对不上。排查半天才发现它根本没去看 Prisma 的现有模型而是凭空生成了一套。解决方式所有跨文件修改先把相关文件的路径和核心代码片段贴给它或者把 CLAUDE.md 里记录的数据模型直接贴出来。宁可多花点 token 把上下文喂饱也别让它靠猜。6.3 越改越乱从“手工写代码”到“验收和纠偏”的角色转换我最大的体会是用 Claude Code 写项目你的角色变了。你不再是每一行代码的作者而是“项目经理 架构师 验收人”。前几个钟头我很不习惯总觉得不自己写点代码就心痒。后来发现把注意力放在需求确认、规则梳理、结果验收上产出质量反而比我自己手写更高。有一件小事让我彻底转变写生命周期段的年龄换算时我本来想直接让 AI 写实现但后来我先让它把规则表格列出来发现“大型犬第一年相当于人类 15 岁、之后每年 7 岁”这个规则如果不写清楚AI 就会默认为所有狗都是同一个算法。不要怪 AI 蠢是你给的业务规则不够具体。这不是一个 AI 技术问题是一个产品思维问题。6.4 别忘了问“为什么”让 AI 解释给你听如果你只是让 AI 给你铺代码你会错过一个巨大的学习机会。最好的用法是每生成一段核心逻辑就让它解释一遍“为什么这么写”“这里有哪些边界 case”。它会给你列出时间边界、空数据边界、异常输入边界这些是常规开发时真的容易漏掉的东西。举个例子我让 AI 写体重趋势的线性回归时它自己提醒了一个我完全没想到的问题体重记录只有一条的时候斜率为 0页面要显示“数据不足无法计算趋势”而不是画一条直线。这种提示AI 的天然敏感度已经很高你只需要给它一个出口让它说。写在最后的一点体会这次用 Claude Code 从零搭宠物生命周期管理 App最大的收获倒不是代码全由 AI 写完了而是我重新理解了“开发”这件事。过去我写一个小项目最高成本永远不是写代码而是把需求想清楚、把规则定清楚、把那些模棱两可的边界问题拍板定案。AI 不会替你决策但它能把你已经做好的决策快速变成产品——这种速度是过去手写时代没法比的。反正按我的判断这种“AI 写代码、人做验收”的模式会成为个人开发者做小项目的主流工作流。你不需要成为超级全栈工程师但你必须成为一个能快速定义清楚问题的人。这个技能比熟练掌握任何一个框架都值钱。如果你也准备拿 Claude Code 搞自己的项目建议从这种有明确业务规则的小项目开始。别一上来就搞复杂架构、多服务部署先把一个真实、完整、可用的东西做出来。当你亲眼看着 AI 把一个 App 从零到一跑通你会对这个工具的边界、脾气、潜力有完全不同的理解。