尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

24天630次提交16万行代码:用Claude Code从零构建K12产品的工程实践

24天630次提交16万行代码:用Claude Code从零构建K12产品的工程实践 1. 项目缘起与整体思路拆解1.1 为什么选择用 Claude Code 从零构建 K12 产品24 天630 次提交16 万行代码。这三个数字放在一起任何一个写过生产级项目的人都会先愣一下然后本能地怀疑是不是大量复制粘贴是不是 AI 生成了一堆没法维护的垃圾我一开始也是这么想的。但当我真正把 Claude Code 作为主力开发工具从零开始搭建一个 K12 教育产品之后我发现这套工作流的效率提升是真实的前提是你得知道怎么用它。K12 这个赛道很有意思。它不像企业级 SaaS 那样追求极致的抽象和扩展性也不像纯 C 端工具那样可以快速试错。K12 产品的核心矛盾在于功能模块极其琐碎题库、错题本、学习计划、家长端、教师端、学情报告但每个模块的业务逻辑又必须足够严谨知识点关联、难度系数、掌握度算法。这种“碎而深”的特征恰好是 LLM 辅助编程最能发挥优势的场景——大量重复但有细微差异的 CRUD 代码、数据模型定义、API 路由都可以通过精准的 prompt 快速生成而开发者可以把精力集中在核心算法和架构设计上。我选择 Claude Code 而不是其他 AI 编程工具原因有三点。第一Claude Code 对 TypeScript 和 Python 的类型推断非常准确生成的代码几乎不需要手动补类型。第二它支持直接执行终端命令这意味着我可以在对话中让它跑测试、装依赖、查日志形成闭环。第三它的上下文窗口足够大能够理解跨文件的依赖关系不会出现“改了 A 文件忘了 B 文件”的低级错误。提示如果你之前没用过 Claude Code建议先从一个小型项目练手熟悉它的“对话式编程”节奏。直接上大项目容易因为 prompt 不够精确而反复返工。1.2 技术选型的底层逻辑这个 K12 产品的技术栈是Python TypeScript TSX。后端用 Python 是因为要处理大量的数据处理和算法逻辑尤其是学情分析模块需要用到 numpy 和 sklearn 做统计计算。前端用 TypeScript TSX 是因为 React 生态对教育类交互组件拖拽题、手写识别、实时批改的支持最成熟。数据库选了 PostgreSQL原因很简单K12 产品的数据关系复杂学生、班级、知识点、题目、作答记录之间存在多对多关系用关系型数据库比文档型数据库更合适。缓存层用了 Redis主要解决高频的学情报告查询和排行榜计算。LLM 在这个产品中的角色不是“聊天机器人”而是嵌入到具体功能里的能力模块。比如自动批改主观题、生成个性化学习建议、根据错题推荐相似题目。这些场景对 LLM 的调用频率不高但对准确率要求很高所以我在 prompt 工程上花了不少时间。注意不要把 LLM 当成万能接口。K12 场景下任何涉及分数、排名、升学建议的输出都必须有明确的计算逻辑兜底LLM 只负责“表达”而不是“决策”。2. 核心细节解析与实操要点2.1 Claude Code 的安装与环境配置Claude Code 的安装方式取决于你的操作系统。Windows 用户和 Ubuntu 用户的配置流程略有不同但核心步骤一致。Windows 环境# 先确保 Node.js 版本在 18 以上 node -v # 通过 npm 全局安装 Claude Code npm install -g anthropic-ai/claude-code # 验证安装 claude --versionUbuntu 环境# 更新包管理器 sudo apt update sudo apt upgrade -y # 安装 Node.js如果还没装 curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash - sudo apt install -y nodejs # 安装 Claude Code npm install -g anthropic-ai/claude-code安装完成后需要在项目根目录初始化配置文件。Claude Code 会读取.claude目录下的配置你可以在这里定义项目级的 prompt 模板和工具权限。{ projectName: k12-learning-platform, language: zh-CN, allowedCommands: [npm, python, pytest, git], maxTokens: 8192, temperature: 0.3 }temperature设成 0.3 是一个经验值。太高了生成的代码会“飘”太低了又缺乏灵活性。0.3 在代码生成场景下比较平衡。提示如果你在 VS Code 里用 Claude Code建议安装官方插件这样可以直接在编辑器里看到 diff 预览避免全量覆盖导致代码丢失。2.2 Python 后端的核心模块拆解后端我分了五个核心模块用户认证、题库管理、作答记录、学情分析、推荐引擎。每个模块的代码量大概在 8000 到 15000 行之间其中大约 60% 的代码是通过 Claude Code 生成的40% 是手动调整和优化的。用户认证模块用的是 FastAPI JWT。Claude Code 生成这部分代码时我给的 prompt 是“用 FastAPI 实现一个支持学生、教师、家长三种角色的 JWT 认证系统要求包含注册、登录、token 刷新、权限校验四个接口数据库用 PostgreSQLORM 用 SQLAlchemy。”它生成的代码基本可以直接用但我手动改了两个地方。第一token 过期时间从默认的 30 分钟改成了 7 天因为 K12 产品的用户尤其是学生不希望频繁登录。第二增加了家长绑定学生的逻辑这是 Claude Code 没有主动考虑的。题库管理模块是整个产品最复杂的部分。每道题需要关联知识点、难度系数、题型、答案、解析、变式题。我用 Claude Code 生成了数据模型和 CRUD 接口但知识点关联的逻辑是手动写的。# 知识点关联的核心逻辑 def link_knowledge_points(question_id: int, kp_ids: list[int], weights: list[float]): 将题目与知识点关联支持权重配置 weights 之和必须为 1.0否则抛出异常 if abs(sum(weights) - 1.0) 1e-6: raise ValueError(知识点权重之和必须为 1.0) for kp_id, weight in zip(kp_ids, weights): db.execute( INSERT INTO question_kp (question_id, kp_id, weight) VALUES (%s, %s, %s), (question_id, kp_id, weight) )这个权重设计是为了后续的学情分析服务的。一道题可能涉及多个知识点但每个知识点的贡献度不同。比如一道应用题可能 70% 考察方程求解30% 考察阅读理解。2.3 前端 TSX 组件的生成策略前端我用了 React TypeScript Vite。Claude Code 在生成 TSX 组件时表现很好尤其是表单、列表、弹窗这类模式化的组件。但有几个坑需要注意。第一它默认生成的组件往往缺少 loading 和 error 状态。你需要明确在 prompt 里写“组件需要包含 loading、error、empty 三种状态的处理。”第二它生成的样式通常是内联的不利于维护。我后来统一要求它用 Tailwind CSS 类名这样生成的代码更干净。第三对于复杂的交互组件比如拖拽排序、手写板Claude Code 生成的代码只能作为起点需要大量手动调整。// 一个典型的 Claude Code 生成的题目卡片组件 interface QuestionCardProps { question: Question; onAnswer: (answer: string) void; status: idle | loading | error | success; } export const QuestionCard: React.FCQuestionCardProps ({ question, onAnswer, status }) { if (status loading) return Skeleton /; if (status error) return ErrorRetry onRetry{() onAnswer()} /; return ( div classNamerounded-lg border p-4 shadow-sm h3 classNametext-lg font-medium{question.stem}/h3 div classNamemt-3 space-y-2 {question.options.map((opt, idx) ( button key{idx} onClick{() onAnswer(opt)} classNamew-full rounded border px-3 py-2 text-left hover:bg-gray-50 {opt} /button ))} /div /div ); };这个组件看起来简单但实际使用中我发现了一个问题当题目包含图片或公式时question.stem直接渲染会出问题。后来我加了一个renderRichText函数来处理 Markdown 和 LaTeX。3. 实操过程与核心环节实现3.1 24 天的时间线复盘我把这 24 天分成了四个阶段每个阶段的目标和产出都很明确。第 1 到 5 天项目脚手架和基础设施。这个阶段主要是搭环境、配数据库、写 Dockerfile、设置 CI/CD。Claude Code 在这里帮了大忙尤其是 Docker 配置和 GitHub Actions 的 YAML 文件它生成的模板基本可以直接用。第 6 到 12 天后端核心模块开发。用户认证、题库管理、作答记录这三个模块在这个阶段完成。每天大概提交 30 到 40 次每次提交对应一个小的功能点或 bug 修复。第 13 到 18 天前端开发和联调。这个阶段最痛苦因为前后端的接口对齐需要反复沟通。Claude Code 在这里的作用是帮我快速生成 TypeScript 的接口类型定义减少了很多手动对字段的时间。第 19 到 24 天学情分析和推荐引擎。这是技术含量最高的部分。学情分析用了 IRT项目反应理论模型来估计学生的能力值推荐引擎用了协同过滤 内容推荐的混合策略。# IRT 模型的核心参数估计 def estimate_ability(responses: list[dict], max_iter: int 100): 使用 EM 算法估计学生能力值 theta responses: [{question_id: 1, correct: True, difficulty: 0.5, discrimination: 1.2}] theta 0.0 # 初始能力值 for _ in range(max_iter): numerator 0.0 denominator 0.0 for r in responses: p 1 / (1 math.exp(-r[discrimination] * (theta - r[difficulty]))) w p * (1 - p) numerator r[discrimination] * (int(r[correct]) - p) denominator r[discrimination] ** 2 * w if abs(denominator) 1e-8: break theta numerator / denominator return theta这个算法的收敛速度取决于题目数量。实测下来20 道题以上就能得到比较稳定的估计值。3.2 630 次提交背后的工作流630 次提交除以 24 天平均每天 26 次。这个频率听起来很高但实际上每次提交的改动量并不大。我的习惯是每完成一个可测试的功能点就提交一次而不是攒一大堆改动再提交。Claude Code 在这个工作流中的角色是“结对编程伙伴”。我通常的操作是在 Claude Code 的对话窗口里描述需求它生成代码后我快速 review 一遍跑测试如果通过就提交如果不通过把错误信息贴回去让它修复这个循环通常只需要 2 到 3 分钟。相比传统的“查文档、写代码、调试”流程效率提升非常明显。提示不要完全信任 Claude Code 生成的代码。我踩过最大的坑是它生成的 SQL 查询在数据量大的时候性能极差因为它默认不考虑索引。后来我养成了习惯凡是涉及数据库查询的代码必须手动检查执行计划。3.3 16 万行代码的构成分析16 万行代码听起来很多但拆开来看就合理了。模块代码行数占比主要语言后端 API5200032.5%Python前端组件4800030.0%TSX数据模型1800011.3%Python/SQL测试代码2200013.8%Python/TS配置文件80005.0%YAML/JSON文档和注释120007.5%Markdown测试代码占了 13.8%这个比例是我刻意保持的。Claude Code 生成测试用例的速度很快但质量参差不齐。我的做法是让它生成测试框架和边界用例然后手动补充业务逻辑相关的测试。4. 常见问题与排查技巧实录4.1 Claude Code 使用中的典型报错与解决问题一your organization has disabled claude subscription access for claude code这个报错通常出现在企业账号环境下。解决方法有两个一是用个人账号登录二是联系管理员开通权限。如果你用的是个人版检查一下是不是登录状态过期了重新claude login即可。问题二llm request failed: provider rejected the request schema or tool payload这个报错说明你发送的请求格式有问题。最常见的原因是 prompt 里包含了特殊字符或者过长的上下文。解决方法把长 prompt 拆成多个短 prompt或者用claude --max-tokens 4096限制输出长度。问题三生成的代码无法通过 TypeScript 类型检查Claude Code 有时候会生成“看起来对但类型不对”的代码。比如它会把string | undefined直接当成string用。解决方法是在 prompt 里明确要求“生成的代码必须通过 strict 模式的 TypeScript 检查”。4.2 学情分析模块的排查案例学情分析模块上线后我发现一个班级的掌握度数据异常所有学生的掌握度都是 0.5。排查后发现是 IRT 模型的初始值设置有问题当题目难度和区分度数据缺失时模型无法收敛。解决方法是在数据预处理阶段增加校验def validate_question_params(question: dict) - bool: 校验题目参数是否完整 required [difficulty, discrimination] for key in required: if key not in question or question[key] is None: return False if not (0.1 question[discrimination] 3.0): return False if not (-3.0 question[difficulty] 3.0): return False return True这个校验逻辑后来被加到了题库管理模块的保存接口里从源头上避免了脏数据。4.3 常见问题速查表问题现象可能原因解决方法Claude Code 无响应网络超时或 token 耗尽检查网络减少上下文长度生成的代码缺少 importprompt 未指定文件路径在 prompt 中明确文件位置数据库查询慢缺少索引或 N1 查询用 EXPLAIN 分析加索引前端组件渲染空白数据未加载或状态未更新检查 loading 状态和 useEffect 依赖LLM 输出格式不稳定temperature 过高降到 0.2 到 0.3加格式约束注意Claude Code 的上下文是有限的。如果你在一个对话里聊了太多不相关的内容它的表现会下降。我的习惯是每完成一个模块就开一个新对话。5. 从 16 万行代码中提炼的实操心得5.1 什么样的代码适合交给 Claude Code 生成经过这个项目我总结出一个判断标准模式化程度高、业务逻辑浅、测试覆盖容易的代码适合交给 Claude Code。比如 CRUD 接口、数据模型定义、表单组件、单元测试。反过来涉及核心算法、性能敏感、安全相关的代码必须手动写。比如 IRT 模型的参数估计、JWT 的签名验证、SQL 的索引优化。这个判断标准帮我节省了大量时间也避免了“AI 生成代码出 bug 找不到原因”的尴尬。5.2 如何写出高质量的 prompt写 prompt 的核心原则是具体、具体、再具体。不好的 prompt“帮我写一个用户登录接口。”好的 prompt“用 FastAPI 写一个 POST /api/auth/login 接口接收 email 和 password返回 JWT token 和用户信息。密码用 bcrypt 验证token 有效期 7 天。如果邮箱不存在返回 404密码错误返回 401。数据库用 PostgreSQLORM 用 SQLAlchemy。”后者生成的代码基本不需要改前者生成的代码你得改半天。5.3 项目后续的扩展方向这个 K12 产品目前只覆盖了数学和英语两个学科。后续如果要扩展到物理、化学题库的数据模型需要调整因为理科题目涉及公式和图表存储和渲染的逻辑更复杂。另一个方向是接入本地 LLM 模型。目前用的是云端 API成本和延迟都是问题。如果能在本地部署一个 7B 到 13B 的模型用于批改和推荐响应速度会快很多。不过本地模型的准确率需要仔细评估尤其是数学题的批改容错率很低。提示如果你也想用 Claude Code 做项目建议从一个小模块开始比如先让它帮你写一个完整的 CRUD 模块。熟悉了它的“脾气”之后再逐步扩大使用范围。不要一上来就把整个项目交给它那样你会花更多时间在 debug 上。
返回列表