什么是 Vibe Coding，为什么地图要先行
Vibe Coding 是指用自然语言把想要的东西告诉 AI，让它来构建程序，而不是学一门编程语言自己敲代码。你说“帮我做一个单页介绍网站”，AI 就会写代码、展示过程，并给出成品界面的实时预览。人负责决定做什么、把握方向，实际敲代码交给 AI。
然而初次接触编程的人常常还没开始就退缩，因为工具名称和概念很陌生。真正的问题不是某个概念特别难，而是缺少一张“这些东西如何拼成一个完整网站”的整体图景。没有地图，即使把每个点都讲得很清楚，你仍会在每一步迷路。
所以在背下每个工具的用法之前，先摊开整张地图。它有三大块：(1) 用什么工具来做，(2) 如何做出可见的界面（前端），(3) 如何填上界面背后处理数据的部分（后端）。按顺序走完这三块，Vibe Coding 从头到尾就一目了然。
LLM 与编程代理：大脑与手脚
先区分两个词。LLM（大型语言模型）是一个用海量数据训练出来的“大脑”。ChatGPT、Gemini、Claude 都是 LLM。它能回答、写作、推理代码，但它本身无法直接在你的电脑上创建或修改文件，只以对话窗口里的文字形式存在。
给这个大脑装上手脚、让它真正干活的，是编程代理。编程代理接收 LLM 的判断，在你的电脑上创建文件、修改代码、执行命令、检查结果。会思考的大脑（LLM）加上会行动的手脚（代理）——两者结合才成为 Vibe Coding。你实际安装并使用的，就是这个编程代理。
编程代理有多种产品、多种思路。如果你想随意替换不同的 LLM，Cursor 这类工具更方便。但这张地图走最简单的路，围绕近来成果出色的 Claude Code 来讲解。
配置工具：昔日的复杂与今日的简单
过去配置很复杂。你要打开满是英文命令的黑色画面——“终端”——去安装陌生的程序，另外安装用于预览的编辑器（Visual Studio Code，简称 VS Code），还要在那个黑色画面里用命令配置记录撤销历史的 Git。很多步骤你只是照做，并不清楚那是什么。
这里有个术语：终端是用输入的文字（而非鼠标点击）来命令电脑的窗口。我们用的 Windows、Mac 那些漂亮界面，其实也只是给原本靠这些命令运行的东西盖上了一层方便的外壳。早期的编程工具没有这层方便外壳，所以你只能直接对付黑色画面。
如今 Claude Code 的 PC 版把这一切都独立替代了。无需另开终端或编辑器，安装、登录之后，对话、编程、预览都在一个窗口里完成。安装方法：在谷歌搜索“Claude Code”，进入官方下载页，下载并运行适合你电脑（Windows/Mac）的安装文件。装好后启动，用 Claude 账号登录，在窗口左上角选择“Code”标签（而不是聊天标签），就会打开编程界面。在对话框里用中文（或任意语言）下指令，代码就会被写出来，成品预览也直接显示在里面。
该如何看待成本
有一点要坦白。这类替你写代码的工具通常需要付费订阅。要使用 Claude Code 里真正的编程功能（Code 标签），可能需要 Pro 或更高的付费方案。
但换个比较对象，判断就会不同。原本雇一名开发者或外包做一个网站，起码要花数百万韩元（视频里举例超过 200 万韩元）。而订阅费远低于此，且这一份订阅能做出好几个网站。一开始用较便宜的方案，等要认真做服务时再升到更高档位即可。
把“要花钱”换成“比外包省多少”，在快速变化的时代，这算得上一笔不错的投资。尤其对独自制作并运营服务的一人开发者来说，这等于把一名开发者的薪资换成了一份工具订阅。
Git 与 GitHub：存档文件与网络仓库
装好工具后，需要一个保存工作的地方。Claude Code 每次修改代码，都应把那次变化保存下来，出问题时能回退到之前的状态。扮演游戏“存档文件”角色的，就是 Git。Mac 大多默认自带；Windows 可能没有，只需自行安装一次（从 git-scm.com 下载安装文件，所有选项保持默认、一路点“下一步”装完，然后重启 Claude Code）。
GitHub 就是在 Git 后面加了个“hub（枢纽）”——一项把 Git 保存的记录放进网络仓库的服务。如果说 Git 是在你自己电脑里保存，GitHub 就是那些记录存在互联网上的仓库。连上它，你就能把代码在线备份、在多台设备上接续工作，日后把网站发布到互联网时也会用到。
连接方法：在 GitHub 注册后，回到 Claude Code，从输入框旁的加号（+）按钮打开 Connect 菜单，选择 GitHub，用刚注册的账号完成认证即可。之后每当你说“把目前做的上传到 GitHub”，那一刻的代码就会被保存。只要记住它不是每时每刻自动保存，而是你要求时才保存。
前端与后端：表盘与齿轮
现在来做网站，而网站大致分为两部分。用手表来比喻就很好懂：有可见的表盘（指针与数字），也有背后转动的齿轮。手表要走，两者缺一不可。网站也一样——可见的界面是前端，界面背后存储与处理数据的部分是后端。
前端就是你看到的界面。原本用 HTML、CSS、JavaScript 之类的语言来写，再叠上一层“框架”（React、Flutter、React Native——就像把常用功能预先打包好的料理包）。名字很多，容易被吓到，但在 Vibe Coding 里你只需知道它们存在。
关键在于顺序。先估量你服务的规模。比如一个简单的订阅制服务，规模不大、要存的数据也少。把这个规模告诉 Claude Code，请它用匹配的语言和结构来写，代理就会挑一个合适的技术栈。不满意就让它换别的即可。这一步之所以重要，是因为若用适合小项目的结构来写，日后流量激增时网站可能撑不住。一开始就按规模来写，正是这一步的意义所在。
帮我做一个简单的单页公司介绍网站。
先告诉我你会用哪种技术栈和语言，
并用适合这种小规模的轻量结构来写。后端这道墙与两位管理者：Supabase 与 Vercel
前端不太费劲就能出来。麻烦在下一步。要给介绍页加上注册和留言板，光有界面不行——需要一个存储与处理数据的后端。而这正是大多数没学过编程的人放弃的地方，因为后端要操心的东西很多：服务器程序、数据库、API、部署、端口。
哪怕只是让一个注册功能跑起来，也需要一个存放会员信息的数据仓库，以及让界面和仓库互相沟通的代码。过去为此你得从亚马逊云服务之类的地方租一台服务器（电脑），把代码上传到那台服务器，安装 Web 服务器程序，再连接域名——一整条复杂的流程。
如今有两位管理者替你处理这条流程。一位是 Supabase——把租服务器、建数据库、存数据一次搞定的“数据管理者”。另一位是 Vercel——把做好的网站发布到互联网的“部署管理者”。你只需理解：这两位替你接管了过去那套复杂流程。
连接 Supabase：在 supabase.com 注册并登录（可用 GitHub 账号），新建一个项目（New Project）。数据库密码用 Generate 按钮自动生成并另行记下。地区在韩国就选首尔。一旦创建，一个空的后端（服务器）就真的建好了。接着从顶部的 Connect 按钮或设置里的 API keys，复制两样东西——项目 URL（你的后端地址）和公开密钥（钥匙）——粘贴进 Claude Code，说“把我刚做的网站连到这个 Supabase”，它就会写好连接代码，甚至连创建数据表的语句也一并生成。把那些语句粘到 Supabase 的 SQL Editor 里并 Run，表就建好了。由于密钥形同密码，切勿对外公开；稳妥的做法是让 Claude Code 打开专门放密钥的文件，把它登记进去。
用 Vercel 部署：目前做好的网站只在你电脑里运行（用 YouTube 打比方，就是剪好了但还没上传）。打开 vercel.com，用“Continue with GitHub”登录，它便直接连上你的 GitHub 仓库。点 Add New 再点 Project，拉入你做的那个网站仓库，按 Deploy。稍等片刻，就会得到一个像“项目名.vercel.app”那样谁都能访问的网址。此后即便你的电脑关机，全世界任何人都能看到这个网站。更妙的是，今后你每次在 Claude Code 里改好代码并推送到 GitHub，Vercel 都会自动把网站刷新到最新版本。“部署管理者”这个名字正由此而来。
地图折成三行（以及下一张地图）
以上就是 Vibe Coding 的整张地图。从配置工具，到做出界面，到填上界面背后的数据，再到发布上网——走完了一整圈。现在你只要对 Claude Code 下指令，网站就准备好被造出来了。
复习只需三行。一，工具是 Claude Code。二，前端要说明服务规模，把语言和技术栈交给它。三，后端交给 Supabase（数据）和 Vercel（部署）。脑中记住这三行，日后冒出陌生术语时，你能立刻把它定位到地图上的某个点。
下一张地图，从“做得出来”走向“怎样做得更好”。诸如 harness、MD（指令文档）、skill、connect、API、agent 之类的概念会在那时登场。名字看着难，但它们都叠在你已摊开的地图之上，按顺序看就并不难。本文以初学者视角，梳理了 Honjabs 频道《一张地图讲透 Vibe Coding》的第一部。