AI 原生开放教材

外观

Vibe Coding 完全指南课时教程·中文原文 ↗仓库 ↗

第八章：进阶技巧 ​

本章你将学到： 版本管理（给代码"存档"）、拆分复杂需求、设计参考技巧、以及如何把你的作品部署到互联网上。

你已经入门了，现在来升级 ​

到了这一章，你已经能用 vibe coding 做出基本的项目了。这章要教的几个技巧，会让你更高效、做得更好、走得更远。

这些不是必学的——你完全可以先跳过这章继续做项目，等遇到需要的时候再回来看。

版本管理入门：给你的代码买保险 ​

为什么需要版本管理？ ​

想象一下这个场景：你的项目已经做得挺好了，然后你让 AI 加一个新功能，结果 AI 把之前好好的界面搞坏了。你想回到之前的版本，但发现已经回不去了——因为代码已经被改了。

这种"改坏了回不去"的问题，用版本管理就能解决。

版本管理就像游戏里的"存档点"。 你每做到一个满意的阶段，就"存一个档"。将来如果改坏了，随时可以"读档"回到之前的版本。

Git 是什么？ ​

Git 就是最主流的版本管理工具。你可以把它想象成一台"时光机"——它记录了你的代码的每一次变化，你可以随时回到过去的任何一个时刻。

Git 本身是命令行工具（在黑色窗口里打字操作的），但别担心，我们不需要学命令行。我们用 GitHub Desktop——一个有图形界面的 Git 工具，所有操作都是点按钮完成的。

GitHub Desktop 使用教程 ​

下载安装 ​

  1. 打开 https://desktop.github.com
  2. 点击下载按钮，选择你的操作系统（Windows 或 Mac）
  3. 下载完成后安装，用你的 GitHub 账号登录

它是完全免费的。

基本操作：保存一个版本（Commit） ​

当你的项目做到一个满意的阶段时：

  1. 打开 GitHub Desktop
  2. 左侧会显示你修改了哪些文件（改了的内容用绿色和红色标注）
  3. 在底部的输入框里写一句简短的说明，比如"完成了首页基本布局"
  4. 点击 "Commit to main" 按钮

这就完成了一次"存档"。你可以理解为："我把当前这个版本锁定了，以后随时可以回来。"

回到之前的版本 ​

如果改坏了想回去：

  1. 在 GitHub Desktop 顶部菜单栏找到 "History"（历史记录）
  2. 你会看到之前所有的"存档"列表
  3. 右键点击你想回到的那个版本
  4. 选择 "Revert Changes in Commit"（撤回这次的改动）

就这么简单。你不需要学什么 git checkout、git reset 这些命令行操作——全部点按钮完成。

实际场景 ​

比如你正在做一个记账工具：

  1. 做完了基本的记账界面 → 存档，写"完成记账界面"
  2. 加了统计图表功能 → 存档，写"添加统计图表"
  3. 让 AI 重新设计了一下界面，但改坏了 → 回退到"添加统计图表"那个版本

有了版本管理，你可以大胆地让 AI 做各种尝试，因为你知道——改坏了随时可以回去。

拆分复杂需求：大象要一口一口吃 ​

问题 ​

你想做一个"功能完整的记账应用"，于是一句话把所有需求丢给 AI：

"帮我做一个记账应用，要有登录注册、记一笔账、分类管理、月度统计图表、导出报表、多账本切换。"

结果呢？AI 可能会做出一个"什么功能都有但什么功能都不太对"的东西。因为需求太多太杂，AI 很难一次性全做好。

方法：像盖房子一样分步走 ​

把一个大项目拆成几个阶段，每个阶段只做一小部分：

阶段 1：骨架（页面布局，没有真实功能）

"帮我做一个记账应用的基础页面。顶部是标题栏，中间是账单列表区域（先用假数据），底部是一个'记一笔'按钮。"

阶段 2：核心功能（最基本的操作能用）

"现在让'记一笔'按钮能用起来：点击后弹出一个表单，填写金额和分类（餐饮/交通/购物/其他），提交后显示在列表里。"

