用 AI 做网站：从一句话到能上线的页面

💡 一句话总结：用 AI 编码代理做网站 —— 一句话定需求、一张结构清单、一套能上线的静态页面文件。

搜「AI 做网站」，出来的要么是建站平台广告，要么是「30 天学会 HTML」的课程表。这一课走中间那条路，也是零基础建站最短的路：不学语法、不买服务器，用 AI 编码代理把一句话想法变成一文件夹能直接上线的静态页面——个人主页、作品集、活动落地页、内容站都适用。

这是场景实战 A 路线（做网站）的第 1 课。本课只管「把页面做出来」：一句话 → 三行需求 → 结构清单 → 静态文件 → 验收；「发到公网上」是 A2–A4 三课的事。

• 提示词总写不清楚？先回 3.2 提示词写法 看怎么把需求写具体
• 还没选定路线？回 4.0 场景实战：选你的路线

学完你能做什么

• 把「帮我做个网站」拆成 AI 接得住的三行需求：给谁看、看完做什么、必须有哪些内容
• 用「页面结构法」先拿到一张「页面 × 区块」清单，确认后再让 AI 动手——不再收到一张千篇一律的模板脸
• 让 AI 编码代理把 index.html、style.css、script.js 整套静态文件写进你的文件夹，双击就能在浏览器打开
• 说得出静态网站是什么、为什么不用买服务器，并在 GitHub Pages、Cloudflare Pages、Vercel 三家里选定自己的上线平台

为什么用 AI 编码代理，而不是网页版 AI？

两边都能让 AI 写网页，差别在写完之后谁替你收尾：

能力	网页版 AI（聊天框复制粘贴）	AI 编码代理（本课程四款工具）
产出形态	❌ 代码贴在聊天里，自己建文件、起文件名另存	✅ 直接在你的文件夹里生成 index.html、style.css 整套文件
多页面网站	❌ 一次聊一页，文件多了就对不上号	✅ 按结构清单一次生成多页，页面间链接互相对应
改版迭代	❌ 每次都要把整段代码重新贴一遍	✅ 说「把头图换掉」，它自己找到对应文件改
衔接上线	❌ 写完还得自己想怎么传上去	✅ 生成的文件夹就是可部署产物，直接进 A2–A4 上线课

四款工具在这一课干的是同一件事：把文件直接写进你指定的文件夹。还没装好工具的，回 1.5 安装 Claude Code；完全不想碰命令行，看 1.5b 安装备用方式 里的 WorkBuddy 桌面版。

你现在的困境

• 「想做个人主页好几年了，一搜教程全是 HTML/CSS 入门课，光环境配置就把我劝退」
• 「让网页版 AI 写过一页，代码复制出来存成文件，打开不是图片不显示就是样式全乱，还不知道错在哪」
• 「页面写出来了，然后呢？听说要买服务器、装环境、折腾域名，直接搁置了」

什么时候用这一招

当你需要：

• 一个发链接谁都能看的门面：个人主页、作品集、活动落地页、内容站
• 本周末就见到能访问的页面，而且免费上线
• 页面以展示为主：作品、介绍、联系方式

而且不想：

• 先系统学前端三件套再动手
• 手工建文件、管代码、查漏字
• 一上来就研究服务器、数据库、运维

访客要留言、下单、注册账号？这类动态功能第一版先不做——原因和出路在下面「踩坑提醒」第 2 条。

🎒 开始前的准备

• 走完 4.0 场景实战：选你的路线，确定走 A 网站路线
• 至少一款工具能完整跑一轮对话——没装好回 1.5 安装 Claude Code，完全不想碰命令行看 1.5b 安装备用方式
• 一句真实想法（例如「做一个展示我摄影作品的个人主页」）——真实目标比「练手项目」撑得久
• 一个空文件夹，AI 会把网站文件写在这里
• 一杯水 ☕

跟我做

五步走完，你的文件夹里就有一套能上线的页面。示例统一用「摄影作品集个人主页」，你换成自己的题材照做即可。

第 1 步：把一句话想法变成三行需求

为什么：「帮我做个网站」是 AI 最接不住的需求——目标越具体，AI 越能一次写对，这个道理在 3.2 提示词写法 讲过。先自己回答三个问题，再谈代码。

