零编程基础，5个晚上用AI从零做出一个网站

什么是Vibe Coding？

在深入了解这个案例之前，有必要先理解「Vibe Coding」这一概念的来源。Vibe Coding是2025年初由OpenAI联合创始人Andrej Karpathy提出并迅速走红的编程范式。其核心理念是：开发者不再逐行编写代码，而是用自然语言描述意图，让AI模型生成、调试和迭代代码，人类只需「感受」产品方向并做决策。这一概念的兴起背景是大语言模型代码能力的爆发式提升——GPT-4、Claude 3系列等模型已能处理复杂的多文件项目，理解上下文并保持代码风格一致性。Vibe Coding并非意味着编程知识毫无价值，而是将「会写代码」的门槛从必要条件降级为加分项，使产品思维、用户洞察和需求定义能力成为新的核心竞争力。

一个完全不会写代码的人，仅用下班后的5个晚上，借助Claude完成了一个具备搜索、筛选、外链功能的AI工具导航网站，并成功部署上线。这个过程揭示了一个重要趋势：Vibe Coding正在让「产品思维」比「编程能力」更重要。

第一阶段：产品规划比写代码更重要

作者在动手写任何代码之前，花了大量时间在Claude网页端做产品规划。他先告诉Claude自己要vibe coding一个产品，说明自己的能力范围和目的，Claude随即生成了一份「从零到一指南」，推荐了清晰的工作流：

• 网页端Claude：做产品规划、写文案、讨论需求
• Claude Code：进行核心开发，包括写代码、调试和部署

在6个产品方向中，作者选定了「面向自媒体创作者的AI工具导航网站」。接下来他在Claude上创建了一个项目，让AI写了一份项目的instruction操作指南——这份指南的质量已经可以直接当产品需求文档使用。

之后就是一轮又一轮的需求讨论：网站有几个页面、每个页面放哪些模块、用户怎么从首页跳到详情页。聊到后面，Claude直接画出了线框图，做成HTML文件，浏览器打开就能预览每个页面的样子。同时还确认了设计规范——只做浅色页面，覆盖短视频创作、图文自媒体、直播运营、知识付费四个使用场景。

关键洞察：到这一步为止，跟编程没有任何关系。核心能力只有一个——想清楚你要做什么。

这里也体现了MVP（Minimum Viable Product，最小可行产品）方法论的精髓。MVP概念由Eric Ries在《精益创业》中系统化，核心是用最小的资源投入验证最核心的产品假设。作者选择「AI工具导航」这一方向本身就体现了MVP思维：导航网站技术复杂度低、内容可快速填充、目标用户明确，是验证「能否独立完成一个线上产品」这一假设的理想载体。

第二阶段：搭建开发环境，让AI写代码

开发工具准备：Claude Code是什么？

Claude Code是Anthropic推出的面向开发者的命令行AI编程工具，于2025年正式发布。与网页端对话式Claude不同，Claude Code直接运行在本地终端环境中，能够读取、修改和创建项目文件，执行终端命令，并在真实的代码库上下文中工作。它的核心优势在于「代理式执行」——用户给出高层指令后，Claude Code能自主分解任务、规划步骤、调用工具并完成多步骤操作，而不需要用户手动复制粘贴每一段代码。这与传统的「问答式」AI辅助编程有本质区别，使其更适合完整项目的从零构建。

开发环境的搭建相对简单：学会使用终端，装好Claude Code和Node.js。作者使用的是Claude Code桌面版，操作流程非常清晰：

1. 在Claude网页端想好下一步要做什么
2. 让Claude帮忙写好提示词
3. 把提示词复制给Claude Code，让它先出计划
4. 确认计划没问题后，再让它动手写代码
5. 每写完一个模块，在Preview里看效果，不对就改

项目的「大脑」：CLAUDE.md文件与上下文工程

这里有一个非常重要的文件——CLAUDE.md，可以理解为整个项目的大脑。作者让Claude根据产品需求文档来编写这个文件，里面包含：

• 技术栈选型
• 设计规范
• MVP页面定义
• 数据结构
• 关键约束
• 文件结构约定
• 当前开发进度

CLAUDE.md文件的设计理念源于「上下文工程」（Context Engineering）这一新兴实践。大语言模型本质上是无状态的——每次对话都从零开始，无法自动记住上一次的决策。CLAUDE.md通过在项目根目录放置一个结构化的说明文件，让Claude Code在每次启动时自动读取项目规范，从而实现跨会话的「记忆」。这类文件在不同工具中有不同命名：Cursor使用.cursorrules，GitHub Copilot使用.github/copilot-instructions.md，但核心思路一致——将人类的决策和约束显式编码为AI可读的规则，而非依赖模型的隐式推断。

有了这份文件，Claude Code在后续开发中就能始终保持一致的风格和规范，不会写着写着就跑偏。文件越详细，AI的输出越可预期，「幻觉式」代码偏移的概率越低。

如何防止「屎山代码」

作者注意到很多人反映vibe coding容易写出质量很差的代码，于是主动搜集了这类问题的描述，直接抛给Claude让它出解决方案。Claude不仅一一作答，还生成了architecture.md项目架构说明文件，从根本上把项目骨架打牢了。这个做法非常聪明——与其等问题出现再修，不如提前让AI把架构设计好。

第三阶段：内容填充与上线

用AI批量生产内容

代码写完后就是填充内容。网站收录了近70个AI工具，国内外比例约6:4，其中10个由作者亲自确定为精选工具。工具介绍的文字风格分为三种层次：

• 实际深度使用过的
• 简单体验过的
• 榜单里推荐的

Claude帮忙生成了数据文件并填充进网站。在图标处理上，作者让Claude写了一个脚本，从Google的公开接口批量下载网站图标，一键搞定。

测试与Vercel部署上线

Claude Code生成了一份完整的测试清单：四个页面逐一检查，手机端和电脑端都测一遍，外链能否打开、搜索有没有bug，全部通过后才进入部署环节。

部署使用的Vercel是由Next.js框架创始团队创建的云部署平台，专为前端和全栈JavaScript应用设计。其核心价值在于将「代码推送到GitHub」与「网站自动上线」之间的流程压缩到极致——通过与GitHub仓库的OAuth授权连接，每次git push都会触发自动构建和部署，整个过程通常在60秒内完成。对于非技术背景的构建者，Vercel消除了传统部署中需要配置服务器、管理DNS、处理SSL证书等复杂运维工作，其免费套餐对个人项目和MVP验证已经足够。

连接GitHub仓库，配置构建参数，三分钟就拿到了一个真实的线上地址，网站正式上线。

五条Vibe Coding实战经验总结

作者总结了五条非常实用的vibe coding经验，值得每个想尝试AI编程的人参考：

1. 不要上来就写代码

产品规划、形态选择、