我如何用 AI，一步一步搭建起自己的个人网站

最初的需求其实很简单。

我需要一个地方，长期保存自己的东西。

不是微信公众号，不是小红书，也不是某一个内容平台。

因为这些地方本质上都不是我的。

平台可以改规则，内容可以被限流，产品甚至可能有一天消失。

所以我想建立一个真正属于自己的数字空间。

它可以放：

文章
研究
项目
作品
个人介绍
长期思考

最开始，它仍然只是一个比较典型的个人作品网站。

但有一点从一开始就很明确：

我不想做一个标准模板式 Portfolio。

我不希望它只是：

Hello, I'm F.
↓
About Me
↓
Projects
↓
Contact

然后换一张头像、换几段文字，就和互联网上几千个个人网站没有区别。

我希望它本身也是我的一个作品。

真正开始开发之后，我很快发现：

一句

“帮我做一个高级的个人网站”

基本没有什么意义。

因为“高级”“好看”“有设计感”，这些词对于 AI 来说都太模糊。

如果直接让 AI 自由发挥，很容易得到一种非常熟悉的结果：

紫色渐变、

巨大的 Hero、

几个半透明卡片、

一些发光按钮，

最后看起来像一个标准 AI SaaS Template。

这不是我想要的。

所以后来我逐渐形成了一种新的工作方式。

我不再把 AI 当成：

“帮我生成网页的人。”

而是把任务拆成三个角色。

我
↓
Product / Design Decision

ChatGPT
↓
Architecture / Task Breakdown

Codex
↓
Code Execution

我自己决定：

这个地方好不好看，

这个交互有没有意义，

信息层级是否合理，

这个功能到底要不要做。

ChatGPT 帮我把这些模糊判断转成技术任务。

Codex 再进入真实代码库里修改代码。

从这里开始，AI 才真正变成了我的开发工具。

网站并不是每一次都重新生成。

它有真实的 Repository。

所以在真正修改网站之前，我首先让 AI 理解整个项目。

包括：

Next.js
React
TypeScript
Tailwind CSS
App Router
PostCSS
Static Export

项目本身采用的是 Next.js 架构，并通过：

output: export

生成静态站点。

这件事情非常重要。

因为 AI 如果不知道原来的架构，就很容易出现一种典型问题：

为了做一个新功能，把原来的系统全部重写。

这不是我想要的。

我给 AI 的要求逐渐变成：

先理解现在的系统，再在现有系统上做最小修改。

也就是说：

Read
↓
Understand
↓
Locate
↓
Modify
↓
Verify

而不是：

Generate a new project

这成为了后来整个网站迭代非常重要的一条原则。

网站开发过程中，我经常不会直接说：

把 margin 改成 32px。

因为很多时候，我自己也不知道问题到底是不是 margin。

我看到的只是：

“这里感觉不对。”

比如：

页面太空。

标题没有力量。

文字太淡。

聊天区域存在感不够。

按钮看起来像模板。

白天模式太普通。

输入状态有点过暖。

信息很多，但视觉重点不明确。

这些其实都是产品语言，而不是工程语言。

于是我的工作流程逐渐变成：

视觉感受
↓
描述问题
↓
AI 分析真正原因
↓
转成代码修改任务
↓
Codex 实现
↓
我重新验收

比如一句：

“生成详情的字太小、颜色太淡，而且‘你’和 f/ai 不够突出。”

最后可能会被拆成：

Typography hierarchy
Contrast
Font weight
Spacing
Message identity

然后再落实到具体组件和样式。

这个过程让我慢慢意识到：

使用 AI 开发，并不意味着人不需要懂产品。

恰恰相反。

AI 越能写代码，

人的判断就越重要。

网站做到一定阶段以后，我开始明确哪些东西是自己喜欢的，哪些不是。

比如我非常确定：

我不喜欢过度克制的极简主义。

也不喜欢传统 AI 网站非常常见的紫色渐变。

我想要的是一种：

高级、丰富、有互动，但不过度喧闹的视觉。

所以后来很多设计都围绕几个原则展开：

Strong Visual Presence
Rich Interaction
Clear Hierarchy
High Information Density
Controlled Motion

也就是说：

网站可以有存在感。

可以有动画。

可以有复杂的信息。

但它不能看起来廉价。

这也是为什么网站后来经历了很多轮细节修改。

有些甚至只是：

字体大小
透明度
Hover
边框
间距
背景温度
状态反馈

单独看都很小。

