从零用 AI 搭建个人网站：需求访谈、提示词迭代与上线检查

想做一个个人主页、项目作品集或简历展示网站，却暂时不会前端？与其对 AI 说一句“帮我做个好看的网站”，不如把它当成产品经理、设计师和前端助手，按阶段协作。

这篇文章分享一条适合初学者完成第一版原型的路线：需求访谈 → 小型需求文档 → 单文件页面 → 逐项修改 → 本地验收 → 免费托管。文中的提示词可以直接复制使用。

适用范围： 本文重点是零基础快速验证页面想法。index.html 单文件方案易于入门，但不一定适合长期维护、多页面博客或大量作品。实际内容增多后，可以考虑 Astro 等静态站点框架。这里的示例仅演示方法，不代表某个网站已经上线。

一、先选对起步方案

对第一个网站，最容易控制复杂度的方案是：

不要第一轮就要求登录、评论、数据库、管理后台、支付系统等。它们会让原型复杂度和安全要求陡增。

如果网站只是求职用的作品集，优先保证：访客能在很短的时间内看懂你是谁、做了什么、项目链接在哪里。

二、第一轮提示词：让 AI 先采访你

写代码之前，让 AI 帮你梳理需求，比反复推翻页面更省事。

可复制提示词 ①：需求调研

你是一名产品经理兼前端工程师。我想制作一个个人网站，
用于展示个人介绍、技术项目和兴趣，但目前只掌握很少的前端知识。

这一轮不要写代码。请先问我 10 个关键问题，覆盖：
1. 网站主要目标（求职、作品集、博客或综合主页）
2. 目标访客
3. 首屏最希望传达的信息
4. 必要页面和内容模块
5. 作品类型、数量和资料是否齐备
6. 视觉风格与参考网站
7. 需要的交互功能
8. 电脑和手机端的展示要求
9. 域名、托管、预算与维护方式
10. 隐私、联系渠道和发布计划

每个问题提供简短、互不重叠的选项，也允许自由补充。
我回答之后，再整理成《网站需求文档 v1.0》，包括：
目标、受众、内容结构、视觉方向、技术约束、
验收标准、尚未确定的问题。
不要擅自补齐我没有提供的个人经历、项目成绩和联系方式。

得到的产物应是一份可核对的需求文档，而非立即生成的代码。尤其检查“哪些内容还没有素材”：例如头像、项目截图、GitHub 链接、邮箱，这些都应标注待补充。

三、第二轮提示词：制作能打开的页面原型

有了需求之后，再让 AI 生成第一版网页。下面以单文件 HTML 作品集为例。

可复制提示词 ②：完整页面

根据已确认的《网站需求文档 v1.0》，制作个人网站第一版。

技术要求：
- 只生成一个完整的 index.html，CSS 与 JavaScript 内嵌。
- 不使用 React、Vue 或必须先安装依赖的构建工具。
- 不接入需要密钥的第三方 API。
- 保存为 index.html 后，能直接在现代浏览器打开。
- 如需图片，用清晰的占位样式，并说明替换位置。

页面模块：
1. 顶部导航：作品 / 关于 / 联系
2. 首屏：一句定位清楚的自我介绍与“查看作品”入口
3. 作品区：最多 6 张卡片，包含封面、名称、简介、技术标签和项目链接
4. 关于区：头像占位、介绍、技能标签
5. 联系区：公开邮箱或社交链接的占位
6. 页脚：版权与返回顶部入口

视觉要求：
- 使用与需求文档一致的设计风格；
- 统一颜色、字号、间距、卡片圆角与悬停效果；
- 手机单列、平板两列、桌面最多三列；
- 动画轻量，并尊重 prefers-reduced-motion。

交互要求：
- 可用的作品分类筛选、平滑定位与移动端导航；
- 使用键盘能够操作主要按钮，图像提供 alt；
- 外部链接和按钮行为真实，不要做“看起来能点击”的假交互。

输出：
A. 简述页面结构与关键实现选择；
B. 完整 index.html 代码，不要省略中间部分；
C. 本地打开、替换内容及逐项验收步骤；
D. 明确说明无法仅靠双击 file:// 页面验证的功能。
如需求有冲突，先指出冲突，不要擅自修改目标。

一个重要技巧： 将“技术限制”和“验收条件”写进提示词，比只要求“设计高级、动效酷炫”更有效。上面的深色、霓虹、彩色等风格都只是选项，不必固定成某一种审美。

四、第三轮提示词：一次只改一件事

第一版能打开以后，不要每次都让 AI “重新做一个”。明确限定修改区域、预期效果和不能改变的部分。

可复制提示词 ③：卡片微调

基于现有 index.html，只修改“作品展示区”。
修改目标：
- 作品卡片增加轻微的图片悬停缩放效果；
- 技术标签显示在标题下方；
- 手机端仍为单列，不出现横向滚动条。

