文章目录一、先明确我们要做什么二、先让 AI 拆解需求三、再让 AI 生成代码四、完整可运行代码五、如何运行这段代码六、如何验证 AI 生成的代码七、AI 生成代码时常见的问题1. 代码看起来完整但无法运行2. 只实现了正常情况3. 代码能运行但自己看不懂八、一套可以复用的提示词模板九、这次实践应该掌握什么总结✍创作者全栈弄潮儿 个人主页全栈弄潮儿的个人主页️ 个人社区欢迎你的加入全栈弄潮儿的个人社区 专栏地址欢迎订阅AI 编程提效实战前面的文章中我们了解了什么是 AI 编程也认识了常见的 AI 编程工具。这一篇不再停留在概念层面而是通过一个完整的小案例体验一次真实的 AI 编程流程让 AI 帮我们实现一个简单的 JavaScript 待办事项清单。这个案例虽然简单但包含了日常开发中比较典型的步骤分析需求拆分功能生成代码运行代码发现问题修改代码验证结果掌握这套流程后后面无论是开发表单、后台页面还是实现接口功能都可以使用类似的方法。一、先明确我们要做什么在让 AI 写代码之前不能只说一句帮我写一个待办事项应用。这个需求过于简单AI 不知道我们具体需要什么功能可能会出现以下问题使用什么技术实现不明确页面需要哪些功能不明确数据是否需要保存不明确是否需要处理空输入不明确代码应该放在哪个文件中不明确最终运行方式不明确因此在开始之前我们先把需求整理清楚。本次要实现的待办事项清单包含以下功能功能说明添加任务输入任务内容后点击按钮添加展示任务将已添加的任务显示在列表中完成任务点击复选框后标记任务已完成删除任务删除不再需要的任务数据保存刷新页面后任务仍然保留空输入校验不允许添加空白任务技术要求如下使用 HTML、CSS 和 JavaScript不使用前端框架不依赖第三方库所有代码放在一个 HTML 文件中双击文件即可在浏览器中运行需求越明确AI 生成的结果越接近我们真正想要的结果。二、先让 AI 拆解需求很多人使用 AI 时习惯直接让它输出最终代码。更稳定的方式是先让 AI 分析需求确认实现思路后再让它生成代码。可以使用下面这段提示词我想使用原生 HTML、CSS 和 JavaScript 开发一个简单的待办事项清单。 功能要求 1. 用户可以输入任务并添加 2. 任务显示在列表中 3. 每条任务前有一个复选框 4. 勾选后显示完成状态 5. 每条任务都可以删除 6. 使用 localStorage 保存数据 7. 输入为空时不能添加 请先不要生成完整代码 先帮我拆分功能模块 说明每个模块的实现思路 并列出需要注意的边界情况。一个比较可靠的 AI 回复通常会把需求拆分成以下模块页面结构模块输入框、添加按钮、任务列表。数据模块使用数组保存任务数据。渲染模块将任务数据转换成页面内容。添加模块获取输入内容并创建新任务。完成模块修改任务的完成状态。删除模块从数组中移除指定任务。持久化模块将任务保存到 localStorage。校验模块处理空输入和无效数据。这一步的价值在于我们可以先检查 AI 的理解是否正确。如果需求拆解错了及时纠正即可如果直接生成几百行代码后面再发现方向不对修改成本会更高。三、再让 AI 生成代码确认实现思路后可以继续给 AI 下面的提示词请根据刚才的功能拆解 生成一个完整可运行的 index.html 文件。 具体要求 1. 使用原生 HTML、CSS 和 JavaScript 2. 不使用任何第三方库 3. 所有代码放在同一个 HTML 文件中 4. 页面布局简洁适合初学者阅读 5. JavaScript 使用清晰的函数拆分 6. 使用 localStorage 保存任务 7. 添加任务时校验输入内容 8. 删除任务前不需要弹窗确认 9. 代码中添加必要注释 10. 输出完整代码并说明运行方法这里增加了“单文件”“不使用第三方库”“函数拆分”等限制可以减少 AI 输出不符合要求的代码。四、完整可运行代码下面是一份可以直接运行的示例代码。将代码保存为index.html然后使用浏览器打开即可。!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title我的待办事项/titlestyle*{box-sizing:border-box;}body{margin:0;min-height:100vh;padding:40px 16px;background:#f3f5f7;color:#1f2937;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;}.todo-app{width:min(100%,640px);margin:0 auto;padding:28px;background:#ffffff;border-radius:12px;box-shadow:0 8px 24pxrgba(15,23,42,0.08);}h1{margin:0 0 24px;text-align:center;font-size:28px;}.input-row{display:flex;gap:10px;}#task-input{flex:1;min-width:0;height:42px;padding:0 12px;border:1px solid #d1d5db;border-radius:6px;font-size:15px;}#task-input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3pxrgba(37,99,235,0.12);}button{border:0;border-radius:6px;cursor:pointer;font-size:14px;}#add-button{padding:0 18px;background:#2563eb;color:#ffffff;}#add-button:hover{background:#1d4ed8;}#task-list{margin:24px 0 0;padding:0;list-style:none;}.task-item{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 0;border-bottom:1px solid #e5e7eb;}.task-text{flex:1;overflow-wrap:anywhere;}.task-item.completed .task-text{color:#9ca3af;text-decoration:line-through;}.delete-button{padding:6px 10px;background:#fee2e2;color:#b91c1c;}.delete-button:hover{background:#fecaca;}.empty-message{padding:20px 0;color:#6b7280;text-align:center;}media(max-width:480px){.todo-app{padding:20px 16px;}.input-row{flex-direction:column;}#add-button{height:42px;}}/style/headbodymainclasstodo-apph1我的待办事项/h1divclassinput-rowinputidtask-inputtypetextplaceholder请输入待办事项maxlength100buttonidadd-buttontypebutton添加任务/button/divulidtask-list/ul/mainscriptconstSTORAGE_KEYtodo-tasks;consttaskInputdocument.querySelector(#task-input);constaddButtondocument.querySelector(#add-button);consttaskListdocument.querySelector(#task-list);lettasksloadTasks();// 从 localStorage 读取任务数据functionloadTasks(){try{constsavedTaskslocalStorage.getItem(STORAGE_KEY);constparsedTaskssavedTasks?JSON.parse(savedTasks):[];returnArray.isArray(parsedTasks)?parsedTasks:[];}catch(error){console.error(读取任务失败,error);return[];}}// 保存任务数据functionsaveTasks(){localStorage.setItem(STORAGE_KEY,JSON.stringify(tasks));}// 将任务数据渲染到页面functionrenderTasks(){taskList.innerHTML;if(tasks.length0){constemptyMessagedocument.createElement(li);emptyMessage.classNameempty-message;emptyMessage.textContent暂时没有待办事项;taskList.appendChild(emptyMessage);return;}tasks.forEach((task){consttaskItemdocument.createElement(li);taskItem.classNametask-item;if(task.completed){taskItem.classList.add(completed);}constcheckboxdocument.createElement(input);checkbox.typecheckbox;checkbox.checkedtask.completed;checkbox.setAttribute(aria-label,完成任务${task.text});checkbox.addEventListener(change,(){toggleTask(task.id);});consttaskTextdocument.createElement(span);taskText.classNametask-text;taskText.textContenttask.text;constdeleteButtondocument.createElement(button);deleteButton.classNamedelete-button;deleteButton.typebutton;deleteButton.textContent删除;deleteButton.addEventListener(click,(){deleteTask(task.id);});taskItem.append(checkbox,taskText,deleteButton);taskList.appendChild(taskItem);});}// 添加任务functionaddTask(){consttexttaskInput.value.trim();if(!text){alert(请输入待办事项);taskInput.focus();return;}tasks.unshift({id:Date.now(),text,completed:false});saveTasks();renderTasks();taskInput.value;taskInput.focus();}// 切换任务完成状态functiontoggleTask(taskId){taskstasks.map((task){if(task.idtaskId){return{...task,completed:!task.completed};}returntask;});saveTasks();renderTasks();}// 删除任务functiondeleteTask(taskId){taskstasks.filter((task)task.id!taskId);saveTasks();renderTasks();}addButton.addEventListener(click,addTask);taskInput.addEventListener(keydown,(event){if(event.keyEnter){addTask();}});renderTasks();/script/body/html五、如何运行这段代码按照下面的步骤操作创建一个名为index.html的文件。将上面的完整代码复制到文件中。保存文件。使用浏览器打开index.html。在输入框中添加几条任务。勾选任务观察完成状态。删除一条任务。刷新浏览器检查任务是否仍然存在。如果刷新后任务还在说明localStorage保存功能正常。六、如何验证 AI 生成的代码代码能够运行并不代表代码完全正确。建议至少验证下面这些情况测试场景预期结果直接点击添加按钮提示输入任务输入空格后添加提示输入任务输入正常内容后添加任务成功显示按回车键添加任务成功显示勾选任务任务显示完成状态取消勾选任务恢复未完成状态删除任务任务从列表中消失刷新页面已有任务仍然存在添加较长文本页面布局不被撑破删除全部任务显示空列表提示这一步非常重要。AI 生成代码时通常会优先实现主流程但一些边界情况可能被忽略。开发者需要通过实际操作发现问题再把问题反馈给 AI。例如发现输入空内容也能添加任务可以继续询问当前代码允许用户输入空格后添加任务 请分析原因并修改代码。 要求 1. 使用 trim 判断输入内容 2. 空内容时给出提示 3. 输入框清空后保持焦点 4. 只输出需要修改的代码片段 并解释修改原因与其让 AI 每次重新生成全部代码不如明确指出问题让它进行局部修改。七、AI 生成代码时常见的问题1. 代码看起来完整但无法运行常见原因包括HTML 标签没有闭合JavaScript 变量名称前后不一致事件绑定到了错误的元素函数名称写错代码依赖了没有安装的第三方库解决方法是把完整报错信息和相关代码一起提供给 AI。打开页面后点击“添加任务”没有任何反应。 浏览器控制台报错 [粘贴完整报错] 请定位具体原因 指出错误代码所在位置 然后给出最小修改方案。2. 只实现了正常情况例如正常输入可以添加任务但空输入、重复任务、超长文本没有处理。可以让 AI 补充边界条件请检查这段待办事项代码 重点分析以下边界情况 - 空字符串 - 只有空格的输入 - 超过 100 个字符的输入 - localStorage 中保存了非法数据 - 用户连续快速点击添加按钮 请列出问题并给出修改建议。3. 代码能运行但自己看不懂这说明 AI 输出的代码超出了当前理解范围。可以要求 AI 降低代码复杂度请把这段代码改写成适合 JavaScript 初学者学习的版本。 要求 1. 保留原有功能 2. 减少复杂语法 3. 拆分成多个简单函数 4. 逐个解释每个函数 5. 说明数据是如何从输入框流向页面的使用 AI 的过程中不要只关注最终结果也要关注自己是否理解实现过程。八、一套可以复用的提示词模板以后开发类似的小功能时可以直接套用下面的模板我想开发一个【功能名称】。 使用技术 - 【技术名称】 - 【是否使用框架】 - 【是否允许第三方库】 核心功能 1. 【功能一】 2. 【功能二】 3. 【功能三】 输入数据 - 【输入内容和格式】 输出结果 - 【页面或接口应该返回什么】 特殊要求 - 【异常处理要求】 - 【边界情况】 - 【兼容性要求】 - 【代码组织要求】 请按照以下步骤完成 1. 先分析需求并拆分功能 2. 列出可能的边界情况 3. 给出实现方案 4. 再生成完整代码 5. 说明运行方法 6. 提供测试清单这个模板的核心不是固定的文字而是让 AI 清楚了解五件事你想做什么使用什么技术需要哪些功能有哪些限制希望 AI 按什么步骤回答九、这次实践应该掌握什么通过这个小案例我们完成了一次比较完整的 AI 编程流程明确需求 ↓ 让 AI 拆解功能 ↓ 确认实现思路 ↓ 让 AI 生成代码 ↓ 本地运行验证 ↓ 发现问题并反馈 ↓ 修改代码并再次测试需要特别注意的是AI 编程不是把需求复制给 AI然后直接复制它返回的代码。更合理的工作方式是开发者负责明确目标、判断方案和验证结果AI 负责提供实现建议和编码辅助。即使案例很简单也应该保留“生成、运行、验证、修改”这几个环节。总结让 AI 写代码之前首先要明确功能和技术要求。先让 AI 拆解需求再让它生成代码结果通常更稳定。代码生成后必须在本地运行并验证正常场景和异常场景。遇到问题时应提供完整报错、相关代码和运行环境。AI 适合帮助我们快速完成基础实现但不能替代开发者进行判断。一套清晰的提示词模板可以复用到不同的开发任务中。下一篇文章将继续讨论一个非常重要的问题为什么 AI 生成的代码不能直接使用如何对 AI 代码进行检查和验证✍坚持原创求关注点赞收藏