Vibe Coding实战：零基础用AI搭建个人网站

当"不写代码的写代码"成为可能

过去搭建一个个人网站，往往意味着要学 HTML、CSS、JavaScript，再折腾服务器和部署。而如今，一种被称为 Vibe Coding（氛围编程） 的新方式正在让普通人绕过这些门槛——你只需要用自然语言描述需求，AI 就能帮你把网页写出来、改出来、上线跑起来。

值得一提的是，Vibe Coding 这一概念由 OpenAI 联合创始人、前特斯拉 AI 总监 Andrej Karpathy 于 2025 年初正式提出并推广。其核心理念是：开发者不再逐行手写代码，而是用自然语言向 AI 描述意图，由大模型生成、修改并调试代码，人只需负责验证结果和给出反馈。这种模式建立在大语言模型强大的代码生成能力之上，本质上把编程从"语法记忆"转变为"意图表达"——它降低了技术门槛，但也对使用者的需求拆解能力和逻辑清晰度提出了新要求，这正是本文所强调的重点。

本文整理自 B 站一对夫妻档 UP 主的实战分享。其中一位是完全零基础的"纯小白"，靠自己摸索用 Codex 搭建了个人主页，甚至连做 IT 的另一半都点头称赞。Codex 是 OpenAI 推出的代码生成模型/智能体产品线，能够理解自然语言指令并生成、修改、运行代码，其早期版本正是 GitHub Copilot 的技术底座。除了 Codex，当前主流的 AI 编程工具还包括 Anthropic 的 Claude、Cursor 编辑器，以及国内的通义灵码、文心快码等——这些工具的共同特点是把"对话"作为交互入口，把"仓库/文件"作为操作对象。他们的经验最有价值的地方不在于"AI 多强"，而在于普通人如何与 AI 高效协作——这恰恰是当下最稀缺的实操知识。

她们的做法值得借鉴：先不追求完整，从一部分开始做。最初主页上只放了两人的简介和自媒体简介，做着做着才逐步扩展。用她的原话说："很多 idea 其实是你在做的过程中才变出来的，而不是靠你在那想。"

Vibe Coding让AI改稿的四个核心技巧

出稿基本不可能一次满意，真正考验人的是"改"的环节。她总结出四条与 AI 沟通的技巧，几乎条条都戳中新手痛点。

技巧一：让 AI 复述需求，对齐颗粒度

很多时候改不好不是 AI 的问题，而是我们描述不清。她的方法是：说完需求后，让 AI 用自己的话重复一遍你的意思，看看是否一致。"这么搞几遍之后，你会发现 AI 反馈的跟你想的都差不多。"

她一针见血地指出：这不是 AI 变厉害了，"是你自己被训练了，你知道怎么去描述这个问题了。"这其实揭示了 Vibe Coding 的本质——人机协作中，人的表达能力才是瓶颈。

技巧二：截图定位 + 给出精确数值

网页是可视化的，纯靠文字描述位置，AI 定位总不准。要改哪块，就截图那块发给它。

涉及尺寸调整时，务必一次性给出数值。比如"把这个字改成原来的四分之三大小"，而不是含糊地说"大点""小点"——后者会浪费大量来回时间还改不到心坎里。

技巧三：一次只改一处，别贪多

网页代码往往很长，一次性甩给 AI 一堆指令，容易乱套。"也不是 AI 不知道你在说什么，是咱自个说着说着就乱了。"所以要一条一条改，不着急。

技巧四：反复强调"只改我让你改的部分"

这是最容易踩的坑。AI 经常在改 A 的时候顺手动了 B。解决办法是在指令里强调三四次"其他都不动，只改这块"，并且时不时提醒它——因为它也会"忘"。这和用 AI 修图时的体验高度相似。

网站上线部署：小白别把权限全交给 AI

本地做完后就要上线。这里她给出一个重要的安全提醒：涉及账户、密码的环节，不要把所有权限都交给 AI，避免自己在网上"裸奔"。

她的做法很聪明：先让 AI 出方案，并提三个明确要求——

• 免费
• 常用（别搞个别人都打不开的冷门平台）
• 可后续修改更新

拿到方案后，她只让 AI "告诉我前两步"，因为一次说太多也记不住。更关键的一个技巧是：注册登录后直接截图整个页面，问 AI "下一步点哪"。因为 AI 读取的是文字说明，而平台界面可能已更新、按钮挪了位置，靠文字描述容易失准。用截图交互，整个上线过程只花了三四分钟。