阶段 3：次要功能（锦上添花的东西）

"给列表加上分类筛选功能，顶部加一个下拉框可以按分类筛选。再在顶部显示本月总支出。"

阶段 4：打磨样式（让它好看）

"调整整体样式：用卡片式布局，支出用红色，收入用绿色。加上一些圆角和阴影让它更精致。"

多会话管理 ​

如果你的项目比较复杂，可以每个大功能模块用一个独立的 AI 对话：

  • 对话 1：做基础界面和记账功能
  • 对话 2：做统计图表功能
  • 对话 3：做数据导出功能

这样每个对话的内容不会太长，AI 的"记忆"不会混乱，做出来的东西质量更高。

一个实际的拆分例子 ​

假设你想做一个"班级通讯录"网站。一股脑告诉 AI，它可能做得很混乱。但如果你这样拆：

第 1 天（或者第 1 个小时）：

"做一个通讯录页面，用卡片列表展示同学信息：头像（先用默认图标）、姓名、手机号。准备 5 条假数据。"

第 2 天：

"加一个搜索框，输入名字可以实时过滤列表。再加一个'添加同学'的按钮和表单。"

第 3 天：

"把数据存到浏览器本地存储里，这样刷新页面数据不会丢失。再加一个删除按钮。"

第 4 天：

"调整整体样式，加上分组功能（按首字母或者班级分组），让手机上也能正常显示。"

四次对话，每次目标明确，最终做出一个完整的通讯录。比一次性全部丢给 AI 效果好得多。

设计参考技巧：让你的作品更好看 ​

你不需要是设计师，但可以借鉴好的设计。

用参考网站描述风格 ​

与其用抽象的词描述（"帮我做得好看一点"），不如给 AI 一个具体的参考：

"我想要类似 Apple 官网那种简洁感——大量留白、细线条、深灰色文字"

"风格参考 Notion 那种——干净、方方正正、黑白为主、偶尔用一点亮色"

推荐的设计灵感网站 ​

Pinterest（pinterest.com）：搜索"网站设计""Web UI"可以找到大量灵感。最适合收集各种视觉参考，建一个自己的灵感板。

Dribbble（dribbble.com）：专业设计师分享作品的平台。搜索"landing page""dashboard"可以找到很多精美的界面设计。适合找具体的 UI 组件参考。

Awwwards（awwwards.com）：展示全球获奖的真实网站。和前两个不同的是，这里看到的都是真正在线的网站，你可以直接打开体验。

配色建议 ​

不知道用什么颜色？直接问 AI：

"帮我推荐一套适合个人博客的配色方案，要温暖、轻松的感觉"

AI 通常会给你几套颜色搭配，你挑一个喜欢的就行。

部署上线：让你的作品能被别人看到 ​

什么是"部署"？ ​

到目前为止，你做的东西只有你自己能看到。部署就是把它放到互联网上，让任何人都能通过一个网址访问。

就像你写了一篇文章，"部署"就相当于把它发表出去。

最简单的方式：工具自带的部署 ​

如果你用的是 Lovable 或 Bolt.new，好消息——它们自带部署功能。通常点一个"Deploy"或"Publish"按钮就行了，会自动给你一个可以分享的网址。

用 Vercel 部署（免费） ​

如果你用的是 Cursor 或 Trae，做出来的代码在你本地电脑上，需要手动部署。推荐使用 Vercel——它免费、简单、部署速度快。

准备工作： 先用 GitHub Desktop 把你的代码推送到 GitHub 上（点 "Push origin" 按钮）。

部署步骤：

  1. 打开 https://vercel.com ，用你的 GitHub 账号登录
  2. 点击 "Add New Project"
  3. Vercel 会显示你 GitHub 上的项目列表，选择你要部署的那个
  4. 点击 "Deploy"
  5. 等大约 30 秒，Vercel 就会给你一个网址，类似 your-project.vercel.app

