文章目录一、为什么 AI 生成的代码不能直接使用二、先检查代码是否满足需求三、再运行代码验证主流程四、重点验证边界情况五、检查数据是否可靠六、检查代码是否安全七、检查代码是否容易维护八、让 AI 帮你生成测试清单九、发现问题后如何让 AI 修改十、一套可复用的 AI 代码检查提示词十一、这次应该掌握什么总结✍创作者全栈弄潮儿 个人主页全栈弄潮儿的个人主页️ 个人社区欢迎你的加入全栈弄潮儿的个人社区 专栏地址欢迎订阅AI 编程提效实战前面的文章中我们通过一个待办事项清单案例体验了一次完整的 AI 编程流程明确需求让 AI 拆解功能生成代码本地运行发现问题修改代码验证结果很多初学者在使用 AI 编程时会有一个误区AI 生成了完整代码看起来也能运行就可以直接使用。实际上这种做法存在一定风险。AI 可以帮助我们快速完成代码初稿但它并不等于代码已经正确、稳定、安全、可维护。这一篇文章我们就来讨论一个非常重要的问题为什么 AI 生成的代码不能直接使用以及我们应该如何检查和验证 AI 生成的代码一、为什么 AI 生成的代码不能直接使用AI 生成代码的速度很快但它生成的是“看起来合理”的代码而不是经过严格验证的最终代码。常见问题包括问题类型说明需求理解偏差AI 可能没有完全理解你的真实需求边界情况缺失只实现了正常流程忽略异常情况代码可以运行但逻辑不严谨页面有反应但结果不一定正确安全风险可能存在 XSS、权限校验缺失等问题可维护性差代码结构混乱后续难以修改兼容性问题在某些浏览器或环境中可能无法运行数据处理不完整对空值、非法数据、重复数据处理不足因此AI 生成代码后不能直接复制到项目中就结束。更合理的做法是把 AI 生成的代码当成初稿而不是最终答案。二、先检查代码是否满足需求第一步不是马上运行代码而是对照需求检查功能是否完整。例如上一篇文章中的待办事项清单需求包括可以添加任务可以展示任务可以勾选完成状态可以删除任务使用 localStorage 保存数据空输入不能添加刷新页面后数据仍然存在检查时可以问自己几个问题AI 是否实现了所有功能是否漏掉了某个需求是否额外增加了不需要的功能实现方式是否符合技术要求代码是否放在指定文件中是否使用了不允许的第三方库也可以直接让 AI 帮我们做一次需求对照检查请根据下面的需求检查这段代码是否完整实现。 需求 1. 用户可以添加任务 2. 任务显示在列表中 3. 每条任务可以勾选完成 4. 每条任务可以删除 5. 使用 localStorage 保存数据 6. 输入为空时不能添加 7. 页面刷新后数据仍然保留 请按照表格输出 - 需求项 - 是否实现 - 对应代码位置 - 是否存在问题 - 修改建议这一步的目的是确认 AI 没有“漏做”。三、再运行代码验证主流程需求检查完成后才进入运行验证阶段。对于前端页面可以在浏览器中打开页面然后按正常使用流程测试输入一条任务点击添加按钮查看任务是否显示勾选任务查看完成状态是否变化删除任务刷新页面检查数据是否保留这类测试叫做“主流程测试”。主流程测试验证的是用户按照正常方式使用时功能是否能跑通。如果主流程都无法正常运行说明代码还没有达到可用状态需要先修复明显错误。常见问题包括点击按钮没有反应控制台出现报错页面元素没有显示数据没有保存成功刷新后数据丢失删除按钮删除了错误任务遇到报错时不要只告诉 AI “代码有问题”。更好的提问方式是我运行这段代码时出现了问题。 操作步骤 1. 打开 index.html 2. 输入一条任务 3. 点击添加按钮 实际结果 点击按钮后没有添加任务。 浏览器控制台报错 [粘贴完整报错信息] 请帮我分析 1. 报错原因是什么 2. 错误代码在哪里 3. 应该如何最小范围修改 4. 修改后如何验证提供的信息越完整AI 定位问题越准确。四、重点验证边界情况代码能跑通主流程并不代表代码完全正确。很多问题只会在特殊输入或异常情况下出现。比如待办事项清单需要验证这些边界情况测试场景预期结果不输入内容直接点击添加不允许添加并提示用户输入空格后点击添加不允许添加输入很长的文本页面不被撑破连续快速点击添加不应产生异常删除全部任务显示空列表提示localStorage 中是非法数据页面不崩溃刷新页面已有任务仍然存在勾选后再次取消状态正确恢复删除某一条任务只删除当前任务可以继续让 AI 帮我们补充测试场景请检查这个待办事项应用可能存在的边界情况。 重点关注 1. 空输入 2. 只有空格的输入 3. 超长文本 4. 重复任务 5. localStorage 数据异常 6. 用户连续快速点击 7. 删除最后一条任务 请输出 - 测试场景 - 可能出现的问题 - 推荐处理方式AI 生成代码时通常会优先完成正常路径。而真正影响质量的往往是这些边界情况。五、检查数据是否可靠很多前端功能都涉及数据处理。例如上一篇文章中使用了 localStorage 保存任务constsavedTaskslocalStorage.getItem(STORAGE_KEY);constparsedTaskssavedTasks?JSON.parse(savedTasks):[];这段代码看起来没有问题但需要思考几个问题localStorage 中没有数据怎么办localStorage 中的数据不是 JSON 怎么办JSON 解析失败怎么办解析出来的不是数组怎么办数组里的任务缺少 id 或 text 怎么办如果没有处理这些情况页面可能会直接报错。更稳妥的写法通常会加上 try…catchfunctionloadTasks(){try{constsavedTaskslocalStorage.getItem(STORAGE_KEY);constparsedTaskssavedTasks?JSON.parse(savedTasks):[];returnArray.isArray(parsedTasks)?parsedTasks:[];}catch(error){console.error(读取任务失败,error);return[];}}这段代码的作用是正常读取数据时返回任务数组没有数据时返回空数组数据格式错误时也返回空数组避免页面因为数据异常而崩溃可以让 AI 专门检查数据处理逻辑请检查这段代码中的数据读取和保存逻辑。 重点分析 1. localStorage 没有数据时是否正常 2. JSON.parse 失败时是否会导致页面崩溃 3. 数据结构不符合预期时如何处理 4. 是否需要增加兜底逻辑 请给出问题说明和修改建议。数据处理越靠近用户输入就越需要认真检查。六、检查代码是否安全即使是一个简单页面也可能存在安全问题。例如展示用户输入内容时如果使用 innerHTMLtaskItem.innerHTMLspan${task.text}/span;如果用户输入下面的内容img srcx onerroralert(xss)页面就可能执行恶意脚本。这类问题叫做 XSS。更安全的方式是使用 textContentconsttaskTextdocument.createElement(span);taskText.textContenttask.text;textContent 会把用户输入当作普通文本显示而不是当作 HTML 执行。因此检查 AI 代码时要特别注意是否直接把用户输入拼接到 innerHTML 中是否校验用户输入是否把敏感信息写在前端代码里是否缺少权限判断是否把错误信息完整暴露给用户是否依赖不可信的外部资源可以使用下面的提示词请从安全角度检查这段前端代码。 重点关注 1. 是否存在 XSS 风险 2. 是否直接使用 innerHTML 渲染用户输入 3. 是否存在敏感信息泄露 4. 是否对用户输入做了必要处理 5. 是否有不安全的第三方资源 请指出风险位置并给出修改建议。对于真实项目来说安全检查不能省略。七、检查代码是否容易维护AI 生成的代码有时可以运行但不一定适合长期维护。例如下面这种写法button.onclickfunction(){letvaluedocument.getElementById(input).value;letlistJSON.parse(localStorage.getItem(list));list.push(value);localStorage.setItem(list,JSON.stringify(list));document.getElementById(list).innerHTMLlivalue/li;};这段代码的问题是添加逻辑、存储逻辑、渲染逻辑混在一起变量命名不够清晰没有空输入校验使用 innerHTML 拼接用户输入localStorage 数据为空时可能报错后续修改不方便更推荐拆分成多个函数functionaddTask(){}functionsaveTasks(){}functionloadTasks(){}functionrenderTasks(){}functiondeleteTask(){}functiontoggleTask(){}函数拆分的好处是每个函数只负责一件事出问题时更容易定位后续新增功能更方便初学者也更容易理解代码流程可以让 AI 帮我们检查可维护性请从代码可维护性的角度检查这段代码。 重点关注 1. 函数职责是否清晰 2. 是否存在重复代码 3. 变量命名是否易懂 4. 代码是否适合初学者阅读 5. 后续新增功能是否方便 请给出具体问题和重构建议。代码不是只要能运行就够了。能读懂、能修改、能扩展同样重要。八、让 AI 帮你生成测试清单如果不知道怎么测试可以让 AI 先生成测试清单。示例提示词请为这个待办事项应用生成一份测试清单。 功能包括 1. 添加任务 2. 删除任务 3. 勾选完成任务 4. localStorage 保存数据 5. 空输入校验 请按照表格输出 - 测试编号 - 测试场景 - 操作步骤 - 预期结果 - 实际结果AI 可能会输出类似下面的内容编号测试场景操作步骤预期结果1添加正常任务输入任务并点击添加任务显示在列表中2空输入添加不输入内容点击添加提示用户输入内容3空格输入输入多个空格后添加不允许添加4勾选任务点击复选框任务显示完成状态5删除任务点击删除按钮当前任务被删除6刷新页面添加任务后刷新任务仍然存在7删除全部任务删除所有任务显示空列表提示有了测试清单后就可以一项一项验证。这比随便点几下页面要可靠得多。九、发现问题后如何让 AI 修改很多人发现问题后会直接说这段代码有 bug帮我改一下。这种描述太模糊AI 可能会重新生成一大段代码甚至引入新的问题。更好的方式是提供四类信息当前代码操作步骤实际结果预期结果示例当前待办事项代码存在一个问题。 操作步骤 1. 在输入框中输入多个空格 2. 点击添加任务 实际结果 页面添加了一条空白任务。 预期结果 不应该添加空白任务并提示“请输入待办事项”。 请分析原因并只修改必要代码。 要求 1. 使用 trim 判断输入内容 2. 空输入时提示用户 3. 保持输入框焦点 4. 不要重写整个文件这样 AI 更容易进行局部修复。局部修复比整段重写更稳定因为它减少了引入新问题的概率。十、一套可复用的 AI 代码检查提示词以后拿到 AI 生成的代码后可以使用下面这套提示词请帮我检查下面这段 AI 生成的代码。 请从以下角度分析 1. 是否完整满足需求 2. 是否存在运行错误 3. 是否遗漏边界情况 4. 是否存在安全风险 5. 数据处理是否可靠 6. 代码结构是否清晰 7. 是否适合后续维护 请按照下面格式输出 - 问题位置 - 问题原因 - 影响范围 - 修改建议 - 是否必须修改 注意 请先分析问题不要直接重写全部代码。这个提示词适合检查大部分 AI 生成代码。它的重点是先审查再修改。不要一上来就让 AI 重新生成完整代码。十一、这次应该掌握什么通过这一篇文章我们需要明确一件事AI 生成代码只是开发流程的一部分不是开发流程的结束。一个更可靠的 AI 编程流程应该是明确需求 ↓ 生成代码 ↓ 检查需求完整性 ↓ 运行主流程 ↓ 验证边界情况 ↓ 检查安全风险 ↓ 检查可维护性 ↓ 发现问题并局部修复 ↓ 再次验证其中开发者最重要的职责是判断 AI 是否理解需求判断代码是否真的正确判断异常情况是否处理完整判断代码是否安全判断代码是否方便维护对修改结果进行验证AI 可以提高开发效率但不能替代开发者做判断。总结AI 生成的代码不能直接使用只能作为初稿。代码看起来能运行不代表逻辑完全正确。检查代码时要先对照需求再运行验证。除了主流程还要重点测试边界情况。涉及用户输入时要注意 XSS 等安全风险。数据读取、保存和解析都需要考虑异常情况。发现问题后应让 AI 做局部修改而不是反复重写全部代码。使用测试清单可以让验证过程更清晰、更稳定。下一篇文章我们可以继续讨论如何让 AI 帮我们阅读和解释一段看不懂的代码--- ✍坚持原创求关注点赞收藏