用 AI 做一个网页：从需求描述到上线

结论先说：用 AI 做一个展示型网页（个人主页、活动介绍、作品集）已经不需要会写代码，但你需要会做三件事：把需求写清楚、每次只改一处并检查结果、上线前按清单验收。本文用一个“读书会活动介绍页”走完从需求到上线的全过程。

阅读前提

本文假设你已经装好编辑器、Git 和一个 AI 编程工具，并完成过一次小练习。还没准备好的话，先看 AI 编程工具入门：开始使用前需要准备什么。

阶段	产出	你要亲自做的
1. 写需求	一份需求说明文件	决定内容和取舍
2. 生成第一版	能在浏览器打开的页面	确认 AI 的计划
3. 逐项修改	内容、样式、交互完善	每次修改后在浏览器检查
4. 上线前检查	通过检查清单	手机、链接、隐私信息
5. 发布上线	一个可访问的网址	选择托管方式、绑定域名

1. 准备：选工具和素材

工具怎么选

你的情况	建议
完全不会代码，希望 AI 包办	用能直接读写文件、运行命令的编程代理，如 Claude Code、Codex
想在图形界面里看着代码改	用内置 AI 的编辑器，如 Cursor
只想先看看效果	在 ChatGPT 或 Claude 对话里让它生成单个 HTML 文件，复制保存后打开

本文以编程代理为例，在编辑器中操作的步骤基本相同。

提前准备好素材

AI 可以写代码，但写不出你的真实内容。开工前准备：

• 文字：活动名称、时间、地点、介绍、报名方式，写成纯文本即可；
• 图片：封面图、照片，放进项目的 images 文件夹（需要配图可以看 用 AI 生成博客配图）；
• 参考：一两个你觉得好看的网站，记下喜欢它哪里（配色、排版、留白）。

2. 第一步：写需求说明

新建项目文件夹并初始化 Git，然后在文件夹里新建一个 需求.md，写下：

# 读书会活动介绍页 需求

## 目标
让第一次看到的人在 30 秒内知道：这是什么活动、什么时候、在哪里、怎么报名。

## 页面结构（单页，从上到下）
1. 顶部：活动名称、一句话介绍、“立即报名”按钮（点击跳到报名区）
2. 本期书目：书名、作者、封面图、三行推荐理由
3. 活动安排：时间、地点、流程（表格或时间线）
4. 往期回顾：3 张照片，图片在 images 文件夹
5. 报名方式：说明文字 + 一个外部报名表链接（链接我稍后提供）
6. 页脚：联系邮箱占位、版权年份

## 风格
温暖、安静，米白色背景，深棕色文字，留白多；中文字体使用系统默认字体。

## 技术限制
- 只用 HTML、CSS，必要时少量原生 JavaScript，不使用框架和构建工具；
- 手机和电脑都能正常显示；
- 不引用需要付费或注册的外部服务。

## 验收标准
- 双击 index.html 能在浏览器直接打开；
- 手机宽度下没有横向滚动条；
- 所有图片有替代文字。

为什么要写成文件：AI 每次都能重新读取它，对话中断或换工具时也不用重新描述；后续修改需求时，改这个文件即可。

3. 第二步：生成第一版

在项目文件夹中启动编程代理，输入：

请阅读 需求.md，按要求生成这个网页。
1. 先列出你打算创建的文件和页面结构，等我确认后再写代码；
2. 文字内容先用我在需求里提供的，缺少的部分用明显的占位文字，例如【待补充：活动地点】；
3. 完成后告诉我怎么在浏览器中预览。

确认计划后让它执行。完成后：

1. 在浏览器中打开 index.html 看效果；
2. 运行 git diff 或 git status 看它创建了哪些文件；
3. 满意就提交一次：git add . 然后 git commit -m "第一版"。

4. 第三步：逐项修改

第一版通常有七成像样。修改时 每次只提一个具体要求，改完在浏览器刷新检查，满意就提交，不满意用 git restore . 回退重来。

修改提示词示例

