大家好,我卡頌。
最近,網頁制作工具framer[1]推出了新功能 —— 根據提示詞生成網頁。
讓老闆知道這功能還得了?作為前端工程師,我趕緊對新功能測評一番。
一番搗鼓,懸着的心終于放了下來 —— 新功能不但對前端造成不了威脅,反而是如虎添翼。
本文讓我們來了解framer用AI生成網頁的全流程。
什麼是framer
framer是一款網頁可視化編輯器,誕生于2016年。作為一款No Code工具,framer與其他No Code工具一樣,都會面對「不可能三角」問題:
所謂「不可能三角」,是指一款No Code工具無法同時兼顧「靈活」、「易用」與「效率」。
比如,如果工具:
- 支援各種場景(靈活),同時能顯著提高網頁産出效率,那他的配置一定很複雜(需要應對各種場景,不易用)
- 支援各種場景(靈活),同時很好用,那他的開發效率就不會高(無法無腦生成頁面,需要修改産物代碼)
- 配置簡單(易用),同時開發效率高,那他的應用場景就窄(不靈活)
framer選擇了第三條道路,即 犧牲靈活性,保持易用與效率。
具體來說,framer的應用場景局限在生成落地頁、産品介紹頁、官網這樣的靜态頁。
這些場景的特點是 重展示、輕互動。
framer生成的頁面
framer的工作流程
framer整體工作流程包括3步:
首先設計原型圖,這一步可以通過兩種途徑實作:
- 設計師通過Figma設計
- 通過提示詞描述,由AI生成
産出的原型圖會進入編輯器界面,在這裡可以:
- 調整尺寸、樣式、布局(即修改CSS、HTML)
- 直接修改對應JS代碼(以React元件的形式)
- 通過CMS連接配接資料源
- ......
當編輯完成後,可以一鍵部署。
接下來,我們看一個AI生成網頁的例子。
AI生成網頁執行個體
我們的目标是生成一個「銷售坦克」的落地頁,具體提示詞如下:
點選按鈕,幾秒鐘過後,framer為我們生成了适配3種裝置的響應式頁面。
再看生成的内容,他确實按照我們的要求,生成了三部分内容:
大體的結構有了,接下來我們隻需要在編輯器中調整配色、布局、修改内容、對接CMS就可以了。
當然,瑕疵也是有的:
- 提示詞中提到「輪播圖」,framer中有現成的輪播圖元件,卻沒有使用
- 提示詞中提到「導航欄」,framer也沒生成
相信在未來的疊代中,會進一步優化。
最後,一鍵部署網頁(tank.framer.ai[2])。整個設計、編輯、上線流程不到10分鐘完成。
對前端的影響
既然framer能極大提高「落地頁、官網」場景下的開發效率,是不是搶了前端開發的飯碗?
要回答這個問題,我們需要從業務出發 —— 落地頁、官網場景的目标是什麼?
答案是:轉化。
轉化可能是擷取銷售線索(注冊資訊、郵箱位址...),或者引流微信、App......
為了提高轉化率,需要大量的A/B test,比如:
- 填寫手機号的輸入框應該放在頁面開頭還是結尾?
- 賣點介紹應該三欄布局還是平鋪直叙?
基于目标出發,在這樣的場景下,前端工程師的工作重心應該放在:
- 協助産品對頁面做更細緻的埋點,分析使用者行為路徑
- 搭建A/B test平台測試不同頁面的轉化率
畫頁面這樣的繁瑣工作交給framer來做再合适不過。
總結
當工具出現時,我們不應該一味排斥他,而是應該思考 —— 如何利用他更好的為業務創造價值(黑話叫「如何賦能業務」)。
順便提一嘴 —— 目前framer可以免費試用、部署。最基礎的付費版(1000uv/月)是5刀。
參考資料
[1]
framer: https://framer.com/
[2]
tank.framer.ai: https://tank.framer.ai/