【AI 網站生成平台推薦】6 個利用 AI 輕鬆架站的網頁工具
文章最後更新於 2024 年 6 月 14 日
前陣子 Chat GPT 4o 發布後,又再一次讓大眾驚嘆 AI 能到做的事真的越來越廣泛。
而我自己也持續在關注 AI 網站生成的部分有沒有更好用、更強大的工具。
經過一番研究、測試以及篩選後,對於 AI 生成網站的能力感到蠻驚喜的。
本篇文章將與你分享 6 個透過回答簡單的問題或是輸入一段對於網站需求的描述,就能生成網站的 AI 架站平台。
話不多說,趕快進入主題吧~
AI 網站生成平台比較表
平台名稱 | AI生成方式 | AI生成 網站品質 | 生成中文內容 | 免費方案 |
Framer AI | 需要輸入一段提示詞讓AI了解需求 | ★★★ | ✔ | |
Wix AI | 用聊天方式回答AI問題,可用中文回答 | ★★★★ | ✔ | |
Jimdo | 用選擇題的方式回答AI | ★★★ | ✔ | |
10web | 需要輸入一段提示詞讓AI了解需求 | ★★★★ | ||
Dorik | 需要輸入一段提示詞讓AI了解需求 | ★★★ | ✔ | ✔ |
CodeDesign.ai | 需要輸入一段提示詞讓AI了解需求 | ★★★ | ✔ | ✔ |
Framer AI
Framer 目前是我僅次於 Webflow 第二喜歡的架站平台,熟悉 Figma 操作的設計師對於 Framer 真的可以無痛上手,介面操作都很像,排版完成等於網頁完成的設計很棒。
首先按照下圖紅框的流程就可以找到 Framer AI 生成的功能。
Framer AI 網站生成的方式需要輸入一段描述,欄位內也有建議的提示內容,我是請 Chat GPT 幫我生成,主要是製作攝影師網站。
不知道要輸入甚麼的朋友,可以用我的提示詞玩玩看囉~
Create a website named “[Your Name] Photography” with a minimalist design theme. The homepage should feature a fullscreen, high-quality photo with a brief introduction. Include a fixed navigation bar with links to Home, Portfolio, Services, Testimonials, and Contact Us.
For the Portfolio section, categorize photos into Wedding Photography, Portrait Photography, and Landscape Photography. Each category should display multiple selected photos with short descriptions or background stories.
The Services page should detail your photography services, including pricing packages and additional services like photo editing and album creation. Provide a simple booking form or contact method.
The Testimonials page should showcase feedback and recommendations from past clients, along with their photos.
The About Us page should introduce your photography experience, style, and philosophy, accompanied by a professional photo of yourself. Include a short video introduction to add a personal touch.
The Contact Us page should offer multiple contact methods, including a contact form, email, and phone number. Add social media links to allow users to follow your work on other platforms.
Optimize the website content and image tags with keywords such as “photography services,” “wedding photography,” and “professional photographer” for SEO.
AI 生成結果如下圖,我覺得還行,顏色可以自己調配不同的風格,不過可以多生成幾次試試,因為我第一次的生成結果頗醜的。
Framer 的操作我覺得算是蠻好上手的,元件的調整細項都在右側欄,它的排版邏輯是 Auto layout 的概念,所以很適合擅長 FIgma 的設計師玩玩看。
Framer 基本是可以免費使用的,付費版就能自訂網域、創建更多頁面、提高每月造訪人數以及使用 CMS 功能等等。
Wix AI
Wix AI 在提問問題的過程中讓我蠻驚豔的,有種真的像在跟窗口溝通的感覺,一方面是因為它可以用中文溝通,另一方面則是因為它的回覆不是制式的,測試幾次發現回答都會有點不同。
Wix AI 的生成方式是用聊天的方式回答 AI 問題,它會根據你的回答生成網站,可以用中文回覆,這邊我是用英文來做測試。
它的問答包含品牌名稱、對於品牌業務的描述、品牌針對的客戶群以及網站的目的為何等等。
生成完成後,它會產出一段網站的簡介,就好像窗口要交件時在跟你解說網站的功能有哪些一樣,AI 網站生成的過程感受蠻不錯的。
下圖就是我重新生成後的視覺,覺得滿意的話就可以選擇此設計,進一步到頁面編輯器做調整囉~
網站生成後連動態呈現方式也會一併完成,這點蠻不錯的~
Wix 也是可以免費使用的,只是會有浮水印,且只能用 Wix 的子網域做為網站網址,想要移除或自訂網域的話就可以考慮付費升級囉。
Jimdo
Jimdo 的 AI 生成方式也是透過問問題的方式做引導,就像在填問卷一樣,問題包含網站目的、網站類別、網站的主要服務、網站風格以及配色等等。
這題就是在問你的網站是個人網站還是有商業目的的網站,也有其他選項可以選擇。
接著選擇你的網站類別以及網站的服務。
決定網站的風格及配色。
確認網站的內容架構有哪些,像是關於我、作品集或是服務項目等等。
最後一步會讓你二選一生成的網站,這樣 AI 就生成完成囉~
Jimdo 在 AI 的生成過程中,問題的提問都是蠻好選擇的,就好像真的在問客戶問題一樣,而生成的結果我覺得是中規中矩。
而 Jimdo 也有提供免費方案可以使用。
10web
10web 能夠將非 WordPress 的網站運用 AI 技術搬到 WordPress 架構的平台,也可以將其他 WP 網站搬到 10web 來代管。
10web 的 AI 網站生成方式會搭配選擇題跟輸入描述來判斷你的需求,首先選擇你的網站類別。
接著會根據你輸入的描述把網站的內容架構列出來,接著就會自動開始生成囉~
左邊的清單每一項都打勾就表示 AI 生成完成囉~
網站生成結果如下,生成的視覺排版會一點交錯感,並且有 parallaxx 的動態效果,這我覺得是 AI 生成逐步進步的成果,因為之前的 AI 生成通常都是置式的區塊,看起來會很生硬,我相信會越來越進步。
也可以調整生成後的字型以及配色。
想進一步用頁面編輯器調整細節的話,就需要選擇付費方案了,有用過 WP 的朋友就會發現 10web 的頁面編輯器跟 elementor 很像。
10web 沒有提供免費方案,最便宜是 $10/月的 AI Starter 方案,大概就跟租一個 Cloudways 主機的價格差不多。
10web 是在你用 AI 生成網站後才會需要付費升級,接著才能進一步調整網站細節,想要體驗 10web 的 AI 生成功能還是可以試試看的~
Dorik
Dorik 是一個 No-Code 網站生成平台,提供多樣化功能以便快速建立網站。
它的 AI 生成功能很簡單,只要輸入對網站需求的描述即可,不需要選擇或填寫其他問題。
而且可以選擇要生成的網站語言,這邊我選擇繁體中文,接下來就等它生成囉~
雖然 Dorik AI 生成的步驟很簡單,但完成度倒是讓我蠻驚豔的,這次產出的結果還不錯。
Dorik 有免費方案可以使用,不過比較特別的是 Dorik 還有提供一次付費的買斷終身方案,$249 的買斷方案可以開無限個網站,但只能設定一個自訂網域。
CodeDesign.ai
CodeDesign 的 AI 網站生成功能有許多的語言可以選擇,其中還包含了繁體中文,不過為了確保生成結果是比較完整的,這邊我還是先用英文作為提示詞。
不知道要輸入甚麼提示詞的朋友,也可以點選下圖紅框的【 Try some of our examples 】,系統就會幫你產出一段描述囉。
接著等待一段 AI 生成的時間。
下圖就是 AI 幫我生成的網站,整體還不錯,如果覺得不滿意的話,也可以點下圖紅框的【 Regenerate Site 】重新生成一次。
重新生成一次後,感覺也蠻不錯的,以短短不到 3 分鐘的生成時間來說,這樣的架構已經很棒了。
CodeDesign 也是免費的 Basic 方案,且提供 3 個 free project 可使用,另外跟 Dorik 一樣也有終生買斷的一次付費方案 ( 開始流行這種模式了嗎? )。
CodeDesign 的終生買斷方案最低只要 NTD 3,143 台幣,可永久持有一個網站,其實蠻便宜的。
心得總結
其實還有很多的 AI 網站生成工具,例如 : Hocos、Pineapple Builder、Kleap、durable、b12.io 等等,但現階段試用後的生成結果沒有覺得很好,所以先不考慮。
目前覺得使用 AI 生成網站可以先當作是一種靈感來源,例如你在創建網站時不確定或是不知道需要哪些內容,像是關於品牌、服務項目、聯絡我等等,就可以請 AI 先生成看會產生哪些內容。
但以視覺的質感來說,現階段使用模板會比 AI 生成的結果好看許多。
AI 生成的品質還有點落差,要多測試幾次,我自已玩的過程中也是多生成幾次後,有時候就會產出不錯的結果。
不過 AI 的進步速度無法預估,或許半年後網站生成的結果會突飛猛進也說不定。
對 AI 網站生成有興趣的話可以訂閱我的電子報,有新資訊時我再跟你 update 囉~
或是追蹤我的 Threads,基本上想到甚麼都會分享在那邊。