大家好，我卡頌。

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

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

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

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

什么是framer

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

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

比如，如果工具：

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

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

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

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

framer生成的頁面

framer的工作流程

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

首先設計原型圖，這一步可以通過兩種途徑實現：

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

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

• 調整尺寸、樣式、布局（即修改CSS、HTML）
• 直接修改對應JS代碼（以React組件的形式）
• 通過CMS連接數據源
• ......

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

接下來，我們看一個AI生成網頁的例子。

AI生成網頁實例

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

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

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

大體的結構有了，接下來我們只需要在編輯器中調整配色、布局、修改內容、對接CMS就可以了。

當然，瑕疵也是有的：

• 提示詞中提到「輪播圖」，framer中有現成的輪播圖組件，卻沒有使用
• 提示詞中提到「導航欄」，framer也沒生成

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

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

對前端的影響

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

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

答案是：轉化。

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

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

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

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

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

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

總結

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

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

參考資料

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

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