几个月前，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>
这将节省额外的代码，最大限度地减少行数，并提高代码的可读性。我知道，在第一次拍摄中就从人工智能获得这样的结果会有点棘手，但这会让你了解如何使用它、它的局限性和系统的能力。
第二个实验：OpenSauced 组件
至于 OpenSauced，我的实验是检查我是否可以在 V0 中使用 Figma 设计。我想导入 Figma 设计，然后为该项目实现一个用户界面。实验结束时，我将输出结果与高级前端工程师 Nick Taylor 为 OpenSauced 项目编写的实际组件进行了比较。至于 OpenSauced，该项目使用了 Tailwind 和 Radix，这是shadcn在后台使用的框架。
有了这个结构，我想从 Figma 进行相关设计就会很容易了。我遇到的第一个问题是无法直接导入Figma文件，所以我必须截取我需要实现的组件的屏幕截图并提供给V0。这给了我代码的第一个结果，这是我为改进并获得所需结果而编写的第一份草案。您可以将初稿和我在下面提供的图片进行比较。
经过 17 次迭代，我得到了我所期望的结果。这次迭代帮助我理解了 v0 背后的逻辑以及它是如何工作的，并准确地使用了语言——最终的结果。
尽管这个结果在观点上相当有趣，但它与尼克·泰勒写的结果不同。如果我们快速比较一下，你会发现 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 和 GPT 革命在行业使用中相对较新，解决这个问题将是令人兴奋的，并为在生产中使用该软件提供价值。
实现这一目标的简单方法之一是为 v0 提供一个客户端，Vercel 将与代码编辑器集成，GitHub copilot 正在遵循这种方法。例如，通过这种方法，v0 可以在 VS Code 中创建扩展。通过这个扩展，V0将从项目中获取文件名和信息来了解设计系统，然后将其定向到相关的设计系统并提供基于此的代码和组件。这种方法类似于 Gemini 和 OpenAI 使用的多模式人工智能方法。
Vercel 可以在 Beta 版中使用的另一种方法是类似 GitHub Copilot 实验室的扩展；GitHub Copilot 实验室过去曾为其 GPT 模型提供直接输入。定向输入过去是代码清理、编写测试，甚至是代码重构选项。该扩展在与 Copilot 聊天模型集成后已停止。然而，对于 v0 来说，拥有定向选项和输入（例如选择设计系统、编写分子、编写原子甚至组件）将有助于与人们拥有的生产系统进行更多集成，并为 Vercel 提供一个很好的迭代周期来了解他们的客户和社区需求。
从设计软件导入
这种系统需要具备的重要功能之一是能够从 Figma 等设计软件导入。我在本次评测中使用的方法是截取 Figma 设计的屏幕截图，并将其作为 v0 的提示提供。然而，如果 Vercel 实现从 Figma 导入的功能，V0 将在帮助程序员和设计师方面实现新的飞跃。
这一改进可以帮助导入和集成设计师和开发人员的当前行为。随着时间的推移，让设计软件对它们有提示和迭代会更方便。
改进的图像处理：
在我在这篇评论中完成的第二个实验中，组件的布局和第一个输出与输入图像略有不同。除此之外，您会注意到第一个输出图像中缺少图标，这对于像 v0 这样的复杂系统来说很奇怪。将来，如果系统能够理解图像中提供的图标和布局，那就太好了。
通过分析图像并将过程分为多个镜头以进行提示，甚至采用可以理解布局和图标的多模式设计，可以实现这种改进。这样的改进可以使系统更加健壮，并最大限度地减少系统获得预期结果的来回提示。
我相信，创建一个允许您获取图像中图标的名称、布局和 CSS 功能的模型将是一个有前途的系统，它将实现行业应用中人工智能模型的完整性。
改善网站的用户体验
v0 网站有两个很棒的功能，您可以使用它来开发和提供提示。其中之一是使您能够立即编辑代码并根据该代码编写提示。另一个功能是能够选择特定元素，允许您为该特定元素编写提示。
这些功能非常有用且非凡，但我希望看到它们的微小改进。至于代码编辑器，我希望能够从用户界面中选择一个元素，并让代码编辑器立即滚动到该元素。此功能类似于 Google Chrome 和 Mozilla Firefox 等浏览器中的 HTML 元素检查器。启用代码编辑器从视图指向代码将使您能够快速进行开发人员所做的更改，而不是滚动并使用搜索功能来查找相关代码。
V0 可以实现的另一个改进是使元素选择器能够选择多个元素；该软件的当前阶段允许您随着时间的推移选择一个 HTML 元素，但拥有一种使您能够选择各种元素的方法将是一个重大改进。如果您在 v0 中编辑页面，启用多个元素选择将节省您的时间，并帮助您为整个页面提供一致的设计。
动图
可以通过在更新菜单中添加额外的按钮并保存要提供给模型的元素的内存，甚至允许用户通过鼠标单击和拖动来启用元素选择器。以下是可以添加额外按钮以启用此功能的示例：
最后的想法
通过我的实验，我觉得 v0 相当成熟，对程序员和设计师很有帮助。它将弥合它们之间的差距，甚至可以缩短网络应用程序的开发周期。您可以将 V0 用于具有相同技术堆栈的新项目。未来，我预计 Vercel 团队将支持新的技术堆栈和设计系统，这将对社区产生相当大的影响和更广泛的影响。
另一方面，这些改进和计划将给开发人员和设计人员带来巨大的负担，需要他们继续学习新工具并改善他们的思维方式；否则，他们就会面临失业风险。开发人员必须增加对可访问性、多语言支持、设计系统和用户体验的了解。开发人员的这些技能将使他们能够提高工作效率，并利用这些工具创造出出色的成果。对于设计师来说，我预计 Adobe 和 Figma 等其他公司将尝试制作类似 V0 的工具。类似 V0 的工具将更多地与其设计软件集成，并且他们需要了解输出代码，以便对结果具有更大的灵活性和能力。
这些工具无法测试程序员可能面临的所有结果和场景，例如 Vercel 在其文档中提到的可访问性，甚至责任。如果您知道如何使用它们，那么将它们放在您身边将会很有帮助。
