罗佳 
我用AI帮我做的个人网站终于上线了。
买域名花了1块钱，部署用的免费托管，所以个人网站花的成本就这1块钱。
这是网页的首屏，主视觉是一只深海中漂浮的水母。
它不是一个只有头像和简介的电子名片，而是一个真正能持续使用的内容站：目前放了 26 篇教程、127 条提示词，以及我正在维护的 Skill 项目。
原本如果要建一个网站，你需要设计，前端，测试，上线部署，SEO和GEO，维护，但现在你只需要把你的需求告诉 AI 就可以了。
个人网站我觉得不仅仅是AI时代一个对外展示自己的窗口，像简历一样，更重要的是它是一个非常好的练手项目，能让你立刻熟悉AI的使用方法，AI 的瓶颈和强大之处。
下面是我分享我在制作过程的一些经验。
一、准备工作。
首先你需要两个东西。
1、一个能操作本地文件的 AI 编程工具，例如 Codex 或 Claude Code，国产的也行。
2、你的资料。
如果你是设计师，那么你需要准备你的作品集。如果你是作家，你可以整理你写的文章。如果你是需要为了你的店铺甚至企业做一个网站，那么你可能得整理一下与你企业有关得一切，资料、产品等等。总之，这些整理得东西你可以放在电脑得一个文件夹中，这个文件夹就相当于我们的项目。
比如我的材料，放在我的知识库 RodyaVault文件夹中，都是现成的。
二、开干。
来源：rodya.top/articles/build-personal-website-with-ai · 罗佳 Rodya 原创
1、整体定位
首先，不要一上来就给AI说：帮我做一个高级的个人网站。
而且，先来理清你网站的定位，这个你肯定有你自己的想法，也有可能有想不到的地方，没关系，让AI打开你准备好的文件夹作为项目，然后把一切都告诉 AI。（如果不会请查看基础教程 基础全览与界面熟悉｜OpenAI Codex 边做边学 · 实用主义教程（01） ）
下面这个提示词你可以当作参考。
你现在是我的个人网站产品经理。
请先读取当前项目文件夹中的资料，但暂时不要写代码，也不要设计页面。
你的任务是把我的模糊想法整理成一份可以执行的网站定位说明。
请完成以下工作：1. 根据现有资料总结：我是谁、长期分享什么、最适合服务哪类人；2. 判断这个网站现阶段最应该完成的 1 个核心目标；3. 设计一个唯一的主要行动按钮，例如阅读文章、查看作品或联系我；4. 列出第一版必须做的内容，以及现在不应该做的功能；5. 提供 3 个一句话定位方案，每个方案说明优缺点；6. 标出资料中互相冲突、缺失或无法确认的信息，禁止自行编造。
请先向我提出最多 8 个真正影响定位的问题。我回答后，再生成\`PROJECT_BRIEF.md\`。
除非我明确确认 \`PROJECT_BRIEF.md\`，否则不要进入设计和开发。
我们也可以打开计划模式，然后直接告诉AI，我要建立网站就行。
现在的AI其实无需太长的提示词，干中学，干中改，做出成品再优化就最快的路径。
你需要做的就是上面你的AI对话框中需要注意的部分。打开你的文件夹作为项目，说出你的需求，打开计划模式，将模型跳到最大。
注意：在所有项目的初始规划阶段一定要用模型的最好最高档，等执行的时候再切换成中等模型。这样既能保证结果的全面，又能节省token。
2、视觉系统
上面的步骤结束后，想必等你看着电脑给你生成的方案，你可能已经心中有数该做些什么，每个人的需求不一样和AI聊完之后得到的东西也不一样。
下面我们要确定网站的视觉。再开始和AI聊之前，我们先来做些准备工作。
下载这个skill：taste-skill，这是一个GitHub上超过6万多星的项目，这个skill 的作用是给你的AI带来良好的品味和审美，可以帮助你你生成更有品质的网页。
https://github.com/leonxlnx/taste-skill
还有一些灵感网站，有的朋友不了解设计，所以自己也不知道生成什么网页，这时候你可以看看这些网站做一个参考。
https://motionsites.ai/
一个优化网页案例网站，如果看到中意的作品可以截图或者保存网址链接，发给AI参考。
https://reactbits.dev/animations/orbit-images
一个动效特效网站，如果看到比较喜欢的特效可以一件复制给AI，让它帮你实现。
如果你有了灵感或者自己的想法，都可以和AI直接交流。下面是一个参考提示词：
现在进入视觉原型阶段。
请先读取：- \`PROJECT_BRIEF.md\`- \`你的文件夹\`中的资料
只设计首页原型，不要铺完整网站。
我的视觉偏好是：- 整体气质：[例如：克制、安静、可信、略带科技感]- 喜欢的颜色：[填写]- 不喜欢的颜色：[填写]- 喜欢的参考网站及原因：[填写]- 明确排除：[例如：大面积渐变、满屏玻璃卡片、霓虹蓝、无意义粒子]
请先提出 3 个差异明显的视觉方向。每个方向说明：1. 核心视觉概念；2. 字体、颜色、留白和版式原则；3. 最有记忆点的一个元素；4. 为什么适合我的内容和读者；5. 移动端如何保持同样的体验；6. 可能显得廉价或过度设计的风险。
我选择方向后，再制作一个可以本地打开的首页原型。
原型必须遵守：- 使用项目中的真实文案和真实内容，禁止 Lorem ipsum；- 第一屏必须说清我是谁、做什么、主要行动是什么；- 一个屏幕只保留一个视觉重点；- 动效只做渐进增强，关闭动画后内容仍完整可读；- 尊重 \`prefers-reduced-motion\`；- 优先保证手机阅读和点击；- 不使用没有授权的字体、图片和图标；- 不引入与效果不相称的大型依赖。
同时生成 \`DESIGN_SYSTEM.md\`，记录：- 色彩变量- 字体与字号- 间距规则- 按钮与链接状态- 卡片和内容区规则- 动效原则- 移动端断点- 禁止使用的视觉元素
完成后告诉我如何在本地预览，并列出需要我确认的视觉取舍。
3、正式开发
现在我们有了资料，有了方案定位，有了视觉系统，现在才开始进入真正的开发流程。
我的网站以静态页面为主，主要展示我的教程文章，所以不需要酷炫，选择了比较克制的颜色，走的博客风格。
这时你需要和AI沟通开始制作你的网站。
我需要再次强调的是，现在大模型，无需你提供多么详细的提示词。很多你能想到和没有想到的 AI 都会帮你考虑到位。所以别被提示词束缚，直接和AI沟通吧。
下面的提示词当作参考。
现在进入网站开发阶段。
请严格依据已经确认的：- \`PROJECT_BRIEF.md\`- \`CONTENT_INVENTORY.md\`- \`SITE_MAP.md\`- \`DESIGN_SYSTEM.md\`- 已确认的首页原型
完成第一版网站。
技术原则：1. 网站以静态 HTML、CSS、JavaScript 为主；2. 正文必须直接存在 HTML 中，不依赖客户端 JavaScript 才能显示；3. 如果没有必要，不引入 React、Vue 或大型组件库；4. 公共样式、导航、页脚和配置避免在多个页面重复维护；5. 所有站内链接使用统一、可部署的路径规则；6. 图片优先本地化，并在不明显降低质量的前提下压缩；7. 不得写入账号、Token、密钥和个人隐私；8. 不得编造文章、项目、评价、访问量或客户案例；9. 所有变更只发生在当前网站项目目录；10. 每完成一个阶段先检查，再继续下一阶段。
页面范围以 \`SITE_MAP.md\` 为准，至少完成：- 首页- 内容列表页- 内容详情模板或实际详情页- 关于/联系页- 自定义 404 页面
工程要求：- 建立清晰的目录结构；- 增加 \`README.md\`，写清本地预览、内容更新和发布方式；- 增加 \`.gitignore\`，排除依赖、缓存、临时截图和本地敏感文件；- 检查移动端横向溢出；- 所有图片包含合适的 alt；- 所有交互元素支持键盘操作和可见焦点；- 页面语言设置正确；- 支持 \`prefers-reduced-motion\`；- 控制台无明显错误；- 外部链接和二维码来源明确。
请先输出实施计划和将要创建、修改的文件清单。确认后再执行。
执行完成后：1. 启动本地预览；2. 检查所有核心页面；3. 生成 \`BUILD_REPORT.md\`；4. 在报告中列出完成项、未完成项、已知风险和我的人工验收步骤。
不要因为页面能够打开就宣布完成，必须按交付清单逐项验证。
等做完这一步，你的文件夹肯定已经有很多AI生成的内容了，不管你的生成内容是什么，肯定有一份html格式的网页主页躺在你的文件夹，一般是叫index.html。
这时候你已经可以打开看看你的网页了。
4、内容迁移
但此时，我们的网页还需要填充我们的内容，比如我的网页我需要把我写的教程搬过去，让我的个人网站迅速从空壳变成内容资产。
这里我不再贴提示词，你需要的是告诉AI：帮我将文件夹中的资料填充到网站中去。到此，整个网站的大框架都已经基本成型。
剩下的就是一些细节，SEO和GEO，视觉调整，内容调整等等，慢慢再优化。
等结束之后就可以上线了。至于如何上线，更是不需要你操作多少，也可以让AI帮你完成，我们放在后面的教程。
来源：rodya.top/articles/build-personal-website-with-ai · 罗佳 Rodya 原创
三、总结
大概来说，我们建立网站的最小可用步骤都是这些：
1、准备个人资料、文章、图片和参考网站；
2、确定整个视觉系统
3、网站内容填充
4、检查验收然后上线。
唯一需要注意的是，由于算是一个大工程，所以无论哪一步你都需要遵守的原则是：让AI 先提交计划和交付物，人确认后再继续。尤其是规划向的任务，你最好在提示词中写清楚。
AI 让写代码变得容易了。但我们不能只把它当成网页生成器。你要把它当成产品经理、设计师、开发者、测试员和维护者，按顺序交付一套完整工程。这样你的网页才能符合你的要求。
收录于AI 工具教程
作者提示: 个人观点，仅供参考
