生成式AI(AIGC)在網站開發上的應用

使用生成式AI(AIGC)好一陣子了,就用這篇來講一下AIGC如何輔助我的工作,主要是網站開發的部分,以我的個人網站紅色死神來當範例。

設計部分

設計部分用滿多的,AIGC 讓我這個以前有點設計經驗的人能夠透過工具快速地生出我要的內容,主要是使用 MidJourney,包含:

1. Logo

Logo 本來我是讓 AI 自由生,後來覺得給他參考圖後,可以更快生出我要的圖,所以我就找了一張原圖:

透過 AI 重新發想後變成這樣:

最後我再轉成向量圖後在繪圖軟體裡修改,成果就是這樣:

 

2. 背景圖

背景圖比較單純,就用我喜歡的科幻風加上我喜歡的紅配黑的顏色,就生出了許多圖來用。

 

3. 以圖生圖的素材

除了上面的背景圖都是完全靠 prompt 生成的外,也有些素材我是參考一些圖片生成的,比如我一直很喜歡零式系統的那個 3D 圓球形雷達,我就請 AI 參考並生出我想要的圖來:

原圖:

 

生成後:

 

4. 重複背景圖

用 AI 生出重複的背景圖也很方便,有些地方我就用 AI 生出一些背景素材來用,只不過這次我用的也都有用繪圖軟體改過顏色。

 

5. 頭像

用 AI 生個人頭像也很方便,在這個時代可以很快速的弄出一個屬於自己的 Avatar。

 

文案部分

文案部分大概就是 ChatGPT 了,我大致就是用來生成、翻譯跟改寫內容,在我的網站上比較特別的應該是有個角色介紹區塊,會做這個區塊是生了一些角色圖後,想說來弄個地方放,所以就又請 ChatGPT 幫我想角色名還有介紹那些的,就完成了這個頁面。

 

程式撰寫

程式撰寫大概就是裝了 GitHub Copilot 跟有遇到問題就問問 ChatGPT,讓開發效率好很多。

 

最後工商一下我有在 ETToday 上開了一門《用AI強化職場競爭力 ChatGPT、Midjourney從入門到精通》的課,有興趣的朋友可以參考看看。

 

課程推薦

HTML與SEO實戰應用—並以ChatGPT助力提升網站品質與流量

HTML與SEO實戰應用—並以ChatGPT助力提升網站品質與流量

本課程專為希望深入了解 HTML 並有效結合 SEO 策略的學員設計。我們將重點放在 HTML 的深度學習與應用上,同時穿插介紹如何透過搜索引擎優化提升網站能見度。透過即時互動式的直播教學,加上 ChatGPT 的輔助,您將學習到如何建立一個結構優良、美觀且符合 SEO 標準的網站。這不僅會提升網站的用戶體驗,還會大幅提高網站的搜索引擎排名,進而增加訪客流量和潛在客戶。
用AI強化職場競爭力 ChatGPT、Midjourney從入門到精通

用AI強化職場競爭力 ChatGPT、Midjourney從入門到精通

在快速變遷的職場中,提升競爭力成為關鍵。透過引領潮流的AI技術,ChatGPT和Midjourney將助您勇攀高峰。無論您是AI新手還是專家,這個課程將引導您從入門到精通,解密AI的奧秘,並學習如何運用於職場。
GitHub Copilot AI 程式碼編輯工具應用實務班

GitHub Copilot AI 程式碼編輯工具應用實務班

讓學員瞭解有效地使用該工具來加速開發流程、提高程式碼品質和生產力。課程重點放在以 JavaScript 程式語言為例,介紹 Copilot 的基本原理、使用方法和最佳實踐。

輸入折扣碼 TC1456JA 還可以額外獲得 NT$500 優惠喔。

ChatGPT X Clipchamp AI 生成影片、配音與字幕應用實戰班

ChatGPT X Clipchamp AI 生成影片、配音與字幕應用實戰班

掌握Clipchamp AI的操作技巧,靈活運用Clipchamp AI進行影片編輯和創作,實現創意表達和傳播目的。

輸入折扣碼 TC1451JAN 還可以額外獲得 NT$500 優惠喔。

如何串接多種數位工具資訊?Looker Studio 資料視覺化實戰班|GoogleAds x FB廣告 x GA流量數據

如何串接多種數位工具資訊?Looker Studio 資料視覺化實戰班|GoogleAds x FB廣告 x GA流量數據

Looker Studio除了可協助使用者監控網站流量、廣告成效、選擇匯入資源的管道之外,還可以將數據資料多平台整合、數據報表即時更新、數據範本可重複套用的效益,透過自動化系統,將數據全部匯入同一個報表平台,是企業不可或缺的重要工具。

輸入折扣碼 TC1270JIA 還可以額外獲得 NT$500 優惠喔。

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。