部署后的好处： 以后每次你修改代码并推送到 GitHub，Vercel 会自动重新部署——你不需要手动操作。

Vercel 的免费额度对个人项目来说绰绰有余（每月 100GB 流量、100 万次请求）。

另一个选择：Netlify ​

Netlify（netlify.com）和 Vercel 很类似，也可以从 GitHub 一键部署。两者的主要区别是：

  • Vercel 的免费额度更多（6000 分钟构建时间 vs Netlify 的 300 分钟）
  • Netlify 的免费版允许商业使用，Vercel 的免费版只能用于个人非商业项目
  • 两者都提供自动 HTTPS 加密和全球 CDN 加速

对于个人学习项目来说，选哪个都行。我推荐 Vercel 是因为它的免费额度更大方。

自定义域名（可选） ​

如果你想要一个更好记的网址（比如 my-website.com 而不是 xxx.vercel.app），你可以买一个域名（通常一年几十元），然后在 Vercel 里配置。但这完全是可选的，vercel.app 的地址也完全能用。

部署后的维护 ​

部署上线之后，你的项目就"活"了——别人可以随时访问。如果你想更新内容或修复问题，流程是：

  1. 在本地用 AI 工具修改代码
  2. 用 GitHub Desktop 提交（Commit）并推送（Push）
  3. Vercel 自动检测到更新，几十秒内就重新部署好了

整个过程不到一分钟。这就是现代部署的便利之处。

了解 Skills 和 MCP：让 AI 工具更强大 ​

如果你用的是 Cursor 或 Claude Code 等编辑器/命令行端工具，了解一下 Skills 和 MCP 这两个概念会让你如虎添翼。这是进阶内容，现在看不懂也没关系，等你用熟了基本功能再回来看。

Skills：教 AI "怎么做事" ​

Skills 就是一套写好的"工作指南"，告诉 AI 在特定任务中应该遵循什么步骤和规范。

举个例子：你可以安装一个"代码审查"的 Skill，之后每次让 AI 帮你审查代码，它就会按照标准的审查流程来做——而不是随意看两眼就说"没问题"。

简单理解： Skills 像是给 AI 一份"操作手册"，让它做事更专业、更规范。

常见的 Skills 包括：

  • 代码审查流程
  • 前端开发规范
  • 测试驱动开发流程

MCP：让 AI "连接外部世界" ​

MCP（Model Context Protocol）是一个标准协议，让 AI 能够连接和操作外部工具。

没有 MCP 的 AI 只能读和写代码。有了 MCP，AI 还能：

  • 读写飞书/Notion 文档
  • 操作浏览器（截图、填表、点击）
  • 获取 Figma 设计稿并自动生成代码
  • 查询最新的技术文档

简单理解： MCP 像是给 AI 装上了"手"和"眼睛"，让它不仅能想和写，还能看到和操作外面的世界。

常用的 MCP 工具包括：

MCP 工具能做什么
Playwright自动化操作浏览器、网页截图
Figma获取设计稿、生成 UI 代码
Lark MCP读写飞书文档
Context7获取最新的技术库文档

现在需要学这些吗？ ​

不需要。 Skills 和 MCP 是进阶功能，等你对 vibe coding 的基本流程熟练后，再来探索这些能力。把它们当作你未来的"升级选项"就好。

本章小结 ​

  • 版本管理： 用 GitHub Desktop 给代码"存档"，改坏了随时回退
  • 拆分需求： 大项目分四步走——骨架、核心功能、次要功能、样式打磨
  • 设计参考： 用 Pinterest/Dribbble/Awwwards 找灵感，给 AI 具体参考而非抽象描述
  • 部署上线： 网页端工具自带部署，编辑器端工具用 Vercel 一键部署
  • 进阶概念： Skills 是教 AI 做事的规范，MCP 是让 AI 连接外部工具

下一步预告 ​

你已经掌握了从入门到进阶的所有核心技能。下一章，我们来看三个完整的实战案例——从最初的想法到最终的成品，完整展示 vibe coding 的真实过程。