12.AI 学习之路 · 实战篇之「个人站点系列：网页到底是个啥」

📚 系列导航：上一篇 [11.先聊审美] 把眼力这关补齐了。这一篇进入个人站点第二站--先搞懂网页是个啥，再让 AI 帮你复刻一个。

上一篇聊完审美，按理说这一篇就该撸起袖子开干了。

但是我们星球球友水平参差不齐，所以在开干之前，我想先给新手球友们做个概念科普--「网页到底是个啥」。

网址输进去，页面蹦出来，中间发生了什么？一个网页是一个文件还是一堆文件？为啥有的网站 AI 几分钟就能克隆，有的克隆下来一堆残缺？这些没搞懂，AI 给你干活的时候你只能干瞪眼：它说啥就是啥，出了岔子你连问题出在哪一层都说不清。

所以今天先补这一课。这不是编程课，依然不用写一行代码，就是把「网页是什么、访问一个网页发生了什么、AI 帮你做网页时到底在写什么」用大白话讲透。讲完直接实战：一句话让 AI 把一个网站原样复刻下来、改成你的。

看完这一篇，你会拿到：

• 一套「从网址到页面」的通俗流程--用点外卖类比，一眼记住

• HTML / CSS / JS 前端三件套的极简认识，够你看懂 AI 在给你写啥

• 一句话让 AI 复刻一个静态站的完整实录（拿我自己的 stormzhang.ai 开刀）

• 一句「哪些网站能克隆、哪些克隆不全」的判断口诀

01 网页到底是个啥：不是图，也不是 App

先破两个最常见的误会。

误会一：网页是一张「图」。 很多人觉得网页就是设计师做好的一张大图，挂在网上给人看。不是--你可以选中网页上的文字、点击里面的按钮，图做不到这些。

误会二：网页跟手机 App 一样，是个装好的软件。 也不是。App 要下载安装，网页不用--你输个网址它就出现了，换台电脑照样能看。

那它到底是啥？答案说出来其实很简单：

网页就是一堆代码文件，浏览器当场把它们组装好渲染成你看到的样子。

你现在就可以验证：在电脑浏览器里随便打开一个网页，右键 → 「查看网页源代码」--你会看到密密麻麻的代码。这就是网页的「真身」，你平时看到的漂亮页面，是浏览器读完这堆代码后现场「渲染」出来的。

这事跟你关系很大：AI 帮你做网页，本质就是帮你写这堆代码文件。 我自己的主页 stormzhang.ai，整个站就是一个文件夹里的一堆代码文件加几张图，全部由 AI 生成--没有安装包、没有数据库，就这么朴素。

💡 一句话总结：网页 = 一堆代码文件 + 浏览器现场组装渲染。

02 输入网址之后，到底发生了什么

知道了网页是一堆文件，下一个问题：这堆文件在哪？你输入网址、页面蹦出来，中间发生了什么？

类比：访问一个网页，跟点外卖一模一样，就五步。

（这张图把「点外卖」和「访问网页」逐步对齐：上排是你熟的外卖流程，下排是浏览器背地里干的事，虚线连着的就是同一步。）

一步步说：

1. 手机下单 = 你输入网址、回车。浏览器发出请求：「我要看这个网站。」

2. 平台找到商家 = DNS 找到服务器。网址是给人记的（stormzhang.ai 好记），机器认的是一串数字地址(IP)。DNS 就是那个查号台，把网址翻译成 IP 地址，找到目标在哪。

3. 商家打包出餐 = 服务器把文件打包好。服务器听着玄乎，说白了就是别人家一台常年不关机的电脑，网页那堆文件就放在它上面。

4. 骑手配送 = 网络把文件送到你电脑。送来的就是那堆代码文件加图片。

5. 开盒开吃 = 浏览器把文件组装成页面。你看到的漂亮页面，是浏览器收到文件后当场渲染出来的。

全过程通常不到一秒，但这五步一步没少。

搞懂这五步，你马上就能明白**「克隆一个网站」到底是怎么回事**：把第 3 步里服务器上的那堆文件，原样下载到你自己电脑里。文件都拿到了，这个站就完整地属于你了。

💡 一句话总结：访问网页就是点外卖五步；克隆网站 = 把服务器那堆文件原样搬回家。

03 前端三件套：HTML 管骨架、CSS 管皮肤、JS 管动作

服务器打包送来的那堆文件里，最核心的就三种。这三个名词你多半听过，今天一次讲明白。

类比：一个网页就像一个人。 HTML 是骨架，CSS 是皮肤和衣服，JS 是肌肉和神经。

一个最小的网页，可以只有一个 HTML 文件；再复杂的站，也无非是这三类文件变多、变大。

