1. 先聊聊这个项目到底在做什么24天630次提交16万行代码。这三个数字放在一起任何一个写过代码的人都会先愣一下——平均每天26次提交、每天产出6600多行代码。如果放在传统开发模式里这几乎是不可能完成的任务要么是代码质量堪忧要么是团队规模被隐藏了。但实际情况是这个K12教育产品的开发主力只有一个人配合Claude Code作为AI编程助手完成。K12这个词大家应该不陌生指的是从幼儿园到12年级的基础教育阶段。这个产品具体做了什么从项目正文里没有详细展开但结合关键词和热搜词来看核心场景是围绕K12阶段的学习工具或教育平台。可能是作业辅导、知识点练习、学习进度追踪也可能是面向家长和老师的管理工具。不管具体形态如何K12产品的典型特征很明确用户群体是学生、家长和老师功能模块涉及题库、练习、评测、报告、权限管理等前端要兼顾PC和移动端后端要处理数据存储和接口服务。这个项目的核心看点不在于K12产品本身而在于用Claude Code从零搭建一个完整产品这件事。Claude Code是Anthropic推出的命令行AI编程工具它和普通的代码补全插件有本质区别——它能理解整个项目上下文能直接读写文件能执行终端命令能根据自然语言描述生成完整的代码模块。热搜词里出现的“claude code安装”“vscode配置claude code”“claude code使用”“claude code windows”“ubuntu配置claude code”这些说明大量开发者正在尝试把这个工具接入自己的工作流。这篇文章适合几类人看一是正在观望AI编程工具、想知道它到底能不能扛住真实项目的人二是已经装了Claude Code但不知道怎么高效用起来的人三是想了解K12产品从零搭建过程中有哪些坑的人。我会把24天里的关键决策、踩过的坑、实际的操作方法都摊开来讲不藏私。2. 为什么选Claude Code而不是其他方案2.1 传统开发模式和AI辅助模式的本质差异在聊为什么选Claude Code之前先说说传统开发模式的问题。一个人从零做一个K12产品如果纯手写24天做到16万行代码基本不可能。不是打字速度的问题而是脑力切换成本太高——你刚写完一个React组件马上要切到后端写API再切到数据库写迁移脚本然后还要写测试、调样式、处理边界情况。每次切换都要重新加载上下文效率极低。AI辅助编程工具分几个层次。第一层是代码补全比如早期的IntelliSense它只能根据当前行猜你要写什么。第二层是对话式生成你在聊天窗口里描述需求它给你一段代码你复制粘贴。第三层是项目级Agent它能读取整个项目结构理解模块之间的依赖关系直接修改文件、运行命令、验证结果。Claude Code属于第三层。这个差异在实际操作中非常明显。举个例子我要给K12产品的题库模块加一个“按知识点筛选题目”的功能。如果用第二层工具我得先描述数据库表结构再描述API接口格式再描述前端组件需求分三次对话拿到三段代码然后自己拼接、调试。用Claude Code我只需要说“在题库模块加一个按知识点筛选的功能前端用现有的Filter组件后端复用question接口加一个knowledge_point参数”它会自己去读相关文件理解现有代码风格然后一次性改完前端、后端和测试。2.2 Claude Code在真实项目中的能力边界用了24天之后我对Claude Code的能力边界有了比较清晰的认识。它最擅长的是有明确模式的重复性工作和跨文件的关联修改。比如给所有API接口统一加参数校验把某个组件的样式从CSS Module迁移到Tailwind根据数据库Schema生成TypeScript类型定义批量重命名变量或函数写单元测试和集成测试这些任务如果手写每个都要花几十分钟到几小时Claude Code通常几分钟就能搞定而且质量稳定。但它也有明显的短板。架构设计层面的事情它做不了主。比如K12产品要不要做微前端、状态管理用Redux还是Zustand、数据库选PostgreSQL还是MySQL这些决策必须我自己拍板。Claude Code可以给建议但它的建议往往偏向“最流行”而不是“最适合”。我试过让它推荐状态管理方案它列了Redux Toolkit、Zustand、Jotai、Recoil四个选项分析得头头是道但最后选哪个还是得根据项目实际情况来。另一个短板是业务逻辑的深度理解。K12产品有一些教育领域的特殊规则比如不同年级的知识点难度系数、题目的区分度计算、学习报告的生成逻辑。这些规则如果我不明确告诉它它就会按通用逻辑处理出来的结果不能用。所以我的做法是先把业务规则写成文档让Claude Code读文档再写代码。2.3 环境配置Windows和Ubuntu下的安装差异热搜词里“claude code安装”“claude code windows”“ubuntu配置claude code”出现频率很高说明很多人在环境配置这一步就卡住了。我两个系统都用过说一下实际体验。Windows下安装Claude Code最省事的方式是通过WSL2。直接在PowerShell里跑原生版本也能用但文件路径处理和终端命令兼容性会有一些小问题。我的建议是如果你主力开发环境是Windows装WSL2然后在Ubuntu子系统里装Claude Code。具体步骤# 在WSL2的Ubuntu终端里执行 curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash - sudo apt-get install -y nodejs npm install -g anthropic-ai/claude-code装完之后在项目目录下运行claude命令就能启动。第一次运行会要求登录授权按提示操作即可。Ubuntu原生环境下的安装更简单上面的命令直接跑就行。需要注意的是Node.js版本Claude Code要求Node 18以上我推荐用20 LTS版本稳定性最好。VSCode配置Claude Code这块热搜词里也有提到。Claude Code本身是命令行工具但可以在VSCode的集成终端里运行体验很流畅。如果你想让Claude Code直接读取VSCode里打开的文件需要在项目根目录运行它会自动识别项目结构。另外VSCode的settings.json里可以配一下终端字体和快捷键把claude命令绑定到一个快捷键上用起来更方便。注意安装过程中如果遇到权限报错不要用sudo npm install -g这会导致后续运行时的权限问题。正确做法是配置npm的全局目录到用户目录下或者用nvm管理Node版本。3. 24天里我是怎么组织开发流程的3.1 项目初始化阶段的关键决策第一天我没有急着写代码而是花了整整一个上午做技术选型和项目结构设计。这个决策后来被证明非常关键。K12产品的技术栈我选的是层级技术选型选择理由前端框架React 18 TypeScript生态成熟Claude Code对React的支持最好构建工具Vite启动快热更新体验好样式方案Tailwind CSS原子化类名AI生成样式代码时不容易冲突状态管理Zustand轻量API简洁适合中等规模项目后端框架Fastify性能好TypeScript支持完善数据库PostgreSQL Prisma类型安全迁移管理方便测试Vitest Playwright单元测试和E2E测试覆盖选Tailwind CSS这个决策特别值得说一下。传统CSS方案里AI生成样式代码很容易出现类名冲突、样式覆盖的问题。Tailwind的原子化类名天然避免了这个问题而且Claude Code对Tailwind的类名组合非常熟练生成的样式代码基本不需要调整。项目结构我采用了monorepo的方式用pnpm workspace管理k12-product/ ├── apps/ │ ├── web/ # 前端应用 │ └── api/ # 后端服务 ├── packages/ │ ├── shared/ # 共享类型和工具函数 │ └── ui/ # 共享UI组件 ├── prisma/ # 数据库Schema和迁移 └── docs/ # 业务规则文档这个结构的好处是前后端共享类型定义Claude Code在修改接口时能同时更新前端和后端的类型减少不一致的问题。3.2 用CLAUDE.md文件给AI立规矩Claude Code有一个很重要的机制它会自动读取项目根目录下的CLAUDE.md文件把它作为项目级的系统提示。这个文件相当于给AI立的“规矩”告诉它这个项目的代码规范、目录结构、常用命令、业务规则。我的CLAUDE.md大概长这样# 项目说明 K12教育产品包含题库、练习、评测、报告四个核心模块。 # 代码规范 - 所有组件使用函数式组件 TypeScript - 样式统一用Tailwind CSS禁止写内联style - API请求统一走 /lib/api 封装禁止直接fetch - 数据库操作统一走Prisma禁止写原生SQL # 目录约定 - 前端页面在 apps/web/src/pages - 前端组件在 apps/web/src/components - 后端路由在 apps/api/src/routes - 共享类型在 packages/shared/src/types # 常用命令 - 启动开发环境pnpm dev - 运行测试pnpm test - 数据库迁移pnpm prisma migrate dev # 业务规则 - 题目难度分5级1-5数值越大越难 - 知识点按树形结构组织最多3层 - 学习报告按周生成每周一凌晨更新这个文件我前后改了七八次每次发现Claude Code生成的代码不符合预期就回来加一条规则。比如它一开始总喜欢用any类型我就在规范里加了一条“禁止使用any必须定义具体类型”。它有时候会忘记处理错误边界我就加一条“所有API调用必须包含try-catch和用户提示”。3.3 每日开发节奏从需求到提交的完整链路24天里我形成了一套比较固定的工作节奏。每天早上先花15分钟整理当天的任务清单按优先级排序。然后打开Claude Code用自然语言描述第一个任务。一个典型的任务流程是这样的描述需求在Claude Code里输入“实现题库列表页面支持按年级、学科、知识点筛选分页每页20条点击题目进入详情页”AI生成代码Claude Code会读取现有的组件和API定义生成页面组件、API调用逻辑、类型定义人工审查我快速过一遍生成的代码重点看业务逻辑是否正确、边界情况是否处理运行验证在浏览器里实际操作一遍看筛选、分页、跳转是否正常补充测试让Claude Code为这个页面写单元测试和E2E测试提交代码确认无误后git commit提交信息写清楚做了什么这个流程里第3步和第4步是最关键的。Claude Code生成的代码大约有70%可以直接用20%需要小改10%需要重写。那10%通常是业务逻辑比较复杂或者涉及多个模块交互的部分。630次提交平均下来每天26次看起来很多但其实每次提交的粒度很小。我习惯完成一个小功能就提交一次这样出问题的时候容易回滚。Claude Code也支持直接执行git命令我经常让它帮我写提交信息比我自己写的规范。4. 16万行代码里哪些是AI写的哪些是我写的4.1 代码构成分析16万行代码听起来很多但拆开来看就合理了。我统计了一下大致的构成代码类型行数占比主要生成方式前端组件约35%Claude Code生成人工调整业务逻辑后端路由和Service约25%Claude Code生成人工设计接口结构类型定义约10%Claude Code根据Prisma Schema自动生成测试代码约15%Claude Code生成人工补充边界用例配置和脚本约8%手写为主Claude Code辅助文档和注释约7%Claude Code生成人工校对前端组件占比最大因为K12产品有很多页面和交互。Claude Code生成React组件的能力很强给它一个设计稿描述或者参考现有组件它能快速产出结构清晰的代码。但业务逻辑部分我通常会重写比如题目作答的判断逻辑、学习报告的统计算法这些涉及教育领域的特殊规则AI不容易理解到位。测试代码占比15%是我刻意提高的。AI生成代码的速度快但如果没有测试覆盖后期改动的风险很大。我让Claude Code为每个核心模块都写了测试包括单元测试和E2E测试。Playwright的E2E测试特别有用它能模拟真实用户操作验证整个流程是否正常。4.2 AI生成代码的质量把控Claude Code生成的代码质量整体不错但有几个高频问题需要特别注意类型定义过于宽松。它有时候会用string代替具体的枚举类型用object代替具体的接口。我的做法是在CLAUDE.md里明确要求“所有函数参数和返回值必须有明确类型禁止使用any和object”。错误处理不完整。AI生成的代码往往只处理正常流程忽略异常情况。比如API请求失败、数据为空、用户输入非法等。我养成了一个习惯每次Claude Code生成完代码我都会问它“这段代码有哪些可能的异常情况分别怎么处理”让它自己补充。重复代码。AI有时候会在不同文件里生成相似的逻辑而不是抽取成公共函数。我会定期让Claude Code做代码审查找出重复代码并重构。性能问题。比如在循环里发API请求、没有做防抖节流、大列表没有虚拟滚动。这些问题在开发阶段不明显但上线后会暴露。我的做法是在CLAUDE.md里加一条“列表渲染超过50条必须使用虚拟滚动搜索输入必须做防抖”。4.3 那些AI搞不定、必须手写的部分有几类代码我基本不指望Claude Code都是自己手写数据库Schema设计。K12产品的数据模型比较复杂题目、知识点、用户、作答记录、学习报告之间有多层关联。Prisma的Schema文件我都是自己写因为一个字段的设计失误后期迁移成本很高。核心算法。比如题目的难度系数计算、知识点的掌握度评估、学习报告的生成逻辑。这些算法涉及教育领域的专业知识AI生成的版本往往逻辑不通或者参数不合理。权限系统。K12产品有三种角色学生、家长、老师每种角色的权限不同。权限校验的逻辑我手写了一套中间件确保安全边界清晰。部署和运维脚本。CI/CD流程、环境变量管理、日志收集、监控告警这些涉及基础设施的代码我倾向于自己控制不交给AI生成。5. 踩过的坑和实际解决方案5.1 Claude Code订阅权限问题的排查热搜词里有一个“your organization has disabled claude subscription access for claude code”这个问题我遇到过。原因是Claude Code需要独立的订阅授权如果你用的是团队版或者企业版账号管理员可能没有开启Claude Code的访问权限。排查步骤是这样的先确认你的账号类型个人版一般不会有这个问题。如果是团队版联系管理员在后台确认Claude Code的访问权限是否开启。如果管理员确认开启了但还是报错检查一下登录的账号是否正确有时候浏览器里登录的是个人账号但终端里缓存的是团队账号的凭证。解决方法是清除本地凭证重新登录# 清除Claude Code的本地配置 rm -rf ~/.claude # 重新启动并登录 claude如果问题依旧检查网络环境是否稳定。Claude Code需要持续连接服务端网络不稳定会导致授权失败。5.2 让Claude Code调用本地模型的尝试热搜词里“claude code 调用lmstudio的本地模型”这个需求我理解有些场景下开发者希望用本地模型来降低成本或者保护数据隐私。我实际试过这个方案说一下体验。Claude Code本身是设计为连接Anthropic的服务端模型的官方没有提供直接切换本地模型的接口。但可以通过设置环境变量ANTHROPIC_BASE_URL来指向兼容Anthropic API格式的本地服务。LM Studio可以启动一个兼容OpenAI API的服务但和Anthropic API格式不完全一致需要中间做一层转换。我试过的方案是用一个轻量的代理服务做格式转换把Anthropic格式的请求转成OpenAI格式发给LM Studio。实际跑下来效果和官方模型差距明显。本地模型在代码理解和生成质量上还有不小差距特别是处理复杂项目上下文的时候容易丢失信息。如果你的项目对代码质量要求高建议还是用官方模型。如果只是做一些简单的代码补全或者格式转换本地模型可以凑合用。5.3 上下文窗口管理和长对话策略Claude Code的一个限制是上下文窗口。虽然它的窗口已经很大了但在一个16万行代码的项目里不可能把所有代码都塞进去。我的策略是按模块组织对话。不要在一个对话里同时处理前端和后端的任务分开进行。每个对话聚焦一个模块这样Claude Code能更准确地理解上下文。善用/clear命令。当一个任务完成、要开始新任务时用/clear清空对话历史避免旧上下文干扰新任务。关键信息写进CLAUDE.md。与其在对话里反复解释项目规范不如一次性写进CLAUDE.md这样每个新对话都能自动加载。让Claude Code自己读文件。不要手动把代码粘贴到对话里而是告诉它“读一下apps/web/src/components/QuestionList.tsx”它会自己去读这样更准确也更省token。5.4 代码冲突和回滚的处理经验630次提交里有大概30次是回滚操作。AI生成代码虽然快但有时候会改错文件或者引入意外的改动。我的经验是每次让Claude Code改代码之前先commit当前状态。这样如果改坏了直接git reset --hard就能回到干净状态。小步提交不要攒大招。一个功能拆成多个小任务每个任务完成就提交。这样出问题时影响范围小容易定位。用git diff审查AI的改动。Claude Code改完代码后不要直接跑先看diff。它有时候会顺手改一些不相关的文件或者删除它认为“多余”的代码。这些改动需要人工确认。分支策略。我用了简单的分支模型main分支保持稳定开发在dev分支上进行每个功能再开feature/xxx分支。Claude Code在feature分支上工作完成后合并到dev测试通过再合并到main。6. 24天之后的反思AI编程工具改变了什么6.1 效率提升的真实数据24天16万行代码平均每天6600多行。如果纯手写我估计需要3到4个月。效率提升大概在4到5倍。但这个数字要客观看待代码行数不等于工作量。AI生成的代码里有很多是类型定义、测试代码、配置文件这些手写虽然慢但技术含量不高。真正核心的业务逻辑代码大概只占30%左右这部分AI的贡献有限。调试时间没有减少。AI生成代码快但调试时间并没有同比减少。有时候AI生成的代码看起来没问题但运行起来有微妙的bug排查起来反而更费时间因为你不熟悉这段代码的来龙去脉。架构设计的时间省不了。项目初期花在技术选型和结构设计上的时间和传统开发差不多。这部分工作AI替代不了。6.2 对开发者能力要求的变化用了24天Claude Code之后我感觉对开发者的能力要求变了。以前强调“写得快”“记得牢”现在更强调“描述得清楚”“审查得仔细”“架构设计得合理”。描述能力变得关键。你需要用准确的自然语言描述需求包括功能边界、输入输出、异常处理。描述得越清楚AI生成的代码越符合预期。模糊的描述会导致反复修改。代码审查能力变得关键。AI生成的代码需要人工审查你得能快速判断这段代码有没有问题、符不符合项目规范、有没有安全隐患。审查能力不强的人用AI编程反而容易埋雷。架构设计能力变得关键。AI可以写代码但不会设计系统。模块怎么划分、接口怎么定义、数据怎么流转这些还是得人来决定。架构设计得好AI生成的代码质量也高架构设计得乱AI生成的代码也会跟着乱。6.3 给想尝试AI编程的人的建议如果你也想用Claude Code或者类似的工具做项目我有几个建议从小项目开始。不要一上来就搞16万行的大项目先拿一个几千行的小工具练手熟悉工具的能力边界和工作流程。把规范写清楚。花时间写好CLAUDE.md把代码规范、目录结构、业务规则都写进去。这个投入回报率很高能显著减少后期修改。保持审查习惯。不要盲目信任AI生成的代码每一段都要过目。特别是涉及安全、权限、数据一致性的部分必须仔细检查。学会提问。Claude Code的能力很大程度上取决于你怎么问。学会把大任务拆成小任务学会提供足够的上下文学会让它自己验证结果。不要放弃基本功。AI编程工具是放大器你的基本功越好它放大的效果越好。如果你本身不懂TypeScript、不懂React、不懂数据库AI生成的代码你也看不懂、改不动。7. 关于K12产品本身的一些技术细节7.1 题库模块的数据结构设计K12产品的核心是题库。题目、知识点、难度、题型、选项、答案、解析这些数据怎么组织直接影响后续的练习、评测、报告功能。我设计的核心表结构大概是这样的model Question { id String id default(cuid()) content String // 题目内容 type QuestionType // 题型单选、多选、填空、解答 difficulty Int // 难度1-5 knowledgePoints KnowledgePoint[] // 关联知识点 options Json? // 选项选择题用 answer String // 答案 explanation String? // 解析 grade Int // 年级 subject String // 学科 createdAt DateTime default(now()) updatedAt DateTime updatedAt } model KnowledgePoint { id String id default(cuid()) name String parentId String? parent KnowledgePoint? relation(KnowledgeTree, fields: [parentId], references: [id]) children KnowledgePoint[] relation(KnowledgeTree) questions Question[] level Int // 层级最多3层 }这个设计里知识点是树形结构题目和知识点是多对多关系。难度用1-5的整数表示方便后续做难度分布统计。题型用枚举方便前端渲染不同的作答界面。7.2 学习报告的生成逻辑学习报告是K12产品里家长和老师最关注的功能。报告的核心是指标计算我定义了这几个关键指标知识点掌握度该知识点下答对题数 / 总答题数按最近30天计算难度适应度当前难度下正确率在60%-80%之间视为适应过高或过低都需要调整学习活跃度最近7天答题天数 / 7进步趋势最近7天正确率 - 前7天正确率这些指标的计算逻辑我手写在Service层Claude Code负责生成报告页面的展示组件。报告按周生成每周一凌晨跑定时任务更新。7.3 权限系统的设计K12产品有三种角色权限差异很大角色可查看可操作学生自己的答题记录、学习报告答题、查看解析家长关联孩子的学习数据查看报告、设置学习目标老师所带班级的所有数据布置作业、查看班级报告、管理题目权限校验我用了中间件的方式在每个API路由上声明需要的角色中间件统一校验。Claude Code帮我生成了权限校验的框架代码具体的角色权限矩阵我手动配置。8. 一些实用的Claude Code操作技巧8.1 常用命令和快捷键Claude Code的交互界面是命令行但有一些快捷操作能显著提升效率/clear清空当前对话开始新任务时用/compact压缩对话历史保留关键信息适合长对话CtrlC中断当前生成CtrlD退出Claude Code上下箭头浏览历史输入另外Claude Code支持直接执行终端命令比如你说“运行测试”它会执行pnpm test并读取结果。你说“提交代码”它会执行git add和git commit。这个能力很实用省去了切换终端的麻烦。8.2 让Claude Code写测试的技巧测试代码是AI比较擅长的部分但需要给对指令。我的做法是为 apps/web/src/components/QuestionList.tsx 写单元测试要求 1. 覆盖正常渲染、空数据、加载中三种状态 2. 测试筛选功能模拟选择年级和学科 3. 测试分页功能模拟点击下一页 4. 使用Vitest Testing Library 5. mock API请求不要发真实请求这样描述之后Claude Code生成的测试代码基本可以直接用。如果不给具体要求它可能只写一个简单的渲染测试覆盖不全。8.3 处理复杂重构的方法重构是AI编程工具的一个强项但复杂重构需要分步骤进行。比如我要把状态管理从Context API迁移到Zustand直接说“迁移到Zustand”可能会让Claude Code一次性改太多文件容易出错。我的做法是分步骤先让它“列出所有使用Context API的文件和组件”然后“为每个Context创建对应的Zustand store”再“逐个组件替换useContext为useStore”最后“删除旧的Context文件”每一步完成后运行测试确认没问题再进行下一步。这样虽然步骤多但风险可控。8.4 用Claude Code做代码审查除了生成代码Claude Code还可以做代码审查。我经常在提交前让它检查一遍审查 apps/api/src/routes/questions.ts 的改动检查 1. 是否有类型安全问题 2. 是否有未处理的异常 3. 是否有SQL注入风险 4. 是否符合项目的代码规范它会给出具体的修改建议有些问题我自己都没注意到。这个习惯帮我避免了不少潜在bug。9. 项目后续的扩展方向这个K12产品目前完成了核心的题库、练习、评测、报告四个模块但还有很多可以扩展的地方。从技术角度我接下来想做的几件事自适应练习。根据学生的答题历史动态调整题目难度和知识点覆盖实现个性化练习路径。这需要更复杂的推荐算法我打算用简单的规则引擎先跑起来后续再考虑机器学习方案。离线支持。K12产品的用户可能在网络不稳定的环境下使用PWA的离线缓存能力可以解决这个问题。Service Worker的配置和缓存策略需要仔细设计。数据分析看板。给老师和家长提供更丰富的数据可视化比如班级知识点掌握热力图、学生进步趋势图。图表库我打算用Recharts和React集成比较顺畅。多端适配。目前主要是Web端后续可以考虑小程序和App。React Native或者Taro都是可选方案但需要评估迁移成本。这些扩展方向里Claude Code能帮上忙的部分主要是UI组件和API接口的生成核心算法和架构设计还是得自己来。24天的经验告诉我AI编程工具是一个强大的杠杆但杠杆的支点还是人。你对项目的理解越深、对技术的把握越准这个杠杆撬动的价值就越大。提示如果你也在用Claude Code做项目建议每周花半小时回顾一下AI生成的代码找出反复出现的问题更新到CLAUDE.md里。这个习惯能让AI的输出质量持续提升后期修改成本越来越低。