Framer AI 產出網頁,實用性高

Framer 新功能,AI 產出網頁!
試了一下,還真的可以!感覺好酷啊!
0 代碼做網頁的時代不遠了!

Framer

Framer 非常像 Figma,類似的畫布和各種設計繪圖工具,但能更快製作 RWD,設定互動、動畫等,不用手寫 HTML 和 CSS。

做完之後馬上一鍵發佈到網路上。(免費版無法將網址改成自己的網域名稱。)

Framer 剛推出的 AI 功能,打打字就幫你生成網頁,幫你產生圖片、文案、配色,只要自己設定一下連結、改改圖片就好。

登入後在個人的 Dashboard 開新檔案,空白畫布上大大的「Start with AI」點下去。

輸入 Prompt,等個 3 分鐘泡麵時間,網頁就做好了。

是不是很簡單呢?以下我試玩兩個範例。

音樂串流服務

請 chatGPT 給我一份關於音樂串流服務簡介與特色的文案,得到下列 Prompt。然後丟去 Framer。

This music streaming service stands out with its extensive music library and personalized recommendations, offering users endless choices. Its visual style is clean and modern, emphasizing user experience, with an intuitive interface design and an elegant color scheme.

Framer 邊產生畫面的同時你可以點右邊的色版更改網頁配色,也可以更改字型。

同個色版多次點擊,Framer 會更換不同的配色方式。

一頁響應式網頁就做好了,可以點擊右上角 Preview 直接預覽,簡單迅速。

生鮮蔬果超市

我一樣請 chatGPT 寫 Prompt。

The webpage design of the fresh fruit and vegetable supermarket store is clean, refreshing and simple, full of natural atmosphere, emphasizing the direct delivery service of agricultural products,

得到這樣子的結果。

Framer 會自動幫你填充圖片和文案,當然也可以自己修改。像這個生鮮蔬果的圖片肯定不是我們要的。

右邊的工具欄能微調很多東西。點擊圖片、再點擊 image,就能自行更換圖片。

文字當然也可以更換。

Framer 只能幫你產出有關的圖文,沒辦法幫你設定連結,記得手動加上 LINK啊!

結論

我試了 5 個不同主題,AI 一鍵產出網頁很快很方便沒錯,但版型大同小異(現在流行的網頁版型其實也長得差不多)。

AI 產出的配色也頗微妙,多點幾下色版,結果顏色越試越怪,要靠自己微調。

我覺得當大家網頁的版型、文案差別不大的時候,主戰場就是讓人驚豔的圖片了。

只能說目前 Framer 推出這個 AI 功能,有種「功能搶先看」的感覺。設計師絕不會安於目前 AI 產出的結果,樣板風太重

但對於初學者甚至外行人來說,能快速用 Framer AI 功能做點什麼出來,超酷的了!

而且是真的可以有自己的圖、自己的文案、自己的連結,滑鼠點一點就能發佈,做網頁的難度降低非常非常多。

只是要完完全全符合自己心中想要的模樣其實改動的地方並不少,改完也不是初學者了…

不過咧~之後的 AI 肯定會越來越聰明的!期待之後的進化,一鍵生成的那一天到來。

Akane Lee

Akane Lee

如果設計師能和工程師順利合作,那麼老公也就能準時下班了吧!因此努力分享 UI 和 UX 方面的知識、技術、各種踩過的坑與心得。

Comments

wave
comments powered by Disqus

Press ESC to close