Vibe Coding 是什么，新手怎么开始

它擅长什么

把一个说得清楚的小东西从零做出来：一个落地页、一个交互动效、一个把表格转成图的小工具。这类任务边界清晰，结果对不对一眼能看出来，正好是 AI 的舒适区。

改造也很擅长：把一段已有的代码换个风格、加个动画、适配手机。你给它上下文，它改得比从零写更稳。

它不擅长什么

需要长期维护的复杂系统。AI 每次只看到你给它的那部分，项目一大，它的改动会互相打架。

还有一类坑是「看起来对」：动画能跑但在低端手机上卡，代码能编译但把无关的功能改坏了。这也是为什么这里每个文件都带着约束条件，明确写出不许动什么。

第一步该怎么走

别从「帮我做一个网站」开始，那句话太大，AI 会给你一堆用不上的东西。从一个具体的效果开始：一个按钮按下去的反馈、一段文字出现的方式。

去代码区挑一个，每一条都是一个能直接跑的文件，外加一段给 AI 的完整指令，指令里写清了要保留什么、不许改什么。粘进去，看结果，再让它按你的需求调。

• 代码区：动效、粒子、WebGL每个预览跑的就是你复制的那份文件
• 页面布局整页的排布方式，给 AI 的关键词都写好了
• 配色省掉自己调色，直接给 AI 一组能用的值

怎么判断结果好不好

三个问题：在手机上还顺吗？关掉动画偏好设置之后信息还完整吗？它有没有顺手改了你没让它改的地方？前两个是质量，第三个是安全。

这三条这里每份指令里都写着，所以你不用每次自己重复。

常见问题

不会编程能做 vibe coding 吗？

能做出东西，但要有心理准备：AI 写得出来，不代表写得对。你至少要能看出结果对不对、能把报错原样贴回去让它改。完全不碰代码也能走很远，只是遇到问题时你只能靠描述现象。

该用哪个工具？

这里不绑定任何工具。常见的几种：在网页对话框里直接问，或者用能读写你项目文件的编码助手。这里的每个文件和指令，粘到哪一个里都能用。

为什么要给 AI 一个现成的文件，而不是直接让它写？

直接让它写，你得到的是它的平均水平。给它一个已经跑通的参考实现，再说清楚要改成什么样，你得到的是这份实现的水平加上你的需求。差别在动效和交互这类细节上尤其明显。

生成的代码能用在商业项目里吗？

可以，包括接的客户项目。这里每个实现都是为这个库重新写的原创代码，不带别人的授权条款。