基础介绍

什么是 Vibe Coding

Vibe Coding，简单说，就是通过 agent 工具来写代码。我们用自然语言描述想法，让 Claude Code、Codex、豆包等工具帮忙生成和修改代码，再边运行边调整。

它不是“完全不用懂代码”。更像是：人负责想做什么、怎么取舍，以及最后验收；AI 负责完成大量具体的实现工作。

什么是 Web App

Web App 指的是通过浏览器访问的网络应用，比如常见的 Google、Bing、tanvibecoding.com，以及各种在线工具和后台系统。

除了 Web App，还有很多其他类型的应用：

  • 桌面应用，比如 Chrome、VS Code、Codex
  • 小程序
  • 移动端 App，比如抖音、淘宝
  • 浏览器插件

Web App 很适合作为 Vibe Coding 的入门项目：不用安装客户端，改完代码刷新浏览器就能看到效果，做好之后发一个链接就能给别人使用。

开发

要开发一个 Web App，通常需要两部分：

  • 服务器：负责处理业务逻辑、保存数据和提供接口，可以用 Java、PHP、JavaScript 等语言实现。
  • 前端页面：负责用户看到的界面和交互，主要就是 HTML、CSS 和 JavaScript。

小项目不一定一开始就需要完整的服务器和数据库。像计算器、简单的待办事项，前端就能完成；涉及登录、多人使用和数据保存时，再加上后端和数据库也不迟。

为什么推荐 JavaScript

因为前后端可以一把梭。前端在浏览器里用 JavaScript，后端可以用 Node.js，常见的页面、接口、数据库和部署工具也都有成熟的 npm 包。

对 Vibe Coding 来说，技术栈越统一，AI 需要处理的上下文越少，出问题时也更容易排查。项目变大后，可以再换成 TypeScript，增加类型检查。

为什么推荐模板

刚开始不需要同时纠结这么多选项：

  • React 还是 Vue
  • Next 还是 TanStack Start
  • D1 还是 Supabase
  • 自己做登录，还是接入第三方服务

这些问题很容易耗掉十多个小时，而且每个选项后面都有新的坑。AI 当然可以从零生成一套技术栈，但既然有经过验证的模板，没必要重复踩坑。

常见模板有 ShipFast、ShipAny、TinyShip、TanStarter 等。可以根据开发者、部署平台和技术栈来选。模板不需要越复杂越好，能覆盖当前项目就够了。

一个简单的开发流程

  1. 先说清楚第一版要解决什么问题，只做一个核心流程。
  2. 让 AI 先看项目结构，再开始改代码。
  3. 一次改一个小功能，改完就运行和检查，不要攒到最后一起排错。
  4. 不只看页面像不像，还要点一遍按钮，确认数据真的保存了、刷新后还在。
  5. API 密钥和数据库密码放在环境变量里，不要写进前端代码。

部署

开发完成后怎么让用户看到呢？不能给他们看 localhost:3000 吧...

我们需要一个服务器把代码放上去，这个流程就叫部署。

常见的部署方式有 Cloudflare、Vercel、Netlify，也可以自己买服务器。

为什么推荐 Cloudflare

Cloudflare 对入门项目比较友好，域名、HTTPS、CDN、静态页面和后端接口可以放在一套平台里。代码连接 Git 仓库后，提交代码通常就能自动构建和发布，也不用自己维护服务器。

如果使用 Cloudflare 的 Workers，可以把前端静态资源和接口一起部署；需要数据库、文件或简单缓存时，还可以按需使用 D1、R2、KV 等服务。个人项目和早期原型的成本通常也比较低，但具体额度还是要以当前官方套餐为准。

Cloudflare 也不是唯一答案。如果项目强依赖传统 Node.js、需要复杂的关系型数据库，或者你已经熟悉 Vercel 和其他云服务，就按项目需求来选，不必为了“免费”强行迁移。

部署的大致步骤

  1. 把代码提交到 GitHub。
  2. 在部署平台导入仓库，填写构建命令。
  3. 配置环境变量。
  4. 先用临时域名测试，确认功能没问题后再绑定正式域名。

结语

Vibe Coding 降低了写代码的门槛，但没有替我们做产品判断。对初学者来说，最简单的路径就是：选一个小需求，找一个合适的 JavaScript 模板，让 AI 一步步实现，然后尽早部署出来。

先跑通一个小而完整的 Web App，再慢慢学习框架、数据库和性能优化，通常比一开始纠结所有技术选项更有效。