大家好，我卡颂。

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

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

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

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

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

什么是framer

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

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

比方，如果工具：

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

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

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

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

framer的工作流程

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

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

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

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

  • 调整尺寸、款式、布局（即批改CSS、HTML）
  • 间接批改对应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刀。