Vercel推出的前端AI工具v0，会改变前端么？ _Vercel

文章插图
大家好，我卡颂。
最近， Vercel推出了一款AI代码生成工具 —— v0[1]，可以快速生成前端组件代码。
这款AI工具会影响现有前端开发模式么？本文会从如下角度展开讨论：

v0是什么？能做什么？
v0生成的代码包含哪些部分？会对现有前端开发产生什么影响？

v0是什么v0是Vercel推出的一款「前端组件代码生成工具」，当前还处于Alpha阶段，要想试用需要先排队。
他的使用方式如下：
首先，用自然语言描述需求。

文章插图
v0会根据需求生成组件代码：

文章插图
我们可以继续对不满意的地方提出修改意见，比如「背景请使用渐变蓝色」：

文章插图
此时，会生成一个新的版本（这里是v1）。具体来说，每个修改意见都会产生一个新的版本。当我们再提出 —— 「内容宽度为500px」，此时会产生v2：

文章插图
现在你明白这款产品为什么叫v0了吧？v0指产品的最初版本，开发者可以基于v0不断迭代新的版本。而迭代的方式，就是不断提出新需求或修改意见。
有同学可能会问：我直接向ChatGPT提需求不也能生成代码，v0有啥优势？
v0的优势主要体现在两点：

可以针对组件不同部分单独修改。
UI与样式分离。

让我们细细聊一下。
可以针对组件不同部分单独修改如果直接让chatGPT生成代码，那么他会生成一大段代码。比如，我让chatGPT生成上面提到的天气预报组件。下面截取了他返回代码的一部分，注意其中红框中组件背景色是白色：

文章插图
现在，我继续提问：「背景请使用渐变蓝色」，chatGPT重新输出了组件代码，并把背景色改为渐变蓝色：

文章插图
可以看到，每次提出修改意见，chatGPT都得重新生成完整代码，比较低效。
那我只让chatGPT输出修改部分的代码呢？比如这样提问 —— 「内容宽度为500px，只给出修改的代码」。
他确实只输出了需要修改的代码：

文章插图
但这样也存在一个弊端 —— 当应用庞大时，需要让chatGPT知道我们想修改哪部分代码。
比如下面是个邮箱收集页面，现在我们希望将标题改为渐变色。当我们向chatGPT提到「标题」时，他能理解指的是邮箱收集页的标题。

文章插图
但当应用变得复杂，存在很多「带标题的组件」，让chatGPT理解你的需求就得费一番功夫了。
使用v0就没有这方面困扰。我们可以对v0生成页面中的每个组件、每个元素单独提问。比如，对于上述「将邮箱收集页标题改为渐变色」的需求，首先用v0生成邮箱收集页。
现在我们希望将标题改为渐变色，只需要选择标题部分并提出「增加一个渐变色」：

文章插图
就能得到如下结果：

文章插图
即使再复杂的页面，在提问时，v0会将组件对应的上下文一并发送给大模型，模型能清楚知道要修改哪个组件。
UI与样式分离v0生成的React组件代码中，样式与UI分别基于两个库：

样式：基于Tailwindcss
UI：基于shadcn[2]

样式部分为什么生成代码的样式部分要使用TailwindCSS呢？
在我上一篇讲TailwindCSS的文章中我提到一个观点 —— 随着AI生成代码的普及，类似TailwindCSS这样的「原子化CSS」会越来越普及。
这是因为，在有限的未来，大模型输出的token限制还会一直存在，而「原子化CSS」相比「语义化CSS」能用更少的字符表达更丰富的样式信息。