【Day 3】中文系搞數位內容？

昨天有跟大家說明有關學生用 Vibe Coding 設計個人網頁、個人網站的需求，以及設計時的各種眉角。
好像也有稍微提及到我自己本身也是一位中文系學生……

中文系學生的兩種路徑：從傳統學術到文學創作

在中國文學的領域當中，特別是在學生的圈子裡面，我們大致可以找出兩種特質的人：

1. 學術研究型：想要深入鑽研傳統中文與古典學術研究。
2. 文學創作型：想走文學創作這條路，投入小說、散文等文本寫作。

雖然創作這件事情完全沒有不好的感覺，特別是我自己平時也熱衷於小說跟散文創作；但在創作的過程中，我發現了一個非常有趣且值得聚焦的切入點：

「我們該如何拓展文本以及文學的價值？」

在智慧財產權（IP）及相關商業模式的思考層面，我們甚至能夠進一步思考：一個文本如何成為一個 IP？
從而讓這個 IP 被有效應用在劇本、遊戲、展覽設計等多元領域中，而並不只是如同傳統思維那樣，單純侷限在「一本書籍」所帶來的知識產權與商業價值。

跨媒介的結合：文科背景的價值延伸

在自己四年的大學生活當中，我也深刻體會到：文科的專業訓練及知識背景，其實都能夠被拓展其原本的價值。

透過不同的媒介以及這系列文章所強調的 Vibe Coding，知識與跨媒介的結合往往能夠帶來意想不到的商業價值；甚至對於創作者當事人來說，也是一件極為有趣的事情。

相對之下，如果沒有相關人文專業背景，一位擁有純資訊背景的人要想做出涵蓋深厚文科內容的軟體或數位產品時，相應地也需要再次深造相關領域的知識，才能確保軟體內容或最終產出的數位內容符合大眾對這類型題材的要求與期待。

AIGC 與 Vibe Coding：彌補創作者的跨媒介短板

好吧，回歸正題！那麼這次 Vibe Coding 究竟要聊些什麼？

剛剛有提到我本身喜歡創作小說與散文，也透露了關於「文本如何拓展成各類新媒體專案」的想法。然而，新媒體與數位內容的創作，經常會涉及到其他媒介的專業技能，或者是編寫程式碼的能力門檻。

在這些環節當中，AIGC（生成式 AI）領域中的各類生成技術，正好能夠彌補純文字創作者的能力短板：

• AI 圖像生成：把文本情境轉化為一張精美的 AI 插畫。
• AI 音訊生成：把文本氛圍化作一首專屬的 AI 歌曲或背景配樂。
• AI 影像生成：將故事大綱渲染為一段氛圍十足的 AI 概念影片。
• AI 程式碼生成：透過 Vibe Coding 快速建構出能夠承載上述內容的互動網頁。

這讓單純懂得編寫文本的人，能夠快速讓自己的文字拓展出全新領域的內容價值！

創作者的糾結與專案管理思維

當然，這個議題的背後依然會涉及到創作者對於「是否尊重他人努力學習之技藝」的探討。畢竟文學創作者同樣面臨著「AI 生成小說」的衝擊；許多創作者在面對跨媒介創作時，因為自身非文本領域的短板而選擇藉由 AI 輔助生成——這是一種方法，也是當前不可忽視的一種現象。

但從商業與專案管理的角度來看：

• 成本與效率考量：在最低的時間與金錢成本下，創作者能夠快速藉由 AI 技術將原創文本擴張為包含畫面、影片、聲音的龐大內容專案。
• 專案管理者視角：基於手邊現有資源，創作者可以將特定關鍵環節外包給專業真人團隊，某些輔助內容則交由 AI 生成。創作者自身則充當專案的監督者、決策者與整合者，透過跨媒介整合完成整輪的內容製作。

實踐案例一：奇幻魔法陣與動態音樂互動

這次嘗試的起點，最初也只是想透過 Vibe Coding 實現一個有趣的互動體驗：根據畫面中內容的複雜程度，播放從簡單到雄偉的奇幻音樂。

▲ 圖 1：畫布上繪製的魔法陣越複雜，背景奇幻音樂就越發雄偉

使用者在網頁畫布上繪製魔法陣，當魔法陣的結構與線條變得越來越複雜時，背景音樂就會隨之動態演變，呈現出更加雄偉奇幻的交響氛圍。

如果你是一位熱愛寫奇幻小說的創作者，這樣子的互動體驗便能極大程度延展你小說的世界觀設定；甚至能將這套互動模組嵌入在線上網路小說中，讓讀者在閱讀小說情節的同時，也能同步在視聽層面親身體驗小說世界裡的魔法共鳴！

實踐案例二：〈無日浪漫〉沉浸式小說打字音樂工作站

沿用同樣的邏輯，我也為自己的散文小說製作了專屬的互動體驗網站：

▲ 圖 2：結合小說文本、Suno AI 雙軌音樂與 Lofi 影片的〈無日浪漫〉互動網頁

這個專案的設計整體融合了我對 AIGC 內容的理解：結合 AI 音樂、AI 影片、Vibe Coding 與原創小說文本，打造出一個完整的互動式網頁工作站。

核心互動機制：

1. 沉浸式鍵盤敲擊：使用者在網頁上隨意敲擊鍵盤（不論按什麼按鍵），畫面上就會逐字流暢地輸入我當初創作的小說內容，彷彿親身體驗作者當初是如何一字一句創作出這篇作品。
2. 雙軌動態音樂甦醒：背景音樂是透過 Suno AI 創作並分拆為「伴奏軌」與「主唱人聲軌」。隨著你敲擊鍵盤完成小說的進度增加，你會逐漸聽見主唱歌聲由淡入深、緩慢甦醒並融入音樂當中。
3. 完稿手稿珍藏與 Lo-fi 氛圍：當整篇小說輸入完畢後，系統會自動將手稿轉為 PDF 文件供讀者下載珍藏；同時畫面會切換為與故事氛圍契合的 Lo-fi 播放器視角，伴隨著背景小男生喝酒的微醺動態影像（奇奇怪怪的氛圍🫠），享受完整的視聽心流。

🔗 〈無日浪漫〉線上體驗網址：https://vibe-coding--music.pages.dev/

結語：打開文科生的 Vibe Coding 新邊界

說實在的，關於 Vibe Coding 的 Prompt 提示詞部分其實沒有太多神秘的技巧。如果你仔細閱讀這篇文章所梳理的邏輯架構，直接將你的構想與需求描述複製貼給 AI，相信 AI 也能根據文字描述協助你完成相應的程式架構與功能串接！（理論上在現在的技術眼中，AI 就是這麼強大且不可思議 🤣）

希望這篇內容能讓更多文科背景的同學們看見 Vibe Coding 的全新邊界與可能性，不再受限於單純的文字載體，進一步拓展個人網站與作品集的豐富功能性！

📌 本篇重點回顧

• 拓展文科內容價值：透過 AI 與 Vibe Coding 打破文本限制，延伸文學 IP 的多媒體應用。
• 彌補跨媒介產出短板：善用 AIGC 補足圖像、音訊、影像與程式開發技能。
• AIGC 內容分類與媒合：以專案管理視角整合多元 AI 素材，打造沉浸式數位內容。