【AI 網頁製作工具懶人包】18個提升企劃、設計師工作效率的軟體

文章最後更新於 2024 年 5 月 13 日

AI 網頁製作

因應 AI 工具層出不窮,所以市場上常聽到一種說法,

“不懂 AI 不一定會把你淘汰,但懂得應用 AI 的人會把你取代”。

那在網頁設計的領域,有沒有甚麼 AI 工具是可以幫助企劃、設計師更有工作效率的呢?

經過我的一番研究,答案是 : 有的。

本篇『 AI 網頁製作工具懶人包 』就是我收集了 18 個在網頁設計的過程中,

能夠在不同環節提升產能的 AI 工具。

話不多說,直接切入主題吧~!

常見網頁設計流程分類

通常網頁設計專案的組成會有 :

  • 專案企劃 > 負責需求確認、資料彙整以及客戶溝通。
  • 視覺設計 > 負責專案風格定調,像是主視覺、字體、配色、素材 icon 等。
  • 前後端程式 > 前端程式通常指的是看的見畫面的部分,例如酷炫動態效果,後端就是看不見的部份,例如資料庫串接、API 串接等。

執行流程如下 :

專案企劃

網頁架構 Sitemap

根據客戶需求規劃網站的頁面及流程

專案企劃

網頁框架內容 Wireframe

根據 Sitemap 規劃頁面的內容,例如首頁可能會有輪播 Banner、關於公司、服務項目、價格方案、客戶見證、聯絡我們等等

視覺設計

視覺稿 Mockup

根據企劃提供的 Wireframe,設計就要製作畫面了

其中會用到的素材包括 : 字體、配色、照片修圖、3D 素材、icon & 向量素材

前端工程 ( 或視覺設計,看公司 )

網頁切版

要將 Mockup 切版成可以上線測試的 html 網頁

這部分就可以製作酷炫動態以及串接相關程式

以上流程會視公司規模而有所變動,但大致上是這些流程,所以接下來就是 AI 工具登場的時候囉 !

AI 網頁製作工具 – 網頁框架類

1. Relume :

relume
AI 網頁製作工具 Relume

Relume 是一個很強大的網頁設計 AI 工具,當初在使用時真的不自覺發出 ” 挖靠~ “的讚嘆聲。

Relume 有很多產品服務,但有兩個服務是以 AI 為主 :

  • AI Website builder > AI 生成網站架構
  • Relume Ipsum > AI 生成網頁內容

AI Website builder :

只要在下圖紅框中輸入你要製作的網站描述,AI 就會幫你製作好 Sitemap ( 我是輸入 gym website,基本上是越詳細越好 )。

relume AI Website builder
relume ai網站生成器

下圖就是 AI 幫我製作好的 Sitemap,可以延伸出其他頁面,像是 about、case study、contact 等。

relume AI Website builder
relume ai自動生成網頁

最近在玩的時候發現內容也可以產出繁體中文了 ( 目前是 Beta 版 )。

relume AI Website builder
relume ai網站生成器

而且你可以很快速地將 Sitemap 一鍵切換完成 Wireframe。

點擊下圖紅框的『 wireframe 』,AI 就會根據 Sitemap 產生 Wireframe;下圖就是基於我前面的 Sitemap 所產生的 Wireframe。

relume AI Website builder
relume ai網站生成器

對於專案企劃要產出 Sitemap / Wireframe 真的非常快速方便~

Relume Ipsum :

Relume ipsum 可以透過 AI 技術將你在 Figma 的視覺稿文案一次替換成你設定的提示內容。

也可以鎖定不要被替換的文字 ( 例 : 公司名稱 )。

Relume Ipsum

下方影片為官方 demo,Relume ipsum 是 figma 的外掛,免費試用可產生 2000 字。

2. Uizard :

Uizard
uizard AI 工具網站

當你有一個 idea 想要趕快做出最小可行性產品 ( Minimum Viable Product,簡稱MVP ) 進入市場測試的話,那麼 Uizard 就很適合你了。

Uizard 目前主要有 3 個使用 AI 建立 MVP 的場景 :

  • Autodesigner 1.5 > AI 生成 Prototype
  • Screenshot Scanner > AI 掃描畫面截圖變成可編輯畫面
  • Wireframe Scanner > AI 掃描手繪稿變成可編輯畫面

