保姆级教程！写给设计师的 Vibe Coding 零基础指南（三）

一、全文速览图

二、这篇讲什么

当设计师开始 Vibe Coding 之后，版本管理是绕不开的一件事，当然在设计工作中，版本管理也是熟悉的概念了。

只是设计软件有内置版本历史，而开发需要单独的工具。

目前在 AI 编程中比较火热的设计类产品、工具，比如 Open Design, DESIGN.md、Design Skills 以及各种开源的设计工具、无限画布等，都是在 Github 中开源和迭代的，所以对于设计师来说，不是说一定要了解，但是随着 AI 的发展，设计边界模糊化，我认为这些势必对于设计师来说，是一份极大的助力，甚至对于未来转型、职业方向等，亦是一个重要的影响因素。

回到正题，这篇讲四件事，把设计的版本概念转化为开发的版本管理：Git 管版本、GitHub 管云端、客户端（GitHub Desktop 和 UGit）让你可视化管理，最后说说怎么让 AI 帮你做版本控制，以及哪些事得自己把关。

三、Git 是什么

Git 是一套版本控制系统。 它记录项目每一次变化，让你可以保存、回退、对比、合并。

你做 PPT、改设计稿的时候，可能会备份很多个版本：

- 界面设计-v1.fig
- 界面设计-v2.fig
- ...
- 界面设计-v99.fig
- 界面设计-最终版.fig
- 界面设计-最终版真的不改了.fig

在开发中，相比于设计软件（PS/Figma/…）有内置的历史记录，在开发的概念中，则需要单独的工具来做这件事，这就是 Git，它做的事情差不多，但更系统、也更可靠。

尤其你用 AI 改代码，改坏了想回到上一个能跑的版本，靠的就是 Git。

但 Git 只管你电脑上的版本记录。备份到云端、换设备、和别人协作，得靠远程仓库，也就是 GitHub。想涉猎开发，GitHub 几乎是必须拥有的账号。

下面这几个词后面会反复出现，先认识一下。

Repository / 仓库，就是一个项目。里面有代码、图片、配置文件，也有 Git 用来记录版本的隐藏信息。

Commit / 提交，就是保存一次版本记录。你可以理解成给当前项目拍了一张快照，并写一句说明，比如”修复移动端按钮错位”或者”新增主题切换面板”。

Branch / 分支，是一条独立的开发线。你可以在新分支上试功能，不影响主分支。就像复制一版设计稿来试新方案，试不成就删掉，主稿还是干净的。

Merge / 合并，就是把一个分支的改动合到另一个分支。

Conflict / 冲突，就是两边改了同一个地方，Git 不知道该听谁的，需要你确认。就像两个人同时改同一个 Figma 文件的同一页，需要决定保留谁的版本。

如果你只做自己的小项目，短期内不用把所有概念都玩明白。先抓住最核心的一条线：

修改，保存，上传，差异。

当 AI 说”我帮你提交一下”的时候，它在做三件事： 把改动的文件加入记录（git add），写一句说明这次改了什么（git commit），然后同步到 GitHub（git push）。

你不需要记这些命令，但知道它在做什么，就不会觉得莫名其妙。

分支为什么重要？

分支相当于备份，毕竟代码不像设计稿，一个文件可以存进所有版本。

如果 AI 改代码改乱了，你直接在主分支上改，改坏了想退回去，可能要花不少功夫，甚至丢失。但如果你在分支上试，改坏了直接切回主分支，项目还是稳的。

分支就是一个安全试错区，你可以放心让 AI 在里面折腾。

四、GitHub 是什么

GitHub 是一个代码托管平台，你可以理解成代码项目的云端仓库。Git 管你电脑上的版本记录，GitHub 管云端那份。

没有 GitHub，Git 的版本记录只存在你本地，换台电脑就没了。

GitHub 对零基础用户来说，至少有三个作用。

第一，拿项目。

很多开源项目、模板、Demo、组件库都在 GitHub 上。你要 Fork、Clone、下载 ZIP，基本都从这里开始。

第二，存项目。

AI 帮你改了代码，本地能跑，不代表安全。电脑坏了、文件删错了、AI 改乱了，如果你从来没提交过版本，也没推送到 GitHub，想找回来就很痛苦。

第三，协作和备份。