拿出你的一句话，补齐三行（摄影作品集示例）：

做一个摄影作品集网站。
给谁看：想找我约拍的客户，还有朋友圈里好奇我拍什么的人。
看完做什么：浏览作品、感受拍摄风格，然后扫码加我微信约拍。
必须有：首页头图、作品分 3 组展示、关于我、联系方式。

你应该看到：三行需求，每行一个明确信息——这就是后面所有 Prompt 的「输入信息」，也是验收时的对照标准。

第 2 步：让 AI 先出页面结构清单

为什么：先规划再动手是 vibe coding 的第一条纪律（3.1 先规划再动手）。结构没确认就开写，AI 写偏了你只能整页重来；先拿清单，返工最少。

把三行需求发给 AI，明确说「先别写代码」：

按下面的需求，为一个摄影作品集网站规划页面结构。先别写代码。

需求：给想约拍的客户看，看完能浏览作品、感受风格，并加微信约拍。
必须有：首页头图、作品分 3 组展示、关于我、联系方式。

输出：
1. 建议做几个页面，每个页面的文件名
2. 每个页面从上到下有哪几个区块，每个区块放什么内容
3. 用一张表格列出

你应该看到：AI 输出一张「页面 × 区块」清单，例如 index.html：导航 / 头图 / 作品区（分 3 组）/ 关于我 / 联系方式。逐行看一遍：多余的区块删掉，缺的补上，确认到每个区块你都认得。

💡 这就是「页面结构法」

先要结构、再要代码，两次提问分开。这张清单是你和 AI 之间的施工图：后面生成、验收、改版都对着它做，AI 也不会写着写着把「联系方式」弄丢。

第 3 步：让 AI 生成静态网站文件

为什么：你要上线的是静态网站。静态网站是什么？一句话：由 HTML、CSS、JavaScript 文件组成、浏览器直接加载的网站——GitHub Pages 官方定义就是「从仓库里直接取 HTML、CSS、JavaScript 文件，发布成网站」。

它不需要服务器跑程序，所以 AI 写出的纯文件就能上线。

结构清单确认无误后，对 AI 说：

按刚才确认的结构生成网站文件，写到当前文件夹：
- index.html 是首页，区块顺序按结构清单来
- 样式写在 style.css，交互脚本写在 script.js
- 作品图片先用占位图，统一放 images/ 文件夹
- 纯 HTML/CSS/JS，不要用需要构建步骤的框架

你应该看到：文件夹里多出 index.html、style.css、script.js 和 images/ 文件夹；结构清单里有多个页面时，还会多出 about.html 这类页面文件。

💡 这就是 AI 编码代理的独有价值

不是「给你看一段代码」，而是「替你把文件写好」：清单上的每个区块都落进真实文件，你全程没碰编辑器。四款工具都做得到——WorkBuddy 也把「本地文件操作」列为核心能力。

第 4 步：浏览器里验收，把意见喂回去

为什么：AI 写的页面必须自己打开看过再谈上线——3.4 验收检查 的纪律，对只有三个文件的网站同样适用。

在文件夹里双击 index.html（或把文件拖进浏览器窗口），对照结构清单逐块检查。

你应该看到：浏览器打开你的页面，头图、作品区、关于我、联系方式从上到下都在，窗口拉窄也不乱。

不满意的直接喂回去，像提修改意见一样说人话：

页面整体不错，改三处：
1. 头图太高，首屏就要能看到作品区的标题
2. 作品卡片改成一行 3 个
3. 联系方式区加一张微信二维码占位图

你应该看到：AI 只改对应的文件；回到浏览器刷新，就是新版本。反复两三轮，直到你自己愿意把这个链接发给别人。

第 5 步：选定托管平台，走完 AI 做网站最后一步

为什么：静态网站不用你买服务器——托管平台负责把文件发布到公网，三家都有免费档。选哪家，取决于你想怎么把文件夹交上去。

平台	怎么上线	适合谁
A2 GitHub Pages	网页上建个仓库、点几下设置就发布，网址是 username.github.io	想顺便有个 GitHub 仓库的
A3 Cloudflare Pages	浏览器里拖入文件夹或 zip，得到 项目名.pages.dev 网址	连仓库都不想建、拖完就完事的
A4 Vercel	项目文件夹里一条命令 vercel --prod 部署	用 AI 编码代理、想一条命令上线的

三家免费档的额度、限制和选择建议，A5 部署平台对比 一页看全。一句提醒：Cloudflare 官方文档已建议新项目从 Workers 起步，但对小白来说 Pages 的拖拽上传仍是最直接的上线路径，A3 会讲。

你应该看到：你选定了平台。下一课从 A2 GitHub Pages 开始——网页向导全程不用命令行，还能顺手拥有你的第一个 GitHub 仓库。

📋 魔法 Prompt

「跟我做」里的指令是示例，下面三个是给你反复用的模板：换题材、换风格，只改【】里的内容。三个 Prompt 顺序使用：1 出结构 → 2 出文件 → 3 上线前自查。

📋 Prompt 1：一句话 → 页面结构清单

预期效果：输入一句话想法，得到一张「页面 × 区块」结构表——先规划，不写码。

## 角色
你是资深网站策划，擅长把模糊想法拆成清晰的页面结构。
## 任务
把我的网站想法规划成页面结构清单。先别写任何代码。
## 输入信息
### 必填项
- 网站主题：【一句话，例如「摄影作品集个人主页」】
- 给谁看：【目标访客，越具体越好】
- 看完做什么：【最希望访客完成的动作】
### 选填项
- 必须有的内容：【点名要出现的栏目或信息?】
- 风格感觉：【两个词，例如「极简、安静」?】
## 输出规范
一张表格：页面文件名 | 区块（从上到下） | 每个区块放什么内容。页面总数不超过 5 个。
## 约束条件
- ✅ 每个区块都服务于「给谁看 / 看完做什么」里的目标
- ✅ 文件名用英文小写，首页固定 index.html
- ❌ 不输出任何代码
- ❌ 不建议需要数据库或服务器的功能

📝 Prompt 2：按结构生成静态网站文件

预期效果：把确认过的结构清单变成一整套双击就能看、拖出去就能上线的 HTML/CSS/JS 文件。

## 角色
你是前端工程师，擅长手写语义清晰、零依赖的静态页面。
## 任务
按结构清单生成网站全部文件，写到当前文件夹。
## 输入信息
### 必填项
- 结构清单：【粘贴 Prompt 1 确认后的表格】
- 网站主题与风格：【一句话】
### 选填项
- 配色：【主色，例如「墨绿」?】
- 字体感觉：【例如「无衬线、大标题」?】
## 输出规范
index.html（及其他页面）、style.css、script.js；图片用占位图放 images/ 文件夹；页面间链接互相对应。
## 约束条件
- ✅ 纯 HTML/CSS/JS，双击 index.html 就能看
- ✅ index.html 放在文件夹最外层——GitHub Pages 找它当入口文件
- ✅ 窄屏（手机宽度）下区块自动堆叠，不横向溢出
- ❌ 不用构建工具、框架、包管理器
- ❌ 不写需要服务器才能跑的功能

✅ Prompt 3：上线前自查

预期效果：把文件夹交给 AI 做一遍质检，避免传上去才发现链接是断的。

## 角色
你是上线前质检员，只找问题，不做改版。
## 任务
检查当前文件夹里的静态网站，报告上线前必须修的问题。
## 输入信息
### 必填项
- 页面清单：【例如 index.html、about.html】
## 输出规范
按严重程度列出问题：页面间链接对不上 / 图片路径错 / 引用的文件不存在 / index.html 不在最外层。每个问题给出所在文件和一句修法。
## 约束条件
- ✅ 逐个文件核对
- ✅ 只报告真实存在的问题
- ❌ 不顺手改设计、不调整文案
- ❌ 不新增页面或功能

检查点 ✅

• 三行需求写好了：给谁看 / 看完做什么 / 必须有哪些内容
• 拿到并确认过「页面 × 区块」结构清单，每个区块都知道放什么
• 文件夹最外层有 index.html，双击能在浏览器打开
• 对照结构清单逐块验收过，修改意见都喂回去了
• 选定了上线平台，知道下一课进哪一篇

踩坑提醒

