用 AI 做一个可以正式上线的个人网站
从一个模糊想法开始，和 AI 一起完成一个真实、可访问、可以持续更新的个人网站。
a better you
with AI.
用 AI 构建真正有用的东西。
a better
you with AI.
最终你会得到什么？
一个专注于 AI 和创造力的开发者。
开工前准备
开始创建项目
初始化 Next.js 项目
打开终端，运行以下命令：
npx create-next-app@latest my-website
cd my-website
npm run dev你应该看到类似下面的提示，并可以在浏览器访问 http://localhost:3000
▲ Next.js 14.2.0 − Local: http://localhost:3000 ✓ Ready in 2.3s
决定网站内容
先不要打开编辑器。把网站当成一个需要被阅读的项目，先写清楚它要为谁服务、希望访客做什么，以及哪些内容必须出现。
准备一段自我介绍、3 个项目、一个联系方式。素材不完整没关系，AI 可以帮你整理，但不能替你发明经历。
让 AI 整理需求
把零散信息交给 AI，让它先做编辑，而不是直接做开发。要求它把受众、页面和内容优先级整理成一页 brief。
我想做一个个人网站。请先作为编辑帮我整理需求，不要写代码。请输出：目标访客、网站目的、内容结构、页面清单、每页需要的素材，以及还需要我补充的问题。确定视觉方向
选择一个你愿意长期维护的视觉方向。Editorial、Minimal、Portfolio、Developer 都可以，关键是让字体、留白、图片和语气彼此一致。
本项目使用 Editorial / Minimal：白底、细线、大标题、项目编号、短批注。它让内容看起来像一本正在更新的工作手册。
创建项目
用 Next.js 建立基础项目，用 Tailwind 写布局，用 GitHub 保存每一个可以回退的版本。先让首页能打开，再逐步增加页面。
请根据这份网站 brief，给我一个最小但可运行的 Next.js 项目结构。先列出文件树和每个文件的职责，再开始写代码。不要加入暂时用不到的依赖。让 AI 开始开发
第一次开发请求要足够具体：给出页面结构、内容、视觉规则和验收标准。让 AI 一次只做一件可以检查的事，例如先完成首页，再完成导航。
每完成一部分就运行、截图、检查。你要像编辑一样看结果，而不是等到最后才发现方向错了。
精确修改，而不是反复重生成
“再好看一点”无法指导修改。指出具体的对象、问题和预期结果：标题太重、移动端目录占满屏幕、按钮文案不清楚。
把每次修改写进 Git commit。这样你能保留好的部分，也能快速撤销一次错误的尝试。
请只修改项目详情页的移动端目录：默认收起，点击后展开；不改变桌面端布局，不修改颜色、字体和正文内容。完成后说明改了哪些文件。自审核
上线前用真实设备宽度检查 375px、768px 和桌面端。确认链接能打开、文字没有溢出、图片有替代文本、表单有明确反馈。
再让 AI 做一次 SEO 与可访问性检查，但把它的建议当成清单，逐项验证。
请审核这个网站的移动端、SEO、可访问性和加载体验。按“发现的问题 / 影响 / 建议修改 / 验证方式”输出，不要直接重写代码。正式上线
把代码推到 GitHub，在 Vercel 导入仓库，绑定独立域名。上线后用无痕窗口访问首页、关于、项目和联系，再从手机网络打开一次。
网站上线不是终点。每一次新增项目，都是一次让它更有用的机会。
提示词包
从第一句需求到最后一次检查，复制这些 Prompt，替换成你的内容。
我想做一个个人网站。请先作为编辑帮我整理需求，不要写代码。请输出：目标访客、网站目的、内容结构、页面清单、每页需要的素材，以及还需要我补充的问题。根据这份 brief，设计一个简单、可扩展的个人网站信息架构。请说明导航、页面关系、每页的主要任务，以及移动端如何组织。为这个个人网站提出 3 个视觉方向：Editorial、Minimal、Portfolio。分别说明字体、留白、颜色、图片处理和适合的内容气质。不要使用渐变、玻璃拟态或大营销 Hero。请根据已经确认的 brief 和视觉方向，从首页开始实现。一次只完成首页和全局布局，保留真实内容，不要加入暂时用不到的依赖。请只修改项目详情页的移动端目录：默认收起，点击后展开；不改变桌面端布局，不修改颜色、字体和正文内容。完成后说明改了哪些文件。我会提供复现步骤和错误信息。请先解释根因，再提出最小修复方案；不要顺手重构其他文件。修复后告诉我如何验证。请审核这个网站的移动端布局，重点检查 375px 宽度、触控目标、横向溢出、目录和代码块。按问题、影响、修复、验证方式输出。请审核这个网站的 SEO：title、description、Open Graph、语义标题、站点地图、robots、页面 URL 和结构化内容。输出可执行清单，不要泛泛而谈。问题与踩坑
构建中最容易卡住的地方，提前写在这里。
AI 总是给出一套新的视觉＋
把视觉方向写成项目约束，每次请求都带上它；修改时只指定一个区域，不要让 AI 重新生成整页。
页面看起来像模板＋
换成真实素材：你的项目、你的过程、你的判断。减少无意义的标签和卡片，让内容顺序成为设计。
上线前不知道检查什么＋
用 375px、768px 和桌面端各走一遍导航；再从无痕窗口与手机网络各访问一次。把问题记录下来，按影响排序。