Vercel 的 AI 工具 V0.dev 是什么？如何使用它？

几个月前，Vercel 发布了面向开发者和设计师的 V0.dev，用于利用 AI 生成 React 代码——但当时唯一的问题是 V0.dev 需要排队等候，并未对所有人开放。最近，我从等候名单中获得了访问该网站的权限，但现在所有拥有 Vercel 账户的用户都可以访问了。

这类工具弥合了开发人员和设计师之间的鸿沟，为许多公司在推出项目和产品时节省了时间。在本文中，我将分享该项目的价值、工作原理以及开源对这类项目的影响。

v0.dev 是一个类似 ChatGPT 的工具，它专注于生成用户界面代码。它使用 shadcn/ui 和 Tailwind CSS 库来生成代码。生成代码后，网站会提供一个npx安装命令，方便您将组件添加到您的软件中。

测试场景：

V0 允许您编写提示信息来创建设计。此外，V0 还能处理图像，并允许您改进所选元素的设计。鉴于这些功能，我决定测试该项目，并针对以下问题进行基准测试：

• 它是否提供可用于生产环境的代码？
• 它能识别你提供的图像吗？
• 它在其他语言中也能用吗？
• 能否将其用于已完成的项目中？
• 你可以把它用于新项目吗？

带着这些问题，我决定基于我参与的两个项目进行实验：第一个是OpenSauced，第二个是 okuyun.org。

第一个实验：搜索引擎示例

我的第一个项目是从零开始，我打算从头开始做一个全新的项目。主要目标是设计一个搜索引擎用户界面，并提供一些用户示例。我为此编写了十二个提示信息，最终得到了想要的结果，这相当有趣且令人印象深刻。下图展示了我最终的设计成果：

完整的提示信息在此链接中。该项目似乎取得了不错的成果，并提供了可以直接在项目中使用的优秀代码。我对代码唯一不满的地方是它有点分散，没有提供一个可以封装其结果的组件。这会导致大型项目的代码略显混乱。

这里可以看到生成的代码：

  <div className="border-2 border-gray-300 rounded-md p-2">
            <Card>
              <div className="flex justify-between">
                <div className="flex items-center">
                  <Button className="bg-blue-500 text-white rounded-md px-2 py-1 ml-2">
                    <GoalIcon className="h-4 w-4" />
                  </Button>
                  <CardHeader className="font-semibold">OpenAI</CardHeader>
                </div>
                <CardContent className="text-gray-500">A research organization for AI.</CardContent>
              </div>
            </Card>
          </div>
          <div className="border-2 border-gray-300 rounded-md p-2">
            <Card>
              <div className="flex justify-between">
                <div className="flex items-center">
                  <Button className="bg-blue-500 text-white rounded-md px-2 py-1 ml-2">
                    <GoalIcon className="h-4 w-4" />
                  </Button>
                  <CardHeader className="font-semibold">Tailwind CSS</CardHeader>
                </div>
                <CardContent className="text-gray-500">A utility-first CSS framework.</CardContent>
              </div>
            </Card>
          </div>
          <div className="border-2 border-gray-300 rounded-md p-2">
            <Card>
              <div className="flex justify-between">
                <div className="flex items-center">
                  <Button className="bg-blue-500 text-white rounded-md px-2 py-1 ml-2">
                    <GoalIcon className="h-4 w-4" />
                  </Button>
                  <CardHeader className="font-semibold">GPT-4</CardHeader>
                </div>
                <CardContent className="text-gray-500">A model by OpenAI.</CardContent>
              </div>
            </Card>
          </div>

我更倾向于使用一个能够封装元素并通过它提供参数的组件，这对于项目来说将是一个极好的补充。一个简单的例子是：

<serachResult title=”GPT” description=”A model by OpneAI” link=”openai.com”></searchResult>

这样可以节省额外的代码，减少代码行数，并提高代码的可读性。我知道要让AI第一次就达到这样的效果有点难，但这能帮助你了解如何使用它、它的局限性以及系统的能力。

第二个实验：OpenSauced 组件

至于 OpenSauced，我的实验是为了验证我是否能在 V0 版本中使用 Figma 设计。我希望导入 Figma 设计，然后为该项目实现一个用户界面。实验结束时，我将输出结果与高级前端工程师 Nick Taylor 为 OpenSauced 项目编写的实际组件进行了比较。OpenSauced 项目使用了 Tailwind 和 Radix 框架shadcn。

有了这样的结构，我以为用 Figma 制作相关的设计会很容易。但我遇到的第一个问题是无法直接导入 Figma 文件，所以我不得不截取需要实现的组件的屏幕截图，并将其提供给 V0。这样我就得到了代码的最初版本，也就是我之后不断改进以获得理想结果的草稿。您可以对比一下草稿和我下面提供的图片。

经过 17 次迭代，我终于得到了我预想的结果。这次迭代帮助我理解了 v0 版本背后的逻辑和工作原理，并让我能够更精确地表达最终结果。

