大家好，我卡頌。

最近，網(wǎng)頁(yè)制作工具framer[1]推出了新功能 —— 根據(jù)提示詞生成網(wǎng)頁(yè)。

讓老板知道這功能還得了？作為前端工程師，我趕緊對(duì)新功能測(cè)評(píng)一番。

一番搗鼓，懸著的心終于放了下來(lái) —— 新功能不但對(duì)前端造成不了威脅，反而是如虎添翼。

本文讓我們來(lái)了解framer用AI生成網(wǎng)頁(yè)的全流程。

什么是framer

framer是一款網(wǎng)頁(yè)可視化編輯器，誕生于2016年。作為一款No Code工具，framer與其他No Code工具一樣，都會(huì)面對(duì)「不可能三角」問題：

所謂「不可能三角」，是指一款No Code工具無(wú)法同時(shí)兼顧「靈活」、「易用」與「效率」。

比如，如果工具：

1. 支持各種場(chǎng)景（靈活），同時(shí)能顯著提高網(wǎng)頁(yè)產(chǎn)出效率，那他的配置一定很復(fù)雜（需要應(yīng)對(duì)各種場(chǎng)景，不易用）
2. 支持各種場(chǎng)景（靈活），同時(shí)很好用，那他的開發(fā)效率就不會(huì)高（無(wú)法無(wú)腦生成頁(yè)面，需要修改產(chǎn)物代碼）
3. 配置簡(jiǎn)單（易用），同時(shí)開發(fā)效率高，那他的應(yīng)用場(chǎng)景就窄（不靈活）

framer選擇了第三條道路，即 犧牲靈活性，保持易用與效率。

具體來(lái)說，framer的應(yīng)用場(chǎng)景局限在生成落地頁(yè)、產(chǎn)品介紹頁(yè)、官網(wǎng)這樣的靜態(tài)頁(yè)。

這些場(chǎng)景的特點(diǎn)是 重展示、輕交互。

framer生成的頁(yè)面

framer的工作流程

framer整體工作流程包括3步：

首先設(shè)計(jì)原型圖，這一步可以通過兩種途徑實(shí)現(xiàn)：

• 設(shè)計(jì)師通過Figma設(shè)計(jì)
• 通過提示詞描述，由AI生成

產(chǎn)出的原型圖會(huì)進(jìn)入編輯器界面，在這里可以：

• 調(diào)整尺寸、樣式、布局（即修改CSS、HTML）
• 直接修改對(duì)應(yīng)JS代碼（以React組件的形式）
• 通過CMS連接數(shù)據(jù)源
• ......

當(dāng)編輯完成后，可以一鍵部署。

接下來(lái)，我們看一個(gè)AI生成網(wǎng)頁(yè)的例子。

AI生成網(wǎng)頁(yè)實(shí)例

我們的目標(biāo)是生成一個(gè)「銷售坦克」的落地頁(yè)，具體提示詞如下：

點(diǎn)擊按鈕，幾秒鐘過后，framer為我們生成了適配3種設(shè)備的響應(yīng)式頁(yè)面。

再看生成的內(nèi)容，他確實(shí)按照我們的要求，生成了三部分內(nèi)容：

大體的結(jié)構(gòu)有了，接下來(lái)我們只需要在編輯器中調(diào)整配色、布局、修改內(nèi)容、對(duì)接CMS就可以了。

當(dāng)然，瑕疵也是有的：

• 提示詞中提到「輪播圖」，framer中有現(xiàn)成的輪播圖組件，卻沒有使用
• 提示詞中提到「導(dǎo)航欄」，framer也沒生成

相信在未來(lái)的迭代中，會(huì)進(jìn)一步優(yōu)化。

最后，一鍵部署網(wǎng)頁(yè)（tank.framer.ai[2]）。整個(gè)設(shè)計(jì)、編輯、上線流程不到10分鐘完成。

對(duì)前端的影響

既然framer能極大提高「落地頁(yè)、官網(wǎng)」場(chǎng)景下的開發(fā)效率，是不是搶了前端開發(fā)的飯碗？

要回答這個(gè)問題，我們需要從業(yè)務(wù)出發(fā) —— 落地頁(yè)、官網(wǎng)場(chǎng)景的目標(biāo)是什么？

答案是：轉(zhuǎn)化。

轉(zhuǎn)化可能是獲取銷售線索（注冊(cè)信息、郵箱地址...），或者引流微信、App......

為了提高轉(zhuǎn)化率，需要大量的A/B test，比如：

• 填寫手機(jī)號(hào)的輸入框應(yīng)該放在頁(yè)面開頭還是結(jié)尾？
• 賣點(diǎn)介紹應(yīng)該三欄布局還是平鋪直敘？

基于目標(biāo)出發(fā)，在這樣的場(chǎng)景下，前端工程師的工作重心應(yīng)該放在：

• 協(xié)助產(chǎn)品對(duì)頁(yè)面做更細(xì)致的埋點(diǎn)，分析用戶行為路徑
• 搭建A/B test平臺(tái)測(cè)試不同頁(yè)面的轉(zhuǎn)化率

畫頁(yè)面這樣的繁瑣工作交給framer來(lái)做再合適不過。

總結(jié)

當(dāng)工具出現(xiàn)時(shí)，我們不應(yīng)該一味排斥他，而是應(yīng)該思考 —— 如何利用他更好的為業(yè)務(wù)創(chuàng)造價(jià)值（黑話叫「如何賦能業(yè)務(wù)」）。

順便提一嘴 —— 當(dāng)前framer可以免費(fèi)試用、部署。最基礎(chǔ)的付費(fèi)版（1000uv/月）是5刀。

參考資料

[1]framer:https://framer.com/。

[2]tank.framer.ai:https://tank.framer.ai/。