Article

版本管理 Git、GitHub 与 UGit - 写给设计师的 Vibe Coding 零基础指南系列

更新于:2026-07-08 12 min read

一、这篇讲什么

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

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

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

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

git-guide


二、Git 是什么

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

what-is-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 的版本记录只存在你本地,换台电脑就没了。

what-is-github

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

第一,拿项目。

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

第二,存项目。

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

第三,协作和备份。

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

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

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

github

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

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

这已经够你开始了。

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

https://github.com/ricocc/rico-skills

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

what-is-github

在客户端中克隆下来,修改和查看差异

或者更简单一点, 直接把仓库地址给 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。

GitHub Desktop:GitHub 官方,简单稳定

github-preview

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

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

官网:desktop.github.com

UGit:中文界面,更适合国内新手

ugit

如果你主要在中文环境里工作,我更推荐 UGit,当然绝对无广。 UGit 是腾讯自研的 Git 客户端,官网是 ugit.qq.com/zh

ugit

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

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

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

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

第二,diff 和 log 更直观。

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

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

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

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

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

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

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

UGit 上手:三步就能用起来

装好之后其实不复杂。

第一步,下载安装。

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

第二步,把仓库连进来。 如果项目已经在 GitHub 上,选克隆远程仓库,粘贴仓库地址(在 GitHub 上点 Code 就能复制),选个本地文件夹,等它拉下来。

ugit

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

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

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

两个客户端怎么选

ugit

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


六、新手最容易踩的坑

只改代码,不提交。

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

提交了,但没 push。

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

看不懂 diff,就干脆不看。

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

直接在 main 分支上大改。

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

遇到冲突看不懂

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

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

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


七、最后

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

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

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

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

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

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

我是Rico,感谢阅读!

Rico的设计漫想

关注我的微信公众号

我在这里专注文字创作,分享设计观察、产品思考、个人网站和前端实践的长文与资源。

  • Design Notes
  • Vibe Coding
  • Rico Writing
微信公众号二维码
Rico的设计漫想