自然語言生成 UI 元件的 AI 工具

集結許多前端開發界頂尖工程師的 Vercel，推出了 v0 這個由 AI 幫忙生成 UI 元件的工具。你只需要輸入提示詞 (prompt)，v0 就會根據你的提示詞，生成出相對應的 UI 元件完整程式碼。

換句話說，透過 v0，用嘴巴寫 UI 元件這件事不再只是說說，而是真的被實現了。這篇文來跟大家聊聊 v0 這個 AI 工具厲害的點在哪? 他的核心開發者 shadcn 有什麼特別之處? 以及可能很多人會關心的，前端工程師要失業了嗎?

先來講 v0 這個工具，它的使用非常簡單。就是輸入你的需求，然後 v0 就會幫你產出相對應的 UI。例如你輸入「幫我生成一個 Twitter 的推文元件」，然後它就會生出相對應的程式碼。如果你覺得跟你的想像沒有完全一樣，你可以進一步輸入提示詞，讓 v0 根據原本的 UI 元件去做修改。

以 v0 的網站範例來說，Twitter 推文元件的第一個版本沒有到很精緻，但是後面加了「上面區域的空間要大一點、加上大頭貼」等提示詞，v0 就會一步步修成你理想的 UI。然後你只需要複製程式碼，就可以直接拿來用 (推薦大家特別去看 Vercel 員工如何透過提示詞去迭代 v0 的產出)。

複製程式碼直接拿來用，是一個很關鍵的設計哲學，這也是 v0 主要開發者之一 shadcn 的重要貢獻。shadcn 何許人也? 如果你有關注前端開發的社群，應該不用多介紹因為過去一年在前端開源社群的超級新星，他的 UI 元件庫在 GitHub 上有超過三萬個星星 (ExplainThis 在開發產品時，現在也都用 shadcn 的開源元件庫，因為太好用了)。

複製貼上的設計哲學

先不談星星數這種虛榮指標，shadcn 對前端元件庫的最大貢獻，在於帶領社群重新思考抽象化 (abstraction) 這件事。過去許多 UI 元件庫成在抽象化，敗也在抽象化。怎麼說? 以我們常見的 Toast 元件來說，使用元件庫現有的元件，因為有多一層抽象化，你不用去管背後的實作細節，直接拿來用，輕鬆無負擔。

然而許多人在用元件庫的時候，也會遇到一個痛點，就是有些你想要客製化的部分，元件庫沒有屬性 (prop) 讓你來改。因為抽象化，你沒有辦法碰觸到比較底層的東西，這也導致許多人為了要客製，最後還是沒有用元件庫，而是自己從頭造輪子。

但 shadcn 的元件庫設計，是以「複製貼上」的角度給人用。換句話說，當你用 shadcn 的元件庫，你可以直接用 <Toast /> 元件，但同時他會在你的程式碼當中新增完整的 <Toast /> 元件程式碼，所以你可以百分百地客製化該元件。因為這個設計，讓 shadcn 的元件庫既可以複用，又可以客製。

總的來說，就是所謂的「複製貼上好過錯誤的抽象化 copy and paste is better than the wrong abstraction」而 v0 也是承襲這個核心哲學。v0 產出的程式碼，是讓你可以直接複製去用的。意即你不用被 AI 的產出給限制，假如 AI 產出有八成好，你可以再進一步去調整成你想要的樣子。

前端工程師要失業了嗎?

看到這裡，相信一定又有人要開始喊「AI 浪潮打到前端工程師要失業啦」，特別是那些炒作 AI 的偽知識性網紅，拜託別再亂喊。多數前端工程師花在寫 UI 的時間大概都不到兩成吧，除了 UI，要打造好的前端，需要花很多時間在架構設計、寫邏輯、優化效能、監控等族繁不及備載的事。

有這種 AI 幫忙生成 UI 元件的工具，只想說感謝讓前端工程師們能把時間花在其他重要的事情上！總之非常推薦去 v0 的網站逛逛。如果你想了解更多推薦給開發者的 AI 工具，可以前往我們彙整的《推薦給軟體工程師的 AI 工具》