❌ 上来就说「帮我做个网站」

现象：AI 丢回一整段模板味十足的 HTML，改起来无从下手，越改越乱。

原因：没有结构清单，AI 只能按「最常见的网站」去猜你的需求。

正确做法：两次提问分开——先用 Prompt 1 要结构，确认后再用 Prompt 2 要文件。「一句话直接出网站」省下的五分钟，会在改版时加倍还回来。

❌ 第一版就想做登录、评论、在线支付

现象：表单看着能用，访客提交的数据却没地方存；想做注册、登录更是无从谈起。

原因：静态网站没有服务器程序。GitHub Pages 官方明确不支持 PHP、Ruby、Python 这类服务器端语言——这是平台边界，不是 AI 能力问题。

正确做法：第一版做纯静态——展示作品、写清联系方式，一样能达成「约拍」目标。确需动态功能，两条路：选 Vercel 或 Cloudflare Pages 并了解它们的平台函数（A5 部署平台对比）；或看下面「进阶技巧」里 WorkBuddy 的网站应用。

❌ 免费档当成商业站用，或以为仓库私有就没人看得见

现象：页面挂上广告开始接单，或把不想公开的内容直接传了上去。

原因：Vercel Hobby（免费）计划仅限个人非商业用途；GitHub Pages 免费档要求仓库公开，而且站点内容公网可见——仓库设成私有也一样。

正确做法：要收钱的页面别放 Vercel 免费档；介意内容公开，上线前就想清楚放什么。三家的免费条件在 A5 部署平台对比 逐条列着，选平台前看一遍。

进阶技巧（可选）

🚀 想要留言、预约这类动态功能？（可选）

静态 ≠ 只能做死页面。两条进阶路：

• 平台函数：Cloudflare Pages Functions、Vercel 都支持在不自己管服务器的前提下跑服务端代码——适合在 A 路线内解决小动态需求，怎么选看 A5
• WorkBuddy 的「网站应用」发布：AI 生成网站、按需接入云数据库、身份认证、文件存储，官方说明「无需自行购买服务器，也不用配置部署和日常运维」，点分享按钮或对 AI 说「发布/上线」即可发布——适合完全不想碰部署的人，用法见 2.4 WorkBuddy 用法

🚀 页面不止一个，或想用框架？（可选）

• 结构清单里规划多页：让 AI 在 Prompt 1 的输出里列出 about.html、works.html 这类页面文件名，Prompt 2 会一次生成，导航互相对应
• 想上 VitePress 这类框架：三家托管平台都支持自动构建——但那是 A5 之后的事，第一站先用手写静态文件跑通全流程，你会清楚得多

本课小结

✅ 你走完了用 AI 做网站的「做」这一半：

• 一句话 → 三行需求：给谁看 / 看完做什么 / 必须有哪些内容
• 三行需求 → 结构清单：先要结构再要代码，文件名英文小写、首页 index.html
• 结构清单 → 静态文件：AI 编码代理直接写好 index.html、style.css、script.js
• 文件 → 验收：浏览器里逐块对照，意见原样喂回去
• 验收 → 选平台：GitHub Pages / Cloudflare Pages / Vercel，免费档各有条件

环节	你产出了什么	关键点
定需求	三行需求	给谁看 / 看完做什么 / 必须有哪些内容
定结构	「页面 × 区块」清单	先规划再写码，首页固定 index.html
生成	一文件夹静态文件	纯 HTML/CSS/JS，双击就能看
验收	看过并迭代过的页面	对照清单逐块查，不改设计只提意见
选平台	一个明确的上线选择	免费档条件各不同，A5 有全表

今天你用 AI 生成网站的全部文件，没写一行代码，也没买任何东西——「做」到这里就完成了。

下一课预告

下一课 A2 GitHub Pages 上线：免费静态网站托管，把文件夹变成公网能访问的网址。你会学到：

• 建一个叫 username.github.io 的仓库，网页上点几下就发布
• Settings → Pages 里选发布分支，入口文件为什么必须放在发布目录顶层
• 推送之后最多要等 10 分钟，站点迟迟不更新时去哪查原因
• 免费档要求仓库公开，这对你的内容意味着什么

准备好了就把文件夹放在手边，进 A2 →