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

这里有两层意思，首先来看比较好理解的，对比下面两段代码：
「原子化CSS」的实现：
<div class="m-1"></div>「语义化CSS」的实现：
<div class="container"></div> .container {margin: 0.25rem;}显然，从大模型的字符输出消耗来看，「原子化CSS」能用更少字符表达同样的样式。
第二层意思，「原子化CSS」（不管是TailwindCSS还是UnoCSS）都是基于设计系统的上层封装。上述m-1的类名背后，并不仅仅是margin: 0.25rem的意思，而是与其他类名一起构成的设计系统。
当整个应用都是基于设计系统实现时，整体来看，达到同样的布局效果，也会更省大模型的字符输出消耗。
UI部分v0的UI部分非常有意思，他基于shadcn这个“组件”库。
为什么要给「组件」打引号，因为shadcn与一般的组件库完全不同。
对于一般的组件库，我们先通过npm安装它，将它作为项目的依赖，再在项目中引入。
比如，下面是引入antd中Calendar组件的方式：
import { Calendar } from 'antd';const App: React.FC = () => {return <Calendar />;};下面是引入shadcn中Calendar组件的方式，对比看看有啥区别？
import { Calendar } from "@/components/ui/calendar"const App: React.FC = () => {return <Calendar />;};antd中的Calendar来自于antd模块，而shadcn中的Calendar则来自于项目目录下的components目录。
这就是shadcn的理念 —— 0依赖，按需复制粘贴代码。
简单来说，如果你想使用shadcn中的某个组件，不是通过npm安装shadcn这个包，再引入组件。而是直接复制该组件的代码到项目目录下（当然，整个复制过程是通过cli工具完成的）。
这么做相比于传统组件库，有两个显著优势：
组件逻辑想改就改，不用担心组件没暴露对应的props 。
毕竟，整个组件的源代码我们都直接复制下来了，改个逻辑还不简单？
UI与样式分离
复制下来的组件只包含基础样式，开发者根据需要增加自定义样式。
总结了解了v0能做什么，以及输出代码的组成后，我们可以得出结论 —— v0是一款快速生成项目原型代码的AI工具。生成的原型代码中，UI与样式分离，其中：

UI：基于shadcn
样式：基于TailwindCSS

UI部分之所以基于shadcn ，显然是为了开发者导出代码后，可以方便的二次开发。
我们可以将v0当作一款应用场景更广的低代码工具，用于快速生成原型代码。从这个角度看，他对前端的影响还局限在提效工具上（而不是替代前端）。
与其担心v0会取代你的工作，不如担心隔壁悄悄使用v0的同事比你工作效率来的更高......
参考资料[1]v0:https://v0.dev/ 。
[2]shadcn:https://ui.shadcn.com/ 。

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