但大量细节最后共同决定了网站的质感。

当基础页面逐渐稳定之后，我开始思考一个更重要的问题：

我的网站为什么一定只能展示内容？

既然这里已经有：

我的文章、

我的研究、

我的项目、

我的观点，

那么实际上它已经拥有了一套非常完整的：

关于我的 Context。

于是我产生了一个新的想法：

让访问网站的人，不只是“浏览我”。

而是可以：

和我的数字版本交流。

于是网站开始进入下一阶段。

我开始在首页加入 AI 对话框。

但我并不想做一个：

User
↓
API
↓
LLM
↓
Answer

这么简单的聊天组件。

我的目标是：

让它根据我网站里的资料，用接近我的表达方式回答问题。

这意味着 AI 不能只是一个通用模型。

它需要理解：

我的文章
我的研究
我的项目
我的观点
我的表达方式

于是 AI Chat 开始和整个网站产生联系。

原来的网站结构是：

Visitor
↓
Website
↓
Content

后来逐渐变成：

Visitor
        ↓
    f Digital AI
     ↙        ↘
Content       AI
                 ↓
          Retrieve My Work
                 ↓
              Answer

这个变化很重要。

因为网站开始从一个：

Content Website

逐渐变成：

Interactive Personal Interface。

做 AI Chat 的时候，我又遇到一个问题。

如果只是不断往 System Prompt 里面写：

你叫 f
你喜欢……
你的观点是……
你的经历是……

Prompt 很快就会变得巨大。

而且非常难维护。

所以我开始把两个东西区分开。

一个是：

Persona

负责回答：

“这个 AI 应该像谁？”

另一个是：

Knowledge

负责回答：

“它知道什么？”

也就是：

Persona
+
Knowledge Retrieval
+
User Query
↓
LLM

这样以后我增加新的文章、项目或者研究时，

不需要重新修改整套 Persona。

Knowledge 可以继续增长。

Persona 只负责保持整体人格和表达方式。

随着网站内容越来越多，我不希望 AI 只依靠模型记忆或者一个巨大的 Prompt。

所以后来又加入了一个非常关键的逻辑：

回答之前，先检索网站里的相关内容。

例如有人问：

“f 怎么看 Router？”

系统应该先找到我关于 Router 的文章。

再把相关内容提供给模型。

然后生成答案。

这实际上已经逐渐接近一个简单的 RAG 流程：

User Query
↓
Search My Content
↓
Relevant Context
↓
Persona
↓
LLM
↓
Answer

这样 AI 回答的内容才真正来自我。

而不是模型凭空猜测：

“一个叫 f 的人可能会这么想。”

做到这里以后，我又开始把自己正在研究的 Router 思想放进个人网站。

既然不同模型：

能力不同，

价格不同，

速度不同，

免费额度也不同，

为什么所有问题都必须交给同一个模型？

于是网站里的 AI 开始拥有最基础的 Prompt Router。

系统可以根据 Query 做简单判断，然后决定：

Query
↓
Router
↓
Model A / Model B / Model C

同时，我还希望用户可以看到：

用了哪个模型
为什么选择它
消耗了多少 Token
节省了多少 Token

于是这个聊天框不再只是：

“我网站上的一个 AI 功能”。

它也逐渐成为我对 Router 思想的一种实际实验。

实际接入模型的时候，很快又会遇到现实问题。

API 可能：

限流，

失效，

网络异常，

额度耗尽，

或者临时不可用。

于是我开始加入 Failover。

逻辑大概变成：

Primary Model
     ↓
Success? ── Yes → Answer
     │
     No
     ↓
Fallback Model
     ↓
Answer

这件事情看起来很小。

但它意味着整个 AI 系统开始从：

Demo

走向：

Service

因为真实的软件世界里，

“正常情况下能运行”

和

“异常情况下依然能运行”

其实是两个完全不同的等级。

随着 AI 功能越来越完整，我又开始研究另外一个东西：

Cache。

因为很多请求其实没有必要每一次都重新计算。

某些 Prompt、

某些上下文、

某些检索结果，

甚至某些模型 Prefix，

都可能重复出现。

于是网站后来也开始考虑：

Prompt Cache
Semantic Cache
KV Cache

以及缓存命中到底意味着什么。

这让我第一次开始从：

“怎么让 AI 回答得更好”

转向：

“怎么让整个 AI 系统运行得更有效率。”

这也是从 AI Product 进入 AI Engineering 很重要的一步。

整个网站最大的特点，其实不是某一个技术。

