零基础也能2小时打造专属个人网站？最新AI编程工具组合让建站变得像聊天一样简单。从风格选择到代码生成，再到一键部署上线，Codex与Vercel的完美配合彻底降低了技术门槛。本文将手把手教你如何用自然语言对话完成整个建站流程，让人人都能拥有展现自我的数字名片。
提示：这篇文章适合无编程基础，想快速在 2 小时内手搓一个自己专属的个人线上网站的小白。使用到的工具有：Codex（可替换为其它 AI 编程工具）、GitHub、Vercel。
个人网站的意义
个人网站最大的好处，是能有了一个长期有效、可持续更新的个人主页。社交平台太散、简历也无法展示完整你的生活，别人很难在几分钟内真正认识你。个人网站刚好能补上这块空白，你能用自己最喜欢的表达方式展示自己被值得看见的经历、能力。
而搭建个人网站，用 vibe coding 的方式实现起来非常轻松。
在前一篇小白 Vibe Coding 0-1 零基础入门教程，我们使用的工具是Google AI Studio，留言/评论都有在咨询除了AI Studio 还有没有其他主流 AI Coding 工具推荐，目前大家用的比较多的工具有：Cloud Code、Cursor、Codex、Trae。
Cloud Code 的模型 coding 能力是最强的，更适合熟悉用命令行的人，适合已经有项目了，让 AI 查代码、修 bug、跑测试、改文件的场景。
Trae 在国内用起来会比较方便，模型能力方面不如其他平台，但快速出原型、demo的初阶使用也可以使用的。
Cursor 胜在可选用的模型多，支持多家厂商的模型。Codex 使用的是 OpenAI 的模型能力，官方定义是一个 coding agent，推理感更强。这两者的选择，就看用户自己用哪种更上手更熟悉。价格方面，使用的起点价格相同，个人玩家购买时可以看下咸鱼的价格。
工具的下载、安装、账户充值各个工具流程类似，在官网下载并安装，账户注册、登录、充值，一套下来很快就能完成。
在DesignPrompt 中有不同的风格模板，我们可以选择自己喜欢的风格卡片，提供的prompt 里面包含了这个风格的设计原则/要点，我们可以免费复制。
在给 Codex 发送编程命令之前，在输入框左下角将【计划模式】开启，这样它在思考后会先跟你确认思路、拆解步骤、问清楚细节再执行，比如会问你想要的技术栈，小白也不用担心看不懂就乱选择，他也会解释清楚每个选项会有什么效果，如果不满意提供的选项，也可以自定义答案。
然后就可以和 Codex 开始对话了，告诉它你想做一个个人网站，希望有个人介绍等 xxx 模块，使用以下风格，将刚才复制的风格 prompt 粘贴进去就行。当然如果有很完善的想法，也可以写得更加详细，但建议可以先让 Codex 生成一版，看整体风格是否符合预期，后面再进行调整。
Codex 在和你不断确认要点后，会输出一份 plan，确认无误后就能让它实施计划了。
在实施计划时，Codex会自动检查需要用的工具是否已安装/授权，如果没有会停下来征询你的同意。但也不必一直盯着页面担心错过交互，你可以在其他页面同时做其他的事情，有交互/已完成的状态都会有消息提醒你去查看。
当项目完成可以跑之后，你可以在本地预览网站效果，初版肯定会有很多可修改的点，你可以将需要修改的地方，截图+文字描述扔给 Codex，他会根据你的要求进行修改。
这是一个持续沟通的过程，你还可能会遇到，在本地预览时报错的问题。同样，你截图告诉 Codex 报错问题，它会自己排查问题并修复。他也会不断地给出下一步优化 idea，看是否要跟着它的思路去调整迭代。
和小白 Vibe Coding 0-1 零基础入门教程中提到的部署上线方式相同，先将代码提交到GitHub ，再通过 Vercel部署上线。那在 Codex 中如何操作呢？直接询问：现在项目可以部署上线了吗，我是一个小白，请选择最适合我的上线方式。它会建议用 git+vercel 的方式，也会一步一步地告诉你该如何操作。
你可以让它尽可能把你需要做的操作简化，并且让它自动完成。代码推到 Git 后只需要登录 Vercel 并 deploy就能完成。
作者：产品Qiana，公众号：小陈的大house
本文由 @产品Qiana 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。