项目目标：在 Vibe Coding 中搭建可视化版本管理流程
本指南的目标是让设计师在 AI 编程（Vibe Coding）中，建立一套完整的版本管理流程。你将使用 Git 管理本地版本，GitHub 托管远程仓库，并通过可视化客户端（GitHub Desktop 或 UGit）直观地查看每次改动。最终，你将掌握一套让 AI 辅助执行 Git 操作，同时自己把控关键环节的协作方法。
技术方案
整体方案分为三个部分：
- 本地版本控制：使用 Git 记录项目文件的每一次修改，形成可回溯的版本快照。
- 远程仓库备份：使用 GitHub 托管项目的云端副本，确保跨设备可用和协作安全。
- 可视化客户端：使用 GitHub Desktop 或 UGit 作为图形界面，将 Git 操作和文件差异直观展示出来，降低命令行的学习成本。
环境与依赖
- 操作系统：Windows 或 macOS。
- Git：系统需安装 Git。如果尚未安装，可以从 git-scm.com 下载安装。安装后，Git 会在命令行中可用。
- GitHub 账号：打开 github.com，使用邮箱注册。
- GitHub Desktop（可选）：从 desktop.github.com 下载安装。
- UGit（可选）：从 ugit.qq.com/zh 下载安装。
- AI 编程工具：如 TRAE、Cursor、Codex 等，用于辅助执行 Git 命令。
核心概念
在开始操作前，先了解几个核心术语，它们会在后续步骤中反复出现：
- Repository / 仓库：一个项目目录，包含所有项目文件以及 Git 用于记录版本历史的隐藏信息。
- Commit / 提交：保存一次版本记录，就像给当前项目状态拍了一张快照，并附带一句说明（如“修复移动端按钮错位”）。
- Branch / 分支：一条独立的开发线。你可以在新分支上试验新功能，不影响主分支（main）。
- Merge / 合并：将一个分支的改动合并到另一个分支。
- Conflict / 冲突：当两个分支修改了同一个文件的同一部分时，Git 无法自动合并，需要你手动决定保留哪一边。
核心实现：分步搭建流程
第一步：注册并登录 GitHub
- 打开 github.com，使用邮箱注册一个账号。
- 注册完成后，登录你的 GitHub 账号。
第二步：找到并 Fork 一个项目仓库
- 以项目 https://github.com/ricocc/rico-skills 为例，打开该仓库页面。
- 点击页面右上角的 Fork 按钮，将该仓库复制到你的 GitHub 账号下。这样你就拥有了一个独立可修改的副本。
- 复制完成后，你会在自己的账号下看到这个仓库。
第三步：将仓库克隆到本地
- 在你 Fork 后的仓库页面，点击绿色的 Code 按钮，复制仓库的 HTTPS 地址。
- 打开你的 AI 编程工具，或直接在终端中执行以下命令，将仓库克隆到本地：
git clone 你复制的仓库地址- 克隆完成后，你本地就拥有了该项目的完整副本。
第四步：使用客户端可视化操作
安装并打开你选择的客户端（GitHub Desktop 或 UGit）。
使用 GitHub Desktop：
- 登录你的 GitHub 账号。
- 点击 File > Clone Repository，选择你刚才 Fork 的仓库，选择本地路径，点击 Clone。
- 克隆完成后，仓库会出现在客户端列表中。你可以看到文件变更、提交历史、当前分支等信息。
使用 UGit：
- 登录你的 QQ 账号。
- 点击 克隆远程仓库，粘贴你复制的仓库地址，选择本地文件夹，点击 克隆。
- 如果项目已经在本地，点击 打开本地仓库，选择项目文件夹即可。
第五步：让 AI 执行 Git 操作
在 AI 编程工具中，你可以直接向 AI 提出版本管理请求，例如：
- “检查当前仓库状态。” —— AI 会执行
git status。 - “提交并推送。” —— AI 会执行
git add、git commit和git push。 - “创建并切换到新分支，分支名为 feature-new-layout。” —— AI 会执行
git checkout -b feature-new-layout。
AI 执行命令后，你可以在客户端中立即看到对应的变化。
第六步：提交前自己检查 Diff
在 AI 完成修改并准备提交前，务必在客户端中查看 diff（文件差异）。
在 UGit 或 GitHub Desktop 中，左侧会列出所有被修改的文件，点击任意文件，右侧会显示该文件的具体改动：新增行用绿色标记，删除行用红色标记。
你不需要逐行理解代码，但至少需要确认：
- 改了几个文件？
- 有没有修改配置文件（如
.env、package.json等）？ - 有没有删除或覆盖大量内容？
如果发现任何异常，让 AI 解释后再继续。
第七步：提交、推送与分支操作
- 确认 diff 无误后，在客户端中写一句提交说明，点击 Commit 将本地修改保存为一个版本快照。
- 提交后，点击 Push 将本地的版本记录同步到 GitHub 远程仓库。
- 如果需要进行重大修改（如重构、换主题），先让 AI 创建一个新分支：
git checkout -b 新分支名。所有实验性修改都在新分支上进行，确保主分支（main）始终稳定。
配置说明：项目规则文件
为了确保 AI 在操作版本管理时不做越界行为，建议将以下内容写入你的项目根目录的规则文件（如 .cursorrules 或 README.md 中的约定部分）：
你可以执行 git status、git diff、git log。如果需要 commit、push、pull、merge、reset，请先说明你要做什么、为什么做、会影响哪些文件，等我确认后再执行。运行方法
- 准备：确认 Git 已安装，GitHub 账号已注册，且已通过客户端或命令行登录。
- 克隆项目：使用客户端或 AI 将 GitHub 上的仓库克隆到本地。
- 迭代修改：让 AI 在项目中进行代码修改。
- 检查 diff：每次修改完成后，在客户端中查看文件变更。
- 提交与推送：确认无误后，让 AI 或手动执行提交与推送操作。
- 分支管理：在进行重大修改前，创建新分支。
结果验证
完成以下验证清单，确认流程已跑通：
- GitHub 上有一个你 Fork 或创建的仓库。
- 本地已成功克隆该仓库。
- 客户端（GitHub Desktop 或 UGit）中能看到该仓库，并能显示文件变更。
- AI 成功执行了至少一次
git status、git commit和git push。 - 你在 GitHub 上能看到本次提交的记录。
- 你成功创建并切换到一个新分支，并在该分支上进行了修改。
常见问题
1. 只改代码，不提交
每日收工前、完成一个小功能后，都提交一次。提交是本地保存，即使电脑出现问题，已经提交的版本依然安全。
2. 提交了，但没推送
Commit 只在本地，Push 才是同步到 GitHub。换电脑、让 AI 接着改之前，务必确认是否已推送。
3. 看不懂 diff，就跳过不看
至少查看三件事：改了几个文件、有没有动到配置文件、有没有删掉大量内容。发现异常时，让 AI 解释后再决定。
4. 直接在 main 分支上大改
小修改可直接在 main 上操作。重构、换主题等重大改动，先创建新分支，将 main 分支作为稳定版本。
5. 遇到冲突不知道如何处理
冲突不是错误，是 Git 需要你决定保留哪一边的改动。让 AI 解释冲突的两边分别是什么，然后手动选择保留的内容。
6. 把密钥和配置文件上传到 GitHub
不要提交 .env、API Key、数据库密码等敏感信息。提交前，让 AI 检查是否包含敏感信息。
后续优化
- 学习 Git 基本命令：虽然交给了 AI，但了解
git add、git commit、git push、git pull、git branch等命令的含义，有助于理解 AI 在做什么。 - 逐步建立分支策略：从简单的“主分支 + 功能分支”开始，随着项目复杂，可以引入
main、develop、feature等分支模型。 - 管理大文件：如果项目包含图片、视频、PSD 等大文件，可以使用 Git LFS（Large File Storage）来管理。UGit 内置了 LFS 支持，GitHub Desktop 需要额外配置。
- 解锁客户端更多功能：GitHub Desktop 支持右键查看历史、回退版本、创建 Pull Request 等。UGit 支持文件锁、克隆指定目录、内置 LFS 等，对设计资源较多的项目更为友好。
