# Vibe Coding：用AI打造价值 10 万的高定个人网站

今天我将手把手教你，如何用 AI 辅助制作价值 10 万的高定个人网站。

这是我给自己做的个人品牌网站[JulieAIPath](https://www.julieaipath.xyz/) ，它包含了：首页、案例实操、商业服务、关于我、联系我，5个页面，它是用AI Studio 实现的，看完文章和视频后，你也能做一个。

整个过程，不用安装任何软件，打开浏览器访问站点，用vibe coding的方式，纯自然语言编程，就能完成高定个人网站开发，最后再部署到一个你喜欢的域名上，网站就大功告成了。

这个网站看起来像是，收费 10 万的自由开发者的作品。

废话不多说，我们来讲实操干货。

[![Vibe Coding：用AI打造价值 10 万的高定个人网站](https://img.youtube.com/vi/foKnSTBkfC0/maxresdefault.jpg align="center")](https://www.youtube.com/watch?v=foKnSTBkfC0)

*▲ 点击上方图片无缝跳转观看完整高定网站搭建视频*

## 什么是 Google AI Studio，以及如何让网站看起来很贵？

AI Studio 是一款 AI 代码助手。你只需用自然语言向它描述你的需求，它就会根据你的要求编写代码。

打开它的官方网站，这个工作区的东西就足够完成开发工作了。

在开始制作之前，我想先聊下怎么让网站看起来很贵。

总体上说需要在这3个方面做的足够出色：

品味：品味决定了网站的审美水平。它包括了：**字体、色彩、图像。**

内容：内容决定了网站如何组织信息。它需要很清晰严谨的信息架构，能让用户高效的获取信息。

用户体验：用户体验决定了用户和网站互动时的流畅度。它包括了：**动态效果和移动端适配等细节。**

## 配置

我们现在进行配置，首先进入官方网站，免费版也能直接用，但是存在使用频次和功能限制，为了更好的调试网站，我这里用的pro版，足以满足本次我的开发需求。

我们进入官网后，点击登录，进入工作区。选择左边build下面的apps，点击➕号，创建一个新的应用。在这里我们将开始创作个人站点了。

## 参考信息和prompt

为了让我们的网站区别于普通作品的关键，是你给它的参考信息和prompt。你的描述越具体，最终效果就越好。如果你已经非常清楚自己想要什么，可以直接描述，就像我这次做项目时一样。

但是对新手来说，用具体的语言描述视觉风格比较难，无法表达出你想要的效果。

如果你是这种情况，我建议用参考信息，参考信息就是你喜欢的网站或者截图。

你提供给AI，以便它参考你的视觉风格。比如：你可以说参考julieaipath.xyz这个网站的设计风格。

对我来说，我想创建一个展示个人品牌的网站，我喜欢黑金配色，所以我在prompt中进行了大量这方面的描述。你需要按照你的诉求，不断在对话中来告诉工具你的想法。

## 润色优化

当你给他参考信息和初步prompt后，它会给你一个结果，但是第一版往往有很多不满意的地方。不过没关系。我们后续将逐步润色优化，让它更接近我们想要的结果。你需要根据前面说的品味、内容、用户体验这3个方面来进行细节调整。这一步是区分精良作品和普通作品的关键。

具体操作方法是，将上面提到的3个方面的每个细节部分给到AI，然后逐个提问，逐个优化。注意这里的方法，不要告诉它要具体怎么做，因为你也不清楚，你要问的是，你想要什么效果，让AI根据你的意图来执行。比如在我这个案例中，我的prompt是：帮我将“案例实操”板块改造为一个 “B 站硬核视频教程橱窗”。工具就会自动分析我的意图，找出合适的解决方案。

现在，我要讲的是大多数人都会忽略的步骤，而这一步对网站的整体效果至关重要。在完成这批修改后，逐个浏览网站的各个部分，找出那些仍然显得平淡乏味的部分。总会有几个这样的部分。工具不会帮你做这件事，这一步，你需要自己来执行。对于每个略显平淡的部分，你需要告诉工具，添加一个特定的动态效果或光标交互。比如：联系我的页面，因为是纯黑色，我觉得略显单调，让它帮我给背景设计一个背景色，让它不用那么无聊。最后经过多次版本迭代，确定了最后我们要发布的版本。

现在，我们需要把它真正上线。

## 部署和绑定域名

我们在工具上制作好了网站，但是这个网站现在只能自己访问，如果想让全世界上任何一个人打开浏览器，输入网址就能访问这个网站，需要怎么做呢？

你必须把它放在一个真正的服务器上，并使用一个自定义的网址。这里就涉及到网站托管服务了。就是让你的网站在服务器上全天候运行，这样全世界的人都可以访问它。我使用的 github + vercel，github帮我们存储网站代码，并进行版本管理，vercel帮助我们把代码部署上线以及绑定我们的个人网站域名。

我在视频中搭建的个人网站，它是一个简单的静态网站，没有登录、没有结账、也没有真正的数据库。github + vercel免费版就能满足所有需求。但如果你的项目比我这里做的更复杂，比如一个有用户账户、支付流程或后台数据库的网站，这个方法就不够用了。对于这类项目，你应该选择其他更专业的商业套餐。

回到部署，在AI studio中，点击设置按钮，点击github按钮，把代码同步到github上。代码保存好后，我们需要部署上线，用浏览器打开vercel官网，点击 **Sign Up** ➜ 选择 **Continue with GitHub**。登录进去后直接导入你的github仓库，点击 **Deploy**，剩下的编译、路径适配全都不用你操心，几分钟后你的网站就部署完成了。最后我们把购买好的域名julieaipath.xyz绑定到vercel上。点击Domains按钮，点击 add 按钮，输入域名，点击添加域名。

完成了以上操作，你的网站就上线了！这就是你价值 10w 的网站，而且已经绑定了你自己的专属域名，赶紧去试试吧！