【AI 網站生成平台推薦】6 個利用 AI 輕鬆架站的網頁工具

文章最後更新於 2024 年 6 月 14 日

ai 網站生成

前陣子 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 AI

Framer 目前是我僅次於 Webflow 第二喜歡的架站平台,熟悉 Figma 操作的設計師對於 Framer 真的可以無痛上手,介面操作都很像,排版完成等於網頁完成的設計很棒。

首先按照下圖紅框的流程就可以找到 Framer AI 生成的功能。

Framer AI

Framer AI 網站生成的方式需要輸入一段描述,欄位內也有建議的提示內容,我是請 Chat GPT 幫我生成,主要是製作攝影師網站。

Framer AI

不知道要輸入甚麼的朋友,可以用我的提示詞玩玩看囉~

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 AI 生成結果

Framer 的操作我覺得算是蠻好上手的,元件的調整細項都在右側欄,它的排版邏輯是 Auto layout 的概念,所以很適合擅長 FIgma 的設計師玩玩看。

Framer AI 生成結果

Framer 基本是可以免費使用的,付費版就能自訂網域、創建更多頁面、提高每月造訪人數以及使用 CMS 功能等等。

Framer 價格方案

Wix AI

Wix AI

Wix AI 在提問問題的過程中讓我蠻驚豔的,有種真的像在跟窗口溝通的感覺,一方面是因為它可以用中文溝通,另一方面則是因為它的回覆不是制式的,測試幾次發現回答都會有點不同。

Wix AI 的生成方式是用聊天的方式回答 AI 問題,它會根據你的回答生成網站,可以用中文回覆,這邊我是用英文來做測試。

Wix AI

它的問答包含品牌名稱、對於品牌業務的描述、品牌針對的客戶群以及網站的目的為何等等。

Wix AI
Wix AI
Wix AI

生成完成後,它會產出一段網站的簡介,就好像窗口要交件時在跟你解說網站的功能有哪些一樣,AI 網站生成的過程感受蠻不錯的。

Wix AI

下圖就是我重新生成後的視覺,覺得滿意的話就可以選擇此設計,進一步到頁面編輯器做調整囉~

Wix AI

網站生成後連動態呈現方式也會一併完成,這點蠻不錯的~

Wix AI

Wix 也是可以免費使用的,只是會有浮水印,且只能用 Wix 的子網域做為網站網址,想要移除或自訂網域的話就可以考慮付費升級囉。

Wix 價格方案

Jimdo

Jimdo

Jimdo 的 AI 生成方式也是透過問問題的方式做引導,就像在填問卷一樣,問題包含網站目的、網站類別、網站的主要服務、網站風格以及配色等等。

Jimdo AI生成流程

這題就是在問你的網站是個人網站還是有商業目的的網站,也有其他選項可以選擇。

Jimdo AI生成流程

接著選擇你的網站類別以及網站的服務。

Jimdo AI生成流程
Jimdo AI生成流程

決定網站的風格及配色。

Jimdo AI生成流程

確認網站的內容架構有哪些,像是關於我、作品集或是服務項目等等。

Jimdo AI生成流程

最後一步會讓你二選一生成的網站,這樣 AI 就生成完成囉~

Jimdo AI生成流程
Jimdo AI生成流程

Jimdo 在 AI 的生成過程中,問題的提問都是蠻好選擇的,就好像真的在問客戶問題一樣,而生成的結果我覺得是中規中矩。

而 Jimdo 也有提供免費方案可以使用。

Jimdo 價格方案

10web

10web

10web 能夠將非 WordPress 的網站運用 AI 技術搬到 WordPress 架構的平台,也可以將其他 WP 網站搬到 10web 來代管。

10web AI生成流程

10web 的 AI 網站生成方式會搭配選擇題跟輸入描述來判斷你的需求,首先選擇你的網站類別。

10web AI生成流程
10web AI生成流程

接著會根據你輸入的描述把網站的內容架構列出來,接著就會自動開始生成囉~

10web AI生成流程

左邊的清單每一項都打勾就表示 AI 生成完成囉~

