如何从 0 到 1 Vibe Coding 一个个人网站

哈喽大家好，我是欧呦，这篇文章将为大家分享如何从 0 到 1 Vibe Coding 一个个人网站。

前面两章我们了解了 AI Agent 的常用操作，也梳理了做产品常遇到的研发与 AI 基础概念。从这一章开始，我们正式进入实战阶段——带着大家从零做出第一个完整的作品。在这篇文章里，我会结合自己当初从零构思、设计并做出个人官网 oiloil.org 的真实经历，和大家分享一套做个人网站与产品官网的完整设计理念与实操步骤。

前期构思与建站方案

很多朋友第一次用 AI 做个人网站时，最容易犯的错误就是一打开对话框就直接说：「帮我写一个个人主页。」

在没有任何背景信息的情况下，AI 只能拿一套千篇一律的模板应付你——上面塞着虚拟的英文名字、几条空洞的技能进度条，外加三张灰色的占位卡片。这样的网页哪怕写完了，跟你自己也没有半点关系。因此在真正让 AI 写代码之前，最重要的一步是先让 AI 充分了解你是谁、你想通过这个网站向别人传达什么。

1. 我为什么要做个人网站

先跟大家聊聊我最开始做自己个人官网的想法。

我做个人网站最核心的目的，是想给关注我的读者和用户提供一个集中了解我、体验我作品的渠道。因为我平时在做自媒体，陆陆续续开发了不少自己的产品和大量的 Skill，同时也有很多过往的视频内容和个人经历，希望能整理成文字版沉淀下来。

当手头要展示的内容越来越多时，散落在各个社交平台的主页就很难把它们有条理地放在一起了。所以我决定做一个属于自己的个人网站：一方面把我的产品、Skills、文章和个人经历都收纳在同一个地方；另一方面也希望网站里的文字内容能在搜索引擎里获得一些自然流曝光，把自媒体上的读者和搜索过来的新朋友转化到我自己的网站阵地上来。

2. 建独立文件夹并喂入资料

当我们决定动手做一个个人网站时，第一步还是延续第 1 章讲过的好习惯：先在电脑专门放项目的目录里新建一个独立的英文名空文件夹（比如取名叫 my-website），然后在 AI Agent 里把这个文件夹作为单独的项目打开。

建好项目之后，不要急着让 AI 写网页代码，而是先用最方便的方式，让 AI 尽可能多地读取你的个人信息，帮你把过往的经历梳理出来。我平时常用的喂资料方式有三种：

1. 直接把现成的文件丢给它：如果你手头有个人简历（PDF 或 Word）、以前写过的自我介绍或文章（Markdown 文档），直接把文件拖进刚刚建好的 my-website 文件夹里，在对话框里用 @文件名 让 AI 读取；
2. 把公开的个人主页链接丢给它联网调研：比如你的 GitHub 主页、个人博客链接，直接把网址发给 AI，或者直接跟它提供你的基本个人信息，让它自己去联网搜索调研；
3. 需要登录的平台（如小红书、B 站）先登录好再让它操作：像小红书、B 站这类有时需要登录才能完整查看主页内容的平台，如果你给 Agent 配置了浏览器自动化工具（比如我们后面章节会专门介绍的 Ego Lite），可以先自己在浏览器里登录好账号，再安排 Agent 进去读取你的主页列表；如果你暂时还没配置浏览器工具，也可以直接打开自己的主页，把简介和代表作标题复制下来，或者截两张主页图直接粘贴发给 AI。

把这些资料丢给 AI 之后，先让它帮你梳理过往的经历，并整理成一份 Markdown 格式的建站方案文档（比如 site-plan.md）让你确认。

你可以直接把下面这段话发给 AI 作为开场：

我想做一个个人网站，我已经把我的简历文件放在了项目目录里（同时这是我的小红书 / B 站 / GitHub 链接：……）。请先不要写代码，先读取并联网调研我的个人信息，帮我梳理我过往的经历，然后整理成一份 site-plan.md 建站方案让我确认。我们一起讨论清楚这个网站做成什么设计风格、要展示哪些模块的信息。

3. 不知道网站放什么怎么办

聊到这里，很多刚开始学 Vibe Coding 的朋友可能会有一个很实际的困扰：「欧呦你自己有很多开发好的产品，也有很多开源的 Skill 和自媒体内容，所以网站有很多东西可以放；但我目前既没有做过独立产品，也没有写过 Skill，我常常苦于不知道该在个人网站上传达什么，这种情况该怎么办？」

