您当前的位置:首页 > 电脑百科 > 程序开发 > 前端

Vercel推出的前端AI工具v0,会改变前端么?

时间:2023-09-18 10:47:22  来源:  作者:卡颂

大家好,我卡颂。

最近,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」能用更少的字符表达更丰富的样式信息。

这里有两层意思,首先来看比较好理解的,对比下面两段代码:

「原子化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/。



Tags:Vercel   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
Vercel推出的前端AI工具v0,会改变前端么?
大家好,我卡颂。最近,Vercel推出了一款AI代码生成工具 &mdash;&mdash; v0[1],可以快速生成前端组件代码。这款AI工具会影响现有前端开发模式么?本文会从如下角度展开讨论: v0是什...【详细内容】
2023-09-18  Search: Vercel  点击:(215)  评论:(0)  加入收藏
▌简易百科推荐
20k级别前端是怎么使用LocalStorage的,想知道吗?
当咱们把咱们想缓存的东西,存在localStorage、sessionStorage中,在开发过程中,确实有利于咱们的开发,咱们想看的时候也是一目了然,点击Application就可以看到。前言大家好,我是林...【详细内容】
2024-03-26  前端之神  微信公众号  Tags:前端   点击:(11)  评论:(0)  加入收藏
前端不存在了?盲测64%的人更喜欢GPT-4V的设计,杨笛一等团队新作
3 月 9 日央视的一档节目上,百度创始人、董事长兼 CEO 李彦宏指出,以后不会存在「程序员」这种职业了,因为只要会说话,人人都会具备程序员的能力。「未来的编程语言只会剩下两种...【详细内容】
2024-03-11  机器之心Pro    Tags:前端   点击:(9)  评论:(0)  加入收藏
前端开始“锈化”?Vue团队开源JS打包工具:基于Rust、速度极快、尤雨溪主导
Vue 团队已正式开源Rolldown &mdash;&mdash; 基于 Rust 的 JavaScrip 打包工具。Rolldown 是使用 Rust 开发的 Rollup 替代品,它提供与 Rollup 兼容的应用程序接口和插件接口...【详细内容】
2024-03-09  OSC开源社区    Tags:Vue   点击:(11)  评论:(0)  加入收藏
两年前端经验还不会手写Promise?
什么是promise?当我们处理异步操作时,我们经常需要进行一系列的操作,如请求数据、处理数据、渲染UI等。在过去,这些操作通常通过回调函数来处理,但是回调函数嵌套过多会导致代码...【详细内容】
2024-03-07  海燕技术栈  微信公众号  Tags:Promise   点击:(23)  评论:(0)  加入收藏
网站开发中的前端和后端开发有什么区别
前端开发和后端开发都是干什么的?有哪些区别?通俗地讲,前端干的工作是用户可以直接看得见的,而后端开发的工作主要在服务端,用户不太能直接看到。虽然前端开发和后端开发的工作有...【详细内容】
2024-02-21  CarryData    Tags:前端   点击:(31)  评论:(0)  加入收藏
网站程序开发中的前后端分离技术
随着互联网的快速发展和技术的不断创新,传统的网站开发模式已经难以满足日益增长的业务需求。为了提高开发效率、增强系统的可维护性和可扩展性,前后端分离技术逐渐成为了网站...【详细内容】
2024-01-31  网站建设派迪星航    Tags:前后端分离   点击:(23)  评论:(0)  加入收藏
如何优雅的实现前端国际化?
JavaScript 中每个常见问题都有许多成熟的解决方案。当然,国际化 (i18n) 也不例外,有很多成熟的 JavaScript i18n 库可供选择,下面就来分享一些热门的前端国际化库!i18nexti18ne...【详细内容】
2024-01-17  前端充电宝  微信公众号  Tags:前端   点击:(68)  评论:(0)  加入收藏
Vue中Scope是怎么做样式隔离的?
scope样式隔离在 Vue 中,样式隔离是通过 scoped 特性实现的。当在一个组件的 <style> 标签上添加 scoped 特性时,Vue 会自动为这个样式块中的所有选择器添加一个唯一的属性,以...【详细内容】
2024-01-04  海燕技术栈  微信公众号  Tags:Vue   点击:(80)  评论:(0)  加入收藏
vue3中 ref和 reactive的区别 ?
最近有朋友在面试过程中经常被问到这么一个问题,vue3 中的ref 和 reactive的区别在哪里,为什么 要定义两个API 一个 api不能实现 响应式更新吗??带着这个疑问 ,我们 接下来进行逐...【详细内容】
2024-01-03  互联网高级架构师  今日头条  Tags:vue3   点击:(37)  评论:(0)  加入收藏
React18 与 Vue3 全方面对比
1. 编程风格 & 视图风格1.1 编程风格 React 语法少、难度大;Vue 语法多,难度小例如指令:Vue<input v-model="username"/><ul> <li v-for="(item,index) in list" :key="inde...【详细内容】
2024-01-03  爱做梦的程序员  今日头条  Tags:Vue3   点击:(72)  评论:(0)  加入收藏
相关文章
    无相关信息
站内最新
站内热门
站内头条