想改的地方	提示词
排版	“活动安排部分改成竖向时间线，每个环节左边是时间、右边是内容。其他部分不要动。”
配色	“按钮颜色改成深绿色，鼠标悬停时稍微变深。只改按钮样式。”
内容	“把占位文字替换成下面的内容：[粘贴]。不要改样式。”
交互	“点击‘立即报名’时平滑滚动到报名区。”
手机显示	“在宽度 375 像素的手机上，往期回顾的三张图片改成纵向排列。”

描述问题时带上“在哪里、现在怎样、希望怎样”

“这里不好看”AI 很难理解；“手机上顶部标题换成了两行，‘立即报名’按钮被挤到屏幕外，希望按钮显示在标题下方”就能一次改对。截图也可以直接发给支持图片输入的工具。

怎么在电脑上检查手机效果

在浏览器中按 F12（Mac 上按 Command + Option + I）打开开发者工具，切换到设备模拟模式，选择一个手机尺寸查看。最终仍建议用真机打开一次。

5. 第四步：上线前检查

可以先让 AI 自查：

请按下面的清单检查当前项目，只报告问题，不要直接修改：
1. 所有图片是否有 alt 替代文字；
2. 是否有失效的内部链接或锚点；
3. 页面是否设置了 title、description 和 viewport；
4. 是否有未替换的占位文字（搜索“待补充”）；
5. 图片文件是否过大（超过 500KB 的列出来）；
6. 代码或注释里是否有个人手机号、住址、密钥等不应公开的信息。

然后自己逐项确认：

检查项	方法
文字内容	从头读一遍，日期、地点、链接是否正确
手机显示	真机打开，上下滑动、点每个按钮
外部链接	每个链接都点一次
图片	是否清晰、是否有使用权（照片中的人是否同意公开）
隐私	不公开个人手机号、住址；联系方式用专门的邮箱
加载速度	大图片先压缩，再让 AI 帮你改成合适的尺寸

6. 第五步：发布上线

做好的网页只是你电脑上的文件，要让别人访问，需要放到 静态网站托管服务 上。纯 HTML、CSS 的网页属于静态网站，托管门槛很低：

1. 选择托管方式：常见的是代码托管平台自带的静态页面功能，或专门的静态网站托管服务，很多提供免费额度。选择时看三点：是否支持绑定自己的域名、是否自动提供 HTTPS、在你的读者所在地区访问是否稳定。
2. 上传文件：多数服务支持直接上传文件夹，或连接 Git 仓库后每次提交自动更新。
3. 得到网址：发布成功后会有一个默认网址，先用手机和电脑分别打开测试。
4. （可选）绑定域名：在域名注册商处添加托管服务要求的 DNS 记录，具体记录类型以托管服务的说明为准。

以 GitHub 的静态页面功能为例，官方说明见 GitHub Pages 文档。具体操作步骤也可以直接问 AI：

我的网页是纯 HTML/CSS，已经提交到本地 Git 仓库。
请一步一步告诉我如何用 [你选择的托管方式] 发布，
每一步说明在哪个页面操作、需要填什么，遇到需要我登录或付费的步骤先停下来告诉我。

发布前确认内容合规

公开网页的内容需要符合托管服务条款和所在地法律法规。在中国大陆境内使用服务器托管网站，通常还涉及备案要求，请以主管部门和服务商的说明为准。

7. 常见错误

错误	后果	改进
一句话“帮我做个好看的网站”	结果随机，反复推倒重来	先写需求说明文件
一次提五六个修改	改坏一处很难定位	每次一个修改，改完提交
不看改动直接继续	AI 悄悄删掉了之前的内容	每次用 git diff 看一眼
让 AI 引入框架、构建工具	项目变复杂，新手无法维护	在需求里写明“只用 HTML/CSS”
只在电脑上看效果	手机上排版错乱	用开发者工具和真机检查
把含个人信息的文件一起上传	隐私泄露	上线前检查清单第 6 项
工具一直报网络错误	命令行没有走代理	见 浏览器能访问，为什么应用程序连接失败

相关阅读

• AI 编程工具入门：开始使用前需要准备什么
• 用 AI 读懂和修改已有项目代码
• Claude Code 入门教程：安装、登录与第一个任务
• 用 AI 生成博客配图：尺寸、风格与版权
• AI 工具报错或无法访问怎么排查