这一节的落点不是让你学会写它们，而是--以后 AI 给你生成文件，你扫一眼就知道它在哪层干活：改颜色改字体，它在动 CSS；改文案改板块，它在动 HTML；动效不对劲，问题多半在 JS。你不用会写，但你能看懂它在改哪一层，这就够指挥了。

顺带把上一篇串起来：11 讲的审美--配色、字体、间距--落到文件上，几乎全在 CSS 这一层。

💡 一句话总结：HTML 骨架、CSS 皮肤、JS 动作--能认出 AI 在哪层干活，就够指挥了。

04 能不能克隆，先看它是「静态」还是「动态」

克隆之前还有最后一件事要搞清楚：不是啥网站都克隆得全。这就是为啥有的复制得完美、有的复制下来稀烂。关键看它是「静态」还是「动态」。

• 静态网站：内容是事先做好、固定摆在那儿的，谁来看都一样

• 动态网站：内容是当场根据你现算出来的--你登录没、搜了啥，每个人看到的都不一样

类比：静态网站像一张印好的传单，动态网站像银行柜台。 传单印一千张，人人拿到的都一样，你拿一张就等于拥有了全部内容；银行柜台你得先报身份，柜员根据你是谁现查现办，每个人办的业务都不一样--你没法「复印」一个柜台回家。

举几个例子，立马就懂：

怎么一眼判断？记住这句口诀：

要登录、有评论、内容随你变--中一个，就是动态，只能克隆一部分。 三样都没有的，基本是静态，可以完整放心的克隆。

好消息：个人主页、作品集这类咱们最想复刻的站，绝大多数都是纯静态。

💡 一句话总结：没登录、没评论、内容不随你变--就是静态站，能克隆。

05 一句话克隆：拿我自己的站开刀

该懂的都懂了，开始动手。

有人说：克隆还不简单？截个图丢给 AI，让它照着做一个不就完了。这条路叫「仿」：AI 看懂截图之后重新写一套长得像的文件，跟照着原画临摹一张是一回事--远看像，近看走样，动效全丢，拿到的也不是原站的真文件。真想要一个能用、能改的站，得走另一条路，「扒」：像复印，把服务器上那堆真文件原样搬下来。02 节说了，网页就是一堆代码文件，文件都搬来了，站就是完整的。

这篇走「扒」。我拿自己的主页 stormzhang.ai 当例子--它长这样：

暗黑星空底、右边一个青色发光的点阵地球在转、左边大字配标语。这站就是我用 AI 做出来的--真正费心的从来不是写代码（那部分 AI 几下就生成了），是想法和设计，这也是为啥上一篇先聊审美。技术上它是纯静态站，正好拿来开刀。

扒它，最省事的办法是一句话交给 Claude Code（一种能读你电脑文件、还能自己上网抓东西的 AI 助手）：

帮我把 https://stormzhang.ai 整个复制到本地，
再改成我的个人主页：名字换成 aiden、配色换成橙色系。

就这一句。几分钟后，成品出来了：

同一个壳，几分钟换了主人--名字、配色、文案、连地球的颜色，全成了新的。

顺便说清一个新手最容易懵的事：复刻完的东西在哪？就在你电脑里的一个普通文件夹。打开它，里面躺着的正是 01 节说的那堆文件：一个 index.html，加上 CSS、JS 和图片。想看效果不用装任何软件，**找到 index.html，双击**，浏览器直接打开，整个站就在你眼前跑起来了。甚至断网都能看--它已经完完整整躺在你电脑里了。这也反过来印证了开头那句话：网页就是一堆文件，文件在哪，站就在哪。

一句话、几分钟，从 stormzhang 变成了 aiden。但它可不是变魔术--这中间 AI 到底干了啥，下一节拆开给你看。

💡 一句话总结：仿是临摹会走样，扒是复印拿真件；复刻静态站，一句话交给 Claude Code/Codex。

06 拆开看：AI 是怎么把站扒下来的

说穿了，Claude Code 不是变魔术，它就是个会自己干活的程序员--你那句话，它拆成三步真去执行。而这三步，你现在全都看得懂，因为它用的就是 02 节那套流程。

第一步：照着「文件清单」，把文件一个个下下来。

一个网页需要哪些文件，清单全写在 HTML 里。Claude Code 先把 HTML 下载下来，像扫购物清单一样过一遍：「这页要用这个 CSS、这个 JS、这三张图……」--再照着清单，把每个文件下到你电脑的文件夹里。相当于把 02 节里「服务器打包」的那份货，自己重新领了一遍。

第二步：自己打开验证，发现漏了就让 AI 去补。

下完不等于成了。因为 AI 不一定一次扒全，Claude Code 会自己把扒下来的站在本地打开看一眼。这一看--地球没了：

