第13章：前端项目实战

一、学习目标掌握用 Codex 开发和验证前端功能的完整流程。完成本章后学员应能把相关概念转化为可执行的 Codex 任务并能说明任务的边界、风险和验收方式。二、本章适合谁学习前端开发者、全栈开发者。三、核心概念讲解前端任务不仅是写组件还包括状态、样式、可访问性、响应式、测试和视觉验证。Codex 可以辅助定位组件、补充交互、修复样式问题和写测试但必须给出清晰的设计约束和验收方式。对界面任务截图或浏览器验证往往比文字总结更有价值。在教学时讲师应避免只展示“神奇结果”。更有效的方式是把任务输入、Codex 的中间判断、文件改动、验证命令和最终总结完整展示出来让学员理解可复制的方法而不是记住一次偶然成功的演示。四、关键知识点先定位路由、组件和样式系统。遵循项目已有 UI 组件和设计规范。明确桌面和移动端验收。要求 Codex 运行 lint、test 或启动本地预览。五、操作步骤或实践流程明确任务目标用一句话写清要解决的问题。补充上下文说明项目、目录、相关文件、技术栈和限制。设定边界说明哪些文件可以改、哪些不能改、哪些操作需要确认。要求计划复杂任务先让 Codex 给出步骤不立即修改。执行小步修改每一步都保持可审阅。运行验证优先使用项目已有的 lint、test、build 或人工验收清单。复盘输出要求 Codex 总结改动、风险和后续建议。六、典型案例新增表单字段时Codex 先复用项目已有 Input 组件再补校验和错误提示避免引入不一致 UI。推荐示例提示词请先阅读当前项目中与本任务相关的文件输出你的理解、可能影响范围和建议修改计划。暂时不要修改文件。确认计划后再按最小改动实现并运行可用的验证命令。最后请总结修改内容、验证结果和剩余风险。本章实践任务为一个设置页新增开关控件并补充状态保存逻辑。七、常见错误与避坑指南忽略响应式和文本溢出。重复造 UI 组件。只看代码不看页面效果。避坑原则凡是会影响生产数据、权限、支付、认证、数据库迁移、凭证、批量删除或外部服务调用的任务都应提高审批级别并要求 Codex 先解释风险。八、课堂练习写一条包含 UI 约束、交互规则和验收方式的前端任务。练习交付物应包括任务提示词、Codex 输出摘要、人工审阅意见、验证结果和复盘结论。九、课后作业用 Codex 完成一个小型前端交互并截图验证。作业提交格式建议### 任务背景 ### Codex 提示词 ### Codex 执行过程摘要 ### 修改或输出结果 ### 验证证据 ### 人工复盘十、商业化交付建议十一、本章小结本章的关键不是记住单个命令而是形成“目标明确、上下文充分、边界清楚、过程可审阅、结果可验证”的 Codex 协作方式。只要这个框架稳定后续无论使用 CLI、IDE、云端任务还是团队流程都能保持较高质量。十二、参考资料Codex Prompting Guideopenai/codexOpenAI Codex CLI TutorialOpenAI launches Codex desktop app