其实个人网站最重要的从来不是“塞满十几个产品”，而是搞清楚你做这个网站是为了什么——你想向看网站的人传达你的哪些特质。哪怕你现在手头没有现成的独立产品，也完全可以根据自己的目标从下面三个方向切入：

1. 为了求职、转行或找合作（展示你「解决问题的过程」）： 如果你的目标是求职，别人打开你的网站不是为了看一份把纸质简历照抄上网的文字列表，而是想看你具体做过什么事、是怎么思考的。哪怕没有独立上线的商业产品，你也可以挑 2–3 个你做过的具体案例放上去——比如你用 AI 改进了工作里的某个繁琐流程、对某款产品写的深度体验拆解、或者在课程里跟着做出来的一个可点击小原型，把「当时遇到了什么痛点 → 我是怎么拆解和解决的 → 最终做出了什么效果」讲清楚，这就比单纯罗列工作年限有说服力得多。
2. 为了记录学习与成长（做成你的「公开数字花园」）： 如果你刚刚开始接触 AI 编程，可以把个人网站当成自己的作品实验室。不需要等攒够十个大项目才建站，哪怕你今天只做了一个给自己用的记账小工具、整理了几条好用的提示词、或者写了两篇学习 Vibe Coding 的踩坑笔记，都可以先放上去。个人网站是可以跟着你一起长大的，以后每做出一个新作品，就往网站里多加一张卡片。
3. 为了沉淀个人品牌或自媒体内容（做成你的「个人中心阵地」）： 如果你平时在小红书、公众号或 B 站分享内容，就可以把散落在各个平台的精选图文、常用工具清单和个人介绍收拢到网站上，方便读者一站式查阅。

如果你看着自己的经历，还是不确定哪些内容最值得放上网站，最简单的办法就是让 AI 先通过反问帮你挖掘亮点。你可以在语音输入里把自己的工作经历、做过的小事甚至业余爱好随便聊几分钟，然后跟 AI 说：「我不太确定我的个人网站该重点传达什么，请先根据我刚才说的信息向我提问，帮我从过往经历里提炼出 3 个最值得展示的板块，并写进 site-plan.md 方案里。」

首屏风格探索与打磨

跟 AI 一起讨论完 site-plan.md，确定好网站是为了求职还是展示作品、一共要放哪几个模块之后，下一步就是定下网站的视觉风格与首屏设计。

我觉得个人网站从来没有一个固定的标准答案说「必须做成什么样」，因为个人网站最重要的一件事就是让人记住——它不是一份干巴巴的文字简历，一定要有创意、有自己的审美与风格、不平庸。

1. 先生成 3 版设计初稿对比

要做出有特色、不平庸的风格，如果一上来就让 AI 直接初始化一个庞大的工程框架去写代码，不仅改起来慢，做出来的样式也很容易落入俗套。

我自己的做法是：最开始先不忙着建复杂框架，而是先让设计审美在线的大模型，基于前面确认好的 Markdown 建站方案，直接生成 3 个不同风格的单文件 HTML 设计稿。

比如我在做自己官网的时候，就是先让 Kimi K3 这个模型一口气做了三个风格完全不同的单文件 HTML 初稿（比如保存为文件夹里的 draft-1.html、draft-2.html、draft-3.html）。大家如果平时想让 AI 一次探索多个不同视觉方向的设计稿来对比挑选，也可以直接使用我开源的 oil-ui 这个 Skill。

这里顺手给第一次动手的新手朋友提个醒：单文件 HTML 是最简单直接的网页格式。当 AI 在你的项目文件夹里生成好这三个 .html 文件之后，你不需要敲任何命令，直接打开电脑文件夹，用鼠标双击这个 .html 文件（或者把它拖进浏览器窗口里），就能立刻在浏览器里看到完整的网页排版和交互效果。

把三个方案在浏览器里并排打开对比，你一眼就能看出哪一套版式最有味道。当时我就是从 Kimi K3 生成的三个方案里，一眼挑中了现在官网这套首屏超大号黑体字排版的风格底子。

2. 融入个人形象与交互巧思

挑中满意的初稿底子之后，怎么让这个网站真正变成「别人一打开就能记住你」的作品？这就需要在 AI 生成的框架之上，融入我们自己的思考去完善细节。

