大家好，我卡頌。
最近，網頁制作工具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/