进阶版前端工程代码生成调试提示词

角色定义

作为资深前端工程架构师与代码调试专家，你的任务是为AI明确生成目标：产出高质量、可维护的前端工程代码，并附上系统化的调试路径与常见错误排查方案，确保输出结果直接适用于生产级实战项目，而非简单示例。

适用场景

• 中大型React / Vue项目中的功能模块生成（如表单、图表、复杂交互列表）
• 需要同时产出代码与调试指引的团队协作场景（如代码评审、新人培训）
• 性能敏感或边界条件复杂的逻辑实现（如虚拟滚动、WebSocket重连）
• 对代码可测试性与类型安全有严格要求的工程化项目

核心提示词

可直接复制并修改占位符的提示词模板：

• “请作为资深前端工程师，生成一个[具体功能/组件名称]。要求：1）使用TypeScript + React 18 + 函数式组件，遵循单一职责原则；2）包含完整的 Loading / Empty / Error 三态处理与错误边界（ErrorBoundary）；3）提供 Jest + React Testing Library 的单元测试，覆盖核心逻辑与边缘情况；4）代码注释使用 JSDoc，每个函数不超过20行；5）附带调试指南：列出启动该组件的依赖环境（Node版本、包管理器），并指出最可能出现的三个运行时错误（如 useEffect 依赖遗漏、状态滞后、闭包陷阱），给出 Chrome DevTools 断点调试的具体步骤。”
• 可选扩展：如需后端模拟，可追加“使用 MSW（Mock Service Worker）模拟 API 响应，并在测试中验证数据流。”

风格方向

• 专业严谨：强调类型安全、边界处理、性能考量，避免教学式口语
• 工程化思维：输出代码必须包含目录结构建议、环境变量配置说明、构建优化提示
• 实战导向：提示词中明确“此代码应可直接合并至已有项目，并遵循项目现有的 ESLint 规则与 Prettier 配置”

构图建议（提示词结构布局）

• 任务定义：一句话说明要生成什么，为什么需要它
• 技术约束：限定语言、框架、版本、工具链（如 Vite、pnpm、ESLint）
• 功能清单：使用有序列表逐条列出必要功能范围
• 调试指南：独立段落，包含错误场景、调试工具使用方法、常见修复策略

细节强化

• 在提示词中加入“输出时请同时提供组件目录结构示意图（用文字描述）”而非代码块
• 要求AI在生成代码后主动总结“潜在性能瓶颈”与“重构建议”
• 调试部分应包含网络面板查看请求、React DevTools的Profiler使用、console.log的替代方案（如断点配合debugger）
• 强调“代码中避免使用any类型，所有对外接口需导出并附带完整类型声明”

使用建议

• 将核心提示词中的[具体功能]替换为实际需求，例如“虚拟滚动列表”、“用户权限路由守卫”、“大文件分片上传模块”
• 调试指南可根据框架调整：Vue项目改为Vue Devtools + 组件树检查，Angular项目强调zone.js触发机制
• 建议与AI进行多轮对话：首轮使用核心提示词生成初版，后续要求AI根据代码评审意见进行重构与错误注入（故意引入bug让AI分析）以强化调试能力
• 对于复杂业务逻辑，可先要求AI“以伪代码方式设计状态机”，确认后再生成完整代码