文章目录一、先明确这次要做什么功能目标功能范围本次不做什么技术限制验收标准二、让 AI 先复述需求三、让 AI 给出实现计划四、让 AI 生成第一版代码五、第一版实现代码六、如何运行这段代码第一步创建文件第二步粘贴代码第三步使用浏览器打开七、逐步理解这段代码1. 页面结构2. 数据结构3. 页面渲染4. 表单提交八、按照验收标准测试功能测试一添加正常内容测试二添加空内容测试三标记完成测试四删除事项测试五连续操作九、让 AI 帮助我们发现问题让 AI 检查功能遗漏让 AI 检查代码可读性让 AI 解释某个难点十、这次实战中 AI 适合做什么十一、常见问题问题一点击添加没有反应问题二删除后数量不正确问题三刷新页面后数据没了十二、总结✍创作者全栈弄潮儿 个人主页全栈弄潮儿的个人主页️ 个人社区欢迎你的加入全栈开发社区 专栏地址欢迎订阅AI 编程提效实战前面的文章中我们已经学习了如何向 AI 描述一个编程需求。如何让 AI 生成函数。如何让 AI 解释代码和排查报错。为什么 AI 生成的代码不能直接使用。今天我们把这些方法串起来完成一个小型实战。这次要实现的功能是用原生 HTML、CSS 和 JavaScript制作一个简单的待办事项页面。页面支持添加待办事项。标记待办事项为已完成。删除待办事项。显示当前待办数量。这个案例不使用第三方库也不连接数据库。你只需要准备一个代码编辑器和浏览器就可以跟着文章完成。一、先明确这次要做什么很多人会直接对 AI 说帮我写一个待办事项项目。这句话可以得到代码但范围不够明确。我们先把需求写成一份简单的功能说明。功能目标制作一个待办事项页面用户可以输入任务并添加到列表中。功能范围本次只实现 4 个功能添加待办事项。标记事项是否完成。删除待办事项。显示待办数量。本次不做什么为了控制复杂度本次暂时不实现用户登录。数据库存储。多人协作。编辑已有事项。分类和搜索。页面刷新后保留数据。技术限制1. 使用原生 HTML、CSS 和 JavaScript。 2. 不使用 React、Vue 或第三方组件库。 3. 不使用第三方依赖。 4. 代码适合初学者阅读。 5. 最终可以直接在浏览器中运行。验收标准功能完成后需要满足1. 输入框为空时不能添加待办事项。 2. 输入有效内容后能够显示在列表中。 3. 点击复选框后事项显示为已完成状态。 4. 点击删除按钮后事项从列表中消失。 5. 页面能够正确显示当前未完成事项数量。到这里我们已经把一句模糊需求变成了一份可以执行的任务说明。二、让 AI 先复述需求不要一上来就让 AI 输出完整代码。第一轮可以先让 AI 复述需求并检查它有没有理解错误。可以使用下面的 Prompt我想用原生 HTML、CSS 和 JavaScript 制作一个简单的待办事项页面。 功能范围 1. 添加待办事项。 2. 标记事项是否完成。 3. 删除待办事项。 4. 显示未完成事项数量。 限制 1. 不使用第三方库。 2. 不接入数据库。 3. 不实现登录、编辑、搜索和分类。 4. 代码要适合初学者阅读。 5. 页面可以直接在浏览器中运行。 验收标准 1. 输入框为空时不能添加。 2. 输入有效内容后可以添加。 3. 可以标记完成。 4. 可以删除。 5. 未完成数量显示正确。 请先不要写代码。 请复述你对需求的理解并列出实现这个功能需要的主要步骤。这一步的目的不是增加流程而是提前检查AI 有没有扩大功能范围。AI 有没有漏掉验收条件。AI 有没有误解“未完成数量”的含义。如果 AI 说要使用数据库、登录系统或前端框架就需要及时提醒本次只实现浏览器内存中的简单版本不引入框架和数据库。三、让 AI 给出实现计划确认需求理解正确后再让 AI 输出实现计划。一个适合初学者的计划可能包括1. 创建页面结构 - 标题 - 输入框 - 添加按钮 - 待办列表容器 - 未完成数量显示 2. 准备数据 - 使用数组保存待办事项 - 每条事项包含 id、title 和 completed 3. 实现添加 - 读取输入框内容 - 检查是否为空 - 创建新的待办对象 - 更新页面 4. 实现完成状态 - 点击复选框 - 修改对应事项的 completed - 更新页面样式和数量 5. 实现删除 - 根据 id 删除对应事项 - 更新页面 6. 测试 - 测试空输入 - 测试正常添加 - 测试完成和取消完成 - 测试删除这个计划让我们先理解“要做哪些事情”再进入代码阶段。四、让 AI 生成第一版代码接下来可以要求 AI 生成最小可运行版本。需求已经确认请生成第一版代码。 要求 1. 只使用原生 HTML、CSS 和 JavaScript。 2. 请将代码放在一个完整的 index.html 文件中。 3. 不使用第三方库。 4. 使用数组保存待办事项。 5. 每条事项包含 id、title 和 completed。 6. 输入框为空或只有空格时不能添加。 7. 支持添加、标记完成和删除。 8. 显示未完成事项数量。 9. 代码添加必要注释但不要写过多无用注释。 10. 先给出完整代码再说明如何运行和测试。选择单文件的原因是为了让初学者更容易运行。等你理解了这个版本再把 HTML、CSS 和 JavaScript 拆分到不同文件中。五、第一版实现代码下面是一份可以直接运行的示例代码!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title待办事项/titlestyle*{box-sizing:border-box;}body{margin:0;min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:48px 20px;background:#f4f6f8;font-family:Arial,sans-serif;color:#1f2937;}.todo-app{width:100%;max-width:520px;padding:28px;background:#ffffff;border:1px solid #d9e0e7;box-shadow:0 12px 32pxrgba(31,41,55,0.08);}h1{margin:0 0 20px;font-size:28px;}.todo-form{display:flex;gap:10px;}.todo-input{flex:1;min-width:0;padding:12px;border:1px solid #cbd5e1;font-size:16px;}button{border:0;padding:12px 16px;cursor:pointer;color:#ffffff;background:#2563eb;font-size:14px;}.todo-list{display:grid;gap:10px;margin:24px 0 0;padding:0;list-style:none;}.todo-item{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #e2e8f0;}.todo-title{flex:1;}.todo-title.completed{color:#94a3b8;text-decoration:line-through;}.delete-button{padding:8px 10px;background:#dc2626;}.todo-count{margin:18px 0 0;color:#64748b;font-size:14px;}/style/headbodymainclasstodo-apph1我的待办事项/h1formclasstodo-formidtodoForminputclasstodo-inputidtodoInputtypetextplaceholder请输入待办事项buttontypesubmit添加/button/formulclasstodo-listidtodoList/ulpclasstodo-countidtodoCount未完成0/p/mainscriptconsttodos[];consttodoFormdocument.querySelector(#todoForm);consttodoInputdocument.querySelector(#todoInput);consttodoListdocument.querySelector(#todoList);consttodoCountdocument.querySelector(#todoCount);functionrenderTodos(){todoList.innerHTML;todos.forEach((todo){constitemdocument.createElement(li);item.classNametodo-item;constcheckboxdocument.createElement(input);checkbox.typecheckbox;checkbox.checkedtodo.completed;checkbox.addEventListener(change,(){todo.completedcheckbox.checked;renderTodos();});consttitledocument.createElement(span);title.classNametodo.completed?todo-title completed:todo-title;title.textContenttodo.title;constdeleteButtondocument.createElement(button);deleteButton.classNamedelete-button;deleteButton.typebutton;deleteButton.textContent删除;deleteButton.addEventListener(click,(){constindextodos.findIndex((item)item.idtodo.id);if(index!-1){todos.splice(index,1);renderTodos();}});item.append(checkbox,title,deleteButton);todoList.appendChild(item);});constunfinishedCounttodos.filter((todo)!todo.completed).length;todoCount.textContent未完成${unfinishedCount};}todoForm.addEventListener(submit,(event){event.preventDefault();consttitletodoInput.value.trim();if(!title){alert(请输入待办事项);return;}todos.push({id:Date.now(),title,completed:false});todoInput.value;renderTodos();});renderTodos();/script/body/html六、如何运行这段代码第一步创建文件在任意文件夹中创建一个文件index.html第二步粘贴代码将上面的完整代码复制到index.html中并保存。第三步使用浏览器打开直接双击index.html或者右键选择浏览器打开。如果页面正常显示就说明第一版已经运行起来了。七、逐步理解这段代码不要因为代码比较长就直接全部复制后不再阅读。可以按照 4 个部分理解。1. 页面结构HTML 负责创建页面中的元素input输入待办内容。form处理添加操作。ul显示待办列表。p显示未完成数量。2. 数据结构consttodos[];每添加一条待办就向数组中放入一个对象{id:1723610000000,title:学习 AI 编程,completed:false}其中id用来区分不同事项。title保存事项内容。completed表示是否完成。3. 页面渲染functionrenderTodos(){todoList.innerHTML;// 根据 todos 重新创建列表}每次数据发生变化后都重新调用renderTodos()添加事项 ↓ 修改 todos ↓ 重新渲染页面完成和删除操作也采用同样的方式。4. 表单提交todoForm.addEventListener(submit,(event){event.preventDefault();// 读取输入、校验、添加数据});event.preventDefault()用来阻止表单默认提交和页面刷新。然后通过consttitletodoInput.value.trim();读取输入框内容并删除首尾空格。八、按照验收标准测试功能代码运行后不要只测试“输入一条内容并添加”这一种情况。按照最开始写好的验收标准逐条测试。测试一添加正常内容操作输入学习 AI 编程 点击添加预期列表出现“学习 AI 编程”。输入框恢复为空。未完成数量变为1。测试二添加空内容操作输入空字符串或几个空格 点击添加预期不新增列表项。页面提示请输入待办事项。未完成数量保持不变。测试三标记完成操作点击某条待办前面的复选框。预期文字出现删除线。未完成数量减少1。再次点击复选框后应该恢复为未完成状态。测试四删除事项操作点击某条待办右侧的删除按钮。预期该事项从列表中消失。未完成数量正确更新。测试五连续操作连续添加 3 条事项然后完成第 1 条。删除第 2 条。取消第 1 条的完成状态。最后检查列表内容和未完成数量是否正确。九、让 AI 帮助我们发现问题第一版代码运行起来后可以继续让 AI 做辅助检查。让 AI 检查功能遗漏这是一个原生 JavaScript 待办事项页面。 功能包括添加、完成、删除和未完成数量统计。 请不要直接修改代码只帮我列出 1. 已经覆盖的功能。 2. 还没有覆盖的边界情况。 3. 新手最容易忽略的测试场景。 4. 每个场景的预期结果。让 AI 检查代码可读性请检查下面这段待办事项代码的可读性。 要求 1. 不要直接重写整个项目。 2. 先列出最需要改进的 3 个地方。 3. 区分必须改进和可选优化。 4. 如果需要修改请给出最小改动示例。 5. 不要引入第三方库。让 AI 解释某个难点如果你不理解renderTodos()可以单独提问请只解释 renderTodos 函数。 重点说明 1. 为什么每次执行时要先清空 todoList。 2. forEach 在这里做了什么。 3. checkbox、title 和 deleteButton 分别负责什么。 4. 为什么修改 completed 后要再次调用 renderTodos。 5. 如果不重新渲染页面可能出现什么问题。把大问题拆成小问题通常比让 AI 解释整个项目更容易理解。十、这次实战中 AI 适合做什么在这个案例中AI 可以帮助我们把需求整理成具体功能。生成页面结构和基础样式。编写事件处理代码。解释数组、事件和 DOM 操作。列出测试场景。分析运行中的报错。但下面这些事情仍然需要我们自己完成确认需求范围。运行代码。检查功能结果。判断代码是否容易理解。发现和修复不符合预期的地方。如果只是复制代码不运行、不修改、不测试就没有真正完成这次实战。十一、常见问题问题一点击添加没有反应可以先检查idtodoForm是否和 JavaScript 中一致。idtodoInput是否拼写正确。script是否放在页面中。浏览器控制台是否有报错。把完整报错和相关代码交给 AI而不是只问“为什么没反应”。问题二删除后数量不正确需要检查删除后是否重新调用了renderTodos()。数量统计计算的是未完成事项还是全部事项。删除的事项是否真的从todos数组中移除。问题三刷新页面后数据没了这是当前版本的预期结果。因为数据只保存在 JavaScript 内存中的todos数组里刷新页面后数组会重新变为空数组。如果想让数据刷新后仍然保留下一步可以学习localStorage。后端接口。数据库。但这些内容不属于本次小功能的范围。十二、总结今天我们完整走了一遍“从需求到代码”的 AI 编程流程明确功能目标 ↓ 写出不做的内容 ↓ 制定验收标准 ↓ 让 AI 复述需求 ↓ 让 AI 给出实现计划 ↓ 生成最小可运行代码 ↓ 本地运行和测试 ↓ 继续让 AI 辅助检查这条流程比“直接让 AI 生成项目”更适合初学者因为每一步都可以理解和验证。请记住小功能也要先明确目标和范围。先让 AI 理解需求再让它写代码。代码生成后必须自己运行和测试。遇到问题时把具体现场交给 AI 分析。先完成一个最小版本再逐步增加功能。真正的 AI 编程提效不是让 AI 一次写出最多代码而是让 AI 帮你更快走完一条可以理解、可以验证、可以持续改进的开发流程。下一篇文章我们继续讨论AI 写代码后如何自己检查有没有问题。✍坚持原创求关注点赞收藏