夜雨聆风你好,我是书情。
上一篇《Claude Code 到底是什么》的结尾,我承诺过:下一篇带你做出人生第一个网页,全程不用装任何东西,10 分钟出成果。
《Claude Code 到底是什么?能帮普通人干什么? 10 年程序员一篇讲透》
今天兑现。
看完这篇你会得到:一个存在你电脑里、双击就能打开、写着你自己内容的网页。不是看懂,是做出来。
如果你此刻的反应是"我?做网页?别开玩笑了"——请先别关,给我 8 分钟。我这 10 年见过太多人高估了做网页的难度,又低估了现在 AI 的能力。
一、开始前,先说清楚两件事
第一,为什么第一课是网页,而不是别的?
因为在所有"能做出来的东西"里,网页是路径最短、反馈最快的:不用注册账号、不用装环境、不用审核,做完双击就能看到。第一次的成就感来得越快,你越有动力走到第二步。这是我带过所有零基础朋友验证过的顺序。
第二,今天不用 Claude Code。
上一篇讲过,Claude Code 是能自己动手干活的"员工",但它需要先安装。今天我们先用你手边就有的"军师"——任何一个能对话的 AI(Claude 网页版、豆包、通义、Kimi 都行),用最原始的"复制粘贴"方式做出第一个成果。
先尝到甜头,再决定要不要请"员工"进门。安装 Claude Code 的保姆级教程就是下一篇。
二、你只需要两样东西
- 一个浏览器。
你现在正在用的这个就行。 - 一个能写代码的 AI 对话框。
随便挑一个你平时用的 AI 聊天工具,打开它的对话页面。
没了。不用装软件、不用买服务器、不用懂任何术语。
三、三步,做出你的第一个网页
1
第 1 步:把你想要的网页,用"人话"告诉 AI。
别自己想怎么措辞,直接抄下面这个模板,把【】里的内容换成你自己的:
请帮我写一个完整的个人介绍网页,要求: 1. 网页标题是【你的名字或昵称】的个人主页 2. 页面上有:我的昵称【____】、一句自我介绍【____】、我的三个爱好【____、____、____】、一句我喜欢的话【____】 3. 风格【简洁大方 / 活泼可爱 / 商务正式,三选一】,配色用【你喜欢的颜色】 4. 所有代码写在一个 HTML 文件里,不要拆分成多个文件5. 直接给我完整代码,从第一行到最后一行,中间不要省略
模板里第 4、5 条是关键——它保证 AI 给你的是一个完整的、能直接用的文件,而不是要你自己拼装的零件。这是新手第一坑,我先替你堵上了。
发送后,AI 会回给你一大段代码。你不需要看懂任何一行,就像你不需要看懂菜谱的火候原理也能吃到菜。
2
第 2 步:把代码原封不动存成一个 .html 文件。
这一步是全流程唯一需要仔细的地方,Windows 用户照下面做(Mac 用户用「文本编辑」App,思路相同):
把 AI 给的代码整段复制(一般代码框右上角有"复制"按钮,一键全拿走); 在桌面右键 →「新建」→「文本文档」,打开这个记事本,把代码粘贴进去; 点「文件」→「另存为」:文件名填 wode.html,「保存类型」选「所有文件」,「编码」选 UTF-8,保存到桌面。
三个字千万记住:.html。文件名可以随便起,但后缀必须是 .html——这是在告诉电脑"我是一个网页,请用浏览器开门"。「保存类型」不选「所有文件」的话,记事本会偷偷把文件存成 wode.html.txt,这是新手第二坑。
3
第 3 步:双击这个文件。
浏览器会自动打开——你会看到一个写着你名字、你的爱好、按你选的配色排好版的网页。
恭喜,你的第一个网页做好了。从零到有,大概 10 分钟。
四、真正的魔法在第四步:改到你满意为止
第一版大概率不完美——颜色不喜欢、字太小、排版土。没关系,不满意就直接跟 AI 说,像指挥装修师傅一样:
"标题再大一点,居中" "背景换成淡蓝色渐变,现在这个太刺眼了" "给每个爱好配一个表情符号,再加一行我的联系方式"
AI 会给你新的完整代码。你重复第 2 步(全选记事本里的旧代码 → 删掉 → 粘贴新代码 → 保存),回到浏览器按 F5 刷新,变化立刻出现。
改三五轮之后你会突然意识到一件事:你正在"做产品"。提需求、看效果、再迭代——这就是我们程序员每天干的事,你已经在干了,只是写代码的部分交给了 AI。
五、翻车了?这四个坑我都替你踩过
Q1:双击打开,满屏是代码文字,不是网页?
九成九是后缀问题:文件其实叫 wode.html.txt,只是电脑默认隐藏了 .txt。解决:另存为时「保存类型」务必选「所有文件」。想根治,在文件资源管理器点「查看」→ 勾上「文件扩展名」,以后后缀一目了然。
Q2:打开是网页,但中文全是乱码?
编码问题。重新「另存为」一次,右下角「编码」选 UTF-8 即可。新系统的记事本默认就是 UTF-8,老系统才会踩到。
Q3:AI 给的代码分成了好几段,不知道怎么拼?
别自己拼,直接回一句:"请把完整代码合并在一个 HTML 文件里,从头到尾重新发一遍,不要省略。"让 AI 干活,是这门课从头到尾的原则。
Q4:做出来了,但是丑?
丑不是你的问题,是要求没提到位。试试这句:"请把这个网页美化成现代简约风格,参考苹果官网的质感,增加圆角卡片和柔和阴影。"你会看到肉眼可见的升级。审美可以外包给 AI,但"要什么感觉"由你说了算。
六、今天的 10 分钟,到底意味着什么
说点实在的。今天这个网页本身值不了钱,但你跑通了一个以前只有程序员才拥有的完整闭环:
想法 → 说清楚 → AI 干活 → 看结果 → 提修改 → 成品。
往后你会发现,做记账工具、做待办清单、做报价计算器……全是这个闭环,只是把第 1 步里"人话"的内容换掉而已。
而今天你是靠"复制粘贴"手动搬运代码的——等下一篇装好 Claude Code,连搬运都省了:你说一句,它自己建文件、自己写、自己改。今天的路你走过一遍,到时候你才会真切感受到"员工"和"军师"的差距。
下一篇:《Windows 小白安装 Claude Code 保姆级教程》——所有报错我都提前替你踩过了,照着截图点就行。
· · ·
我是书情,一个只说人话的程序员。
新手资料包在公众号后台回复关键词领取:
回复「案例」:10 个零基础也能做的小应用清单——你的第二、第三个作品从这里挑
回复「咒语」:小白提示词模板 30 条,今天用的万能模板只是其中 1 条
回复「安装」:Claude Code 安装避坑手册,想抢跑下一篇的现在就能装
你的第一个网页做的是什么主题?卡在哪一步了?留言区告诉我,我看到都会回。做出来的,更欢迎来晒。