震惊！对话就能生成网页，前端er又药丸了？

已于 2023-09-18 23:11:56 修改
阅读量546 收藏 3
点赞数
分类专栏： AIGC react 文章标签： 程序人生 javascript react AI编程
于 2023-09-18 22:37:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuleiming21/article/details/133000059
版权

前两天，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，居中），这看起来好像生成的有点问题，我们继续往下看

  2. 第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替代也是极有可能的。

前端大师兄
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
9月最新AIGC信息差项目大全(一)
next_agi的博客
09-23 581
最近大家是否被AI相关的信息密度刷屏，这些海外大厂有点杀疯了，这么快的迭代速度，大家都准备好了吗？
我用尽了洪荒之力，解开了ChatGPT 写前端代码的封印，结果...
前端达人
02-12 6987
我用尽了洪荒之力，解开了ChatGPT 写前端代码的封印介绍ChapGPT 听起来好得令人难以置信，所以让我们让它为我们编写一些 JS 代码。我想看看它是否可以解决我作为前端开发人员每天所做的任务。是驴子是马拉出来溜溜，我们还是直接进入主题一探究竟。在 React 中构建弹出框组件虽然这是可能的，但我们不要通过添加一些代码来开始这个实验。让我们简单地要求 ChatGPT 创建两个 React 组件...
NPM v0 包捐赠给 Vercel 后续—— v0.dev
Willin Wang 的全栈升级指南
09-15 539
v0 是由提供的由 AI 提供支持的生成式用户界面系统。它基于Shadcn UI和生成复制和粘贴友好的React代码，人们可以在他们的项目中使用。
前端AI工具Vercel V0初体验
hoaxxcj的博客
02-22 1199
我在V1版本用中文指令让它支持节点展开、收起，发现没有变化，可能不支持中文指令，后面V2版本换成英文指令后，树节点默认收起了，但点击却无法展开。目标是帮助开发者构建其产品的第一个版本（所以名字叫V0，可以在V0版本上不断修改，生成V1、V2等等版本）。）进行注册，然后点击“Soluations”下的“AI Apps”，最后点击“Try V0.dev”按钮进入V0页面。我们输入指令让V0帮我们生成一个带有滑动验证的登陆页面，大概10秒左右就生成好了，还是很快的。首先在Vercel官网（
用react搞定一个大模型对话效果
jacoby_fire的博客
01-25 913
最近AI盛行，关注几个大模型网站都能发现，跟AI对话的时候，返回的文本是逐字展示的，就给人一种AI边解析边返回的感觉（不知道是为了装X还是真的需要这样）。第一个：用个定时器，把时差设置为变量delay，每次都随机生成delay，固定展示三个字符，直到展示完全。简单来讲就是，速度不固定，每次展示长度固定。由于我这边后端返回是一次性返回所有回复，而天煞的产品经理要求做出逐字展示效果，于是我只能纯前端控制展示。整体实现并不难，但要做好每个细节还是需要一点思考的，ok，，我要拿去装逼了，拜拜！
使用 React、NodeJS 和 AI 创建简历生成器
u010291330的博客
02-24 831
GPT-3是OpenAI开发的一种人工智能程序，非常擅长理解和处理人类语言。它已经接受了来自互联网的大量文本数据的训练，这使得它能够对范围广泛的与语言相关的任务生成高质量的响应。对于本文，我们将使用 OpenAI GPT3。一旦 ChatGPT API 发布，我将使用它创建另一篇文章🤗从他们发布第一个 API 的那一天起我就是 OpenAI 的忠实粉丝，我已经求助于其中一名员工并向他们发送了一个很好的请求以获取访问权限GPT3 的 beta 版本，我得到了它😀。
前端er必备技能 - 前端调试通关秘籍
02-22
作为前端开发者，我们都知道调试是一项必不可少的技能，它能帮助我们解决琐碎的 bug、提高代码质量并加速项目的开发进程。但是，调试并不总是一帆风顺，有时候我们可能会被不明确的错误信息或复杂的代码逻辑困扰。...
er-diagram-endpoint:自动生成ER图
05-09
图表端点自动生成ER图，并将其显示为URL上的PNG文件。测试： 运行应用程序并打开： http://localhost:10000/er用途： 弹簧靴SchemaCrawler（ ） Graphviz（ ）基于StackOverflow条目： 样本数据库如果您需要示例...
RandomGraphCreation.rar_ER随机图算法_graph 生成matlab_matlab ER随即图_连通图_
07-15
本项目提供的"RandomGraphCreation.rar"是一个MATLAB实现，专注于创建ER随机图，并确保生成的图是连通的。 ER随机图的生成过程基于以下规则：在n个节点中，每对节点之间有一条边的概率为p。对于无向图，这意味着每...
PowerDesigner根据SQL语句自动生成ER图.zip
01-10
PowerDesigner根据SQL语句自动生成ER图
专访王斌：一个追求效率、挑战和爱分享的前端er
03-03
他，就是在腾讯群、兴趣部落负责前端开发工作的王斌。王斌认为，随着HTML5的发展，HTML5承担的东西也越来越多，前端实际上不输于后台王斌，24岁。12年开始在腾讯实习，13年毕业正式加入腾讯。实习先是在即通应用部...
react+星火大模型，构建上下文ai问答页面（可扩展）
Azbtt的博客
11-11 1159
最近写的开源项目核心功能跑通了，前两天突发奇想。关于项目可否介入大模型来辅助用户使用平台，就跑去研究了最近比较活火的国内大模型–讯飞星火大模型。react hooks+TypeScript+websocket技术栈，获取讯飞大模型api地址和其key。开源，工具类，效果图。国内大模型--讯飞星火大模型console.xfyun.cn。
coffee：使用AI构建和迭代React UI速度提高10
极道Jdon的技术博客
12-16 174
您的应用程序可能会在第一次保存后立即显示错误，因为 Coffee 代理尚未将 Coffee 组件写入其中。最后，一旦您对酿造的组件感到满意，您可以将 pour="ComponentName.tsx" 属性添加到您的。当您运行 Coffee 时，它​​将侦听源目录中 js/jsx/ts/tsx 文件的更改，如果检测到。Coffee 最酷的部分是您可以像从头开始创建新组件一样轻松地编辑现有的 React 组件。该项目的目的不仅仅是一个漂亮的演示，而是一个可以编写生产质量代码并与之交互的人体工学工具。
程序人生 - (002)
qq_46058838的博客
06-28 664
作为一名程序员，在编程和软件开发的过程中，通常会有一些深刻的感悟和体会。这些感悟不仅仅是关于技术的，也包括对工作的态度、职业的发展和人生的理解。：程序员的职业发展不仅仅是技术的进步，还包括软技能的提升，比如沟通能力、项目管理能力和领导能力。程序员需要适应变化，愿意尝试和学习新的东西，保持对行业的敏感度。因此，找到工作与生活的平衡点，保证身心健康，也是非常重要的。每一次失败都是一次学习的机会，通过不断试错和调整，最终能够找到解决问题的方法。面对复杂的代码和难解的问题，只有坚持下去，才能最终找到解决方案。
Sortable.js板块拖拽示例
w11111xxxl的博客
07-14 770
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
ReactRouter v6升级的步骤
feixin369的博客
07-14 414
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
vue搜索框过滤--- computed、watch区别
学习笔记分享给大家
07-16 328
计算属性computed适用于需要基于其他数据动态变化，并且需要缓存的场景。侦听器watch适用于需要响应数据变化，执行异步或开销较大操作的场景。方法methods适用于定义组件的具体行为，包括事件处理和业务逻辑等。
react 快速入门思维导图
最新发布
weixin_44565776的博客
07-18 103
只要掌握了这些react技能，基本就可以熟练使用react了
ios CCUIAlertActivityView.m
编程语言技巧经验分享
07-17 484
// // CCUIAlertActivityView.m // CCFC // // #import "CCUIAlertActivityView.h" #import "CCNSNumber.h" #import "CCU
新闻er图你能画er图吗？
04-07
当然可以为您介绍ER图（实体关系图）！ER图是一种用于描述实体及其之间关系的图形化工具，常用于数据库设计。ER图由实体（Entity）、属性（Attribute）和关系（Relationship）三个主要元素组成。 实体表示现实世界中的一个独立对象，可以是人、物、地点、概念等。属性是实体的特征或描述，用于描述实体的特性。关系表示实体之间的联系或连接。 ER图的主要符号包括： - 实体用矩形框表示，框内写上实体的名称。 - 属性用椭圆形表示，椭圆内写上属性的名称。 - 关系用菱形表示，菱形内写上关系的名称。 在ER图中，实体与属性之间用直线连接，表示实体拥有该属性。实体与关系之间用直线连接，表示实体参与了该关系。 我很抱歉，作为一个AI助手，我无法直接为您绘制ER图。但我可以通过文字为您解释和描述ER图的相关概念和元素。如果您有具体的问题或需要进一步了解，请告诉我，我会尽力帮助您。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值