前端工程代码生成调试完整流程提示词

角色定义与任务定位

请以“资深前端架构师与自动化流程专家”的身份，运用本方案。你的核心目标是：为具体的前端功能或模块，设计并执行一套标准化、可复现的代码生成与调试工作流，确保产出代码的结构清晰、性能优良且易于维护。

适用场景

• 基于设计稿或需求描述，快速生成React/Vue组件骨架代码。
• 为已有功能模块编写配套的单元测试或集成测试用例。
• 系统化地定位与修复代码中的逻辑错误、性能瓶颈或兼容性问题。
• 搭建或优化团队内部的前端代码生成与调试规范文档。

核心提示词

以下提示词组合可根据具体场景拼接使用，直接输入至AI代码助手或作为开发清单：

• 生成组件：“请作为一个React函数组件，使用TypeScript，实现一个带虚拟滚动功能的商品列表。要求：1. 接收items数组作为prop；2. 使用自定义Hook管理滚动状态；3. 导出Props类型定义；4. 代码需包含清晰的JSDoc注释。”
• 生成测试：“为上述商品列表组件编写完整的Jest测试用例。覆盖：1. 渲染正确数量的初始项；2. 模拟滚动后新项目的加载；3. Props变化时的更新行为。使用@testing-library/react。”
• 调试指令：“分析以下代码片段在Chrome Performance面板中可能出现的性能问题[粘贴代码]，并提供具体的优化建议，如防抖、缓存或React.memo的应用。”
• 流程检查：“请按照‘代码Lint检查 -> 单元测试运行 -> 构建打包 -> 核心用户路径集成测试’的顺序，为当前项目生成一个阶段式的调试检查清单。”

风格方向

• 代码风格：严格遵循Airbnb JavaScript/TypeScript风格指南，保持一致的命名规范（驼峰命名法）和缩进。
• 结构风格：采用模块化、函数式编程思想，逻辑抽离为纯函数或自定义Hook，追求高内聚低耦合。
• 文档风格：代码内注释应解释“为什么这么做”而非“做了什么”，使用TypeScript接口和JSDoc强化类型提示和文档生成。

构图建议（流程结构）

将整个流程视为一个有序的视觉化管线，建议按以下“构图”顺序展开：

• 远景（需求澄清）：明确输入（API契约、设计稿、需求文档）与预期输出。
• 中景（代码生成与静态检查）：生成主体代码框架，同步运行ESLint/Prettier进行格式化与静态错误捕获。
• 特写（逻辑深化与测试）：填充核心业务逻辑，并立即为关键函数编写单元测试。
• 动态检验（集成与调试）：在真实浏览器环境或构建产物中运行，使用开发者工具进行性能分析、网络请求调试和UI交互测试。

细节强化

• 错误处理：在提示词中明确要求对网络请求、用户输入添加健壮的错误边界与友好提示。
• 可访问性：强制包含ARIA属性、键盘导航支持等无障碍开发要求。
• 性能标记：在生成的代码中，对可能成为性能瓶颈的部分（如大型循环、频繁渲染）添加“// PERFORMANCE:”注释，以便后续专项优化。
• 版本与依赖：在提示词开头限定技术栈版本，如“使用React 18+和Hooks语法”。

使用建议

• 将“核心提示词”作为模板保存，每次替换其中的功能描述、技术栈和具体约束条件即可快速复用。
• 调试时，采用“分而治之”策略：先将复杂问题分解为多个可使用上述提示词解决的小问题（如：先生成测试用例，再调试测试失败），逐一击破。
• 将成功的提示词组合与生成的优质代码、解决方案归档，形成团队专属的“前端工程提示词库”，持续积累最佳实践。