VibeCoding零基础教程（一）：基础框架和工具

一、开发入门：需要知道的几件事​

1.1 网页的本质：三种语言​

网页的本质由三种语言组成：​

​

#tPqGixdBkohk text { white-space: pre; }#tPqGixdBkohk .fb0 { stroke: var(--N900-FG, 0.15); }#tPqGixdBkohk .fb0 {stroke: rgba(31,35,41, 0.15)}#tPqGixdBkohk .fx0 { stroke-miterlimit: 10; }#tPqGixdBkohk .fx0 {stroke-miterlimit: 10}#tPqGixdBkohk .fa1 { fill: rgb(187, 191, 196); }#tPqGixdBkohk .fa1 {fill: rgb(187, 191, 196)}#tPqGixdBkohk .fx1 { font: 400 12px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#tPqGixdBkohk .fx1 {font-style: normal}#tPqGixdBkohk .fx2 { text-anchor: middle; }#tPqGixdBkohk .fx2 {text-anchor: middle}#tPqGixdBkohk .fx3 { dominant-baseline: central; }#tPqGixdBkohk .fx3 {dominant-baseline: central}#tPqGixdBkohk .fx4 { stroke: none; }#tPqGixdBkohk .fx4 {stroke: none}#tPqGixdBkohk .fc0 { fill: var(--text-caption); }#tPqGixdBkohk .fc0 {fill: #646a73}#tPqGixdBkohk .fa2 { fill: var(--text-link-disabled); }#tPqGixdBkohk .fa2 {fill: rgb(187, 191, 196)}#tPqGixdBkohk .fa3 { fill: rgb(225, 234, 255); }#tPqGixdBkohk .fa3 {fill: rgb(225, 234, 255)}#tPqGixdBkohk .fx5 { font: 700 18px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#tPqGixdBkohk .fx5 {font-style: normal}#tPqGixdBkohk .fx6 { text-anchor: start; }#tPqGixdBkohk .fx6 {text-anchor: start}#tPqGixdBkohk .fx7 { dominant-baseline: alphabetic; }#tPqGixdBkohk .fx7 {dominant-baseline: alphabetic}#tPqGixdBkohk .fc1 { fill: rgb(16, 16, 16); }#tPqGixdBkohk .fc1 {fill: rgb(16, 16, 16)}#tPqGixdBkohk .fx8 { font: 700 16px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#tPqGixdBkohk .fx8 {font-style: normal}#tPqGixdBkohk .fc2 { fill: rgb(48, 48, 48); }#tPqGixdBkohk .fc2 {fill: rgb(48, 48, 48)}#tPqGixdBkohk .fx9 { font: 400 16px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#tPqGixdBkohk .fx9 {font-style: normal}#tPqGixdBkohk .fb1 { fill: var(--N900-FG, 0.15); }#tPqGixdBkohk .fb1 {fill: rgba(31,35,41, 0.15)}#tPqGixdBkohk .fb2 { fill: rgb(236, 236, 236); }#tPqGixdBkohk .fb2 {fill: rgb(236, 236, 236)}#tPqGixdBkohk .fa4 { fill: var(--bg-body); }#tPqGixdBkohk .fa4 {fill: #fff}ABC1234语言作用设计师的类比HTMLCSSJavaScript网页的结构和内容网页的样式和外观网页的交互和动效就像 Figma 里的图层结构就像 Figma 里的样式面板就像 Figma 里的原型交互

​

​

举个例子，你在 Figma 画了一个卡片组件：一个圆角矩形，里面有一张图片、一段标题文字、一个按钮。​

​

​

​

​

💡

•

HTML 定义「这里有一个卡片，里面有图片、标题、按钮」​

•

CSS 定义「卡片是圆角的、有阴影、背景是白色、标题是 16px 加粗」​

•

JavaScript 定义「点击按钮会发生什么」​

​

1.2 前端、后端、数据库：三层各管什么​

先说结论：前端管你给别人看到什么，后端管事情怎么在背后流动，数据库管产品记住什么。​

​

​

前端：用户看到和操作的一切​

你在浏览器里看到的每一个像素，都属于前端。​

​

🚀

页面怎么排版、按钮多大、文字什么颜色、鼠标悬停有没有动效、点击之后跳不跳转——这些全是前端的范畴。换句话说，你在 Figma 里画的所有内容，最终都由前端负责呈现。​

💡 前端更核心的职责：把用户流程跑通。​

​

后端：按钮背后的逻辑处理​

用户在页面上点了一个按钮，接下来发生了什么？​

•

如果只是跳个链接，前端自己就能搞定。​

•

但如果涉及”处理”——比如提交一份表单、请求 AI 生成一段文字、保存一条记录——这些事情就不是前端能独立完成的了。这时候就需要后端出场。​

​

🚀