为啥漏？因为那个地球压根不在 HTML 的文件清单里：它是页面打开后、JS 跑起来才临时去加载的一个文件（cobe.mjs），属于「程序跑起来才冒出来」的东西，照清单下载自然就漏了。但 Claude Code 不会就这么交差：它瞄到浏览器报错「找不到 cobe.mjs」，立马明白漏了啥，转头把这个文件单独补下来--地球就转回来了。

第三步：按你的话，地毯式查找替换。

文件齐了，但是把相关信息改成你的。你说「青蓝换成橙色」，它就在所有文件里搜那个青色值（我的站是 #38f9d7），CSS 里十几处、JS 里地球的颜色配置里还藏着一处--一处不漏全换掉。改名字同理：所有写着「stormzhang」的地方，统统换成「aiden」。把我的 slogan，标签，社交链接等都换成你的。这活你手动指挥 AI 去干，找得眼花还容易漏；它读得懂文件结构，搜得全、换得准。

有句实话得说在前头：别指望一句话就 100% 完美复刻。你也看到了，动态加载的东西最容易漏；大多数时候它能自己发现报错补回来，但遇到结构复杂的站也可能漏掉一些。所以扒完别急着收工，自己打开验收一遍，缺啥再让它补。

💡 一句话总结：AI 扒站三步--照清单下载、开起来补漏、地毯式替换；扒完记得验收。

07 想扒得更准：给 AI 配双「眼睛」

06 那个「漏地球」的短板，还有更聪明的补法--给 AI 装家伙。

最实在的一个：给 Claude Code 装一双「浏览器眼睛」。 AI 扒站会漏东西，是因为它照清单下载、不真打开页面跑 JS。那给它配个能开浏览器的插件不就行了？这东西叫 MCP（你就理解成给 AI 装的插件），最对路的是微软官方的 Playwright MCP。装上之后，Claude Code 能自己开一个真浏览器，等页面 JS 跑完、把地球这种动态内容看得清清楚楚，还能直接读出每个元素的精确样式--不再靠猜。装它就一行命令的事。

再进阶一档：现成的「复刻 skill」。 有人把整套复刻流程打包成了 Claude Code 技能，比如开源的 ai-website-cloner（GitHub 1.7 万 star），一句 /clone-website 网址 自动走完全流程。不过说句实话，它产出的是一套现代前端工程（React 那种），复刻个人静态站有点杀鸡用牛刀。

但别被这些唬住--它们是「想复刻得更准」时的增强。复刻个人静态站，05 那句「一句话交给 Claude Code」仍然是主线，够用了。

💡 一句话总结：浏览器 MCP 让 AI 亲眼看页面；但复刻个人静态站，一句话仍是主线。

08 动手：这周就克隆一个你心动的站

轮到你了。花半小时，走一遍：

1. 挑一个你心动的、纯静态的站--用 04 的口诀过一遍：没登录、没评论、内容不随你变。个人主页、作品集最合适

2. 一句话甩给 Claude Code：「帮我把 XX 网站复制到本地」；想扒得更准，可以先装个浏览器 MCP（见 07 节）

3. 本地打开验收：双击文件夹里的 index.html，缺东西（比如某个动效没了）就让 AI 补

4. 让 AI 改成你的：名字、文案、配色、内容全换掉

5. 版权清单过一遍（改成你的，不只是礼貌，是红线）：

   • Logo、头像换成你自己的

   • 文字文案全部重写，别留原主人的介绍

   • 图片换自己拍的，或用免费图库（Unsplash、Pexels）

   • 字体留意商用授权--不少好看的字体个人用免费、商用要买

   • 网页标题和看不见的 meta 信息里的原站名字，让 AI 一并搜出来换干净

一个小提醒：境外的站，复制时可能需要魔法上网；工具本身在国内都能正常装。

💡 一句话总结：挑静态站 → 一句话给 AI → 验收 → 改成你的 → 版权清单过一遍。

小结

这一篇把动手前该懂的东西讲透了：

• 网页是一堆代码文件，浏览器现场组装；AI 做网页 = 帮你写这堆代码文件

• 访问网页就是点外卖五步：下单 → 找店 → 打包 → 配送 → 开吃；克隆 = 把店里那堆文件原样搬回家

• 三件套各管一层：HTML 骨架、CSS 皮肤、JS 动作--你能认出 AI 在哪层干活，就够指挥了

• 能不能克隆看静动态：没登录、没评论、内容不随你变的，放心扒

• AI 扒站不是魔法：照清单下载、开起来补漏、地毯式替换，扒完自己验收一遍

下一篇预告

你现在会克隆了--但克隆来的终究是别人的壳，而且这个主页只是在你本地。下一篇，咱们从 0 到 1 做你自己的品牌站：想清楚、盖出来、免费上线。咱们下篇见。

本系列持续更新，建议收藏。