大家好，我卡頌。

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

讓老板知道這功能還得了？作為前端工程師，我趕緊對新功能測評一番。

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

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

什么是framer

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

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

比如，如果工具：

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

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

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

這些場景的特點是 重展示、輕交互。

framer生成的頁面

framer的工作流程

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

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

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

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

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

當編輯完成后，可以一鍵部署。

接下來，我們看一個AI生成網(wǎng)頁的例子。

AI生成網(wǎng)頁實例

我們的目標是生成一個「銷售坦克」的落地頁，具體提示詞如下：

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

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

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

當然，瑕疵也是有的：

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

相信在未來的迭代中，會進一步優(yōu)化。

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

對前端的影響

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

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

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

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

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

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

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

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

畫頁面這樣的繁瑣工作交給framer來做再合適不過。

總結(jié)

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

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

參考資料

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

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