Autodesigner 1.5 :

Autodesigner 能夠將你的想法快速產出畫面及流程,只要在下圖輸入提示詞以及風格,不到幾分鐘 Prototype 就完成囉。

uizard Autodesigner 1.5
提示詞我用預設的”a booking app to rent vacation homes for parties”,也就是一個為聚會出租度假屋的預訂應用程式

下圖紅框就是 AI 產出的 APP 視覺畫面及流程,我覺得短時間能產出這樣很強拉~

uizard Autodesigner 1.5
預覽畫面連結 > 用手機看佳,因為我是創建 APP

下方為官方 42 秒的示範影片。

Screenshot Scanner :

Screenshot Scanner 指的是你可以把覺得不錯的網頁用 Printcscreen 截圖,然後丟到 uizard 裡面,它就會開始掃描並轉變成可編輯的元件畫面。

參考下方官方的影片,想像原本只是一張 jpg 圖片,掃描後變成可以在 figma 編輯的檔案的概念。

Wireframe Scanner :

Wireframe Scanner 我覺得就更厲害了,我們在發想創意時經常會在白紙上隨意畫流程架構。

而 Wireframe Scanner 可以把我們畫在紙上的 Wireframe 草稿轉變為可編輯的視覺稿。

透過手機掃描 Uizard 的 Qr Code 並上傳圖檔就可以開始掃描囉 ( 參考下方影片 ) ~

Uizard 的 AI 功能對於專案經理想做出一個 MVP 可以說是效率倍增阿 !

3. Visily :

visily ai
Visily ai網站推薦

Visily 在 AI 功能上跟 Uizard 蠻像的,不過 Visily 有一個我覺得蠻好用的功能,就是 AI 生成 Flowchart 流程圖。

目前 Visily 的 AI 功能如下 :

  • Text to Diagram AI > AI 生成 Flowchart 流程圖
  • Screenshot to Design > AI 掃描畫面截圖變成可編輯畫面
  • Sketch to Design > AI 掃描手繪稿變成可編輯畫面

Text to Diagram AI :

我覺得這功能對專案企劃很好用阿,只要跟 AI 說你想做甚麼功能的產品,AI 就會生成流程圖,也可以應用在電郵行銷,例如開信與沒開信分別的後續流程。

Visily Text to Diagram AI

Screenshot to Design :

跟 Uizard 一樣的功能,可以把螢幕截圖轉變成可編輯視覺稿。

Sketch to Design :

也是跟 Uizard 一樣的功能,可以把手繪稿轉變成可編輯視覺稿。

Visily Sketch to Design

Visily 之後也會推出跟 Uizard 一樣的 AI 生成 Prototype 功能,等推出後再來試用看看。

4. Creatie :

Creatie

Creatie 使用起來像是 Figma 或 Adobe XD 那樣的 UI 設計工具,但其實它加入了許多 AI 的功能,讓設計師在製作畫面時變得更方便。

Creatie 的 AI 功能有 :

  • AI image enhancer > 運用 AI 修圖片
  • Magicon, AI icon wand > AI 產出 3D icon
  • Creatie wizard > 框選範圍就會自動產出生成內容
  • Automatic style guide > 選取畫面上的設計後,AI 就可產出 Style Guide

AI image enhancer :

AI image enhancer 可以將圖片放大或填補空白區域,也可以去背或是變換圖片風格 ( 例如變成向量風格 )。

Creatie AI image enhancer

Magicon, AI icon wand :

Magicon, AI icon wand 可以生成 3D 的元件 icon。

Creatie Magicon, AI icon wand

Creatie wizard :

Creatie wizard 是一個蠻神奇的 AI 功能,只要在空白區域用這個功能隨意框選範圍,框框內就會生成符合範圍大小的內容 ( 如下圖 )。

Creatie wizard
Creatie wizard

Automatic style guide :

Automatic style guide 我覺得是一個很實用的功能,因為有時候要整理 Style Guide 時會蠻花時間的,尤其是專案越龐大,內容會更多。