后端负责的是接收前端的请求、执行处理逻辑、返回结果。前端告诉你”用户点了什么”，后端来决定”接下来该做什么”。​

💡 一个简单的判断标准：如果你的网站只是展示内容（作品集、个人介绍），可能几乎不需要后端。如果你要加评论功能、AI 对话、用户登录这类”有动作”的功能，后端就开始发挥作用了。​

​

​

注意区分后端和数据库——后端是”做事的人”，数据库是”记录本”。​

​

数据库：让产品拥有”记忆”​

没有数据库的网站，每次刷新都像从零开始——你刚填完的信息没了，你刚才的操作也忘了。​

​

🚀

数据库解决把需要保留的数据存下来，下次还能找回来。用户注册的账号、提交的留言、保存的草稿，这些都需要数据库来管理。​

💡 一个实用建议：不用急着在第一天就搭数据库。先用写死的数据把页面和流程跑通，等确认哪些数据确实需要持久保存，再引入数据库也不迟。​

​

​

​

•

前端做的事：展示一个表单，包含姓名、邮箱、留言内容三个输入框，加一个”发送”按钮。用户填完后点击按钮，页面显示”发送成功”或”发送失败”。​

•

用户点击”发送”之后，前端不会自己发邮件，它只是把用户填的信息打包，通过一条约定的通道（也就是 API）交给后端处理。​

•

后端做的事：收到前端传来的信息后，先检查格式对不对（邮箱是不是合法的），然后调用邮件服务把消息发到你的邮箱。如果发送成功，告诉前端”成了”；如果失败，告诉前端原因。​

•

数据库在这里干什么？如果你想把每条留言都存下来，方便以后在后台查看，那后端在发邮件的同时，也会把这条留言写进数据库。下次你打开后台，就能看到历史留言记录。​

1.3 什么是框架和组件库？​

框架是什么？​

常用的前端框架（设计师只需要了解这些）：​

​

​

组件库是什么？​

常用的组件库：​

​

​

产品人视角的类比:​

​

​

1.4 网站做好了怎么上线：服务器、部署、域名​

你在自己电脑上预览网站，一切正常，但是截至目前你的网站还只活在你自己的电脑里。要让它对外可访问，需要搞清楚三件事：​

​

🚀

•

服务器就是一台永远在线、对外提供访问的电脑。你的网站文件需要放在上面，别人才有可能访问到。常见的平台有 Cloudflare、Vercel、Netlify，提供不同额度的免费方案。​

•

部署是把你的代码从本地电脑搬到服务器的过程，并确保它在服务器上正确运行。这一步相当于”发布上线”。​

​

​

三者之间的关系可以这样理解：服务器是”空间”，部署是”搬进去”，域名是”贴上门牌”。缺了任何一步，别人都打不开你的网站。​

​

一个最简单直接的流程，Github（上传代码）-> Cloudflare（绑定 github）-> 一键部署上线（可访问） ->（可选）绑定域名（Cloudflare 购买域名）​

​

​

​

二、AI 编程工具推荐​

AI 编程的核心是 模型 + 工具 的组合。模型是大脑，负责理解你的描述；工具是手脚，负责实际修改文件、运行命令。​

IDE 与 CLI 的区别​

​

💙

•

IDE（图形界面工具）像一个熟悉的代码编辑器（类似带 AI 的 VS Code），有窗口、侧边栏，看得见文件结构，操作直观。代表：Cursor。​

•

CLI（命令行工具）像终端窗口，只用文字对话，简单专注，灵活性高，能自动处理更多任务。代表：Claude Code、Codex。​

​

两者都能让 AI 直接操作你的项目文件。我经常把它们一起用。​

主流工具​

•

Cursor：图形界面 IDE，适合边看 Figma 边让 AI 生成组件。​

•

Claude Code：命令行工具，理解复杂需求强，适合调整整个模块。​

•

Codex（OpenAI）：轻量 Agent，能自主执行任务和调试。​

•

Gemini（Google）：免费额度高，适合快速尝试。​

​

三、产品需求文档 (PRD)​

先理清楚需求，再做事，这是 Vibe Coding 里最重要的一步。​

PRD（Product Requirements Document）原本指产品需求文档。在 Vibe Coding 里，它也是给 AI 的「项目说明书」：把你的想法翻译成结构化的要求，让 AI 少走弯路，减少反复迭代。​

​

🚀

零基础写 PRD 的 3 步：​

在项目根目录新建一个 PROJECT_PRD.md 文件。​

复制下面的通用模板，替换成你自己的内容。​

以后每次让 AI 修改时，都说：“参考根目录的 PROJECT_PRD.md，按里面的要求帮我实现……”​

​

​

​

通用 PRD 模板（直接复制使用）：​

​

​

有了 PRD 后，你后面的每次对话都可以围绕它展开。比如：​

​

请先阅读 PROJECT_PRD.md，然后帮我实现首页第一屏。不要改动 PRD 里写明暂不做的功能。​