10web AI生成流程

網站生成結果如下,生成的視覺排版會一點交錯感,並且有 parallaxx 的動態效果,這我覺得是 AI 生成逐步進步的成果,因為之前的 AI 生成通常都是置式的區塊,看起來會很生硬,我相信會越來越進步。

10web AI生成流程

也可以調整生成後的字型以及配色。

10web AI生成流程

想進一步用頁面編輯器調整細節的話,就需要選擇付費方案了,有用過 WP 的朋友就會發現 10web 的頁面編輯器跟 elementor 很像。

10web AI生成流程

10web 沒有提供免費方案,最便宜是 $10/月的 AI Starter 方案,大概就跟租一個 Cloudways 主機的價格差不多。

10web 價格方案

10web 是在你用 AI 生成網站後才會需要付費升級,接著才能進一步調整網站細節,想要體驗 10web 的 AI 生成功能還是可以試試看的~

Dorik

Dorik

Dorik 是一個 No-Code 網站生成平台,提供多樣化功能以便快速建立網站。

它的 AI 生成功能很簡單,只要輸入對網站需求的描述即可,不需要選擇或填寫其他問題。

Dorik AI生成流程

而且可以選擇要生成的網站語言,這邊我選擇繁體中文,接下來就等它生成囉~

Dorik AI生成流程

雖然 Dorik AI 生成的步驟很簡單,但完成度倒是讓我蠻驚豔的,這次產出的結果還不錯。

Dorik AI生成流程
Dorik AI生成流程

Dorik 有免費方案可以使用,不過比較特別的是 Dorik 還有提供一次付費的買斷終身方案,$249 的買斷方案可以開無限個網站,但只能設定一個自訂網域。

Dorik 價格方案
Dorik 價格方案

CodeDesign.ai

CodeDesign.ai

CodeDesign 的 AI 網站生成功能有許多的語言可以選擇,其中還包含了繁體中文,不過為了確保生成結果是比較完整的,這邊我還是先用英文作為提示詞。

不知道要輸入甚麼提示詞的朋友,也可以點選下圖紅框的【 Try some of our examples 】,系統就會幫你產出一段描述囉。

CodeDesign.ai 生成流程

接著等待一段 AI 生成的時間。

CodeDesign.ai 生成流程

下圖就是 AI 幫我生成的網站,整體還不錯,如果覺得不滿意的話,也可以點下圖紅框的【 Regenerate Site 】重新生成一次。

CodeDesign.ai 生成流程

重新生成一次後,感覺也蠻不錯的,以短短不到 3 分鐘的生成時間來說,這樣的架構已經很棒了。

CodeDesign.ai 生成流程

CodeDesign 也是免費的 Basic 方案,且提供 3 個 free project 可使用,另外跟 Dorik 一樣也有終生買斷的一次付費方案 ( 開始流行這種模式了嗎? )。

CodeDesign.ai

CodeDesign 的終生買斷方案最低只要 NTD 3,143 台幣,可永久持有一個網站,其實蠻便宜的。

CodeDesign.ai 生成流程 價格方案

心得總結

其實還有很多的 AI 網站生成工具,例如 : Hocos、Pineapple Builder、Kleap、durable、b12.io 等等,但現階段試用後的生成結果沒有覺得很好,所以先不考慮。

目前覺得使用 AI 生成網站可以先當作是一種靈感來源,例如你在創建網站時不確定或是不知道需要哪些內容,像是關於品牌、服務項目、聯絡我等等,就可以請 AI 先生成看會產生哪些內容。

但以視覺的質感來說,現階段使用模板會比 AI 生成的結果好看許多。

AI 生成的品質還有點落差,要多測試幾次,我自已玩的過程中也是多生成幾次後,有時候就會產出不錯的結果。

不過 AI 的進步速度無法預估,或許半年後網站生成的結果會突飛猛進也說不定。

對 AI 網站生成有興趣的話可以訂閱我的電子報,有新資訊時我再跟你 update 囉~

或是追蹤我的 Threads,基本上想到甚麼都會分享在那邊。

You may also like...

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *