零基础用 AI 做出第一个网页：从一句话到上线链接
你不需要先学会编程，才能做出一个网页。这篇把「描述需求 → 本地预览 → 改样式 → 让 AI 修报错 → 部署上线」整条链路拆成五步，每一步都给你可以直接复制的提示词。
先破除一个误会：做网页不等于写代码
先说一个我经常听到的说法：「我想做个小网页，但是我不懂代码。」其实这两件事之间没有你想的那么大的跨度。现在你完全可以让 AI 把代码写出来，你只负责两件事——说清楚要什么，以及看一眼对不对。
一个网页，拆到底就是三样东西：HTML 负责内容（有哪些文字、图片、按钮），CSS 负责样子（颜色、间距、大小、位置），JavaScript 负责动作（点了会发生什么）。这三样都是文本，AI 都擅长。你不需要会写，你需要会描述和验收。
所以这篇不是教你学编程，而是教你带着 AI 走完一遍完整链路。走完之后，你手里会有一个真实可访问的网址。整个过程不需要你记住任何语法。
- 需求方：把脑子里的画面翻译成 AI 能执行的描述
- 验收方：打开浏览器，看它到底长什么样、行为对不对
- 反馈方：把「哪里不对、应该往哪偏」讲清楚，而不是甩一句「再改改」
第一步：把「我想要一个网页」说清楚
大多数人第一次的输入是这样的：「帮我做个个人主页。」这句话对 AI 来说信息量为零。它不知道你是谁、放什么内容、什么风格，只能给你一个通用的、和谁都长得差不多的模板。
做网页的需求描述，有一个很好用的骨架：页面类型 + 内容清单 + 风格偏好 + 技术约束。四样东西说全，第一版就能用个七八成。
帮我做一个单文件网页（HTML + CSS + JS 都写在一个 .html 文件里）。 【页面类型】个人作品展示主页，一屏能看完主要内容 【内容清单】 - 顶部：我的名字「[你的名字]」，一句话简介 - 中部：4 个作品卡片，每个卡片有标题、一句描述、一个占位图 - 底部：三个联系方式图标（邮箱、微信、小红书） 【风格偏好】 - 深色背景，主色调用紫色，整体干净、留白多 - 字体偏现代，标题加粗，正文克制 - 鼠标悬停在作品卡片上有轻微上浮效果 【技术约束】 - 不要引入任何外部框架和 CDN，就用原生 HTML/CSS/JS - 手机上打开也要正常显示（响应式） - 代码里用中文注释，方便我以后改 先只输出代码，不要解释。如果我漏了什么信息让你猜不准，先问我 2 个问题。
注意最后那句话。让 AI 在动手前先反问你，是性价比极高的一个习惯——它问出来的问题，往往正好是你自己没想清楚的地方。方向性的返工，比改十个细节都费劲。
很多 AI 默认会给你一个需要安装环境、跑命令才能预览的现代前端项目（比如各种脚手架）。对第一次做网页的人来说，这是灾难——你还没看到页面，就先卡在环境配置上了。
所以需求里一定写明「单文件 HTML，双击就能打开」。等你以后熟了，再考虑用不用框架。
第二步：本地预览，先看到再说
AI 把代码给你之后，别急着改。先让它跑起来，看到真东西再谈优化。单文件网页的好处就在这里：把 AI 输出的代码复制下来，存成一个后缀是 .html 的文件，双击它，浏览器就会打开。
如果 AI 没给你完整文件，只给了一段代码，你可以这样补一句：「把上面的完整代码给我，我要直接存成 index.html 双击打开。」存文件用任何文本编辑器都行，注意保存时编码选 UTF-8，否则中文可能变乱码。
不同的做法，适合不同阶段。第一次做网页，只用第一种就够了：
| 方式 | 怎么跑 | 适合谁 |
|---|---|---|
| 单文件 HTML | 存成 .html，双击用浏览器打开 | 第一次做网页，只想看到效果 |
| 本地小服务 | 用一个本地预览服务器打开文件夹（命令以官方最新文档为准） | 做多页面、需要读取本地文件时 |
| 在线编辑器 | 在网页端代码编辑器里直接预览 | 不想在电脑上装任何东西 |
看到页面之后，做第一轮快速自检：内容对不对、有没有缺块、手机上打开是否变形。把浏览器窗口拖窄，就能粗略模拟手机宽度。这一步只做「有没有」，不做「美不美」，美不美放到第三步。
第三步：改样式，别只说「再改改」
改样式是最容易把人劝退的环节。很多人改着改着就烦了，因为一句话——「感觉不对，再改改」——对 AI 来说等于没说。它只能随机换一个方向，于是你越改越乱。
有效的样式反馈，必须包含三件事：定位（哪里）、问题（怎么不对）、方向（想变成什么样）。这三样凑齐，AI 一次就能改准。
现在改一个地方，其他部分保持不动：
【定位】4 个作品卡片之间的间距
【问题】现在太挤了，卡片挨在一起，看着很压抑
【方向】卡片之间的间距加大到大约 24px，卡片本身也加一点内边距，
让文字不贴着边框。整体保持现在的深色紫调不变。
改完请单独列一个「本次改动清单」，一行一条，说明你动了哪个部分。
不要把整个文件重新贴一遍，只给我改动涉及的代码片段。
最后那句「只给改动片段」，是为了让你能清楚知道到底改了什么。否则 AI 每次重发整个文件，你根本不知道它偷偷动了哪里，出了问题也回溯不了。
不要一口气提十个修改点——「标题大一点、颜色淡一点、按钮圆一点、间距松一点、再加个动画」。信息一多，AI 很容易顾此失彼，甚至改出新的问题。
正确做法是一次只改一个维度（比如「间距」），确认满意了，再改下一个（比如「颜色」）。慢一点，但每一步都可控，总体反而更快。
第四步：卡在报错上怎么办
就算是最简单的网页，也可能遇到问题：图片不显示、按钮没反应、页面一半是空白的。这些都不是「你不会编程」的证据，而是链路里的正常一环。关键是别自己瞎猜，把信息原样交给 AI。
网页的报错通常藏在两个地方：一是浏览器里按 F12 打开的控制台（Console），红字就是错误信息；二是页面肉眼可见的异常表现（某个区域空白、样式错位）。把这两样告诉 AI 就够了。
页面出问题了，帮我定位并修复。 【现象】4 个作品卡片里，只有第 1 个能显示图片，后面 3 个都是空白框。 【控制台报错】（我把 Console 里的红字原样粘贴在下面） [粘贴浏览器 F12 控制台里的报错原文] 【相关代码】（这是我文件里管图片那一段，原样粘贴） [粘贴你认为相关的那几行] 请做三件事： 1. 先说明「最可能的原因」是什么，用人话讲，不要堆术语 2. 给出修复后的完整片段（只给要替换的那部分） 3. 告诉我改完怎么自己验证它真的好了 如果你判断信息不够，先问我 1 个问题再动手。
「让 AI 说明原因」这一步很重要。你不只是要它修好，而是要慢慢建立自己的判断力。同一个坑踩两次还算学习，踩五次就是没吸取教训。
「它说有个什么缺少的元素」这种转述几乎没有价值。报错信息里往往藏着精确的文件名、行号、变量名，转述一次全部丢失。
直接复制粘贴原文，哪怕你觉得它看起来像天书。AI 看得懂，而且原文越完整，它定位越准。
第五步：部署上线，把链接发出去
本地能看到，只是第一步。真正让别人也能打开，需要把它部署到网上。静态网页的部署门槛很低：把你的 .html 文件（以及图片等资源）上传到一个静态托管服务，它会给你一个公开网址。
常见的做法有几类：面向开发者的静态托管平台、对象存储服务、以及网站建设工具。它们各有免费额度和限制，具体怎么操作、免费额度怎么算、命令怎么敲，以各平台官方最新文档为准，这里不写死具体命令——这些平台的界面和流程更新很快，照抄旧教程很容易踩空。
最简单的验证方式是：部署完之后，用手机流量（不连家里 WiFi）打开那个网址。如果能正常显示，说明是真正的线上部署，不是只在你电脑上跑着。
整理文件
把所有要用的文件放在同一个文件夹里，主文件命名为 index.html，这是大多数托管平台默认的入口页。
选一个托管平台注册
按官方文档走一遍上传或连接流程。第一次建议用最简单的「直接拖拽上传」方式，先跑通再说。
拿到公开网址并验证
平台会给你一个网址。用手机流量打开，确认不是只在本机可见。有问题就把现象告诉 AI。
以后改内容怎么更新
回到本地改文件，重新上传，或按平台方式同步。养成「本地留一份、线上放一份」的习惯，改坏了能退回。
做网页这件事，真正的门槛从来不是代码，而是你有没有走完一遍完整链路。走完一次，你就知道了「描述—预览—迭代—排错—上线」这条流水线长什么样；剩下的，只是在每个环节把话说得更准一点。
下一篇我们聊「Claude Code 实战」——当你想改的不再是一个小网页，而是有一堆文件、需要重构的真项目时，怎么用终端里的 AI 把活干稳、干完还能回退。