不会写代码,也能做出自己的网页:从空文件夹到公开网址

「帮我做一个个人主页。」这是我最不建议直接发给 Agent 的第一句话。

它当然会回你一版网页。可等你说「图片换大一点」「手机端好像不对」时，问题就来了：它可能改错文件，顺手换掉文案，或者把桌面端修好、手机端弄坏。我这次就从一个空文件夹开始，先自己搭出一个能跑的小页面，再让 Agent 进场。每一步都在浏览器里看结果，不靠一句「完成了」收尾。

先准备三样东西：一个代码编辑器、一个浏览器、一个新文件夹。Windows 用 Ctrl + S 保存，Mac 用 Command + S 保存。示例项目叫 html-agent-demo；名字不重要，能找到它就行。

第一步，先搭一个不会迷路的项目。

我第一次看网页项目时，最容易迷糊的是「文件明明在电脑里，浏览器为什么找不到」。解决办法很笨，却很有效：先把文件夹摆整齐。最外层就是项目根目录，页面、样式、脚本和图片都从它往下找。

网页项目根目录与文件夹层级示意

在电脑上新建下面这组文件：

index.html 是页面入口，style.css 管外观，script.js 管互动，images 放图片。README.md 暂时只写一句「这是我的第一个网页项目」，它的作用是让你以后回来时，能快速想起这个文件夹是做什么的。

第二步，先让浏览器看到东西。

打开 index.html，粘贴这份最小页面。这里故意保留了 title、h1、p、img 和 button，因为它们刚好能让你看见一个网页的骨架。

注释不会显示在页面上，但我建议保留它们。看到 src，你就知道下一步查图片路径；看到 id，你就知道 JavaScript 可能靠这个名字找按钮。以后页面变长，注释相当于给自己留的路标，也给 Agent 留了修改依据。

index.html 要放在项目根目录。images/avatar.svg 则是从当前文件夹进入 images，再找 avatar.svg。这两个位置一旦写错，浏览器不会替你猜。

你可以先双击 index.html 看一眼。能看到文字，说明 HTML 被浏览器读到了；图片能出现，说明路径也对了。页面很丑没关系，此时 HTML 只负责把内容摆出来。

HTML、CSS、JavaScript 分别连接到结构、样式和互动

第三步，给页面穿上衣服。

在 css/style.css 中写入：

CSS 注释最好回答「为什么这样写」。grid-template-columns: 280px 1fr 不是神秘数字，它在说：头像区域固定 280 像素，剩下的空间交给文字。以后你让 Agent 调整首屏比例，它就有一个可以修改的具体位置。

保存 style.css，刷新浏览器。我希望你先停一下，不要急着继续复制代码：背景有没有变黄？黑边有没有出现？头像有没有变圆？这三个结果都对，才进入下一步。

这几行 CSS 值得读一遍：.card 是在 HTML 里找到 class="card" 的元素；grid-template-columns: 280px 1fr 把卡片分成左边 280 像素和右边剩余空间；border-radius 做圆角；box-shadow 做黑色偏移阴影。

CSS 没生效时，先看 HTML 里的这一行：

href 少写一个文件夹名，或者把 style.css 放到了根目录，浏览器就找不到它。

第四步，让按钮真的有反应。

在 index.html 的 </body> 前加入：

再打开 js/script.js：

这两条注释也在告诉 Agent 修改范围：按钮定位看第一行，点击后的变化看事件函数。以后如果你说「只改点击后的提示语，不要动布局」，它更容易只改最后一段文字。

这段代码还需要在按钮后面准备一个位置接收反馈：

querySelector("#hello-button") 是按 id 找按钮，addEventListener("click", ...) 是等待点击。defer 会让脚本等 HTML 解析完再执行。新手也可以把 <script> 放在 body 底部，这两种写法都比让脚本抢在按钮出现前运行更稳。

按钮没反应时，按这个顺序查：script.js 是否真的存在；HTML 里的路径是不是 js/script.js；按钮的 id 是否仍是 hello-button；浏览器控制台有没有红色报错。先查文件和 id，不要一上来把整页代码推倒重写。

第五步，理解路径，少掉一半的坑。

同一层、下一层和上一层的相对路径示意

路径只是在回答「目标文件在哪里」。

项目内部尽量用相对路径。这样你把整个文件夹移动到另一台电脑，页面仍然有机会正常工作。路径排错可以用一棵很短的故障树：

还有一个 Windows 特有的小坑：记事本可能把文件保存成 index.html.txt。资源管理器里打开「显示文件扩展名」，确认它真的是 .html。

第六步，我实际会怎么改。

我做这种小页面时，一次只动一个地方。先把标题改成红色，保存、刷新，确认它真的变红，再去碰按钮。HTML、CSS、JavaScript 一起改，最后通常只剩一句「好像哪里不对」，连自己都不知道该回滚哪一处。

这套循环也适用于 Agent。Agent 修改文件以后，浏览器仍然是验收人。它可以告诉你「已经完成」，但它看不到你这台机器上的真实路径、字体、窗口宽度和加载结果。

第七步，把手机端当成另一种排版。

桌面端可以左右排版，手机端通常应该回到单列。把下面的 CSS 加到文件末尾：

@media 可以理解成「当窗口变窄时，换一套规则」。这里把两列变成一列，把按钮拉满，把头像居中。图片再补一条 max-width: 100%; height: auto;，就不会因为原图太大撑破手机屏幕。contain 会保留完整图片，cover 会填满盒子但可能裁掉边缘，头像通常更适合先用 contain。

宽屏左右布局与窄屏单列布局对比

我把示例放进本地服务器，用内置浏览器实际打开。桌面端点击按钮后，页面出现了反馈，控制台没有错误：

桌面端示例页面，按钮点击后出现 JavaScript 反馈