以我自己的个人网站 oiloil.org 为例，我把整个网站直接内嵌在了下面这个窗口里——你可以直接在里面移动鼠标（看看小狗的头和人物的眼睛怎么跟着鼠标转），或者直接在窗口里往下滚动、点击切换各个 Tab 体验真实效果：

oiloil.org · 移动鼠标或向下滚动体验实时交互新窗口打开 ↗

你会发现一个很有意思的地方：我的个人网站首屏上，基本上看不到任何传统的个人信息——没有写我毕业于哪里、工作了几年、会哪些编程语言，整个画面正中间只有三行极大的黑体字 Oil® makes things.，底下配了一行极简的小字 欧 呦 ENGINEER / DESIGNER / OPEN-SOURCE 和一个提示往下滑的箭头。

为什么我不把个人网站做成一份在线简历？因为我认为在现在的 AI 时代，纸面上的简历对于很多人来说参考性其实都不强了——作品是强于简历的，作品能够直接体现你的审美，也能够体现你的工程能力。所以我希望首屏不堆砌履历文字，而是先让人觉得这个页面很有态度、很吸引人，忍不住想往下滑看看这个人到底做出了什么东西。

而且这里面有一个很关键的演进细节：最开始 Kimi K3 帮我生成的初稿里，其实只有左边这个大字排版的风格，当时是没有右侧那个火柴人小人和小狗的；右侧的人物和小狗装饰，完全是我自己在选定初稿之后一步步思考完善进去的。

很多朋友可能会好奇：为什么我做自己的个人 IP 和网站时，会想到放这样一个小人和一只小狗？

其实这套形象来自我平时做 PPT 和 HTML 配图时沉淀下来的一套视觉规范——我专门写过一个叫 oil-visual 的开源 Skill，这也是我平时做自媒体内容时经常展示的一种手绘视觉风格（大家在建站和做内容时，也完全可以参考它的结构，去沉淀一个属于你自己专属风格的生图 Skill）：

1. 为什么是这个火柴人小人：我认为火柴人这种极简线条的形象，非常适合在各种不同的场景下灵活搭配。所以我把它做成了透明底配图放在首屏大字右侧，让他的手刚好扶在 makes 最后一个字母 s 的边缘上；包括我个人网站的 Logo 以及我自己很多产品的品牌 Logo，用的也都是这个火柴人形象；
2. 为什么旁边有一只小狗：因为我现实生活中真的养了一只金色边牧，所以我照着它的样子画了这样一个黄白小狗的形象放在脚边，自己看着觉得很可爱、也很有趣；
3. 用 oil-motion 加上跟随鼠标移动的交互效果：把小人和小狗放到首页上之后，我还是希望它们不只是两张静态贴图，而是能有一点有趣的交互效果。所以我做了一个小巧思——当访客在首屏移动鼠标时，小狗的头和火柴人人物的眼睛都会随着鼠标移动而实时转动。大家如果也想在网页里做这种跟随鼠标交互的动画效果，可以直接使用我开源的 oil-motion 这个 Skill（下一章《如何使用 AI 做出有高级感的设计》里我们也会详细拆解它的实现过程）。

3. 从初稿到丝滑交互的打磨

聊到这里，我也想跟大家破除一个常见的幻觉：很多人看我分享用 Vibe Coding 做个人网站，会觉得我是不是只敲了一两句提示词、非常简单就把这个页面做出来了？

其实完全不是，这个网站背后经过了非常多的打磨。AI 交出来的第一版页面往往只有干巴巴的文字，它不会主动去使用那些有意思的配图和交互细节。

就拿首屏那只跟随鼠标扭头的小狗来说：最开始做出来的第一版，小狗扭头的效果帧率很低，而且它的头转起来非常不自然。为了把这个细节磨好，我后面不断地去优化和尝试各种方案——从最早让 AI 一帧一帧生成图片，到最后改成先生成一段视频、再把视频切成不同的帧，接着再去补帧提升流畅度，最后再去压缩这些图片的体积以保证网页加载不卡顿，才终于实现了现在这种流畅丝滑的跟随效果。

而且这里还有一个很有价值的副产物：当我们在做自己网站的过程中，打磨出了某一个有趣的交互效果或配图流程（就像上面这个小狗跟随鼠标的 oil-motion），我们完全可以把它提炼成一个独立的 Skill。 我自己就是在做官网的过程中发现这套动效方案其实是通用的，就会去反思它对于其他用户有没有帮助——如果有帮助，把它整理成一个 Skill 开源分享出去，它本身又会变成你个人网站「Skills」板块里一个新的代表作。