《AI 造物入门》第01讲 · 半小时，让你的第一张网页活过来

这一讲你会真的做出一个网页。零安装、半小时你描述一句它就出现在屏幕上。你还会顺手学到造物者的第一个习惯——先猜后做。它就是自己学会和只会喊话之间那条分界线。上一讲你写下了一句我想做一个 ___。现在我们让它第一次变成屏幕上能看的东西。 这一讲你会做出什么【必读】你对 AI 说一段话——你的名字、一句自我介绍、你喜欢的几样东西。几秒钟后浏览器里出现一张属于你的网页顶上是你的名字下面是介绍和我喜欢的。然后你再多说几句它就跟着换颜色、加板块、改文字。半小时后你手里有两样东西一张能看的网页和一个会跟你一辈子的工作循环。 先装一个习惯先猜后做【必读】造物者习惯 #1 · 先猜后做每次让 AI 干活之前先用一句话猜一下它大概会给我什么做完再对照真实结果。猜对了说明你开始懂了猜错了——恰恰是你猜错的地方印象最深、学得最牢。为什么把它放在第一位因为看 AI 做和自己学会之间差的就是这一下。只是看AI 一关掉你心里就空了而先自己猜一下脑子会主动转一圈知识才会留在你身上而不是留在 AI 身上。接下来每一步我都会先请你猜猜看。别跳过那一下它才是你真正在学的地方。▸ 这个习惯有讲究吗细究 · 可跳读有。学习科学里管它叫生成效应自己先尝试产出一个答案哪怕是错的再看正确答案比直接看正确答案记得牢得多。名字记不记得无所谓养成先猜一下的反射最值钱。这门课从头到尾都在用它。 跟我做第 0 步 · 找一个能聊天的 AI。用任意一个你能稳定打开的 AI 就行。最省事的是带实时预览的——你描述它在旁边直接把网页画出来。海外的 Claude、ChatGPT 这类有国内能直连的豆包、通义千问、Kimi 等也在做这种预览有就用没有也完全不影响——第 3 步教你怎么看到它任何 AI 都行。第 1 步 · 先猜10 秒。在动手前对自己说一句“我把自己介绍给 AI、让它做张网页出来大概是什么样子”有没有图什么颜色随便猜记心里。第 2 步 · 把下面这段话填好发给它。【】里换成你自己的请帮我做一个个人主页输出一个完整的 HTML 文件能直接在浏览器打开。 关于我 - 名字【你的名字】 - 一句话介绍【比如一个喜欢打篮球和科幻片的人】 - 我喜欢的三样东西【比如篮球、《三体》、深夜的炒面】 要求 - 页面干净好看配色温暖手机上也要正常显示 - 顶部放我的名字和那句介绍 - 中间分两块「关于我」和「我喜欢的」 - 全部用中文 请直接给我完整的 HTML 代码。第 3 步 · 看见它。两种情况对号入座你的 AI 有预览它已经把网页画在旁边了。看一眼——和你第 1 步猜的差多少你的 AI 只给了代码别慌把代码存成文件打开就行30 秒看下面这个折叠▸ 怎么把代码变成能打开的网页没有预览就看这个Windows打开记事本。把 AI 给的代码全部粘贴进去。文件 → 另存为 → 文件名写index.html→ 保存类型选所有文件→ 保存。找到这个文件双击它会用浏览器打开。Mac打开文本编辑。顶部菜单 格式 →制作纯文本很重要。粘贴代码 → 文件 → 存储 → 名字写index.html→ 如果弹出扩展名提示选使用 .html。双击这个文件打开。记住这个文件在哪——它就是你的第一个作品后面几讲都围着它转。第 4 步 · 改三处这步最好玩。每改一处之前还是先猜它会变成什么样再发给 AI“把主色调换成【你喜欢的颜色比如蓝绿色】。”“加一块『我的目标』写上【你的一个小目标】。”“把介绍那句改成【新的一句】。”看着它一次次变样。恭喜——你已经在造东西了。 刚才到底发生了什么【重点】先别往下看。合上屏幕用一句话对自己说刚才这套流程是哪几步……想好了再看描述 → 生成 → 看 → 改。就这四步转圈。你这门课剩下的所有东西都是这个圈在转只是越转越大。那 AI 给你的代码到底是什么别怕它。一个网页本质就是一个文本文件里面用一些标签告诉浏览器每一块是什么。比如h1张三/h1p一个喜欢篮球的人/ph1是大标题p是一段文字。尖括号里的就是标签浏览器看到它们就知道该怎么显示。你现在不用会写——能大概认出这块是标题、那块是文字就够了第 03 讲专门练这个。 翻车现场含糊一句看它瞎猜来故意翻一次车。新开一段对话只发这一句帮我做个好看的网站。看它给你什么。大概率是一个跟你毫无关系、谁都能用的通用模板——没有你的名字、没有你喜欢的东西甚至看不出是干什么用的。为什么会这样这不怪 AI是它没拿到足够的信息。你说得越含糊它就越只能猜用最大众的默认值把页面填满。对比一下第 2 步那段又长又具体的话——信息给够了它自然就做得准。把想要的说清楚本身就是一门手艺下一讲第 02 讲专门教你这个。万一网页白屏 / 乱掉了第一次很常见先别慌也别钻进代码里。最简单两招①跟 AI 说打开是白屏帮我修或重新给我一份完整的②把出问题的样子描述给它。真正的修 bug是第 06–07 讲的主场今天你只要知道——卡住是正常的喊一声就能继续。✅ 自检三问它在干嘛你能不能用一句话说出你这张网页有哪几块它对吗页面上的名字、介绍是你要的那个吗哪里还不对坏了怎么办如果现在想再改一处你知道下一步该做什么吗对再说一句话。三个都能答上来这一讲就真的过了。 留个挑战别照我的自己写一句话给网页加一样我没让你加的东西——一张你喜欢的图片一份你的歌单一个倒数到某个你期待的日子的小牌子老规矩先猜它会怎么做再发给 AI再对照。 复制带走 复制带走① 造物的循环就四步描述 → 生成 → 看 → 改一直转。② 习惯 #1先猜后做——你猜错的地方恰恰学得最牢。③ 网页 一个文本文件标签告诉浏览器每一块是什么。④ 改网页就是再说一句话。你大概已经发现了说得越准它做得越对。这不是错觉这是整件事的命脉。下一讲——第 02 讲我们专门练这门最值钱的手艺把脑子里的画面说成 AI 一次就能听懂的话。