约束：
- 不更改导航、关于、联系与页脚；
- 保持已有的数据字段和外部链接；
- 不引入额外依赖；
- 不编造新的项目名称或成果。

先说明准备改哪几处，再给出修改后的完整代码，
最后列出我应在电脑和手机宽度下检查的 5 个项目。

可复制提示词 ④：修复手机菜单

现在只修复移动端导航。
当前问题：[粘贴实际问题或控制台错误]
期望行为：打开、关闭、点击链接后自动收起；支持键盘操作。
请解释可能原因，给出最小修改，不重构其他模块。
同时说明如何验证 375px、768px 和桌面宽度的结果。

可复制提示词 ⑤：将内容与页面结构分开

请保持现有网页视觉和交互不变，
把作品卡片使用的标题、简介、分类、图片路径、
技术标签、项目地址集中放到一个清晰的 JS 数据数组中。
使用语义明确的字段名，并给出一条示例数据。
不要添加虚构作品；真实链接不明确时使用标注清楚的占位值。

如果 AI 输出被截断，不建议盲目拼接片段。先要求它确认上一段输出截止的函数或标签，再补全缺失部分；最后用浏览器打开完整文件验证语法。

五、调试：把报错翻译成可执行的问题

页面白屏、图片失效、按钮无响应时，先收集信息，不必猜原因。

可复制提示词 ⑥：定点排障

我在本地打开 index.html 时遇到问题。

复现步骤：[步骤]
实际表现：[截图或文字描述]
期望表现：[结果]
浏览器控制台报错：[复制原文]
相关代码：[只粘贴对应模块]

请先判断最可能的原因，按可能性排序；
再提供最小修复方式，并告诉我如何确认问题已解决。
不要删除已有功能，也不要为解决小问题重写整页。

浏览器中按 F12 打开开发者工具，重点查看 Console 报错与 Network 中加载失败的资源。注意：file:// 环境与托管后的 https:// 环境不同，某些请求或路由需要在本地静态服务器中测试。

六、发布之前，先做一轮验收

• □ 首页、作品、关于、联系都有真实内容或明确占位。
• □ 不存在“点击无反应”的按钮、# 假链接或错误跳转。
• □ 手机宽度没有横向滚动，导航展开与关闭正常。
• □ 图片是项目允许公开的素材，路径正确且有合适的 alt。
• □ 文字对比度足够、主要按钮有焦点状态、纯键盘可以访问导航。
• □ 联系方式、仓库链接和项目说明均已核对。
• □ 文件中没有 API 密钥、密码、私人日志或不宜公开的个人信息。
• □ 浏览器控制台没有阻碍使用的异常。
• □ 部署后在正式网址重新检查样式、图片、链接与移动端。

对于作品展示，最重要的不是页面多炫，而是技术栈、职责、成果与局限都能经得起追问。项目中仍未完成的功能要如实注明。

七、如何免费部署静态页面

方式 A：拖拽部署（适合首次体验）

静态网页可以用 Netlify Drop 一类服务进行拖拽部署。一般流程是：

1. 准备包含 index.html 和本地资源的完整文件夹。
2. 在服务商提供的静态站点上传页面中选择文件夹。
3. 等待托管平台完成部署，打开生成的公开链接。
4. 使用手机检查页面、图片及外部链接；如果修改网页，再按平台提供的更新方式重新发布。

注意： 服务商界面、免费额度和域名功能可能调整；正式操作前以平台当时页面为准。

方式 B：Git 仓库托管（更适合长期维护）

GitHub Pages、Cloudflare Pages 等静态网站托管方案适合需要版本记录和持续更新的站点。典型流程是：将项目提交到 Git 仓库 → 连接托管服务或配置静态站点 → 确认发布目录 → 部署 → 检查正式链接。私有仓库与构建支持以所选服务商规则为准。

如果未来的博客需要多篇文章、统一布局、标签和内容管理，就可以在原型验证后迁移到 Astro 之类的静态站点工具。单文件 HTML 是入门方案，不是所有网站的最终架构。

八、AI 建站最容易踩的五个坑

结语

用 AI 做网站的核心，不是一次生成多少行代码，而是把模糊想法变成可验证的小任务。先做出可用的一版，再逐步改善设计、内容与维护方式，远比一开始追求“功能齐全”更容易获得稳定结果。

相关关键词： AI 辅助开发、提示词工程、个人作品集、HTML、静态部署。

编辑说明：本文按照 2026-10-09 作为博客发布日期整理；2026-10-24 对 Markdown 结构、可访问性、隐私提醒及部署边界进行了补充。本文是方法与提示词分享，不表示所有示例步骤都已在该日期实际部署成功。