乐趣区

关于人工智能:惊住了对话就能生成网页前端er又药丸了

jiezi

前两天，Vercel 忽然推出了 v0.dev，用户通过语言形容就能生成精美 UI 页面，小伙伴们惊掉了下巴。。

V0 是何方神圣

带着期待的情绪对官网 https://v0.dev 一番摸索的摸索，理解到 v0 是通过 AI 模型技术生成交互页面，以后官网的交互是基于 Shadcn UI 和 Tailwind CSS，最终生成基于 React 的代码，能够间接复制到我的项目中应用，当然也能够间接把代码部署到 Vercel 下面，官网有打算后续对 vue、Svelte 等前端框架反对；

V0 如何应用

在官网上有一个用户输出提醒词的输入框，用户输出提醒词并且提交后，零碎会提供出三种 AI 模型生成的用户界面供选择，咱们能够抉择任意一个复制粘贴其代码，当然也能够间接在零碎上进行欠缺后复制到本人的我的项目当中去。如果想进一步优化，咱们能够抉择生成每个 UI 的小组件来微调代码，当然这还是须要一丢丢编程根底的。

实现一个天气预报界面

因为 V0 还在内测阶段，以后开发者须要排队期待开发资格，咱们以官网提供的一个天气预报交互界面为例来聊下如何去实现，最终成果如上面这张图：

  1. 第一次输出：a weather app looks like the iOS weather app（一个看起来像 iOS 天气利用的 app），这是标记为 v1 版本的交付图，看起来有点像😮
  1. 第二次输出：make the background a blue gradient（将背景设置为蓝色突变）。嗯，有那么点意思了
  1. 第三次输出：the inner content should have width 500px and being centered（外部内容宽度为 500px，居中），这看起来如同生成的有点问题，咱们持续往下看
  1. 第 4 次输出：the inner content should have width 500px（外部内容的宽度应为 500px），这下才对了嘛
  1. 第 5 次输出：add more margins between each elements, add more rows（在每个元素之间增加更多的边距，增加更多的行），如同变动不太大，咱们持续看
  1. 第 6 次输出：wrap it in a container（wrap it in a container）看起来也没太大变动
  1. 最初一次输出：add more items here（在这里增加更多我的项目），这时候咱们看到天气按时刻那块右 3 个变成了 4 个，也就最终实现了这个天气界面的布局。

代码剖析

从生成的源码能够看出这是一段简略的 jsx 代码，能够间接在 react 中应用，当然简略改吧一下 vue 中也能用。图标次要是基于 svg 生成的，这些在利用代码时能够替换成本人业务自有的图片。值得注意的是整个页面布局都是基于 Tailwind CSS 实现的，Tailwind 提供 css 预约义能力，灵便度十分高，基本上通过预置的 css 类可能实现所有能想到的页面布局，到这也了解了为何 V0 应用 Tailwind 进行布局了。

