不追求一步生成完整平台，而是用一个真实的小项目，走完需求、页面、验证、上线和回滚的完整闭环。
第一个 AI 网站的目标，不是证明 AI 能一次写完多少代码，而是让你亲手完成一个可访问、可检查、出错后能恢复的小项目。本文以“个人服务介绍页”为例：访客可以了解你提供什么服务，并通过一个联系按钮发起沟通。你不需要编程基础，但需要会管理文件、使用浏览器，并准备一个可验证邮箱的 GitHub 账号。
开始前：先把范围缩到一张纸
先不要打开生成工具。写下三句话：网站给谁看；访客最关心什么；访问结束前希望他完成什么动作。接着列一份“不做清单”：第一版不做登录、支付、会员、多语言、数据库和后台。MDN 的入门指南同样建议第一个网站从标题、图片和少量段落开始，并在编码前先明确内容、色彩和页面目的，可参考其网站规划说明。
准备一个独立文件夹，放入已确认的名称、服务说明、联系方式和一张有权使用的图片。没有确定的信息统一写成“待确认”，不要让模型补造价格、资质或客户案例。预期结果也要具体：桌面和手机都能阅读，导航能跳转，联系按钮去往正确地址，页面有公开网址。
第一步：让 AI 先复述需求，再生成文件
把任务写成结构化提示：目标用户、核心动作、页面区块、品牌色、禁止项、验收条件。先要求 AI 返回页面结构和不确定项，不要立刻写代码。确认后再让它生成三个文件：index.html、styles.css 和 script.js。如果页面没有交互，甚至可以暂时不需要 JavaScript。
请先复述你理解的页面目标，并列出仍需确认的问题。确认后再生成首页，包含简介、服务内容、常见问题和联系按钮；手机宽度下改为单列；不使用外部付费组件，不虚构案例。
HTML 负责内容结构，CSS 负责外观，JavaScript 负责交互。MDN 的HTML 入门教程解释了标题、段落、图片、列表和链接的基本结构。你不必立刻记住语法，但至少要能辨认哪个文件放内容、哪个文件控制样式。
第二步：一次只验收一类问题
双击 index.html 在浏览器打开。第一轮只查内容：名称、段落、联系信息是否真实，按钮是否真的打开目标地址。第二轮查布局：把窗口拖窄到手机宽度，确认没有横向滚动、文字没有被截断、按钮不重叠。第三轮查可用性：只用键盘的 Tab 键能否移动到链接，图片是否有准确的替代文字，文本和背景是否容易辨认。
每轮修改都让 AI 说明“改了哪些文件、为什么改、如何验证”。如果它一次改动十几个地方，要求拆小。每完成一个可运行状态就保存一个副本，或用 Git 提交一次。这样下一次改坏时，你恢复的是最近一版，而不是重新生成整个项目。
第三步：用 GitHub Pages 发布
GitHub Pages 适合这个不含数据库的静态小站。按照GitHub Pages 官方快速入门，创建名为 用户名.github.io 的仓库，上传网站文件，然后在仓库的 Settings → Pages 中选择从分支部署。发布不是瞬间完成，官方提示可能需要等待数分钟；看到网址后再用手机网络打开一次，避免只在自己电脑上“看起来正常”。
更新时先在本地打开并检查，再上传。若改完页面没变化，先确认文件已提交到实际发布分支，再等待部署任务完成，并用无痕窗口排除浏览器缓存。若只有样式丢失，检查 styles.css 的文件名大小写和 HTML 中的相对路径；线上服务器区分大小写，本地偶尔不报错。
上线前的安全与成本边界
静态页面不应包含密码、API 密钥、服务器地址、客户资料或任何你不愿公开的信息。联系表单如果需要保存数据，就已经涉及后端服务和隐私规则，不要把第三方密钥直接写进前端。GitHub Pages 本身可用于低成本入门，但域名、图片素材、表单服务和 AI 调用可能另行收费，使用前查看当前套餐。
最后做一次失败演练：保留上一版文件，确认能回退；点击所有链接；检查 404；换手机和电脑各看一次。完成这些，你得到的才不是一张偶然生成的截图，而是一套可以继续迭代的网站。
常见问题
完全不会代码，遇到报错怎么办？
把浏览器控制台中的完整错误、你刚做的操作和相关文件一并交给 AI，不要只说“坏了”。让它先解释原因，再给最小修改，并在修改后重复原来的验证步骤。
第一版能直接做登录和支付吗？
技术上可以，但不适合作为零基础第一个项目。登录、支付和个人信息会引入后端、安全、合规与退款流程，建议先完成公开静态页，再把动态功能作为独立阶段。
什么时候需要购买域名？
先用免费地址验证页面和内容。确认网站会长期使用、名称不会再改，再购买域名并按托管平台说明配置。域名不会自动让内容更专业，清晰信息和稳定访问更重要。