# 第八章：进阶技巧

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

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

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

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

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

### 为什么需要版本管理？

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

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

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

### Git 是什么？

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

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

### GitHub Desktop 使用教程

#### 下载安装

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

<!-- screenshot: GitHub Desktop 官网下载页面 -->

它是完全免费的。

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

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

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

<!-- screenshot: GitHub Desktop 的 Commit 操作界面，标注文件变更区域、说明输入框和 Commit 按钮 -->

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

#### 回到之前的版本

如果改坏了想回去：

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

<!-- screenshot: GitHub Desktop 的 History 界面，标注如何回退版本 -->

就这么简单。你不需要学什么 `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"按钮就行了，会自动给你一个可以分享的网址。

<!-- screenshot: Lovable 的部署按钮和生成的链接 -->

### 用 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`

<!-- screenshot: Vercel 部署流程的关键步骤截图 -->

**部署后的好处：** 以后每次你修改代码并推送到 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 的真实过程。