Vercel推出的前端AI工具v0，會改變前端麼？

發表於2023-09-19
前端AI

大家好，我卡頌。

最近，Vercel推出了一款AI程式碼生成工具 —— v0，可以快速生成前端元件程式碼。

這款AI工具會影響現有前端開發模式麼？本文會從如下角度展開討論：

  • v0是什麼？能做什麼？
  • v0生成的程式碼包含哪些部分？會對現有前端開發產生什麼影響？

歡迎圍觀朋友圈、加入人類高質量前端交流群，帶飛

v0是什麼

v0是Vercel推出的一款前端元件程式碼生成工具，當前還處於Alpha階段，要想試用需要先排隊。

他的使用方式如下：

  1. 首先，用自然語言描述需求

v0會根據需求生成元件程式碼：

  1. 我們可以繼續對不滿意的地方提出修改意見，比如背景請使用漸變藍色：

此時，會生成一個新的版本（這裡是v1）。具體來說，每個修改意見都會產生一個新的版本。當我們再提出 —— 內容寬度為500px，此時會產生v2：

現在你明白這款產品為什麼叫v0了吧？v0指產品的最初版本，開發者可以基於v0不斷迭代新的版本。而迭代的方式，就是不斷提出新需求或修改意見。

有同學可能會問：我直接向chatGPT提需求不也能生成程式碼，v0有啥優勢？

v0的優勢主要體現在兩點：

  1. 可以針對元件不同部分單獨修改
  2. UI與樣式分離

讓我們細細聊一下。

可以針對元件不同部分單獨修改

如果直接讓chatGPT生成程式碼，那麼他會生成一大段程式碼。比如，我讓chatGPT生成上面提到的天氣預報元件。下面擷取了他返回程式碼的一部分，注意其中紅框中元件背景色是白色：

現在，我繼續提問：背景請使用漸變藍色，chatGPT重新輸出了元件程式碼，並把背景色改為漸變藍色：

可以看到，每次提出修改意見，chatGPT都得重新生成完整程式碼，比較低效。

那我只讓chatGPT輸出修改部分的程式碼呢？比如這樣提問 —— 內容寬度為500px，只給出修改的程式碼。

他確實只輸出了需要修改的程式碼：

但這樣也存在一個弊端 —— 當應用龐大時，需要讓chatGPT知道我們想修改哪部分程式碼。

比如下面是個郵箱收集頁面，現在我們希望將標題改為漸變色。當我們向chatGPT提到標題時，他能理解指的是郵箱收集頁的標題。

但當應用變得複雜，存在很多帶標題的元件，讓chatGPT理解你的需求就得費一番功夫了。

使用v0就沒有這方面困擾。我們可以對v0生成頁面中的每個元件、每個元素單獨提問。比如，對於上述將郵箱收集頁標題改為漸變色的需求，首先用v0生成郵箱收集頁。

現在我們希望將標題改為漸變色，只需要選擇標題部分並提出增加一個漸變色：

就能得到如下結果：

即使再複雜的頁面，在提問時，v0會將元件對應的上下文一併傳送給大模型，模型能清楚知道要修改哪個元件。

UI與樣式分離

v0生成的React元件程式碼中，樣式與UI分別基於兩個庫：

  • 樣式：基於TailwindCSS
  • UI：基於shadcn

樣式部分

為什麼生成程式碼的樣式部分要使用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工具完成的）。

這麼做相比於傳統元件庫，有兩個顯著優勢：

  1. 元件邏輯想改就改，不用擔心元件沒暴露對應的props

畢竟，整個元件的原始碼我們都直接複製下來了，改個邏輯還不簡單？

  1. UI與樣式分離

複製下來的元件只包含基礎樣式，開發者根據需要增加自定義樣式。

總結

瞭解了v0能做什麼，以及輸出程式碼的組成後，我們可以得出結論 —— v0是一款快速生成專案原型程式碼的AI工具。生成的原型程式碼中，UI與樣式分離，其中：

  • UI：基於shadcn
  • 樣式：基於TailwindCSS

UI部分之所以基於shadcn，顯然是為了開發者匯出程式碼後，可以方便的二次開發。

我們可以將v0當作一款應用場景更廣的低程式碼工具，用於快速生成原型程式碼。從這個角度看，他對前端的影響還侷限在提效工具上（而不是替代前端）。

與其擔心v0會取代你的工作，不如擔心隔壁悄悄使用v0的同事比你工作效率來的更高......

相關文章