高质量前端工程代码生成调试提示词

角色定义

你应当以高级前端工程架构师的身份使用这组提示词，目标是为AI明确指定“生成可读、可维护、可调试的高质量前端工程代码”所需的所有约束与表达。你将扮演技术负责人，从工程规范、代码风格、调试辅助和视觉创意四个维度，向AI下达精确的生成指令，确保输出代码不仅功能正确，还具备专业项目的可扩展性与可调试性。

适用场景

• 需要AI自动生成组件库、页面逻辑或完整前端模块时，要求代码符合企业级工程标准。
• 调试已有代码时，希望AI提供带错误边界、日志标记和测试辅助的修复版本。
• 将前端代码本身作为“视觉创意表达”的一部分，例如生成具有艺术化排版、动态视觉效果或极简美学的交互组件。
• 构建或重构代码时，要求同步输出类型定义、注释规范、代码分割策略等工程化内容。

核心提示词

以下提示词可直接复制使用，替换尖括号中的占位符：

• “生成一个<组件功能描述>的React/TypeScript组件，要求：使用函数式组件 + Hooks，导出类型定义，添加JSDoc注释，包含错误边界与加载状态，代码行数不超过150行，确保无任何未使用变量。”
• “将以下代码片段重构为可调试版本：每200行添加一个debugger占位注释，合并重复逻辑，把魔法数字提取为常量，并输出一份调试检查清单。”
• “生成一段前端动画代码（CSS + JS），要求：使用requestAnimationFrame实现流畅循环，颜色方案为深色主题+霓虹高亮，添加性能监控注释，并确保在移动端50fps以上。”
• “以‘创意表达’角度生成一个动态数据可视化仪表盘HTML，使用Canvas绘制，数据随机生成，代码结构按‘数据层-渲染层-控制层’分离，并包含调试控制台输出。”

风格方向

• 工程规整风：严格遵循ESLint规则、Prettier格式化、强类型约束，注释清晰，模块划分明确。
• 极简可读风：变量命名采用语义化全拼，避免缩写，代码行内空白合理，无过度设计。
• 创意视觉风：在满足功能的同时，融入现代UI质感——毛玻璃、渐变、微交互动画，让代码结果本身呈现美学。
• 调试友好风：每个函数前附带输入输出日志模板（console.group），关键路径保留try/catch并格式化错误信息。

构图建议

这里的“构图”指代码架构的层次与视觉组织方式，用于引导AI生成结构清晰的代码：

• 文件结构构图：按“类型/功能”两级目录组织，例如 components/Header/index.tsx、hooks/useAuth.ts、utils/validators.ts。
• 组件树构图：主组件负责状态管理与布局，子组件只接收props渲染，避免跨层级直接操作。
• 代码块视觉层次：导入区、类型定义区、辅助函数区、组件主体区之间用空行分隔，并添加注释块标题。
• 调试输出构图：在关键渲染位置加入带样式的console.log（如%c标记），让浏览器控制台输出像波形图一样易读。

细节强化

• 错误边界：每个异步请求或可能抛出异常的操作，必须有 try/catch 并输出结构化错误对象（code + message + stack）。
• 性能标注：对高计算量的函数添加 // #perf 注释，并在函数内用 performance.mark 记录耗时。
• 类型安全：所有 props 和返回类型必须显式定义 interface，禁止使用 any，对不确定值使用 unknown + 类型守卫。
• 注释规范：每个 function 至少一行 JSDoc 说明功能、参数和返回值；复杂逻辑旁侧用 inline 注释解释“为什么”而不仅是“是什么”。
• 可调试性：在每次状态更新或副作用执行前，输出当前上下文快照（如 console.table([lastState, nextState])）。

使用建议

• 将核心提示词中的占位符替换为你真实项目中的组件名或功能描述，尽量具体（如“用户登录面板”而非“表单”）。
• 一次只聚焦一个维度：例如第一轮只生成“极简可读风”的代码，第二轮再补充“调试友好”增强，避免AI输出过于臃肿。
• 如果你需要视觉创意表达，请在核心提示词中明确色彩、动效风格和交互设计倾向，比如“仿Figma深色UI + 平滑过渡动画”。
• 对于调试场景，最好同时给出有问题的原始代码片段，并在提示词中说明“请保留原逻辑，仅补充调试代码和错误处理”。
• 每次使用后，根据AI输出质量反向修改“风格方向”或“细节强化”中的描述，逐步训练提示词的精确性。