尽管从观点上看结果相当有趣，但它与Nick Taylor 写的结果有所不同。简单比较一下就会发现，Nick 使用了之前为 OpenSauced 编写的代码，而 v0 版本并没有利用这些代码。这是使用 v0 版本时会遇到的最主要问题。除此之外，还有我在第一个实验中提到的组件的可重用性问题。

第三种情况：阿拉伯语（非拉丁语系）

针对这种情况，我用其他语言测试了这个模型。主要目的是检验它是否具有多样性，是否允许其他国家的人使用，还是仅限于英语使用者。启用本地语言版本将打造一个更美好、更多元、更包容的社区；同时，它也将使那些尚未学习新语言或对自己语言缺乏自信的儿童能够使用这些工具，从而创造美好的未来！

我的体验是收到一个设计页面的提示，我并没有抱太大期望，但它有点意思，因为它像英语一样运作，并且提供了我所期望的良好结果。

这是我使用的下一个提示：
قм 巴塔吉姆 姆吉克 巴吉 拉萨 拉克
意思是：为《古兰经》设计一个搜索引擎。

这为理解《古兰经》的含义这一查询提供了一个有趣的结果：

通过这一步，我实现了双屏显示，一边显示搜索结果，另一边显示搜索引擎，这为此提供了一个很好的例子：

即使在手机屏幕上查看项目结果，也获得了非常好的响应效果，这让我印象深刻。

查看代码可知，V0 使用了 Tailwind Flex 类和语义化 HTML，这为响应式设计和渲染带来了极佳的效果。以下是部分生成的代码：

 <main className="flex flex-col lg:flex-row items-start lg:items-center justify-center h-screen bg-[#fafafa] p-6 lg:p-12">
      <div className="w-full max-w-md lg:max-w-lg">
        <h1 className="text-3xl font-bold text-center mb-6 text-gray-700">Quran Search Engine</h1>

我注意到的主要问题之一是输出代码和用户界面不包含任何阿拉伯语单词。这可能会让非英语人士望而却步，但使用翻译工具会对他们有所帮助。除此之外，输出用户界面不符合 RTL（从右到左）标准，这是阿拉伯语等语言的标准。因此，我确实编写了一个额外的提示，要求解决这两个问题，以下是提示
：翻译为
：结果不是阿拉伯语，请将文本翻译为阿拉伯语并将屏幕模式转为 RTL。

结果相当有趣，在下一张图片中您可以注意到 v0.dev 已将输出代码完全转换为 RTL 并翻译了文本，但有一些细节可能需要开发人员考虑。

基于此结果，我可以得出结论：可以使用不同的语言生成用户界面，并使更多社区能够使用这些工具。开发者需要注意一些细节，才能使用户界面完全满足他们的需求。

结果

为了回到本文开头提出的问题，我可以以下一个问题作为结尾：

它是否提供可用于生产环境的代码？

是的，V0 提供的代码稍作调整和检查即可用于生产环境。所谓调整，是指将大段代码转换为可复用的组件，检查可访问性问题，并根据你的代码规范评估代码。关键在于将其与你的技术栈集成。如果你正在使用 React、Tailwind 和 SHADCN，那么使用这款软件就非常合适。

唯一的问题是它可能无法理解你的设计系统。你需要考虑一下你的设计系统；如果你使用的是原子设计系统，那么充分利用这个工具的一个好方法是让它生成原子和分子，然后你需要在项目中使用它们。

它能识别我们提供的图像吗？

是的，但图像处理确实需要一些改进。我认为这方面可以成为人工智能研究人员的一个重要研究领域，他们需要开发以用户界面为中心的图像分析方法，并利用能够处理图像的算法。如果学术界已经有一些相关研究，那么将这些研究成果转化为能够满足用户需求的实际产品将是一项相当大的挑战。

它在其他语言中也能用吗？

是的，我们已经用阿拉伯语测试过了。我相信在其他语言中也能取得很好的效果。这类工具的问题在于，它们可能无法完全理解阿拉伯语的RTL（从右到左）特性等特定语言的问题。您必须自行解决这些问题，并进行检查，以根据您的需求完全调整设计。

我们能否将其用于已有的项目中？

我认为，如果你想立即看到结果，那么在已建立的项目中使用 v0 将会相当具有挑战性；但是，如果你把它当作一个友好的助手或一个可以完成基础工作的人，并且你能够按照它在你项目中的工作方式进行操作，那么它就会很有帮助。

我们可以把它用于新项目吗？

使用 v0 版本启动新项目会容易得多。随着时间的推移，你需要不断提升质量并深入了解系统，从而提取可重用的组件，以加快项目的开发周期。

改进版 v0

根据我所做的实验，我认为 v0 版本在某些方面会更好，我很期待看到它得到改进。在下一节中，我将提及 Vercel 可以改进的领域，并阐述开发者和设计师将会从中获得哪些影响：

设计系统集成