/** * v0 by Vercel Labs. * @see https://v0.dev/t/bo2N7pU */ export default
function Component() { return (
<div
  className="flex flex-col h-screen bg-gradient-to-r from-blue-500 to-blue-700"
>
  <div className="flex flex-col items-center p-6 space-y-4 w-500 mx-auto">
    <h1 className="text-2xl font-semibold text-white">San Francisco</h1>
    <p className="text-sm text-gray-200">Monday, 12 April</p>
    <div className="flex flex-col items-center space-y-2">
      <svg
        className="h-20 w-20 text-gray-300"
        fill="none"
        height="24"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="2"
        viewBox="0 0 24 24"
        width="24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" />
      </svg>
      <p className="text-6xl font-bold text-white">72°</p>
      <p className="text-xl text-gray-300">Partly Cloudy</p>
    </div>
  </div>
  <div className="flex overflow-x-auto space-x-6 p-6 w-500 mx-auto">
    <div className="flex flex-col items-center space-y-2">
      <p className="text-sm font-medium text-white">4 PM</p>
      <svg
        className="h-10 w-10 text-gray-300"
        fill="none"
        height="24"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="2"
        viewBox="0 0 24 24"
        width="24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" />
      </svg>
      <p className="text-lg font-semibold text-white">70°</p>
    </div>
    <div className="flex flex-col items-center space-y-2">
      <p className="text-sm font-medium text-white">5 PM</p>
      <svg
        className="h-10 w-10 text-yellow-300"
        fill="none"
        height="24"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="2"
        viewBox="0 0 24 24"
        width="24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <circle cx="12" cy="12" r="4" />
        <path d="M12 2v2" />
        <path d="M12 20v2" />
        <path d="m4.93 4.93 1.41 1.41" />
        <path d="m17.66 17.66 1.41 1.41" />
        <path d="M2 12h2" />
        <path d="M20 12h2" />
        <path d="m6.34 17.66-1.41 1.41" />
        <path d="m19.07 4.93-1.41 1.41" />
      </svg>
      <p className="text-lg font-semibold text-white">68°</p>
    </div>
    <div className="flex flex-col items-center space-y-2">
      <p className="text-sm font-medium text-white">6 PM</p>
      <svg
        className="h-10 w-10 text-gray-300"
        fill="none"
        height="24"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="2"
        viewBox="0 0 24 24"
        width="24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" />
      </svg>
      <p className="text-lg font-semibold text-white">65°</p>
    </div>
    <div className="flex flex-col items-center space-y-2">
      <p className="text-sm font-medium text-white">7 PM</p>
      <svg
        className="h-10 w-10 text-yellow-300"
        fill="none"
        height="24"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="2"
        viewBox="0 0 24 24"
        width="24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <circle cx="12" cy="12" r="4" />
        <path d="M12 2v2" />
        <path d="M12 20v2" />
        <path d="m4.93 4.93 1.41 1.41" />
        <path d="m17.66 17.66 1.41 1.41" />
        <path d="M2 12h2" />
        <path d="M20 12h2" />
        <path d="m6.34 17.66-1.41 1.41" />
        <path d="m19.07 4.93-1.41 1.41" />
      </svg>
      <p className="text-lg font-semibold text-white">63°</p>
    </div>
  </div>
  <div className="flex-1 overflow-y-auto space-y-6 p-6 w-500 mx-auto">
    <div className="flex justify-between items-center mb-8 mr-4">
      <p className="text-lg font-medium text-white">Tuesday</p>
      <div className="flex items-center space-x-4">
        <svg
          className="h-6 w-6 text-gray-300"
          fill="none"
          height="24"
          stroke="currentColor"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth="2"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" />
        </svg>
        <p className="text-lg font-semibold text-white">73° / 60°</p>
      </div>
    </div>
    <div className="flex justify-between items-center mb-8 mr-4">
      <p className="text-lg font-medium text-white pr-4">Wednesday</p>
      <div className="flex items-center space-x-4">
        <svg
          className="h-6 w-6 text-yellow-300"
          fill="none"
          height="24"
          stroke="currentColor"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth="2"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle cx="12" cy="12" r="4" />
          <path d="M12 2v2" />
          <path d="M12 20v2" />
          <path d="m4.93 4.93 1.41 1.41" />
          <path d="m17.66 17.66 1.41 1.41" />
          <path d="M2 12h2" />
          <path d="M20 12h2" />
          <path d="m6.34 17.66-1.41 1.41" />
          <path d="m19.07 4.93-1.41 1.41" />
        </svg>
        <p className="text-lg font-semibold text-white">76° / 62°</p>
      </div>
    </div>
    <div className="flex justify-between items-center mb-8 mr-4">
      <p className="text-lg font-medium text-white">Thursday</p>
      <div className="flex items-center space-x-4">
        <svg
          className="h-6 w-6 text-gray-300"
          fill="none"
          height="24"
          stroke="currentColor"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth="2"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" />
        </svg>
        <p className="text-lg font-semibold text-white">70° / 57°</p>
      </div>
    </div>
    <div className="flex justify-between items-center mb-8 mr-4">
      <p className="text-lg font-medium text-white">Friday</p>
      <div className="flex items-center space-x-4">
        <svg
          className="h-6 w-6 text-gray-300"
          fill="none"
          height="24"
          stroke="currentColor"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth="2"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" />
        </svg>
        <p className="text-lg font-semibold text-white">70° / 57°</p>
      </div>
    </div>
    <div className="flex justify-between items-center mb-8 mr-4">
      <p className="text-lg font-medium text-white">Saturday</p>
      <div className="flex items-center space-x-4">
        <svg
          className="h-6 w-6 text-yellow-300"
          fill="none"
          height="24"
          stroke="currentColor"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth="2"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle cx="12" cy="12" r="4" />
          <path d="M12 2v2" />
          <path d="M12 20v2" />
          <path d="m4.93 4.93 1.41 1.41" />
          <path d="m17.66 17.66 1.41 1.41" />
          <path d="M2 12h2" />
          <path d="M20 12h2" />
          <path d="m6.34 17.66-1.41 1.41" />
          <path d="m19.07 4.93-1.41 1.41" />
        </svg>
        <p className="text-lg font-semibold text-white">76° / 62°</p>
      </div>
    </div>
    <div className="flex justify-between items-center mb-8 mr-4">
      <p className="text-lg font-medium text-white">Sunday</p>
      <div className="flex items-center space-x-4">
        <svg
          className="h-6 w-6 text-gray-300"
          fill="none"
          height="24"
          stroke="currentColor"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth="2"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" />
        </svg>
        <p className="text-lg font-semibold text-white">70° / 57°</p>
      </div>
    </div>
  </div>
</div>
) }

