做第一个小作品

不写一行代码，做出一个能打开、能给家人看的小网页。

区域 用 AI 做东西难度入门用时 约 60 分钟（读 15 + 做 45）工具 任意聊天 AI＋浏览器更新 2026.10.19

01 · Pain你可能卡在这里

我不会编程，做网页离我太远。

AI 给了我一大段代码，不知道该放哪、怎么打开。

做出来能打开，但一用就出怪问题，不知道怎么跟 AI 说。

做出一个真东西，是从「会聊天」到「会用 AI 干活」的分水岭。我们实测：一段四段式提示词，第一版倒数日网页一次就能用；加一个功能后藏了两个 bug，把问题描述清楚、再指到具体那一行，两轮就修好了。

这一站练的是一个完整循环：交代 → 打开 → 测试 → 报 bug → 修好。以后做任何东西都是这个循环。

一个你自己的单文件小网页（倒数日、待办清单、家庭通讯录任选），满足：

① 双击就能打开，手机上不需要左右滑动　② 至少一个可以点的功能　③ 你按「正常用 / 乱用 / 刷新」测过一遍，并修好至少 1 个 bug

第一版一次就能用：48 天，我们手动数过。附完整提示词、代码和保存打开的步骤。

乱输入显示「undefined -20745 天」。第一次报 bug 修好一半，指到具体那一行后全部修好。

Mozilla 维护的权威 Web 教程，有中文，从「网页是什么」讲起。想看懂 AI 给的代码，从这里开始。

本站倒数日用来「刷新后还记得」的就是它。文档有中文和可运行的例子。

Google Chrome 团队的 HTML 系统课程，分章节、配示例，比零散搜索更成体系。

以上链接核实于 2026-10-19，均可正常打开；GUSTS.AI 与这些网站无关联。更多见 AI 学习与交流 · 16 站。

Q1　AI 给的代码要怎么在自己电脑上打开？

把从 <!DOCTYPE html> 到 </html> 的内容复制，存成后缀为 .html 的文件，双击用浏览器打开。

Q2　测试一个小网页，至少要试哪三类情况？

正常用、不按要求乱用（比如格式错误）、刷新页面看数据还在不在。

Q3　报了一次 bug，AI 还是没修好，下一步怎么做？

把出问题的那一行代码贴出来，直接说改成什么；或者让它先解释原因再修。不要只说「还是不行」。

下一站「04 · 让 AI 帮你读、查、写」：让 AI 帮你读材料、找资料，同时学会识破它编出来的东西。