而是：

它从来没有一次性完成。

我的迭代方式通常是：

Deploy
↓
Use
↓
发现一个真实问题
↓
修改
↓
Deploy
↓
继续使用

例如：

输入框不舒服，

调整。

Day Mode 太弱，

调整。

语音按钮不好看，

改。

后来发现这个功能本身没有必要，

直接删掉。

聊天信息层级不好，

继续改。

某种状态反馈不明显，

再补。

这其实和传统产品开发非常接近。

区别只是以前可能需要：

Product Manager
↓
Designer
↓
Frontend
↓
Backend

现在很多时候变成了：

Me
↓
AI
↓
Code
↓
Feedback

反馈周期被极大缩短。

做了很多轮修改之后，我开始越来越反感一种开发方式：

出现一个问题，就针对这个页面写一个特殊判断。

因为这种写法积累多了以后，

整个代码库会充满：

if page === A
if slug === B
if component === C

最后没人知道为什么这些规则存在。

所以后来我给自己的要求是：

发现一次问题，尽量解决一类问题。

也就是：

Specific Bug
↓
Find General Cause
↓
Create Reusable Rule
↓
Apply Automatically

比如如果某类文章页面都会出现同样的问题，

我更希望修改整个 Content System，

而不是只修这一篇。

这件事情其实已经超出了 Vibe Coding。

它开始变成真正的软件工程思维。

在后来的开发里，我已经很少让一个 AI 从头负责所有事情。

反而形成了比较稳定的分工。

ChatGPT

更像：

Product Architect
System Designer
Technical Translator
Reviewer

负责：

理解我的需求，

帮我判断问题，

设计实现思路，

把任务整理成清晰的开发指令。

Codex

更像：

Software Engineer

负责：

进入 Repository，

读取现有代码，

找到真正相关的文件，

修改实现，

检查构建。

我

则负责最重要的部分：

Direction
Taste
Decision
Acceptance

AI 可以判断代码有没有错误。

但只有我能判断：

“这是不是我想要的网站。”

网站做到后来，它的定位也发生了变化。

一开始它只是：

我的个人作品网站。

后来变成：

我的个人数字空间。

再后来：

我的作品、研究和 AI 的统一入口。

所以我开始把它理解成：

f Digital AI

它包含几个不同层级：

f
│
├── Writing
├── Research
├── Projects
├── Knowledge
│
└── AI
      ↓
 Understand / Retrieve / Answer

文章让别人看到我写过什么。

项目让别人看到我做过什么。

AI 则尝试回答：

“f 会怎么理解这个问题？”

这让一个传统个人网站拥有了一种以前没有的能力：

它不再只是等待别人点击页面。

它可以开始和访问者产生对话。

回头看整个过程，我觉得 AI 最大的价值其实并不是：

“以前写这个网站需要三个月，现在三天就可以写出来。”

真正的变化是：

想法和产品之间的距离变短了。

以前我想到：

“这里如果可以这样交互就好了。”

接下来可能还需要：

设计，

沟通，

排期，

开发，

测试。

最后这个想法可能根本不会被实现。

但现在的过程越来越接近：

Idea
↓
Conversation
↓
Implementation
↓
Real Product

很多以前只会停留在脑子里的东西，

现在可以直接被做出来。

这可能才是 AI Coding 真正改变我的地方。

走到今天，这个网站已经不再只是一个静态作品集。

它同时是：

我的个人主页，

我的写作空间，

我的研究档案，

我的项目展示，

也是我实验 AI Product、Router、RAG、Cache 和 Personal AI 的地方。

更重要的是，

它本身也是我使用 AI 工作方式的一次实验。

这个项目没有一个传统意义上的“完成日期”。

因为只要我还在产生新的想法，

它就还会继续长。

以前做一个个人网站，

很多时候只是为了向别人展示：

“我是谁，我做过什么。”

但 AI 出现以后，我越来越觉得，

个人网站可能会变成另外一种东西。

它不仅保存一个人的过去，

还可以理解这些信息，

连接这些信息，

甚至替这个人与别人进行第一轮交流。

所以现在我对这个网站最感兴趣的地方已经不是：

“它看起来够不够像一个 Portfolio。”

而是：

一个人的网站，最终能不能变成这个人在互联网上的数字接口。

这也是我现在继续做 f Digital AI 的原因。

因为它最终想表达的并不是：

“这是我的网站。”

而是：

“这是我正在互联网上构建的另一个自己。”