V0 需要解决的核心且最重要的问题之一是理解设计系统。理解设计系统有助于企业更轻松地将其集成到 V0 中，因为有些企业可能已经在生产环境中使用其设计系统多年。由于 V0 和 GPT 技术在行业应用中相对较新，因此解决这个问题将令人振奋，并为软件在生产环境中的应用带来价值。

一种简单的实现方法是为 v0 开发一个客户端，Vercel 可以将该客户端与代码编辑器集成，GitHub Copilot 也采用了这种方法。例如，通过这种方法，v0 可以在 VS Code 中创建一个扩展。借助这个扩展，v0 可以获取项目中的文件名和信息来理解设计系统，然后将其定向到相关的设计系统，并根据设计系统提供相应的代码和组件。这种方法类似于 Gemini 和 OpenAI 使用的多模态 AI 方法。

Vercel 在 Beta 版中可以采用的另一种方法是类似 GitHub Copilot Labs 的扩展；GitHub Copilot Labs 曾经为其 GPT 模型提供定向输入。这些定向输入包括代码清理、编写测试，甚至代码重构选项。该扩展在与 Copilot 聊天模型集成后便停止了更新。然而，对于 v0 版本，提供诸如选择设计系统、编写分子、编写原子甚至组件等定向选项和输入，将有助于 Vercel 更好地与用户现有的生产系统集成，并为 Vercel 提供一个良好的迭代周期，以便更好地了解其客户和社区的需求。

从设计软件导入

这类系统需要具备的一项重要功能是能够从 Figma 等设计软件导入文件。我在本次评测中采用的方法是截取 Figma 设计图的屏幕截图，并将其作为提示提供给 v0 系统。然而，如果 Vercel 能够实现从 Figma 导入文件的功能，V0 系统将能极大地帮助程序员和设计师。

这项改进有助于导入并整合设计师和开发人员的现有操作习惯。随着时间的推移，让设计软件能够提供提示和迭代功能将更加便捷。

改进的图像处理：

在我本次评测的第二个实验中，组件的布局和第一个输出结果与输入图像略有不同。此外，您还会注意到第一个输出图像中缺少一些图标，这对于像 v0 这样功能强大的系统来说有些奇怪。未来，如果系统能够识别图像中提供的图标和布局，那就太好了。

通过分析图像，将流程拆分成多个步骤进行提示，甚至采用能够理解布局和图标的多模态设计，可以实现这种改进。这些改进能够增强系统的稳定性，并最大限度地减少系统获得预期结果所需的反复提示。

我认为，创建一个能够获取图像中图标名称、布局和 CSS 特征的模型，将是一个很有前途的系统，能够确保 AI 模型在工业应用中的完整性。

提升网站的用户体验

v0 网站有两个强大的功能，可用于开发和提供提示。其中一个功能允许您立即编辑代码并据此编写提示。另一个功能允许您选择特定元素，并针对该特定元素编写提示。

这些功能非常实用且出色，但我希望它们还能有一些改进空间。就代码编辑器而言，我希望能够直接从用户界面选择一个元素，然后代码编辑器就能立即滚动到该元素所在的位置。这个功能类似于谷歌 Chrome 和 Mozilla Firefox 等浏览器中的 HTML 元素检查器。如果代码编辑器能够直接指向视图中的代码，那么开发者就可以像在实际项目中一样快速地进行修改，而无需滚动页面并使用搜索功能来查找相关代码。

V0 版本可以实现的另一项改进是使元素选择器能够选择多个元素；该软件目前的版本允许您一次选择一个 HTML 元素，但如果能够选择多个元素，将会是一项重大改进。启用多元素选择功能，如果您在 V0 版本中编辑页面，将节省您的时间，并有助于保持整个页面设计的一致性。

GIF

启用元素选择器可以通过在更新菜单中添加额外按钮、保存元素内存以供模型使用，甚至允许用户通过鼠标点击和拖动来实现。以下是一个可用于启用此功能的额外按钮示例：

最后想说的

通过我的实验，我认为 v0 版本非常完善，对程序员和设计师都很有帮助。它能够弥合两者之间的鸿沟，甚至加快 Web 应用的开发周期。您可以使用 v0 版本开发采用相同技术栈的新项目。未来，我期待 Vercel 团队能够支持新的技术栈和设计系统，这将对社区产生深远的影响，并惠及更广泛的用户群体。

另一方面，这些改进和项目将给开发者和设计师带来巨大的压力，他们需要不断学习新工具并提升思维方式；否则，他们将面临失业的风险。开发者必须增强对无障碍设计、多语言支持、设计系统和用户体验的了解。这些技能将使他们能够更高效地利用这些工具，创造出卓越的成果。对于设计师而言，我设想像 Adob​​e 和 Figma 这样的公司会尝试开发类似 V0 的工具。这些类似 V0 的工具将与他们的设计软件更紧密地集成，设计师需要理解输出代码才能更灵活地掌控最终成果。

这些工具无法测试程序员可能遇到的所有结果和场景，例如Vercel在其文档中提到的可访问性问题，甚至责任归属问题。如果您知道如何使用这些工具，它们将对您大有裨益。