【AI 網頁製作工具懶人包】18個提升企劃、設計師工作效率的軟體
文章最後更新於 2024 年 10 月 7 日
因應 AI 工具層出不窮,所以市場上常聽到一種說法,
“不懂 AI 不一定會把你淘汰,但懂得應用 AI 的人會把你取代”。
那在網頁設計的領域,有沒有甚麼 AI 工具是可以幫助企劃、設計師更有工作效率的呢?
經過我的一番研究,答案是 : 有的。
本篇『 AI 網頁製作工具懶人包 』就是我收集了 18 個在網頁設計的過程中,
能夠在不同環節提升產能的 AI 工具。
話不多說,直接切入主題吧~!
常見網頁設計流程分類
通常網頁設計專案的組成會有 :
- 專案企劃 > 負責需求確認、資料彙整以及客戶溝通。
- 視覺設計 > 負責專案風格定調,像是主視覺、字體、配色、素材 icon 等。
- 前後端程式 > 前端程式通常指的是看的見畫面的部分,例如酷炫動態效果,後端就是看不見的部份,例如資料庫串接、API 串接等。
執行流程如下 :
以上流程會視公司規模而有所變動,但大致上是這些流程,所以接下來就是 AI 工具登場的時候囉 !
AI 網頁製作工具 – 網頁框架類
1. Relume :
Relume 是一個很強大的網頁設計 AI 工具,當初在使用時真的不自覺發出 ” 挖靠~ “的讚嘆聲。
Relume 有很多產品服務,但有兩個服務是以 AI 為主 :
- AI Website builder > AI 生成網站架構
- Relume Ipsum > AI 生成網頁內容
AI Website builder :
只要在下圖紅框中輸入你要製作的網站描述,AI 就會幫你製作好 Sitemap ( 我是輸入 gym website,基本上是越詳細越好 )。
下圖就是 AI 幫我製作好的 Sitemap,可以延伸出其他頁面,像是 about、case study、contact 等。
最近在玩的時候發現內容也可以產出繁體中文了 ( 目前是 Beta 版 )。
而且你可以很快速地將 Sitemap 一鍵切換完成 Wireframe。
點擊下圖紅框的『 wireframe 』,AI 就會根據 Sitemap 產生 Wireframe;下圖就是基於我前面的 Sitemap 所產生的 Wireframe。
對於專案企劃要產出 Sitemap / Wireframe 真的非常快速方便~
Relume Ipsum :
Relume ipsum 可以透過 AI 技術將你在 Figma 的視覺稿文案一次替換成你設定的提示內容。
也可以鎖定不要被替換的文字 ( 例 : 公司名稱 )。
下方影片為官方 demo,Relume ipsum 是 figma 的外掛,免費試用可產生 2000 字。
2. Uizard :
當你有一個 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 就完成囉。
下圖紅框就是 AI 產出的 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 功能上跟 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 就會生成流程圖,也可以應用在電郵行銷,例如開信與沒開信分別的後續流程。
Screenshot to Design :
跟 Uizard 一樣的功能,可以把螢幕截圖轉變成可編輯視覺稿。
Sketch to Design :
也是跟 Uizard 一樣的功能,可以把手繪稿轉變成可編輯視覺稿。
Visily 之後也會推出跟 Uizard 一樣的 AI 生成 Prototype 功能,等推出後再來試用看看。
4. 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 可以將圖片放大或填補空白區域,也可以去背或是變換圖片風格 ( 例如變成向量風格 )。
Magicon, AI icon wand :
Magicon, AI icon wand 可以生成 3D 的元件 icon。
Creatie wizard :
Creatie wizard 是一個蠻神奇的 AI 功能,只要在空白區域用這個功能隨意框選範圍,框框內就會生成符合範圍大小的內容 ( 如下圖 )。
Automatic style guide :
Automatic style guide 我覺得是一個很實用的功能,因為有時候要整理 Style Guide 時會蠻花時間的,尤其是專案越龐大,內容會更多。
所以可以將 Figma 的檔案匯入到 Creatie 之後,再用 Automatic style guide 自動生成 Guideline,生成方式可以參考下圖的作法。
對於設計流程來說,我覺得 Creatie wizard 跟 Automatic style guide 這兩個功能蠻不錯的,Creatie wizard 可以給予蠻多排版上的靈感,而且客戶總是要透過 2 選 1 才知道自己要甚麼,Creatie wizard 就能快速提供不同排版的樣式。
而 Automatic style guide 對於覺得要整理顏色、字體以及其他相關設定等很麻煩的人,這就是一個懶人的速成作法。
5. Locofy :
Locofy 是一個能夠將 Figma、Adobe XD 的設計稿一鍵轉換為前端程式碼的 AI 工具。
記得我們一開始有提到要將 Mockup 切版成可以上線測試的 html 網頁,需要經過網頁切版的動作,而 Locofy 就是用 AI 做這件事。
以下是我實際測試將 Figma 視覺轉換成程式碼的流程 :
1. 首先在 Figma 外掛搜尋『 Locofy 』。
2. 轉換的細節設定,例如選擇 website / mobile app、要轉換的前端框架 ( html/css、React、 Vue 等 )。
選擇網頁建立的類型,website 或 mobile app
選擇要輸出的前端框架
選擇 CSS 輸出的設定
按下紅框按鈕開始轉換
進度條顯示目前完成度
轉換完成後就可以看到下圖的畫面,檢查一下程式碼蠻乾淨的,而且還可以選擇要輸出的前端框架。
對於人力吃緊的小團隊,可以提高切版的效率,讓 Locofy 做初步的轉換,檔案輸出後再交給專業的前端工程師做進一步調整。
Locofy 目前還在 beta 測試的階段,所以可以免費使用,有興趣的朋友趕快玩玩看。
AI 網頁製作 – 配色類
6. khroma :
khroma 是一個透過 AI 分析學習,並產出數十種配色組合的工具。
首先你要先選擇 50 顏色,沒錯,就是 50 種,一開始覺得有點多,但選點蠻快的。
因為 khroma 表示夠多的顏色數量可以確保 AI 不會錯誤的認為你不喜歡自己選擇的顏色,種類越多,獲得的配色組合就越多!
選完後 AI 就會分析並生成配色結果,如下圖 :
文字與底色的配色 :
漸層配色 :
調色盤配色 :
khroma 可以免費使用,有興趣可以玩玩看囉 !
7. AI colors :
AI colors 是一個輸入提示詞後,就會產出對應配色的 AI 工具 ( 如下圖 )。
可以發現右邊的 UI 介面也會跟著 AI 產出的配色一起改變。
或是也可以點選左側邊欄的熱門顏色 ( 紅框 1 ),點擊後右邊 UI 介面一樣也會跟配色改變。
8. Colormind :
Colormind 是一個非常簡單無腦使用的 AI 工具,只要按下上圖的【 Generate 】,就會生成一組新配色。
你也可以點擊上方選單的【 Website Colors 】或【 Templates 】,來看看套用顏色後的畫面是甚麼感覺 ( 如下圖 )。
AI 網頁製作 – 字體類
9. Fontjoy :
Fontjoy 是一個透過 AI 生成文字對比度的工具。
一般來說,主標、副標、內文使用不同字體可以增加閱讀的層次感,搭配大小以及字體粗細,也能讓讀者較好分辨閱讀的順序。
Fontjoy 使用方式很簡單,只要拖曳紅框的 bar,就會顯示文字的對比度,例如 high contrast 就是高對比,按下藍框的【Generate】就會產生結果,high contrast 會讓主副標以及內文的字體差異會比較大 ( 如下圖 )。
下圖是低對比 very similar 的產生結果,可以看到主副標跟內文的字體都是相似的。
Fontjoy 可以免費使用,但目前 AI 只支援產出英文字體。
AI 網頁製作 – 素材生成類
10. 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 物件。
點選你滿意的那個 3D 物件後,就會進到下圖的畫面,可以自由旋轉,也可以下載檔案 ( 可切換檔案格式 )。
Interactive 3D Scense :
要生成 3D 互動場景需要上傳影片檔,這部分我就沒有測試了,有興趣的朋友可以玩玩看。
Luma AI 有支援 APP 使用,所以用手機錄影場景再上傳會比較方便。
11. Tripo :
Tripo 也是一個 AI 生成 3D 素材的工具,生成速度蠻快的,細緻度也不錯。
Tripo 有兩種生成 3D 素材的方式 :
- 文字生成素材
- 上傳圖片生成素材
文字生成素材 :
只要在下圖的紅框輸入你想生成的內容,然後按【 Create 】,就會開始生成囉。
我是輸入 hamburger,一次會生成 4 個,左邊 3 個都很不錯~
點擊你喜歡的那個素材,就可以單獨檢視、選轉那個素材,然後下載囉。
上傳圖片生成素材 :
點擊下圖紅框的 Icon 即可上傳圖片,我測試的圖片是一張向量小狗素材。
使用這張圖測試生成 3D 素材。
下圖生成的結果我覺得還蠻像的,再調整一些細節應該就不錯了,但整體生成效果我覺得很棒~
Tripo 有免費的版本可以使用,主要是用扣點的方式生成素材,每個月有 600 點可使用。
12. Recraft :
Recraft 是一個能夠生成各種不同風格素材的 AI 工具,例如插畫風格、Pixel 點陣風格、水墨風格以及向量 icon 風格等。
Recraft 的 AI 功能有 :
- Raster image : 可生成插畫、3D、手繪、Pixel 等素材
- Vector image : 可生成向量、卡通、線框、塗鴉等素材
Raster image :
點選下圖紅框的【 Raster image 】。
接著可以選擇你想要生成的素材風格。
下圖是我測試生成漢堡的插畫風格,一次會生成 2 種素材 ( 紅框處 ),可以挑選你滿意的下載,藍框可以調整素材生成的細節,例如要更細緻或是更簡潔之類。
Raster image 生成素材的下載格式會以 JPG、PNG 為主。
Vector image :
點選下圖紅框的【 Vector image 】。
接著可以選擇你想要生成的素材風格。
下圖是我測試生成漢堡的向量風格,很適合拿來做素材使用。
Vector image 生成素材的下載格式會以 JPG、PNG、SVG、Lottie 為主。
Recraft 是我很喜歡用的 AI 工具,有時候找不到喜歡的 icon 時,就會直接在這邊生成素材。
13. Generated Photos :
Generated Photos 是一個主打產出人像的 AI 工具,有非常多的細節可以設定,例如 : 國籍、性別、頭髮、身材以及姿勢等。
Generated Photos 的使用案例包括人工智慧培訓、匿名生物識別、創建 UI 設計、抓捕網路犯罪分子、創建藝術裝置。
在生成人像時,左側邊欄有非常多的細節可以設定 ( 紅框 ),設定好後按下【 Generate variation 】( 黃框 )。
調整一些細節後,生成了下圖的亞洲女性,但臉有點怪怪。
可以替換不同的姿勢來玩玩看。
Generated Photos 可以免費生成及下載素材,但下載圖會有浮水印。
AI 網頁製作 – 影像動態生成類
14. Fable Prism :
Fable 是一個製作動態的工具,有點像 Adobe Animate,而 Fable Prism 則是利用 AI 技術把你的動態素材生成不同的風格。
Fable Prism 官方的動態影片
Fable 在使用 AI 生成不同風格的動態素材時會蠻花時間的,我想跟電腦效能也有關,不過因為 Fable 可以匯出 lottie 動態素材,很適合應用在網頁設計裡。
15. Kaiber :
Kaiber 是一款 Ai 生成動態影像的工具,可以生成很有創意的視覺影片呈現效果。
Kaiber 的 AI 功能有 :
- Flipbook : 輸入提示詞生成 AI 動態逐格影片
- Motion : 輸入提示詞生成 AI 動態 Motion 影片
- Transform : 上傳自己的影片,AI 轉換風格
下圖為 AI 生成的影像範例。
AI 網頁製作 – 相片類
16. Vance Ai :
影像素材在網頁設計裡是很常會使用的元素,而 Vance Ai 就提供了許多 AI 的修圖技術。
Vance Ai 的 AI 功能有 :
- AI 圖像放大器 : 提高圖片解析度
- AI 圖片銳化 : 讓圖片看起來看清晰
- AI 圖片降躁 : 去除相片躁點
- AI 背景清除器 : 去背功能
- AI 照片修復 : 修復古早的照片
- AI 圖片卡通化 : 套用不同的濾鏡變換圖片風格
以下 3 個熱門功能是比較適合有在經營電商的人 :
Vance Ai 有繁體中文的介面,主要是用扣點數的方式來做為使用 AI 功能的費用。
AI 網頁製作 – 其他類
17. Valla Ai:
Valla Ai 是一款可以將程式碼邏輯流程視覺化的 AI 工具,可以工程師再跟非程式人員解釋邏輯判斷時更好理解。
可以透過視覺流程圖讓工程師更輕鬆找到自己寫的 Code 在哪。
程式碼視覺化後對於企劃、專案經理都能比較好理解工程的判斷邏輯,也有助於彼此的溝通。
Valla Ai 目前還沒正式推出,可以先申請加入等待名單。
18. 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
AI 網頁製作 – 心得總結
使用 AI 工具的目的就是讓我們的工作效率提高,簡單麻煩的事情交給 AI 做,解放我們更多的時間,去做更重要的事。
開頭有提到一個專案的組成,至少會有企劃、設計以及工程,所以把前面分享的 AI 工具做一下角色的適用推薦。
- 專案企劃 > Relume、Uizard、Visily
- 視覺設計 > Relume、Locofy、khroma、Luma AI、Tripo、Recraft
- 前後端程式 > Locofy、Valla Ai
有提到的 AI 工具就是我覺得很值得使用的,像是 Relume 以及 Uizard,功能很強大~
喜歡產生不同素材的設計就一定試試 Tripo 跟 Recraft。
其他沒提到就是有多的時間可以玩玩看囉 !
希望本篇文章能幫助你找到適合且能提升工作效率的 AI 網頁製作工具。