​

这样 AI 就不会只盯着你当前这一句话，而是会把整个项目目标、设计要求和边界一起考虑进去。对 Vibe Coding 来说，这比单独写一个漂亮 Prompt 更重要。​

​

四、Vibe Coding 简单技巧​

4.1 Vibe Coding 的核心理念​

传统的编程学习路径是：先学语法，再理解概念，最后练习写代码。​

Vibe Coding 的路径是：描述需求 → AI 生成代码 → 运行看效果 → 迭代调整 → 完成。​

关键在于：你不需要先学会再做事。你可以在做事的过程中，慢慢理解代码。​

4.2 让 AI 帮你搞定一切环境配置​

很多人看不懂环境配置（安装 Node.js、配置 npm 等）。现在你可以直接告诉 AI：​

​

把这个项目跑起来​

​

AI 会自动检测环境、安装依赖、启动开发服务器，并告诉你访问地址。你只需要一个意图，剩下的事 AI 帮你完成。​

4.3 上下文管理：让 AI 理解你的意图​

不要说：“帮我改一下首页”​

要说：“我想修改首页 Hero 区域的布局。现在是左文右图，我想改成上下结构：上面是标题和简介，下面是头像图片。”​

上下文四个要素：​

​

💙

​

4.4 模型搭配和迭代对话​

AI 的能力由模型决定。实际开发时我常用模型搭配：​

•

用 Claude Code 或 Codex 梳理需求文档、精细调整和多文件重构（理解力更强）​

•

简单需求和代码编写可以使用 glm、minimax 等性价比较高的模型完成，设计到架构和方案，模型越好在后面越省事。​

​

迭代对话是 Vibe Coding 的精髓。不要指望一次就完美，而是通过多轮「反馈 → 调整」逐步逼近目标。​

​

4.5 善用 Skills、MCP、Agents​

等你开始频繁用 AI 改项目时，会遇到三个进阶词：Skills、MCP、Agents。它们听起来很技术，但可以先用一句话理解：​

Skill 是经验包，MCP 是连接器，Agent 是执行者。​

​

​

​

​

不同工具的叫法不完全一样。比如 Claude Code 里更常见的是 Subagents 或 Agent teams，有些工具会直接叫 Agents、子任务、工作流，意思都接近：把一个大任务拆开，让 AI 按角色去处理。​

举个设计师最容易理解的场景：你已经有一份 Figma 首页设计稿，想把它变成网站首页。​

​

💙

•

第一步，你可以先用普通对话让 AI 按设计稿搭出页面结构。这个阶段不用急着上进阶功能，先让页面看得见、跑得起来。​

•

第二步，如果你发现自己总是在重复强调「按钮要有 hover 状态」「间距用 8px 体系」「移动端不要挤在一起」，就可以考虑用 Skill。它相当于把你的设计检查清单变成一套固定工作方式，以后每次优化页面都能复用。​

•

第三步，如果 AI 需要读 Figma 文件、查浏览器里的真实渲染效果，或者读取某个外部文档，这时候就轮到 MCP。它不是让 AI 变聪明，而是让 AI 能拿到更多现场信息。​

​

​

五、建议的开发顺序​

概念都清楚了，接下来该动手了。但顺序很重要——很多新手失败不是因为能力不够，而是因为步骤搞反了。​

推荐的路径：​

确认技术方案。技术方案确定，后续可以沿着方向一路跑通，大方向错了，意味着一切都得重来。​

先做页面和交互。把设计稿变成可见、可点击的页面。这一步能帮你验证”用户流程到底顺不顺”。​

用假数据先跑通。不要急着对接真实服务，先用写死的内容把整个流程走一遍。​

再接入后端逻辑。页面跑通之后，你才清楚后端到底需要处理什么。​

按需加数据库。等确定哪些数据需要持久保存了，再引入数据库。​

部署上线。让网站真正对外可访问。​

最后打磨细节：绑域名、配密钥、加日志，把”能用”变成”稳当”。​

这个顺序看起来很基础，但能有效避免”做到一半推翻重来”的情况。先让最短的一条路跑通，再逐步完善。​

​

六、提前实操：让模板跑起来​

理论讲完了，下一篇我们会深入每个模块的具体实现。这里先给你一个最简单的起步方式：​

一句话启动项目​

开源模板地址：​

打开你选择的工具（用 TRAE 或 Kimi），下载开源模板，然后输入：​

​

帮我把这个项目跑起来。​

​

AI 会自动检查 Node.js、安装依赖、启动开发服务器，并告诉你本地访问地址。​

在代码中：​

​

💙

•

HTML 定义「这里有一个卡片，里面有图片、标题、按钮」​

​

这是最基础的一层。但你很快会发现，光知道这三种语言，还不够理解一个完整产品是怎么跑起来的。​

​