所以可以將 Figma 的檔案匯入到 Creatie 之後,再用 Automatic style guide 自動生成 Guideline,生成方式可以參考下圖的作法。

Creatie  Automatic style guide
Creatie  Automatic style guide

對於設計流程來說,我覺得 Creatie wizard 跟 Automatic style guide 這兩個功能蠻不錯的,Creatie wizard 可以給予蠻多排版上的靈感,而且客戶總是要透過 2 選 1 才知道自己要甚麼,Creatie wizard 就能快速提供不同排版的樣式。

而 Automatic style guide 對於覺得要整理顏色、字體以及其他相關設定等很麻煩的人,這就是一個懶人的速成作法。

5. Locofy :

Locofy

Locofy 是一個能夠將 Figma、Adobe XD 的設計稿一鍵轉換為前端程式碼的 AI 工具。

記得我們一開始有提到要將 Mockup 切版成可以上線測試的 html 網頁,需要經過網頁切版的動作,而 Locofy 就是用 AI 做這件事。

Locofy

以下是我實際測試將 Figma 視覺轉換成程式碼的流程 :

1. 首先在 Figma 外掛搜尋『 Locofy 』。

Locofy

2. 轉換的細節設定,例如選擇 website / mobile app、要轉換的前端框架 ( html/css、React、 Vue 等 )。

Locofy

選擇網頁建立的類型,website 或 mobile app

Locofy

選擇要輸出的前端框架

Locofy

選擇 CSS 輸出的設定

Locofy

按下紅框按鈕開始轉換

Locofy

進度條顯示目前完成度

轉換完成後就可以看到下圖的畫面,檢查一下程式碼蠻乾淨的,而且還可以選擇要輸出的前端框架。

Locofy

對於人力吃緊的小團隊,可以提高切版的效率,讓 Locofy 做初步的轉換,檔案輸出後再交給專業的前端工程師做進一步調整。

Locofy

Locofy 目前還在 beta 測試的階段,所以可以免費使用,有興趣的朋友趕快玩玩看。

AI 網頁製作 – 配色類

6. khroma :

khroma

khroma 是一個透過 AI 分析學習,並產出數十種配色組合的工具。

首先你要先選擇 50 顏色,沒錯,就是 50 種,一開始覺得有點多,但選點蠻快的。

khroma

因為 khroma 表示夠多的顏色數量可以確保 AI 不會錯誤的認為你不喜歡自己選擇的顏色,種類越多,獲得的配色組合就越多!

選完後 AI 就會分析並生成配色結果,如下圖 :

文字與底色的配色 :

khroma 文字與底色的配色

漸層配色 :

khroma 漸層配色

調色盤配色 :

khroma 調色盤配色

khroma 可以免費使用,有興趣可以玩玩看囉 !

7. AI colors :

AI colors

AI colors 是一個輸入提示詞後,就會產出對應配色的 AI 工具 ( 如下圖 )。

AI colors

可以發現右邊的 UI 介面也會跟著 AI 產出的配色一起改變。

或是也可以點選左側邊欄的熱門顏色 ( 紅框 1 ),點擊後右邊 UI 介面一樣也會跟配色改變。

AI colors

8. Colormind :

Colormind

Colormind 是一個非常簡單無腦使用的 AI 工具,只要按下上圖的【 Generate 】,就會生成一組新配色。

你也可以點擊上方選單的【 Website Colors 】或【 Templates 】,來看看套用顏色後的畫面是甚麼感覺 ( 如下圖 )。

Colormind
Colormind

AI 網頁製作 – 字體類

9. Fontjoy :

Fontjoy

Fontjoy 是一個透過 AI 生成文字對比度的工具。

一般來說,主標、副標、內文使用不同字體可以增加閱讀的層次感,搭配大小以及字體粗細,也能讓讀者較好分辨閱讀的順序。

Fontjoy 使用方式很簡單,只要拖曳紅框的 bar,就會顯示文字的對比度,例如 high contrast 就是高對比,按下藍框的【Generate】就會產生結果,high contrast 會讓主副標以及內文的字體差異會比較大 ( 如下圖 )。

Fontjoy

下圖是低對比 very similar 的產生結果,可以看到主副標跟內文的字體都是相似的。

