# 想开始 vibe-coding，先把这 8 个工具放上桌面
**作者**: Russell
**日期**: 2026-04-14T07:27:24.000Z
**来源**: [https://x.com/Russell3402/status/2044394530875846959](https://x.com/Russell3402/status/2044394530875846959)
---
上次我们学习vibe-coding过程中可能遇到的术语：
这次我们一起来看vibe-coding好用的新手工具集！
很多新手一聊 vibe-coding，第一反应都是：
我该用哪个模型？用什么prompt？
这个问题当然重要。
但如果你真想把东西做出来，它往往不是第一问。
第一问更像是：
你有没有一套够用的工作台。
因为新手最容易卡住的地方，往往不是模型不够聪明。
而是看不清文件结构，不知道改了什么，不会回退，不会画界面，不会找图标，不知道数据放哪，也不知道做完以后怎么发给别人。
所以这篇我不聊玄学。
就聊一套对新手最够用的 vibe-coding 工具桌面。
你不用一次学完。
先把这 8 个工具认清，已经能少走很多弯路。
## 1. IDE：先把工作台搭起来
如果你是中文用户，我更建议先从 Trae 国际版 / Trae 国内版 开始。
原因不复杂。
新手最缺的不是“AI 帮你写代码”。
新手最缺的是一个看得清全局的工作台。
不是说非得看懂代码，而是看懂架构和格局。
左边能看文件树。
上面能全局搜索。
中间能直接改代码。
下面能开终端跑命令。
旁边还能顺手看 Git 改了什么。
这就是 IDE 最好的地方。
它不是一个写代码窗口。
它更像你的修理台、总控台和驾驶舱。
很多人一开始直接用像Codex，ClaudeCode聊天框式工具，短期很爽，长期很容易迷路。
AI 给你改了 6 个文件，你连入口在哪都不知道，下一次再出 bug，就只能继续问模型，心里会越来越虚。
IDE 先把“看清楚”这件事解决了。
至于为什么我这里不优先推荐 Cursor 和 Windsurf，不是说它们不能用。
而是如果你的主要语境就是中文、主要需求就是尽快上手、尽量少被英文和国外产品习惯绊住，Trae 对很多中文用户会更顺手一点。这一条更接近使用体验判断，不是实验室结论。
你如果已经习惯别的编辑器，当然也不必硬切。
一句话记住：
IDE 解决的是“你能不能看清晰自己手上的项目”。
这一步没站稳，后面都会飘。
## 2. Git：别让 AI 改完以后，你连自己改了什么都说不清
如果说 IDE 是工作台。
那 Git 就是你的版本时光机。
很多新手怕 Git，不是因为它真的难。
而是它一上来就扔一堆词：仓库、分支、远程、本地、commit、push、pull、fetch、clone。
看起来像在背术语。
其实你把它想成“仓库和发货系统”，一下就顺了。
先讲三个最重要的概念。
仓库：你的项目仓库
你可以把仓库想成一个“专门放项目的仓库”。
这个仓库里不只是放文件。
它还会记住：
- 你什么时候改过
- 改了哪些文件
- 每次改动是为了什么
- 现在这份代码和昨天那份有什么不同
本地仓库：你电脑里的仓库
就是你自己电脑上的那一份。
你平时改代码，大多数时候都先在这里动手。
远程仓库：云上的仓库
比如放在 GitHub 上的那一份。
它像一个云端总仓。
你自己电脑坏了，它还在。
别人想一起协作，也主要是围着这个远程仓库转。
分支：平行施工线
分支可以理解成“平行施工线”。
主分支像正式营业中的店面。
你想试一个新功能，又不想把线上那套搞乱，就另外拉一条施工线出来干。
试成功了，再并回主线。
试失败了，也不至于把主线炸掉。
这就是分支最朴素的作用：
让你能边试边错，但别把正在用的东西一起拖下水。
## Git 最常见的 6 个动作，用人话讲
clone
意思是：
把远程仓库整仓复制一份到你的电脑里。
像你去总仓拿了一整套货，搬回自己工作台。
第一次接手一个项目，常常就是从 clone 开始。
add
这是最容易让新手懵的一步。
你改完文件以后，Git 不会默认觉得“这些就要进下一版”。
add 更像是：
把你刚改好的这些东西，先放进待打包区。
你可以把它想成发快递前，先把要寄的东西放进箱子。
箱子外面的东西还在桌上，不算正式寄出。
commit
commit 就像把刚才那箱东西封箱，然后贴上一张说明单。
上面写：
这次改动是干嘛的。
比如：
- 修了登录页按钮没反应
- 增加了文章详情页
- 调整了首页样式
所以 commit 不是“发到云上”。
它更像是：
在本地正式存一个带说明的版本存储照片。
push
push 才是把你本地已经封箱的这些版本，发到远程仓库。
也就是从你电脑，推到云上的总仓。
不 push，别人通常看不到你刚才那些提交。
pull
pull 是把远程仓库的新变化拉回你本地。
可以理解成：
总仓那边更新了，你把最新货也搬回自己的工作台，顺手合并进来。
如果你和别人协作得比较多，或者你在两台电脑上工作，pull 会很常见。
fetch
这个词比 pull 更轻一点。
你可以把 fetch 理解成：
先去总仓看一眼最近有什么新货到了，但先不急着拆箱合并。
它只是先把远程更新拿回来给你看。
pull 更像“看完顺手搬回来并整理进本地”。
fetch 更像“先把到货信息拿回来，我自己再决定怎么处理”。
## Git 为什么对 vibe-coding 特别重要
分支是什么
因为 AI 改代码很快。
快的另一面，就是你更容易失控。
昨天只改一处。
今天模型一口气帮你动了 11 个文件。
如果你没有 Git，很多时候你根本说不清：
到底是哪一步开始坏的。
有了 Git，你至少多了三种底气。
第一，你能看 diff。
也就是看这次到底改了哪几行。
第二，你能按提交回看历史。
第三，你能开分支试，不满意就退。
所以新手学 Git，不是为了显得专业。
是为了别让自己被 AI 的速度甩飞。
你不用第一周就学很复杂的 rebase、cherry-pick、stash。
先把下面这条最小动作链记住就够了：
clone -> 改文件 -> add -> commit -> push
协作时再补一句：
开工前先 pull，想先看更新但不合并，就用 fetch。
这已经够你过掉新手期最容易炸的那一段了。
## 3. UI 设计：别让产品死在“脑子里很好看”
很多人做 vibe-coding 的时候，代码都还没开始写，脑子里已经有了一个“应该很高级”的产品。
问题是，脑子里的界面最容易骗人。
所以第三个工具位，是 UI 设计。
如果你想快速把界面想法变成草图，我建议可以先试 Stitch 这一类 AI UI 工具。
它的价值是让你更快把“这个页面大概长什么样”先压出来。
如果你喜欢自己手绘、自己拖组件，传统上当然很多人会想到 Figma。
但如果你只是想要一个更轻一点、更符合中文团队习惯的设计工具，我会更推荐 Pixso： https://pixso.cn/
原因也很现实：
大多数新手现在不缺“能不能做出一个很完整的设计系统”。
缺的是“能不能先把页面结构画清楚”。
按钮放哪。
卡片怎么排。
首页先展示什么。
用户点进去先看到什么。
这些问题先落在图上，后面让 AI 写前端才会更稳。
UI 工具在这里像什么？
像装修前先拉一张平面图。
不是为了炫设计术语。
是为了别让施工队看着你的“感觉”盲干。
## 4. 动效：产品不是只有能不能用，还有顺不顺手（可选，需要一定美术功底）
页面能打开，只是第一层。
很多产品最后看起来“廉价”，不是因为功能不行。
是因为所有东西都硬切。
弹窗是硬弹出来的。
按钮点了像没点。
页面切换像瞬移。
这时就轮到动效工具上场了。
如果你要做更精细、可交互的动效，可以看 Rive。
如果你是做一些更轻量的动画资源，比如加载动画、提示动画、成功状态动画，Lottie 这条线会更常见。
这里最重要的不是你一开始就做多炫。
而是你要知道：
动效不是装饰品。
它很多时候在负责反馈。
比如按钮按下去以后，转一下圈，用户就知道系统在处理。
提交成功以后有个小动画，用户就知道事情完成了。
这会直接影响“这个产品像不像活的”。
## 5. 图标：AI画的太丑了
很多新手做到这里，会开始在最不值钱的地方浪费时间。
比如为了一个搜索图标，折腾半小时。
这真的没必要。
图标这块我建议分两路。
第一路是 阿里巴巴矢量图标库 Iconfont。
好处很直接：
中文搜索友好。
找图标快。
很多国内常见场景都能很快搜到。
第二路我会补一个组件库/图标库方向的推荐：Lucide。
如果你做的是网页产品、后台、SaaS、小工具，Lucide 这种干净、统一、开源、生态兼容度高的图标库会很好用。
它的优点不是“花”。
恰好是“稳定、统一、不抢戏”。
图标这部分别想复杂。
它解决的是“界面里的小符号统一不统一”。
统一了，产品会整洁很多。
不统一，用户说不出哪里怪，但会觉得哪哪都散。
## 6. 图片、视频：先当参考素材库，不要一上来就全押上去
图片和视频这块，你提到 Lovart，我觉得这个定位很对：
可以参考，但不用一上来强推荐。
因为对很多新手来说，这一层现在还属于“加分项”，不是“开工门票”。
如果你的产品一开始核心是功能验证，那图片、视频工具先拿来做参考、找感觉、补一点演示资产就够了。
它更像什么？
像陈列和海报系统。
能帮你提升第一眼质感。
但在项目前期，它往往还不是决定生死的那一层。
所以这里别走偏。
不是说图和视频不重要。
而是别在产品还没站起来的时候，先把所有精力都砸在视觉热闹上。
## 7. 数据库：新手先用 Supabase，免费版已经很够用了
数据库这个词，容易把新手吓到。
一听就像要去学一套很硬的后端工程。
其实第一次做小产品，你更该关心的是：
产品要不要记住用户。
要不要保存数据。
聊天记录要不要留。
注册登录要不要接。
如果这些开始需要了，Supabase 是一条对新手很友好的路。
原因很简单。
它把数据库、鉴权、存储、一些常见后端能力，打包成了一个更容易上手的服务。
你不用一开始就自己从零搭一整套后端基础设施。
而且按官方当前定价，Supabase 现在有免费计划。对大多数验证阶段的小产品来说，这一层通常已经够用了。
你可以把 Supabase 想成：
先租一个带基础设施的小仓库。
别一上来自己盖物流园。
## 8. 部署：先上 Vercel，让别人能打开
很多人做产品，最大的幻觉就是：
我本地已经跑起来了，差不多算做完了。
其实差很远。
你电脑里能开，只说明你自己能看。
别人能不能点开，是另一回事。
所以部署工具一定得有。
如果你是新手，做的又主要是网页、小工具、前端项目，我很推荐先上 Vercel。
理由也很朴素。
它部署快。
对前端和现代 Web 项目很友好。
而且按官方当前定价，Vercel 也有 Hobby 免费计划。做验证版、小流量版本、作品集和原型，通常已经够用。
部署这个动作本身特别重要。
因为产品一旦被部署出去，很多假问题会消失，很多真问题会冒出来。
页面在别人手机上会不会错位。
接口会不会真报错。
你的密钥是不是漏配了。
这些在“只活在自己电脑里”的阶段，很多都藏着。
所以部署不是最后的仪式。
它更像第一次把东西送去见人。
## 新手工具包总结
如果你是第一次认真开始 vibe-coding，我建议你的默认组合可以先这样配：
- IDE：Trae 国际版 / Trae 国内版
- Git：先学最小动作链，配合 IDE 内置可视化一起用
- UI：Stitch 出草图，Pixso 细化界面
- 动效：Rive / Lottie
- 图标：Iconfont + Lucide
- 图片/视频：Lovart 先当参考素材库
- 数据库：Supabase
- 部署：Vercel
这套东西看起来不少。
但它们其实刚好对应了新手最常卡的 8 个坑：
- 看不清项目
- 不会管版本
- 画不清界面
- 不会做反馈
- 视觉细节乱
- 素材没有方向
- 数据没地方放
- 做完发不出去
所以我越来越觉得，vibe-coding 最该先准备的，从来不只是模型。
而是一张够用的工作台。
模型决定你写得快不快。
工作台决定你会不会越做越乱。
如果你现在真想开始，第一步别急着研究最强 prompt。
先把桌面摆对。
后面很多问题，都会比你想象中简单。
> 学习vibe-coding，加我vx：zzr9552
## 相关链接
- [Russell](https://x.com/Russell3402)
- [@Russell3402](https://x.com/Russell3402)
- [64K65K](https://x.com/Russell3402/status/2044394530875846959/analytics)
- [Apr 14](https://x.com/Russell3402/status/2043954258077516100)
- [21K](https://x.com/Russell3402/status/2043954258077516100/analytics)
- [https://pixso.cn/](https://pixso.cn/)
- [Upgrade to Premium](https://x.com/i/premium_sign_up)
- [8:36 PM · Apr 15, 2026](https://x.com/Russell3402/status/2044394530875846959)
- [64.9K65.4K Views](https://x.com/Russell3402/status/2044394530875846959/analytics)
- [View quotes](https://x.com/Russell3402/status/2044394530875846959/quotes)
---
*导出时间: 2026/4/16 15:58:23*