一、ChatGPT
1.1 AI对话
传统的开发遇到不懂的 API 或概念，我们会去 Google 或 MDN 搜索，然后从海量广告和文档中筛选答案。而 ChatGPT 带来的是上下文感知的对话式学习。
1. 技术选型与架构咨询
不要只问"React 和 Vue 哪个好"，这种问题没有意义。要学会结合场景提问：
Prompt 示例：
"我正在开发一个大型后台管理系统，团队对 TypeScript 非常熟悉。我们需要高性能的数据表格和复杂的表单联动功能。请对比 React 和 Vue 在这个场景下的生态优劣势，并给出推荐理由。"
ChatGPT 会根据你的约束条件（TS 熟悉、后台管理、高性能），给出有针对性的生态分析（如 React 的 Ant Design vs Vue 的 Element Pro），甚至能提供更细粒度的技术栈建议（如 React Query 的状态管理优势）。
2. 概念解释与教学
当你遇到晦涩的源码或新模式时：
Prompt 示例：
"请像一个资深前端专家一样，用通俗易懂的比喻解释一下 Webpack 中的 'Tapable' 事件流机制是什么，并给出一个简单的伪代码示例。"
核心价值： 它能根据你的技术水平调整解释的深度，真正做到"知其然，更知其所以然"。
1.2 编写业务需求
前端开发最耗时的往往不是敲代码，而是沟通需求 和理解逻辑。很多时候，产品经理（PM）给出的需求文档是模糊的自然语言，直接转化成代码容易出 Bug。ChatGPT 是绝佳的"需求翻译器"。
1. 需求反拆解与技术实现方案
接到一个复杂功能时，不要急着写 div。
场景： PM 说"我要做一个类似淘宝的购物车，支持单品折扣、满减凑单，还要能离线操作。"
Prompt 示例：
"以下是一个产品需求描述：[粘贴 PM 需求]。作为一名资深前端工程师，请帮我：
- 分析该需求的难点和潜在的技术风险。
- 设计数据结构来支持这些功能。
- 列出实现该功能的 Step-by-Step 开发步骤。"
2. 生成接口文档定义
在后端还没开发完时，我们可以利用 AI 生成 Mock 数据结构。
"基于上面的购物车需求，请生成一份符合 RESTful 风格的 API 接口定义列表，包含 URL、Method、Params 和 Response 的 TypeScript 类型定义。"
核心价值： 这一过程能帮你理清逻辑漏洞。如果 AI 都没法理解你的需求逻辑，那写出来的代码一定全是 Bug。
1.3 自然语言生成
这是最直观的"编码"环节。与其说它是在写代码，不如说它是我们在用自然语言指挥代码生成。
1. 快速生成样板代码与组件
对于那些重复性高、逻辑固定的代码（如通用的 Modal、表单验证、工具函数），直接交给 AI。
场景： 写一个支持自定义样式的 React Hook。
Prompt 示例：
"请用 TypeScript 写一个 React Hook，命名为
useWindowSize。要求：能够监听浏览器窗口大小变化，返回width和height，并且包含防抖 处理逻辑，防抖延迟设置为 300ms。"
2. 跨语言/框架转换
公司项目要从 Vue2 迁移到 React，或者要把 JS 重构成 TS？
Prompt 示例：
"请将这段 Vue 2 的 Options API 代码重构为 Vue 3 的 Composition API 代码，并使用
<script setup>语法糖。"粘贴代码
3. 生成单元测试
很多开发者不爱写测试，但 AI 写得飞快。
Prompt 示例：
"这是我的工具函数代码 [粘贴代码]，请使用 Jest 为它生成完整的单元测试用例，要求覆盖正常场景和边界情况。"
核心价值： 让你从机械性的"手速劳动"中解脱出来，专注于核心业务逻辑的编排。
1.4 debug代码
排查报错是前端最心累的时刻：控制台一堆红字，或者页面表现莫名其妙。ChatGPT 就像是一个随身携带的高级医生。
1. 错误日志诊断
不要只把报错信息丢给它，要带上上下文。
Prompt 示例：
"我在使用 React 开发时遇到了报错。控制台错误信息如下：'Too many re-renders. React limits the number of renders to prevent an infinite loop.'
这是我出错的组件代码：
粘贴代码
请分析为什么会发生无限循环，并给出修复后的代码示例。"
2. 逻辑优化与性能 Bug
有时候代码没报错，但就是慢，或者点击没反应。
Prompt 示例：
"这段列表渲染代码在数据量超过 100 条时页面卡顿。请帮我分析性能瓶颈，并使用 React.memo 或虚拟化技术给出优化方案。"
粘贴代码
3. CSS 样式调试
Prompt 示例：
"我有一个 Flex 布局的容器，子元素总是无法垂直居中。这是我的 HTML 和 CSS 代码：[粘贴代码]，请指出问题并修正。"
核心价值： 它能快速定位到"愚蠢的小错误"（如拼写错误、依赖死循环），也能提供复杂的性能优化思路，极大地缩短调试时间。