用AI Agent把前端迁移到ViteReactmodern-software-dev-assignments week5最复杂任务攻略【免费下载链接】modern-software-dev-assignmentsAssignments for CS146S: The Modern Software Dev (Stanford University Fall 2026/2025)项目地址: https://gitcode.com/GitHub_Trending/mo/modern-software-dev-assignments本文带你用 AI Agent 完成 modern-software-dev-assignments 中 week5 最复杂的任务——把前端迁移到 Vite React。这是斯坦福 CS146S 课程仓库里一个完整的实战案例FastAPI 后端 静态前端的全栈起步项目目标是用智能体Agentic工作流而不是纯手工改代码来完成一次真正的前端重构。为什么这个任务被称为 week5 最复杂任务 打开任务清单 week5/docs/TASKS.md11 个任务按难度分级其中第 1 项 Migrate frontend to Vite React 被明确标记为complex最复杂。难在哪里难点说明构建链改造原项目是纯静态页面零 Node 工具链迁移后要引入 npm 构建流程静态托管切换FastAPI 要改为服务dist/构建产物并让根路径/返回新的index.html接口全量对接笔记列表/增删改、待办列表/完成全部要在 React 组件里重新接线工具链扩展week5/Makefile 要新增web-install、web-dev、web-build目标测试补齐至少 2 个 React 组件测试Testing Library 后端兼容性集成测试这正是 AI Agent 的主场步骤多、模式化、适合拆解执行但每一步又需要人工把关。动手前3 分钟看懂 week5 起步项目在喂任务给 Agent 之前先花 3 分钟建立全局认知这是迁移成功的关键。后端week5/backend/app/main.py 只有 30 多行——挂载静态目录/static指向frontend/根路径/返回frontend/index.html两个路由分别是笔记和待办前端只有三个文件——week5/frontend/index.html、week5/frontend/app.js约 65 行原生 JS负责调/notes/和/action-items/接口以及week5/frontend/styles.css数据模型week5/backend/app/models.py 里只有Note和ActionItem两个表字段一目了然先跑起来再说cd week5 make run然后访问http://localhost:8000亲眼确认现有功能长什么样。这个基线快照是后面让 Agent 做行为对比的锚点。任务拆解给 AI Agent 的 5 步迁移清单把 complex 任务拆成 5 个可独立验收的小步骤每一步 Agent 都能给出明确的完成/失败信号脚手架在week5/frontend/下搭建 Vite React 应用确认npm run dev能跑构建产物接线配置 Vite 输出到week5/frontend/dist/把 FastAPI 的静态挂载和根路由改到dist对应 main.py 中的两处挂载组件化迁移把index.html里的 Notes 表单列表、Action Items 表单列表改写成 React 组件接口调用逻辑参照 app.js 现有的 fetch 写法Makefile 集成新增web-install/web-dev/web-build目标让make run前能自动完成构建测试收尾补 2 个组件测试 后端 API 兼容性测试跑make test全绿 技巧让 Agent 每完成一步就停下汇报而不是一口气全做完。迁移类任务最大的风险是 Agent 在后端静默改坏接口——分步验收能第一时间发现。提示词怎么写一份可直接复用的迁移 Playbookweek5 的作业要求见 week5/assignment.md明确鼓励使用 Warp Drive 的保存提示词saved prompts和规则rules。一个高效的迁移提示词模板长这样角色设定你是熟悉 FastAPI Vite React 的前端工程师边界约束只能修改week5/frontend/、week5/Makefile和week5/backend/app/main.py的静态挂载部分禁止改动后端业务逻辑接口契约附上现有端点清单——GET/POST /notes/、PUT /action-items/{id}/complete可从 week5/backend/app/routers/notes.py 和 week5/backend/app/routers/action_items.py 提取验收标准迁移后页面功能与原版逐条一致新增笔记、新增待办、点击 Complete 按钮且make test通过把这份 Playbook 存成 Warp Drive 的共享提示词后续 week 的其他任务还能复用这正是作业 Part I 要求的 Warp Drive features 用法。多 Agent 并行让多个智能体同时干活 ⚡week5 的另一项硬要求是multi-agent workflows多智能体工作流在 Warp 的不同标签页开多个 Agent 并发处理TASKS.md里的独立任务。针对前端迁移场景推荐的分工策略Agent A主标签页负责迁移主链路脚手架 → dist 接线 → 组件化Agent B副标签页负责 Makefile 的web-*目标Agent C副标签页负责 React Testing Library 组件测试⚠️ 关键防踩坑措施并发 Agent 最容易互相覆盖文件。作业文档特意提示可以用git worktree让每个 Agent 在独立工作树里操作完成后再合并。合并顺序建议A → B → C每合一次跑一遍make test。迁移完成后测试与验收清单 ✅Agent 说完成了不等于真完成了。用这份清单人工验收make run后访问首页显示的是 React 应用而非旧静态页笔记的增删改查、待办的新增与完成行为与原版一致make test全部通过后端集成测试 前端组件测试make format/make lint无报错项目配了 black ruff见 week5/pre-commit-config.yaml静态资源路径没有 404重点检查dist里的 CSS/JS 引用最后把整个过程写进 week5/writeup.md模板已预留 Before vs. after、Autonomy levels、Multi-agent notes 等小节记录每个 Agent 的权限级别和你如何监督它——这本身就是课程考察的重点能力。新手常见坑与避坑指南 常见坑避坑方法Agent 顺手重构了后端接口在提示词里写死禁止修改backend/app/routers/dist/路径配置错页面白屏让 Agent 给出构建命令的实际输出人工核对产物路径根路由仍指向旧index.html验收时直接 curl 首页 HTML 内容确认多 Agent 冲突文件互相覆盖用 git worktree 隔离小步合并写在最后这个任务的精髓不在于 Vite React 本身而在于如何把一个大任务变成 Agent 能理解、可验收、可并行的小任务。掌握这套拆解 → 约束 → 验收的方法论后仓库里其余 10 个 medium/easy 任务都会变得轻松许多。祝你迁移顺利【免费下载链接】modern-software-dev-assignmentsAssignments for CS146S: The Modern Software Dev (Stanford University Fall 2026/2025)项目地址: https://gitcode.com/GitHub_Trending/mo/modern-software-dev-assignments创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考