Fontjoy

Fontjoy 可以免費使用,但目前 AI 只支援產出英文字體。

AI 網頁製作 – 素材生成類

10. Luma AI :

Luma AI

Luma AI 是一款生成 3D 素材以及 3D 互動場景的工具。

Luma AI 的 AI 功能有 :

  • Text to 3D : 輸入文字生成 3D 素材
  • Interactive 3D Scense : 上傳檔案 ( .mov、.mp4、.zip ) 生成 3D 互動場景

Text to 3D :

輸入想要生成的英文描述,一次會產出 4 個 3D 物件。

Luma AI Text to 3D
Luma AI Text to 3D

點選你滿意的那個 3D 物件後,就會進到下圖的畫面,可以自由旋轉,也可以下載檔案 ( 可切換檔案格式 )。

Luma AI Text to 3D

Interactive 3D Scense :

要生成 3D 互動場景需要上傳影片檔,這部分我就沒有測試了,有興趣的朋友可以玩玩看。

Luma AI Interactive 3D Scense

Luma AI 有支援 APP 使用,所以用手機錄影場景再上傳會比較方便。

11. Tripo :

Tripo

Tripo 也是一個 AI 生成 3D 素材的工具,生成速度蠻快的,細緻度也不錯。

Tripo 有兩種生成 3D 素材的方式 :

  • 文字生成素材
  • 上傳圖片生成素材

文字生成素材 :

只要在下圖的紅框輸入你想生成的內容,然後按【 Create 】,就會開始生成囉。

Tripo

我是輸入 hamburger,一次會生成 4 個,左邊 3 個都很不錯~

Tripo

點擊你喜歡的那個素材,就可以單獨檢視、選轉那個素材,然後下載囉。

Tripo

上傳圖片生成素材 :

點擊下圖紅框的 Icon 即可上傳圖片,我測試的圖片是一張向量小狗素材。

Tripo

使用這張圖測試生成 3D 素材。

Tripo

下圖生成的結果我覺得還蠻像的,再調整一些細節應該就不錯了,但整體生成效果我覺得很棒~

Tripo

Tripo 有免費的版本可以使用,主要是用扣點的方式生成素材,每個月有 600 點可使用。

12. Recraft :

Recraft

Recraft 是一個能夠生成各種不同風格素材的 AI 工具,例如插畫風格、Pixel 點陣風格、水墨風格以及向量 icon 風格等。

Recraft 的 AI 功能有 :

  • Raster image : 可生成插畫、3D、手繪、Pixel 等素材
  • Vector image : 可生成向量、卡通、線框、塗鴉等素材

Raster image :

點選下圖紅框的【 Raster image 】。

Recraft Raster image

接著可以選擇你想要生成的素材風格。

Recraft Raster image

下圖是我測試生成漢堡的插畫風格,一次會生成 2 種素材 ( 紅框處 ),可以挑選你滿意的下載,藍框可以調整素材生成的細節,例如要更細緻或是更簡潔之類。

Recraft Raster image

Raster image 生成素材的下載格式會以 JPG、PNG 為主。

Vector image :

點選下圖紅框的【 Vector image 】。

Recraft Vector image

接著可以選擇你想要生成的素材風格。

Recraft Vector image

下圖是我測試生成漢堡的向量風格,很適合拿來做素材使用。

Recraft Vector image

Vector image 生成素材的下載格式會以 JPG、PNG、SVG、Lottie 為主。

Recraft 是我很喜歡用的 AI 工具,有時候找不到喜歡的 icon 時,就會直接在這邊生成素材。

13. Generated Photos :

Generated Photos

Generated Photos 是一個主打產出人像的 AI 工具,有非常多的細節可以設定,例如 : 國籍、性別、頭髮、身材以及姿勢等。

Generated Photos 的使用案例包括人工智慧培訓、匿名生物識別、創建 UI 設計、抓捕網路犯罪分子、創建藝術裝置。

在生成人像時,左側邊欄有非常多的細節可以設定 ( 紅框 ),設定好後按下【 Generate variation 】( 黃框 )。

Generated Photos

調整一些細節後,生成了下圖的亞洲女性,但臉有點怪怪。