处理中文长文本：DeepSeek 的意外优势

她们做了 20 多期视频、50 多期播客，想把内容提炼成"知识树"放到网站上。这一步暴露了不同 AI 的明显差异。

音视频转录工具推荐

把音视频转成文字，她推荐了两个免费工具：得到大脑和 Whisper。实测中，Whisper 识别中文错别字很多，而得到大脑在中文场景下表现更稳。

海外 AI 的"理中客"陷阱

她把 70 多份文件发给 Codex 做总结，却发现一个问题：海外 AI 把她们鲜明的观点和立场都磨平了，输出变成"不痛不痒的政治正确、很中庸"的内容。

"比方说我们对某些公司的评价，虽然不是专家，但当时有基于那个阶段的态度。"而 Codex 把这些个性都删掉了，输出"不像咱俩"。这对做个人 IP 是致命的——账号的初衷本就是展示真实的学习过程。

DeepSeek 处理中文长文的两大优势

最终她转向 DeepSeek，收获两点：

1. 理解中文更到位，能 get 到语气和态度背后的真实意思，不会因伦理安全设置过度阉割内容；
2. 超长上下文（百万级 token），"我用 DeepSeek 两年，第一次遇到对话框告诉我没额度了"——70 多份文件放进去都读得下，而其他工具可能要拆成好几个对话框。

这里的关键概念是上下文窗口（Context Window），它指的是模型在一次对话中能同时"记住"并处理的文本长度上限，以 token（可理解为词或字的片段，中文约1个字≈1.5个token）为单位。窗口越大，模型能一次性读取的资料就越多，越适合处理长文档、多文件汇总等任务。早期模型只有几千 token，如今主流模型已扩展到十几万甚至上百万 token。当输入超出窗口时，模型会"遗忘"早期内容，这也正是下面提到的跨对话框迁移技巧存在的原因。

她还提到与豆包的对比：日常沟通两者差不多，豆包更有趣、能做的事更多，DeepSeek 更正经，处理长文本首选 DeepSeek。

跨对话框迁移技巧：新开对话框前，让 AI 把"前面用的方法、要求、要做什么、不要做什么、例子"总结成一份文档，复制到新对话框即可保持风格一致。

知识树的"2.5 级"设计与 API 认知

最初 Codex 把内容全平铺在网页上，"特别冷，全是字"。她要求分级，但 AI 只会按逻辑分成"大标题—小标题—内容"三级。

于是她换了个提问方式："你去网上查查，以我这个内容体量，从用户角度，大家喜欢的网站是怎么分级的？"这句话点破了开发者思维的通病——总以自己视角思考。AI 查完后给出结论：三级太深，用户懒得点，应该做 2.5 级（点开看大标题→展开小标题和部分内容→再点开看全文）。

关于数字分身，她们暂时还没接 API。文中还科普了 API 的本质："看着高端，其实就是一个通道"，全称 Application Programming Interface（应用程序编程接口），通过它就能把网页、数字人连上背后的 AI。更具体地说，API 是不同软件系统之间约定的"通道"或"接口规范"，它让开发者无需了解一个服务的内部实现，只需按照约定的格式发送请求，就能调用其功能。AI 大模型厂商通常同时提供网页版（面向普通用户，多为按月订阅或免费）和 API（面向开发者，按调用量的 token 数计费）。不接的原因有二：一是当前网站还用不上，二是接 AI 就要开始花钱——这正是因为 API 是用量付费模式，而她实测 DeepSeek 的 API 凭借较低的 token 单价，比 GPT 和 Claude 便宜很多，打算真正接入时再给大家算账。

给普通人的Vibe Coding启示

这个案例最打动人的地方，不是技术多先进，而是它证明了：在 AI 时代，行动力和表达力，比编程知识更重要。

几条可复用的核心心法：

• 先做起来，idea 会在过程中涌现；
• 学会"训练自己"去精确描述需求；
• 用截图代替文字定位，用数值代替模糊形容；
• 涉及账户安全的环节，保留人工判断；
• 中文长文本处理，DeepSeek 是目前的性价比之选。

她们后续还计划做动画数字人和自动剪辑 agent。从练手到真正上线自己的网站，这条路径本身就是一份普通人拥抱 Vibe Coding 的最佳范本。

核心要点