天天看點

能輸出網頁的AI應用來了,趕緊測評下

大家好,我卡頌。

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

能輸出網頁的AI應用來了,趕緊測評下

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

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

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

什麼是framer

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

能輸出網頁的AI應用來了,趕緊測評下

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

比如,如果工具:

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

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

具體來說,framer的應用場景局限在生成落地頁、産品介紹頁、官網這樣的靜态頁。

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

能輸出網頁的AI應用來了,趕緊測評下

framer生成的頁面

framer的工作流程

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

能輸出網頁的AI應用來了,趕緊測評下

首先設計原型圖,這一步可以通過兩種途徑實作:

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

産出的原型圖會進入編輯器界面,在這裡可以:

  • 調整尺寸、樣式、布局(即修改CSS、HTML)
  • 直接修改對應JS代碼(以React元件的形式)
  • 通過CMS連接配接資料源
  • ......
能輸出網頁的AI應用來了,趕緊測評下

當編輯完成後,可以一鍵部署。

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

AI生成網頁執行個體

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

能輸出網頁的AI應用來了,趕緊測評下

點選按鈕,幾秒鐘過後,framer為我們生成了适配3種裝置的響應式頁面。

能輸出網頁的AI應用來了,趕緊測評下

再看生成的内容,他确實按照我們的要求,生成了三部分内容:

能輸出網頁的AI應用來了,趕緊測評下

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

當然,瑕疵也是有的:

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

相信在未來的疊代中,會進一步優化。

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

對前端的影響

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

要回答這個問題,我們需要從業務出發 —— 落地頁、官網場景的目标是什麼?

答案是:轉化。

轉化可能是擷取銷售線索(注冊資訊、郵箱位址...),或者引流微信、App......

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

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

基于目标出發,在這樣的場景下,前端工程師的工作重心應該放在:

  • 協助産品對頁面做更細緻的埋點,分析使用者行為路徑
  • 搭建A/B test平台測試不同頁面的轉化率

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

總結

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

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

能輸出網頁的AI應用來了,趕緊測評下

參考資料

[1]

framer: https://framer.com/

[2]

tank.framer.ai: https://tank.framer.ai/

繼續閱讀