Generated Photos

可以替換不同的姿勢來玩玩看。

Generated Photos

Generated Photos 可以免費生成及下載素材,但下載圖會有浮水印。

AI 網頁製作 – 影像動態生成類

14. Fable Prism :

Fable 是一個製作動態的工具,有點像 Adobe Animate,而 Fable Prism 則是利用 AI 技術把你的動態素材生成不同的風格。

Fable Prism

Fable Prism 官方的動態影片

Fable Prism

Fable 在使用 AI 生成不同風格的動態素材時會蠻花時間的,我想跟電腦效能也有關,不過因為 Fable 可以匯出 lottie 動態素材,很適合應用在網頁設計裡。

15. Kaiber :

Kaiber

Kaiber 是一款 Ai 生成動態影像的工具,可以生成很有創意的視覺影片呈現效果。

Kaiber 的 AI 功能有 :

  • Flipbook : 輸入提示詞生成 AI 動態逐格影片
  • Motion : 輸入提示詞生成 AI 動態 Motion 影片
  • Transform : 上傳自己的影片,AI 轉換風格
Kaiber

下圖為 AI 生成的影像範例。

Kaiber
參考頁面網址

AI 網頁製作 – 相片類

16. Vance Ai :

Vance Ai

影像素材在網頁設計裡是很常會使用的元素,而 Vance Ai 就提供了許多 AI 的修圖技術。

Vance Ai 的 AI 功能有 :

  • AI 圖像放大器 : 提高圖片解析度
  • AI 圖片銳化 : 讓圖片看起來看清晰
  • AI 圖片降躁 : 去除相片躁點
  • AI 背景清除器 : 去背功能
  • AI 照片修復 : 修復古早的照片
  • AI 圖片卡通化 : 套用不同的濾鏡變換圖片風格
Vance Ai
Vance Ai

以下 3 個熱門功能是比較適合有在經營電商的人 :

Vance Ai

Vance Ai 有繁體中文的介面,主要是用扣點數的方式來做為使用 AI 功能的費用。

AI 網頁製作 – 其他類

17. Valla Ai:

Valla Ai

Valla Ai 是一款可以將程式碼邏輯流程視覺化的 AI 工具,可以工程師再跟非程式人員解釋邏輯判斷時更好理解。

Valla Ai

可以透過視覺流程圖讓工程師更輕鬆找到自己寫的 Code 在哪。

Valla Ai

程式碼視覺化後對於企劃、專案經理都能比較好理解工程的判斷邏輯,也有助於彼此的溝通。

Valla Ai

Valla Ai 目前還沒正式推出,可以先申請加入等待名單。

18. Designs Ai:

Designs Ai

Designs Ai 就像是 AI 助理一樣,擁有非常多的 AI 工具,像是 AI 生成 logo、圖片、影片、AI 轉換人聲語音、AI 寫手等功能,很適合小團隊使用。

Designs Ai 的 AI 功能有 :

  • FACE SWAPPER
  • LOGO MAKER
  • IMAGE MAKER
  • VIDEO MAKER
  • SPEECH MAKER
  • DESIGN MAKER
  • AI WRITER
Designs Ai
Designs Ai
Designs Ai
Designs Ai

AI 網頁製作 – 心得總結

使用 AI 工具的目的就是讓我們的工作效率提高,簡單麻煩的事情交給 AI 做,解放我們更多的時間,去做更重要的事。

開頭有提到一個專案的組成,至少會有企劃、設計以及工程,所以把前面分享的 AI 工具做一下角色的適用推薦。

  • 專案企劃 > Relume、Uizard、Visily
  • 視覺設計 > Relume、Locofy、khroma、Luma AI、Tripo、Recraft
  • 前後端程式 > Locofy、Valla Ai

有提到的 AI 工具就是我覺得很值得使用的,像是 Relume 以及 Uizard,功能很強大~

喜歡產生不同素材的設計就一定試試 Tripo 跟 Recraft。

其他沒提到就是有多的時間可以玩玩看囉 !

希望本篇文章能幫助你找到適合且能提升工作效率的 AI 網頁製作工具。

You may also like...

發佈留言

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