Vercel推出的前端AI工具v0，會改變前端么？
大家好，我卡頌。
最近，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/。