手机端我用 390×844 检查。第一次使用整页截图时，截图工具把临时视口压成了细长画面，看起来像页面坏了；改用当前视口截图后，页面显示正常。这个小插曲很有用：截图异常时，先确认截图方式和实际 DOM 尺寸，不要立刻把 CSS 判成有问题。

390×844 手机端示例页面，内容变为单列且按钮铺满

验收时至少看四件事：标题有没有被裁掉，图片有没有变形，页面有没有横向滚动，按钮和导航能不能操作。开发者工具里的 Console 也要扫一眼。我的这次检查结果是：桌面端按钮反馈正常，手机端没有横向滚动，控制台没有 warning 或 error。

第八步，真正和 Agent 做一次网页项目。

现在才轮到 Agent。我不把它当成一个会替我做决定的人，更像是一个手很快、但需要被盯住的搭档。它负责读文件、改代码、启动预览；我负责决定方向，并且真的打开浏览器看一眼。下面这几轮不是仪式，是为了让错误尽早暴露。

Agent 做网页的分析、制作、修改、验收闭环

8.1 先让 Agent 读项目，不要急着写代码。

把当前项目文件夹交给 Agent 后，我会先按住它的手，只让它读。它要说清楚看到了哪些文件、页面怎么从 HTML 走到按钮、下一步准备动哪几个文件。如果它一上来就重写，我会让它停下；不是因为它一定会写坏，而是它还没有证明自己理解了这个项目。

这一轮不看页面漂不漂亮，只看它有没有把项目说对。它要是把 style.css 说成 JavaScript，我连第二轮都不会发，先让它重新读文件。

8.2 再让 Agent 分析参考网页，只产出设计 DNA。

找一个你喜欢的网页，给 Agent 截一张桌面端图和一张手机端图。截图比只丢一个网址更稳，因为有些网站会拒绝自动访问，Agent 也不该根据网站名字猜设计。

第一条提示词只做分析：

拿到报告后，我不会满足于「黄色、黑色、极简」这种形容词。它们听着舒服，拿来改 CSS 却没什么用。我会继续问：首屏左右各占多宽？标题最多几行？按钮和正文隔多远？手机端哪些区块要从左右改成上下？「黄色背景」改成「明亮暖黄色做大面积背景，黑字负责阅读，红色只留给主按钮」，Agent 才有地方下手。

8.3 把“分析”和“制作”分成两条消息。

当你确认设计方向以后，再发送制作指令。这里要写清楚四件事：使用什么技术，允许改哪些文件，禁止复制什么，做完怎么验收。

第二条提示词才开始制作：

如果 Agent 回答「我准备修改 index.html、css/style.css 和 js/script.js」，我才让它动手。这个停顿只有几秒，却能提前发现它是不是想删图片、改错配置，或者把一个简单项目突然换成陌生框架。

8.4 一次只提一类修改。

第一版出来后，不要把十个愿望塞进一句「再高级一点」。把修改写成「对象 + 动作 + 限制」：

这段话里，「只处理视觉层」限制了文件范围；「头像放大约 10%」给了动作和幅度；「不裁掉边缘」说清楚了验收条件。注释也会帮助 Agent 做这种局部修改：看到 /* 桌面端是左右两列 */，它会更容易把布局调整放在 .card，而不是把整个 HTML 结构换掉。

8.5 最后一轮，让 Agent 像测试员一样工作。

第三条提示词只做验收：

我希望收到的是一份小报告，不是「已完成」四个字。最少写清问题、原因、修改文件和复测结果：

这里的 scrollWidth 是浏览器实际认为页面有多宽。它比肉眼看一眼更可靠，但不能替代截图：一个页面可以没有横向滚动，却把字挤得很难读。我在这次示例里就遇到过一次，第一次整页截图看起来像“页面被压成一条缝”，复查当前视口截图后才发现是截图方式的问题。

这三条提示词的作用不同。第一条控制方向，第二条控制施工，第三条控制验收。Agent 生成的第一版往往没那么糟，真正容易失控的是边改边猜。你越能说清「保留什么、只改什么、改成什么」，它越不容易碰掉其他东西。

第九步，部署前先检查隐私。

本地地址只有你自己能访问。GitHub Pages 这类静态托管服务可以把 HTML、CSS、JavaScript 和图片变成一个公开网址。最小流程是：

1. 在 GitHub 新建一个公开仓库。
2. 上传 index.html、css、js、images 和 README.md。
3. 确认仓库最外层能直接看到 index.html。
4. 打开 Settings → Pages。
5. 在 Build and deployment 中选择 Deploy from a branch。
6. 选择存放文件的分支和根目录，保存设置。
7. 等待发布，再打开生成的网址检查图片、按钮和手机端。

本地项目到 GitHub Pages 公开网址的流程

公开前，把项目文件再扫一遍：API Key、私人电话、家庭地址、合同、公司内部资料、没有授权的图片，都不应该进入公开仓库。GitHub 官方文档提示，Pages 的更新可能需要等待几分钟；刚上传后页面没立刻变化，不一定是代码写坏了。

自定义域名可以后面再做。第一轮先让一个公开网址正常打开，等文件路径、图片、响应式和按钮都稳定，再处理 DNS。一次把所有东西塞进来，排错成本会突然变高。

最后回到开头那个问题：你需要学会多少代码，才好和 Agent 一起做网页？我的答案没有那么多。你至少要看得懂这张地图：HTML 放内容，CSS 改外观，JavaScript 接行为，路径从哪个文件夹算，浏览器怎样证明结果是真的。

我现在看到裂图，第一反应已经不是「完了」，而是去看 src 和文件树；按钮没反应，就去看 script.js、id 和控制台。Agent 仍然写得比我快，但我不再只能站在旁边等它猜。