当你换电脑、换编辑器、让 AI 接着上一次进度继续改，或者把项目发给别人一起看时，GitHub 上那份远程仓库就是共同参照物。

所以我的建议是，先注册 GitHub。

打开 github.com，用邮箱注册。

注册完之后，不用急着学所有功能。你先会三件事就行：

1. 找到一个项目仓库
2. 点 Fork 复制到自己账号下
3. 点 Code 获取下载或克隆地址

这已经够你开始了。

以我自己的 rico-skills 为示例，这个仓库是我自己创作的开源 Skills，当前有两百多个 star。

网址：https://github.com/ricocc/rico-skills

点击 Fork 可以直接复制到自己的仓库，点击 Code 可以下载安装包，或者进行其他操作。

或者更简单一点， 直接把仓库地址给 AI，让 AI 帮你克隆、下载都是可以的。

五、让 AI 帮你做版本管理

在 Vibe Coding 中，版本管理这件事可以直接让 AI 来做。

比如 TRAE、Cursor、Codex 这些主流 AI 编程工具，都能直接读你的项目文件，也能在终端里帮你执行 Git 命令。

所以你不需要自己记 Git 的完整流程。开发前，可以先让 AI 检查当前仓库状态，必要时拉取最新代码；

修改完成后，让 AI 解释这次改了哪些文件，有没有明显风险。确认没问题后，直接对它说：

提交并推送。

如果 AI 提示你需要登录 GitHub，就按照它的指引登录即可。

虽然全程可以交给 AI， 但有几件事建议你坚持自己确认。

第一，提交前自己看 diff。AI 说”我只改了样式”，不代表它真的只改了样式。diff 是你最后的安全缓冲。

第二，push 前确认分支。很多混乱都是从推错分支开始的。

第三，冲突不要让 AI 一口气自动解决。AI 可以解释冲突、给方案，但最后保留哪一段，最好你自己确认。

第四，不要让 AI 随便 reset。reset、clean 这类操作可能会丢修改，先让它解释再决定。

一个比较稳的协作方式，是把这句话放进你的项目规则里：

你可以执行 git status、git diff、git log。
如果需要 commit、push、pull、merge、reset，请先说明你要做什么、为什么做、会影响哪些文件，等我确认后再执行。

六、客户端：GitHub Desktop 与 UGit

你可能会问：AI 都能帮我做版本管理了，为什么还要装客户端？

因为客户端能把版本管理变得直观可见。就像 Figma 的版本历史面板，你能看到每次改了什么、谁改的、改了哪些文件。 AI 改了哪些文件、当前在哪个分支、每次改动具体动了哪几行，客户端里一眼就能看到。装了客户端，你随时能看清 AI 做了什么，手动操作反而用得很少。

我常用的客户端有两个：GitHub Desktop 和 UGit。

1. GitHub Desktop：GitHub 官方，简单稳定

GitHub Desktop 是 GitHub 官方出的客户端，Windows 和 Mac 都能用。它最大的好处是跟 GitHub 集成顺，登录账号后，克隆仓库、提交、推送、切分支都是点几下的事。不足的是界面是英文。

如果你主要在 GitHub 上活动、英文界面也不影响你，GitHub Desktop 就够用。它的短板是功能比较基础：不支持只检出子目录，没有文件锁，大文件管理（Git LFS）虽然自带，但配置要自己去命令行敲。

官网：desktop.github.com

2. UGit：中文界面，更适合国内新手

如果你主要在中文环境里工作，我更推荐 UGit，当然绝对无广。

UGit 是腾讯自研的 Git 客户端，官网是 ugit.qq.com/zh。

我自己用下来，对零基础更友好一些。

它对新手友好的地方有这几点。

第一，中文界面，加上合理的分组和标签。

这件事听起来简单，但真的很重要。对刚入门的人来说，commit、stash、branch、merge 这些词已经够抽象了，如果界面全是英文，会多一层负担。

第二，diff 和 log 更直观。

做 Vibe Coding 时，你一定要养成看 diff 的习惯。AI 一次可能改十几个文件，你不能只看它说了什么，还要看它真的动了哪里。UGit 的文件变更、历史记录、版本回溯都比较适合可视化检查。

第三，适合多版本和多分支管理。

如果你同时开几个功能，比如一个分支改首页、一个分支改编辑器、一个分支试新组件，客户端能帮你降低很多混乱感。

