無代碼網頁設計神器Webflow，加了AI後會變得多強大？(免去使用ChatGPT + Midjourney 的麻煩)
更新於 2023/04/29閱讀時間約 10 分鐘
關於網頁設計使用AI的可能性，你可能已經看過有人demo這樣的工作流程：使用ChatGPT擬出網站架構，用它生成標題文案等文字相關的內容 ，甚至是代碼， 然後使用Midjourney生成視覺設計草稿， 最後再用網頁創建工具去整合，完成最後成品，這整個流程看下來呢，感覺有點麻煩，現在想像一下，有一個網頁創建工具，內建就有AI，幫你省去所有使用這些額外工具的成本，它會變得有多強大? 我要介紹一個無代碼網頁設計神器Webflow，以及它加上AI的未來。
Webflow是什麼?
Webflow，是一個不用寫一行程式就能做出Awwards得獎級網站的無代碼網頁設計神器，它在歐美國家已經盛行好一段時間了，是很多新創公司的最愛，目前在台灣呢，它比較小眾。
在遇到Webflow 以前，如果我有一個想法，我必須要跟前端開發工程師合作才能把網站做出來，在這個過程當中與工程師來來回回溝通，不斷修改會耗費掉許多時間，尤其是設計師對一些細節的龜毛，你懂的，有時候會讓工程師抓狂，抓狂到他們心裡會OS啊要不然你自己做啊！不過，自從遇到Webflow以後，從設計，開發，到發佈網站，整個流程可以完全一條龍一手包辦，而且不需要寫任何程式。 這種不求人的感覺，只有一個字，那就是爽！
Webflow於2013年在美國舊金山成立，創辦人為一對兄弟Vlad Magdalin跟Sergie Magdalin，與Bryant Chou，從ㄧ度瀕臨破產到今年2023年3月，在C輪融資中籌集了1.2億美元，投後估值40億美元，最早兄弟倆一起合作提供網站設計開發服務，弟弟Sergie負責設計，Vlad呢，則負責把Sergie使用 Photoshop做出來的圖變成網頁。
但是呢，Sergie會不斷更改他的設計，就像我前面講到的我跟前端工程師的狀況，那Vlad原本花很多時間寫好的程式碼就會白白地浪費掉。
Sergie會提出這樣的要求，「誒，你能不能在這加一個按鈕？」
Vlad 就會抓狂，想說，「天啊，你不懂這個按鈕背後有多複雜？！它不是一個按鈕，是一個資料庫，一整個登錄系統！」
那對設計師來說呢，就會覺得每次有一些小東西要修改，都要求工程師，而且對我們來說好像一個很簡單的東西，不能了解到背後可能要寫一套很複雜的程式碼。
不管對設計師或工程師來說，都有各自的痛點，Webflow的誕生就是出自於他們想要解決從設計，開發，到發佈網站後維護整個流程的痛點，在不斷優化的過程當中，最終演化成一個SAAS(軟體即服務)產品。
簡單來說呢，Webflow就是一個視覺化網站開發工具，你可以把Webflow想像成是Magdalin兄弟之間合作無間愛的結晶，或者很有可能是 Vlad發明來擺脫討厭的設計師，無理修改要求的工具，它介於設計與工程之間，這個工具無論對不會寫程式的設計師，或是是會寫程式但是對設計無感的工程師來說，都能各取所需。
所以你會發現，Webflow的介面長得有點像Photoshop。
設計師與工程師之間的愛恨情仇似乎都在這個平台上面解決了某一層面的痛點。
然而，時代不斷地在進步…
Webflow + AI
Webflow的CEO Vlad也就是哥哥，在4月20日透過一篇文章宣布了一個消息，就是Webflow正在如火如荼的開發AI當中。標題為Bringing the power of AI to Webflow 將 AI 的力量帶入 Webflow 副標為At Webflow, our mission is to bring development superpowers to everyone. That mission is about to get an AI supercharge. 我們的使命是為每個網頁設計開發工作者帶來AI 超能力。
我來總結這個文章的重點:
他一開頭呢是講到隨著AI爆炸式的增長，我們生活的方方面面都開始見識到AI能做到的事，可是這一切都剛開始，僅僅只是搔到表面而已。
有兩個我常用的工具Notion跟Canva都已經正式推出AI了。Webflow勢必也要跟上這股大潮，要不然它很快就會被淘汰。
再來他舉例說，現在你可以問ChatGPT幫你寫代碼，之前，這一類型的構建必須要深入了解網頁開發知識，特定函式庫，與複雜的工具才能做出來，現在一切都變得觸手可及，大家都可以去ChatGPT問一問，任何人都可以用語言描述他們想要的東西。 關鍵問題來了，你現在手上有一堆ChatGPT生成的代碼，可是你要拿它來做什麼? 你要怎麼運用它?
回到Webflow 與AI,他問了這個關鍵問題: “How will AI-assisted technologies unlock superpowers for designers and visual developers?” AI 輔助技術將如何為設計師和視覺開發工程師釋放出超能力？”
這個問題，同樣也可以問在任何AI工具上，你手上有一堆Midjourney生出來的圖，可是你要拿它來做什麼?
Webflow 看好結合AI 輔助生成與視覺開發之間的潛力，要深度投資人工智能，Webflow的誕生是基於成功解決了工程vs設計之間協作的一大痛點，現階段他們要做的是加入AI這個superpower，進化到人機協作，那具體怎麼做呢? 他提出了三個要點:
第一個，降低學習曲線
Webflow的學習曲線與門檻是比較高的，要自如使用這個強大可視化開發工具以前，是需要投入一些時間與精力去學習的，因為它成熟的生態系與強大的線上社群，目前網路上有很多豐富的資源，以前呢如果我們遇到一個問題，我們會先到Google上去問，或者在Webflow線上社群論壇上發問。現在 Webflow要做的就是在Designer上開發新的 AI 功能，Designer是Webflow給視覺開發工程師使用的介面，它有另一個介面叫Editor是給小編或者是客戶使用的，那這個新加入的AI就像一個助教或小幫手，在你需要時立即提供個性化協助，給予建議與支持，並根據你的特定需求做出回應。
第二個，將創建和迭代速度提高 10 倍
在網站設計開發零到一的過程中，從想法到現實這個過程是需要經過迭代的，Webflow的目標是利用 AI 的強大功能，把這個速度提高10倍，怎麼做呢?
先是從內容生成上做起，我們都知道網頁內容離不開文字與圖像。
- Quickly generate, alter, or summarize static and CMS content with simple prompts 使用簡單的提示詞，快速生成、更改或總結靜態的，或動態的CMS 內容
- Quickly translate content into different languages 快速將內容翻譯成不同的語言
- Create unique new images in the Assets panel based on a text prompt 根據文字提示在素材面板中創建獨特的新圖像，也就是不用去使用像Midjourney這樣額外的工具，不過呢，它生成圖像的能力有多強大還是未知數，如果很弱那放在那裡也是沒用。
再來就是SEO
- Auto-generate image alt tags to improve accessibility 自動生成圖像 alt 標籤以提高網頁無障礙易用性
- Auto-generate optimized SEO settings based on the actual content of the page 根據頁面的實際內容自動生成優化的 SEO 設置
最後就是客製代碼
雖然Webflow是無代碼網站，可是你可以透過在自定義代碼編輯器嵌入一段程式碼，來完成一個特定的效果or版面
- Generate code in the Custom Code editor based on a prompt 使用提示詞在自定義代碼編輯器中生成代碼
不只是文字內容跟圖像生成，Webflow更進一步在樣式與排版上加入AI，這個部分我比較期待，因為前面的部分我們多少都在Chat GPT或Midjourney中見識過了
- Generate new elements, components, and sections based on a text prompt 根據文字提示生成新元素、組件和區塊
- Make styling and content changes to multiple elements at once 一次對多個元素進行樣式和內容更改
- Generate variants and extend your design based on its surrounding elements 生成變異體並根據其周圍元素擴展您的設計
第三個，使用 AI 定制模板快速起頭
最後這一個部分，我也非常期待，就是用AI生成的定制模板來幫我們快速起個頭，都說萬事起頭難，從前網頁設計師面對一個空白頁面要尋找設計靈感時，都是在Google上搜尋，或是去各大設計平台，例如Pinterest, Behance, Dribbble, Awwwards上搜集參考設計作品。 有時這個開頭的階段會花費許多時間，現在你已經看到有人在這個起始階段，使用Midjourney來生成網站版面做視覺參考了。
Webflow這裡提出的做法是，你只要輸入一段提示詞，它會根據你的需求給你訂製模板，到底會生出一個還是多個模板我們還不知道，這個模板的功用呢，是要幫你快速打草稿，縮短起頭的時間，好讓你有更多的時間用來優化網站。
以上就是Vlad 這篇文章的重點。
AI 到底會不會取代網頁設計師與工程師? 以Vlad的論述來說，AI能賦予人類超能力。歸根結底，AI 生成內容的好壞，如何在開發流程中好好運用AI生成的內容，取決於協調整個創作過程的人類。 在不久的將來，如果人工智能成為每個軟件的標配，AI生成的內容會成為一種共識，那麼如何在這樣的競爭環境當中脫穎而出就是我們即將面臨的挑戰了。
✦✦✦
此內容為文字版本，點這裡可以看YouTube影片版本。
我是追求終極自由的KT，你也可以在我的YouTub頻道上找到我，這個頻道在今年初新成立，目前關注的領域在AI，探索人工智能與人性，及AI賦予創作的更多可能性。
9會員
6內容數
留言0
查看全部
你可能也想看
Google News 追蹤
本文探討了複利效應的重要性，並藉由巴菲特的投資理念，說明如何選擇穩定產生正報酬的資產及長期持有的核心理念。透過定期定額的投資方式，不僅能減少情緒影響，還能持續參與全球股市的發展。此外，文中介紹了使用國泰 Cube App 的便利性及低手續費，幫助投資者簡化投資流程，達成長期穩定增長的財務目標。
在當今數位化快速發展的社會中，傳統的密碼驗證方法已逐漸顯露其局限性，如密碼遺忘、盜用以及安全漏洞等問題不斷。為解決這些問題，「FIDO（Fast Identity Online）認證」技術應運而生，旨在創造一個更安全、便利的網路認證環境。FIDO 認證不依賴傳統密碼，而是利用生物辨識技術如指紋、臉部
現代人都很忙～只要花少許時間～
就可以知道實物的可動度及實體與官方照片的差異！
給有想買的人參考!
本文章探討了多智能體系統（MAS）在生成式AI領域中的應用，以及GenAI對於AI_MCU和Software defined hardware的影響。文章還總結了SDH設計模式對數據科學和人工智能時代的影響，並提供了有關GenAI的一些額外信息。
金馬影展最佳紀錄片入圍短片 B，影後短評：《備忘錄》上海封城紀實，中國特色社會主義的照妖鏡；《吹夢無蹤》從不回頭，是因為怕不敢再往前。麟光片羽也好，隻字片語也罷，速錄每一部片的影後心得。
歡迎來到我的自由職業者周報7月精華版！我是miss aloha，一位自由職業者、創作者和數位遊牧民族。在這裡，我會和你分享一些讓你的生活更自由、更有趣、更有價值的內容行銷技巧，讓你幫助你早日實現心靈自由、時間自由和財富自由！無論你是想要創業當自己的主人、實現財富自由、或者只是想要嘗試一些新事物，這篇
探究低代码/无代码迷思的幽默一面，我们一起来纠正错误观念，揭开隐藏的真相，并为有效使用这些工具提供一些见解。
對貝佐斯來說，後悔來自「沒有做的事」，就像沒有向所愛的人表白一樣。這個想法讓他立刻遞了辭呈，因為「如果失敗，我仍會很驕傲地說我嘗試過了！」
1994年貝佐斯擁有一份薪資優渥的好工作，然而他卻毅然決然地跟老闆說:「我要離職去創辦網路書店。」這一個決定，不僅開啟了亞馬遜線上網路書店，從此也改變了零售
一九四五年對日抗戰結束，國軍接收了六百匹用來扛迫擊砲的馬兒，但軍中層層貪汙，剋扣馬糧，一年不到馬兒全死光了。
關於【國安基金】咱保持沉默
該說的都說了，目前就是題材助漲，剛上場總有【無敵星星】，大概維持兩三週，剛好FED7月25/26開會。
空頭市場，無論多空部位，ETF獲利10%，現股獲利20%就是【部分停利】，千萬不要使用融資，說過超過十次，執不執行在你。
不要跟【國安基金】硬拗就好，平常心操作。
低代码已经成为今年来火热的软件赛道。在国外，低代码平台包括 Mendix、OutSystems 等明星产品。而在国外，也出现了不少低代码和无代码的平台。
全网最全的新关系型数据库/多维表格平台盘点
Notion Like 产品
全网最全的 Notion 类软件盘点
Notion 优质资源汇总
介绍
本文探討了複利效應的重要性，並藉由巴菲特的投資理念，說明如何選擇穩定產生正報酬的資產及長期持有的核心理念。透過定期定額的投資方式，不僅能減少情緒影響，還能持續參與全球股市的發展。此外，文中介紹了使用國泰 Cube App 的便利性及低手續費，幫助投資者簡化投資流程，達成長期穩定增長的財務目標。
在當今數位化快速發展的社會中，傳統的密碼驗證方法已逐漸顯露其局限性，如密碼遺忘、盜用以及安全漏洞等問題不斷。為解決這些問題，「FIDO（Fast Identity Online）認證」技術應運而生，旨在創造一個更安全、便利的網路認證環境。FIDO 認證不依賴傳統密碼，而是利用生物辨識技術如指紋、臉部
現代人都很忙～只要花少許時間～
就可以知道實物的可動度及實體與官方照片的差異！
給有想買的人參考!
本文章探討了多智能體系統（MAS）在生成式AI領域中的應用，以及GenAI對於AI_MCU和Software defined hardware的影響。文章還總結了SDH設計模式對數據科學和人工智能時代的影響，並提供了有關GenAI的一些額外信息。
金馬影展最佳紀錄片入圍短片 B，影後短評：《備忘錄》上海封城紀實，中國特色社會主義的照妖鏡；《吹夢無蹤》從不回頭，是因為怕不敢再往前。麟光片羽也好，隻字片語也罷，速錄每一部片的影後心得。
歡迎來到我的自由職業者周報7月精華版！我是miss aloha，一位自由職業者、創作者和數位遊牧民族。在這裡，我會和你分享一些讓你的生活更自由、更有趣、更有價值的內容行銷技巧，讓你幫助你早日實現心靈自由、時間自由和財富自由！無論你是想要創業當自己的主人、實現財富自由、或者只是想要嘗試一些新事物，這篇
探究低代码/无代码迷思的幽默一面，我们一起来纠正错误观念，揭开隐藏的真相，并为有效使用这些工具提供一些见解。
對貝佐斯來說，後悔來自「沒有做的事」，就像沒有向所愛的人表白一樣。這個想法讓他立刻遞了辭呈，因為「如果失敗，我仍會很驕傲地說我嘗試過了！」
1994年貝佐斯擁有一份薪資優渥的好工作，然而他卻毅然決然地跟老闆說:「我要離職去創辦網路書店。」這一個決定，不僅開啟了亞馬遜線上網路書店，從此也改變了零售
一九四五年對日抗戰結束，國軍接收了六百匹用來扛迫擊砲的馬兒，但軍中層層貪汙，剋扣馬糧，一年不到馬兒全死光了。
關於【國安基金】咱保持沉默
該說的都說了，目前就是題材助漲，剛上場總有【無敵星星】，大概維持兩三週，剛好FED7月25/26開會。
空頭市場，無論多空部位，ETF獲利10%，現股獲利20%就是【部分停利】，千萬不要使用融資，說過超過十次，執不執行在你。
不要跟【國安基金】硬拗就好，平常心操作。
低代码已经成为今年来火热的软件赛道。在国外，低代码平台包括 Mendix、OutSystems 等明星产品。而在国外，也出现了不少低代码和无代码的平台。
全网最全的新关系型数据库/多维表格平台盘点
Notion Like 产品
全网最全的 Notion 类软件盘点
Notion 优质资源汇总
介绍