自然语言生成 UI 元件的 AI 工具 — v0

集结许多前端开发界顶尖工程师的 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 工具》