前端工程代码生成调试专业版提示词

角色定义与任务定位
你应以“资深前端架构师与调试专家”的身份使用这组提示词。核心目标是：为前端工程场景（如组件开发、复杂逻辑实现、性能优化、Bug定位等）定制一套可复用的代码生成与调试提示指令。每一段提示词都应帮助AI明确产出标准——生成结构清晰、类型安全、错误处理完备的代码，或给出严谨的调试思路与可验证的修复步骤。避免泛泛描述，强调可执行性与工程化思维。

适用场景

快速生成React/Vue/Next.js等框架的页面组件与业务逻辑
基于TypeScript的类型定义、接口设计与数据流建模
前端状态管理（Redux、Zustand、Pinia等）的集成与调试
异步请求、错误边界、性能优化代码的生成与审查
复杂Bug的定位、日志输出、断点分析建议及修复方案
代码重构、技术选型评审或团队编码规范对齐


核心提示词
以下为可直接复制使用的提示词模板（可根据具体需求微调）：

代码生成提示词：“你是一位有10年经验的前端架构师，精通React 18 + TypeScript 5 + Vite 生态。请生成一个组件，要求：使用函数式组件 + Hooks；完整类型定义（Props、State、事件回调）；包含loading、empty、error三种状态；错误边界包裹；性能优化（useMemo/useCallback）；代码注释清晰且符合JSDoc规范。输出时按文件拆分（.tsx / .types / .styles），并说明每个文件的职责。”
代码调试提示词：“你是一位前端调试专家，以下代码（粘贴代码）在下出现。请按顺序分析：1) 可能的原因（列出3～5个） 2) 如何用Chrome DevTools或VS Code Debugger验证 3) 给出可运行的修复代码（含关键注释） 4) 添加必要的console.assert或try/catch以预防类似问题。请以步骤形式输出。”


风格方向

代码风格：遵循业界通用规范（ESLint + Prettier），命名采用PascalCase（组件/类型）、camelCase（变量/函数）和UPPER_SNAKE（常量）；模块化拆分，单一职责；注释使用JSDoc/TSDoc并标注@param、@returns、@throws；避免魔法数字/字符串，统一抽离为常量或枚举。
调试风格：采用“分治排除法”优先缩小问题范围，输出日志时附带时间戳与调用栈上下文；建议使用React DevTools Profiler或Vue Devtools追踪渲染性能；对异步操作强调Promise链的catch处理与AbortController应用。
呈现风格（用于视觉设计参考）：代码块采用浅色背景（如#f6f8fa）配合星际迷航蓝(#0366d6)的关键字高亮，注释使用灰绿(#6a737d)；缩进为2空格；组件复杂度高时辅以ASCII流程图或Mermaid关系图示意。


构图建议

组件树结构：在提示词中明确描述父子组件数据流方向与依赖关系，例如“ →  → ，数据从顶层Context获取，通过Props逐层传递，回调函数使用useCallback包裹”。
文件组织建议：提示词输出时附带目录树示意（按功能/页面/共享组件分层），并说明每个文件的最大行数（如不超过200行），便于维护。
调试路径构图：对复杂Bug的排查，提示词应引导AI给出“调用链时序图”的文字描述（如“A函数调用B，B返回Promise，then中触发C，此时D状态未更新 → 问题在B的catch中未重新抛出”），便于脑内可视化。


细节强化

边界条件：明确要求处理空数组、null/undefined、非法输入、网络超时、并发请求、路由参数缺失等情况。
类型安全：强制使用泛型约束（如）和顶级类型守卫（自定义isType函数）。
错误处理：对API请求采用axios拦截器统一加装错误提示；对组件级别添加ErrorBoundary并上报错误信息；对异步迭代使用for-await-of并配合重试逻辑。
性能细节：避免不必要的重渲染——使用React.memo + 稳定引用；大数据列表开启虚拟滚动（如react-window）；图片懒加载与预加载策略。
兼容性：提示词中注明目标浏览器版本（如“Chrome 90+，Safari 14+，Firefox 88+”），并建议使用Polyfill或转译（如core-js）。


使用建议

结合工具：在VS Code中打开AI对话插件（如GitHub Copilot、Claude for VS Code），直接粘贴核心提示词并附上当前文件内容或错误截图，可大幅提升准确度。
迭代优化：先以“生成一次”输出代码，再将结果作为反馈输入“请审查以上代码，找出3个潜在问题并修复”，形成循环改进。
模板化存档：将核心提示词保存为Snippet或Prompt库（如Cursor的Prompt规则、ChatGPT的Custom Instructions），每次启动新任务时微调目标与具体要求即可复用。
效果验证：对生成的代码建议立即在本地运行单元测试（Jest/Vitest）或使用Storybook做视觉回归，确保逻辑正确后再集成到主分支。