乐趣区

关于前端:能输出网页的AI应用来了赶紧测评下

大家好,我卡颂。

最近,网页制作工具 framer 推出了新性能 —— 依据提醒词生成网页。

让老板晓得这性能还得了?作为前端工程师,我连忙对新性能测评一番。

一番捣鼓,悬着的心终于放了下来 —— 新性能岂但对前端造成不了威逼,反而是锦上添花。

本文让咱们来理解 framerAI生成网页的全流程。

欢送退出人类高质量前端交换群,带飞

什么是 framer

framer是一款网页可视化编辑器,诞生于 2016 年。作为一款 No Code 工具,framer与其余 No Code 工具一样,都会面对 不可能三角 问题:

所谓 不可能三角 ,是指一款No Code 工具无奈同时兼顾 灵便 易用 效率

比方,如果工具:

  1. 反对各种场景(灵便),同时能显著进步网页产出效率,那他的配置肯定很简单(须要应答各种场景,不易用)
  2. 反对各种场景(灵便),同时很好用,那他的开发效率就不会高(无奈无脑生成页面,须要批改产物代码)
  3. 配置简略(易用),同时开发效率高,那他的利用场景就窄(不灵便)

framer抉择了第三条路线,即 就义灵活性,放弃易用与效率。

具体来说,framer的利用场景局限在生成落地页、产品介绍页、官网这样的动态页。

这些场景的特点是 重展现、轻交互。

framer 的工作流程

framer整体工作流程包含 3 步:

首先设计原型图,这一步能够通过两种路径实现:

  • 设计师通过 Figma 设计
  • 通过提醒词形容,由 AI 生成

产出的原型图会进入编辑器界面,在这里能够:

  • 调整尺寸、款式、布局(即批改CSSHTML
  • 间接批改对应 JS 代码(以 React 组件的模式)
  • 通过 CMS 连贯数据源
  • ……

当编辑实现后,能够一键部署。

接下来,咱们看一个 AI 生成网页的例子。

AI 生成网页实例

咱们的指标是生成一个 销售坦克 的落地页,具体提醒词如下:

点击按钮,几秒钟过后,framer为咱们生成了适配 3 种设施的响应式页面。

再看生成的内容,他的确依照咱们的要求,生成了三局部内容:

大体的构造有了,接下来咱们只须要在编辑器中调整配色、布局、批改内容、对接 CMS 就能够了。

当然,瑕疵也是有的:

  • 提醒词中提到 轮播图 framer 中有现成的轮播图组件,却没有应用
  • 提醒词中提到 导航栏 framer 也没生成

置信在将来的迭代中,会进一步优化。

最初,一键部署网页(tank.framer.ai)。整个设计、编辑、上线流程不到 10 分钟实现。

对前端的影响

既然 framer 能极大进步 落地页、官网 场景下的开发效率,是不是抢了前端开发的饭碗?

要答复这个问题,咱们须要从业务登程 —— 落地页、官网场景的指标是什么?

答案是:转化。

转化可能是获取销售线索(注册信息、邮箱地址 …),或者引流微信、App……

为了进步转化率,须要大量的A/B test,比方:

  • 填写手机号的输入框应该放在页面结尾还是结尾?
  • 卖点介绍应该三栏布局还是平淡无奇?

基于指标登程,在这样的场景下,前端工程师的工作重心应该放在:

  • 帮助产品对页面做更粗疏的埋点,剖析用户行为门路
  • 搭建 A/B test 平台测试不同页面的转化率

画页面这样的繁琐工作交给 framer 来做再适合不过。

总结

当工具呈现时,咱们不应该一味排挤他,而是应该思考 —— 如何利用他更好的为业务发明价值(黑话叫 如何赋能业务)。

顺便提一嘴 —— 以后 framer 能够收费试用、部署。最根底的付费版(1000uv/ 月)是 5 刀。

退出移动版