不会写代码,六天上线个人网站:我的 vibe coding 全记录
先交代背景:我不会写代码。十年产品人,需求文档写过无数,代码一行没写过。
但上周,我给自己做了个网站——就是你现在看的这个。三天出第一版,第六天绑上域名正式上线,总花费是一年 70 块的域名钱。全程没写一行代码,只用自然语言,和 AI 一轮一轮聊出来的。
这篇记录我是怎么做的。
为什么值得做一个
裸辞和做主页的来龙去脉,第一篇日志写过了,这里只说一点:
AI 时代,我觉得个人网站是承载”自己”最好的容器。简历是死的,一页纸,格式固定,冷冰冰;网站是活的——它长什么样、说什么话、放什么东西,全由你定义,有新的进展随手加进去,它跟着你一起生长。对我来说,它既是过去十年的总结,也是一人公司探索的起点。
第一步:把料备齐,一次给够
动手前,先把”资料包”准备好:最新的简历、做过的项目、近期在探索的事(比如我在 AEO 上的实验、刚交付的一单获客诊断咨询)——一次性全部喂给 AI,让它先消化,再动笔。
这是我用返工换来的教训:一开始我是挤牙膏式喂料的,第五轮对话才想起给简历,风格参考图更是做完两版才找。每次新资料进来,之前的产出就得推翻一部分。资料先行,一次给齐,这一条能省掉一半的返工。
第二步:先看别人的,再定自己的
我让 AI 先找了几个典型的个人网站给我参考。看两样东西:一是内容——别人写了什么、什么定位;二是排版——是简历式的纵向长页,还是一块一块的横向卡片。看完心里就有了大致的概念。
我不是视觉出身,喜欢简单的东西,所以给自己定的调是:Notion 风的手绘感。定了这个锚点,后面所有讨论都围着它转。当然,做的过程中我也一直凭感觉和审美在调,最终长成了你现在看到的样子。
第三步:视觉的事,用图说话,各家 AI 各展所长
这是整个过程里最值得说的一段。
一开始我全程用 Claude:把想法和资料喂给它,它很快给出了个人网站该有的要素提纲和一版草稿——这部分它很强。但让它做”手绘风”,来回几轮都不对味:它理解的手绘,和我想要的差了好几个次元。
于是我转头找 ChatGPT。它现在画图的水平确实高:我把”手绘 + Notion 的感觉”描述给它,它直接出了一张设计图,一眼就对了。然后我把这张图丢回给 Claude:“照这个风格做。“一轮到位。
一张参考图,胜过一千字描述。 用文字跟 AI 描述视觉,是最低效的沟通方式。
头像也是同样的思路:我让 ChatGPT 基于真人画了一版手绘线稿头像,比直接放照片更贴合整站气质。当然,喜欢放真人照片也完全可以——AI 时代,只要你能表达出来的,就都能实现。
途中的坑,挑三个说
- 装饰性交互,想不清楚就先别做。 首页的小猴子动效我改了四轮,最后整个删掉——每一轮都要重新生成图、量坐标、改代码,是全程最贵的弯路。v1 老老实实做静态,花活留给 v2。
- 元素拼贴不等于设计。 有一版猴子图里自带一段绳子,AI 又用代码画了一条线接上去,两种质感怎么缝都是假的。最后的解法是釜底抽薪:图里不要绳,世界上只留一根。手绘风成立的前提,是所有元素同一套笔触。
- 让 AI 画角色,一张图画完所有姿势。 分开画,三个姿势能画成三只不同的猴;画在同一张图里(character sheet),一致性天然解决。
最后一步:上线,大陆能直接打开的那种
搜”个人网站部署”,教程大多是 GitHub Pages / Vercel 那一套。但那些默认域名在大陆是打不开的——你兴冲冲把链接发给朋友,对方一片空白。
我最后跑通的组合:腾讯云注册域名(一年 70 块左右)+ Cloudflare Pages 免费托管 + 绑上自己的域名。不用买服务器,不用备案,HTTPS 证书自动配好。原理一句话:被墙的是那些共享默认域名,自己的域名走 Cloudflare,大陆通常可以直连。
上线后我第一时间把网址发给我爸,他手机直接打开了——验收通过。
写在最后
整个过程里我最大的感受:AI 已经把”做出来”的成本打到了地板,瓶颈不在做,在想清楚——你是谁,想给谁看,想让人看完做什么。这些想清楚了,剩下的就是和 AI 搭子一轮一轮把感觉调出来。
网站是长出来的,不是憋出来的。先上线一个够用的版本,内容和细节交给日常迭代——就像这篇日志,也是这个站长出来的一部分。
(本站的代码、文案、部署,都由我和我的 AI 搭子共同完成。你正在看的,就是作品本身。)