第8课：让AI帮你“造工具”——从想法到网页应用

【学习目标】

1. 理解AI辅助编程的基本流程和原理

2. 能够使用AI工具生成简单的网页应用

3. 体验从“想法”到“产品”的创造过程

4. 思考AI辅助编程对未来工作的影响

【情境导入】

小明想做一个“每日背单词”的小工具，但他不会写代码。同学告诉他：“你可以让AI帮你写啊！”小明半信半疑地打开DeepSeek，输入：“请用HTML写一个背单词小工具，包括添加单词、随机测试、显示正确率的功能”。几秒后，AI生成了完整的代码！小明把代码保存为HTML文件，用浏览器打开——一个完整的背单词工具就诞生了！

【知识大揭秘】

概念引入：AI如何“写”代码？

AI辅助编程的原理并不神秘。AI在训练时学习了海量的代码样本，因此能根据你的描述生成相应的代码。就像一个读过无数菜谱的厨师，你告诉他想吃什么，他就能写出对应的菜谱。但要注意，AI生成的代码不一定完全正确，可能需要人工调试和修改。

深度解析：AI辅助编程的工作流程

第一步：需求描述。用自然语言告诉AI你想要什么功能。 第二步：代码生成。AI根据你的描述生成代码。 第三步：测试运行。将代码保存并在浏览器中打开，看看效果是否符合预期。 第四步：调试修改。如果有问题，把错误信息反馈给AI，让它帮你修复。 第五步：迭代优化。不断完善功能和界面，直到达到满意的效果。

案例时间：一个“待办事项”工具的诞生

小红想做一个待办事项工具。她向AI输入：“请用HTML写一个待办事项工具，可以添加、删除、勾选事项，界面简洁美观”。AI生成了包含HTML、CSS和JavaScript的完整代码。小红发现颜色不太喜欢，又让AI修改了配色方案。最终，她得到了一个完全符合自己喜好的待办事项工具。

案例时间：AI写的计算器能用吗？

小明让AI写了一个计算器工具，但发现输入“5÷0”时结果不是“0”而是“错误”。这说明AI生成的代码可能存在逻辑缺陷，需要人工测试和修复。AI是强大的助手，但不能完全代替人类的思考和验证。

知识小结

AI辅助编程的核心流程是“需求描述→代码生成→测试运行→调试修改→迭代优化”。AI让不懂编程的人也能创造工具，但AI生成的代码需要人工测试和修改。人与AI的协作才是最佳模式。

【AI看图学】

【动手练一练】

活动：用AI做一个专属工具

步骤：

1. 想一个你需要的小工具（如倒计时器、随机点名器、习惯打卡器等）

2. 用自然语言向AI描述你的需求，让它生成HTML代码

3. 将代码保存为.html文件，用浏览器打开测试

4. 如果有问题，把错误信息反馈给AI进行修复

工具/平台：DeepSeek或豆包（网页版）、浏览器

预期成果：一个可运行的网页小工具

【想一想·辨一辨】

1. AI能帮人写代码，那程序员会失业吗？你觉得未来的程序员需要什么样的能力？

2. 如果AI生成的工具出了错误，责任应该由谁来承担？

【拓展阅读·前沿视窗】

了解GitHub Copilot、Cursor等AI编程助手工具。这些工具已经被专业程序员广泛使用，能大幅提高编程效率。思考：未来“会写代码”和“会描述需求”哪个更重要？