总结

从目前提供的性能来看，实现一些简略的页面代码还是挺不便的，拿到代码改下就能够应用。简单点的交互生成可能还没有那么欠缺，当然 V0 当初还在内测阶段，还有很大的优化空间。前面再配合 AIGC 语言大模型，跟它对话交换就可能实现一个功能完善的利用或者不在边远。
很多前端同学可能会放心会不会被 AI 代替，咱们从上面几个维度剖析下：

AI 的角色：

  1. 主动生成内容： AI 能够生成一些根底代码，html、css，当然很快前端框架都会反对。这对于生成大量动态内容的网站可能会有帮忙，例如新闻网站或博客。
  2. 响应式设计： AI 能够依据不同屏幕尺寸和设施生成响应式设计，以确保网页在各种设施上都可能良好显示。
  3. 自动化测试和优化： AI 能够用于自动化测试性能，能够提供优化倡议。这对网页性能和用户体验比拟有帮忙。

限度：

  1. 创造性和复杂性： 前端开发不仅仅是生成动态页面。它还波及到用户体验设计、交互、动画等创造性和简单的工作。
  2. 定制性： 很多利用须要高度定制的设计和性能，以满足特定的业务需要。
  3. 保护和修复： 利用须要一直的保护和修复，包含修复 bug、更新内容和性能等。前端同学很多工夫会负责这些工作。
  4. 用户体验： 前端开发人员在设计用户界面和交互时思考用户体验，这是一个高度主观和创造性的过程，难以齐全交由 AI 来解决。

总的来说，AI 或者 V0 能够在某些方面辅助前端开发，提高效率和自动化一些重复性的工作，不太可能齐全代替前端开发人员，特地是对于那些须要高度定制和创造性设计的我的项目。前端开发波及到多个层面，包含技术、设计、用户体验等，这些层面须要人类的判断和创造力。当然如果作为前端开发只把握了简略的页面切图，对于前端底层能力都不理解的话，被 V0 代替也是极有可能的。

退出移动版