第四，支持克隆指定文件夹。

这点对设计师和内容创作者很有用。很多大仓库你其实只想拿一个模板、一个 demo、一个素材目录。完整克隆会很慢，也会把电脑塞满。UGit 支持克隆时只勾选需要的目录，比命令行参数友好多了。

第五，大文件和设计资源管理更强。

它内置了 LFS 大文件管理，沉淀了腾讯不少大型项目（尤其游戏项目）的经验。你的项目里如果图片、视频、PSD、3D 资产很多，普通 Git 客户端处理起来会很吃力，UGit 这方面省心不少。另外它还支持文件和目录锁，你和协作者同时改同一个设计文件时，能避免互相覆盖。

3. UGit 上手：三步就能用起来

装好之后其实不复杂。

第一步，下载安装。

打开 ugit.qq.com/zh 下载对应系统的版本，装好登录。

第二步，把仓库连进来。

如果项目已经在 GitHub 上，选克隆远程仓库，粘贴仓库地址（在 GitHub 上点 Code 就能复制），选个本地文件夹，等它拉下来。

如果项目已经在本地，直接打开本地仓库，指到项目文件夹就行。

第三步，看 diff、提交。

让 AI 改完代码后，回到 UGit，左边能看到改了哪些文件，点开就是逐行 diff。确认没问题，写一句说明，点提交，再点推送同步到 GitHub。

这三步跑通，你就有了一个看得见的版本管理方式。

4. 两个客户端怎么选

GitHub Desktop 和 UGit 都行，按你的习惯选。主要在 GitHub、能接受英文界面，用 GitHub Desktop。想要中文界面，或者项目里设计资源和大文件多，用 UGit。

七、新手最容易踩的坑

1. 只改代码，不提交。

设计师应该深有体会“不保存”的痛苦。这是最常见的坑。你以为项目已经保存了，其实只是文件存在电脑上，没有版本记录。至少每天收工前提交一次；完成一个小功能、修好一个问题，也可以提交一次。

2. 提交了，但没 push。

Commit 只是在你电脑本地保存版本，push 才是同步到 GitHub。换电脑之前、让 AI 接着改之前、准备部署之前，都记得确认有没有 push。

3. 看不懂 diff，就干脆不看。

很多新手会觉得代码看不懂，所以直接跳过 diff。其实你不需要逐行理解代码，至少要看三件事：改了几个文件，有没有动到配置文件，有没有删掉一大片内容。只要发现不对劲，就先让 AI 解释。

4. 直接在 main 分支上大改。

小修改可以直接做，但如果你要重构页面、换主题、接入登录、改数据库，最好先建一个新分支。分支就是试验区，AI 改坏了也不至于影响主线版本。

5. 遇到冲突看不懂

冲突并非报错，只是 Git 在告诉你：两边都改了同一个地方，需要你决定保留哪边。不要让 AI 一口气自动解决。先让它解释两边分别是什么，再决定怎么合并。

6. 把密钥和配置文件传上 GitHub。

.env、API Key、数据库密码、访问令牌这类东西不要提交到公开仓库。让 AI 提交前，可以专门问一句：这次有没有把敏感信息提交进去？如果不确定，先别 push。

八、最后

到这里，版本管理最基本的一套就齐了：有 GitHub 账号，会 commit，会 push，知道分支是试验区，遇到冲突先看清楚再决定。

你用 AI 改项目，相当于让一个又快又强、偶尔会失手的助手帮你动文件。Git 和 GitHub 让你知道它动了哪里，也让你在失手时能退回来。GitHub Desktop 或 UGit，则让这一切看得见。

下一步，把这套流程用到你自己的项目上：开一个仓库，让 AI 改一次，提交前自己看一遍 diff。跑通一次，后面就成习惯了。

版本管理也不是开发独有的东西。 你作为设计师，每天都在做版本管理——Figma 的版本历史、图层的命名规范、文件备份的习惯、方案 A/B 的并行测试，这些意识你已经有了。

只是开发没有 Figma 那样内置的版本面板，需要单独的工具来干同一件事。理解了这一点，Git 就没那么陌生了。

所以说无论是设计、写作、作图、任何反复修改的创作都用得上。

我是 Rico，感谢阅读！