想开始 vibe-coding，先把这 8 个工具放上桌面
很多新手一聊 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： 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。
先把桌面摆对。
后面很多问题，都会比你想象中简单。
