共计 1347 个字符，预计需要花费 4 分钟才能阅读完成。
大家好，我卡颂。
最近，网页制作工具 framer 推出了新性能 —— 依据提醒词生成网页。
让老板晓得这性能还得了？作为前端工程师，我连忙对新性能测评一番。
一番捣鼓，悬着的心终于放了下来 —— 新性能岂但对前端造成不了威逼，反而是锦上添花。
本文让咱们来理解 framer 用AI生成网页的全流程。
欢送退出人类高质量前端交换群，带飞
什么是 framer
framer是一款网页可视化编辑器，诞生于 2016 年。作为一款 No Code 工具，framer与其余 No Code 工具一样，都会面对 不可能三角 问题：
所谓 不可能三角 ，是指一款No Code 工具无奈同时兼顾 灵便 、 易用 与效率。
比方，如果工具：
- 反对各种场景（灵便），同时能显著进步网页产出效率，那他的配置肯定很简单（须要应答各种场景，不易用）
- 反对各种场景（灵便），同时很好用，那他的开发效率就不会高（无奈无脑生成页面，须要批改产物代码）
- 配置简略（易用），同时开发效率高，那他的利用场景就窄（不灵便）
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 刀。