iT邦幫忙

2026 iThome 鐵人賽

DAY 9
0
Vibe Coding

學生身份如何每天透過Vibe Coding每天做跨領域的創新項目系列 第 9

Day 9 咖啡色計劃的心跳瞬間!SCA 的文章化成活潑的女角色!與你進行咖啡學問探討之旅~

  • 分享至 

  • xImage
  •  

【Day 9】咖啡色計劃的心跳瞬間!SCA 的文章化成活潑的女角色!與你進行咖啡學問探討之旅~

Midjourney 少年咖啡師研究咖啡科學的示意圖
▲ 圖 1:Midjourney 少年咖啡師研究咖啡科學的示意圖

最近都很多知識型的東西
與 Vibe Coding 結合的想法。
這次來玩什麼好呢~
要不然就起床泡個咖啡好了⋯⋯
儘管我並沒有正式當過咖啡師,
但是學咖啡快 10 年了吧?
中途還經歷過一個 SCA 考試跟 City & Guilds 的考試。


起床泡杯咖啡吧!學咖啡 10 年與 SCA 考試的那些日常

在學校冲咖啡被人偷拍 AwA
▲ 圖 2:在學校沖咖啡被人偷拍 AwA

小時候便隱約感覺到,咖啡每年行情都不太一樣,可能是生豆批發的價格,可能是氣候變遷到底影響咖啡產量多少,特別是氣候變遷有可能影響咖啡風味與農莊的營運,最後影響的是我們每個人手上的咖啡價格,儘管生豆的價格大概佔一杯咖啡的十分之一而已,這是一個比喻式的說法。

SCA 官網
▲ 圖 3:SCA 精品咖啡協會官方網站

SCA,精品咖啡協會,對於不同的咖啡師來說可能都有不同意義,是一個考試機構?是一個鑽研及定義精品咖啡的研究機構?是一個持續性進行咖啡產業全方面研究的機構?是一個推動咖啡科學化的機構之一?

對於很多真正在就業的咖啡師來說,可能沖好一杯咖啡並沒有這麼多學問,特別在香港的環境,基礎的就是,沖好,上好,經營好一家店舖比較重要。但是要做出產品的差異化或者品牌塑造這些,都可以從一些學術理論得到一些啟發(儘管有些咖啡師可能天生對產品研發跟品牌塑造也有極高天份就是了,像是莫名其妙可能一個中學生也能夠拍出流量極高的影片,這樣子的道理,同時身為咖啡師也可能會有其他的天賦)。

早一兩年還在大學的時候,為了鍛鍊自己的英文閱讀能力,其實也會去看一些 SCA 的英文研究報告,去鍛鍊自己的英文能力~當時看的是 “Towards A Definition of Specialty Coffee: Building an Understanding Based on Attributes ”


靈感乍現:把硬核論文變成戀愛 Galgame 遊戲?!

關於如何把複雜的知識化成有趣的形式讓人容易吸收,上一次的案例就展示了要把文件變成有趣的網頁圖卡可以複習,這次我們就來點⋯⋯

先聲明一下!這個有趣的東西我之前是在 IG 上面看見的,把論文變成 Galgame 戀愛遊戲!之前好像有一個叫做 Paper 2 galgame 的應用在 Steam 上面發售。

Paper 2 galgame 的 Steam 商店畫面
▲ 圖 4:Paper 2 galgame 在 Steam 上的商店畫面

當然身為一個研究 AI 虛擬角色、知識教學、Vibe Coding 的人來說,用 Vibe Coding 出已有的應用,套用 AI 虛擬角色的設計邏輯進行有趣生動的知識教學這本身就是一個有趣的出路~


嚴謹知識審查:用 NotebookLM 拆解三篇 SCA 經典文獻

NotebookLM 做輔助學習超好用的
▲ 圖 5:NotebookLM 做輔助學習超好用的介面

好吧但是這一切都必須先從嚴格的知識審查開始,這次選用的是三篇在 SCA 上面可以瀏覽的內容。這邊我們用 Google NotebookLM 來做基礎的文獻了解與學習。(這對大學生來說是一個非常有用的技能)

  • 🧪 “Dialing In, Decoded: How Electrochemistry Helps Us Understand Espresso Extraction”
    美國俄勒岡大學的 Hendon Coffee Lab 以實驗設計法(DOE)優化萃取及電化學(Electrochemistry)技術應用,來檢測咖啡因、綠原酸及有機酸等特定分子的濃度。

  • 🌍 “A How-To Guide for Making Sustainability a Shared Practice”
    由精品咖啡協會(SCA)發布,提出兩大框架雙鑽石模型(Double Diamond):包含發掘(Discover)、定義(Define)、開發(Develop)、交付(Deliver)四個階段。DEAL 五大深層商業結構:從使命(Purpose)、網絡(Networks)、治理(Governance)、所有權(Ownership)與財務(Finance)。推動「永續設計框架(Sustainable Design Framework, SDF)」,協助咖啡企業將永續深度融入商業營運,推動整個產業鏈的價值公平分配(Equitable Value Distribution)。

  • “What’s In My Coffee? - Green Coffee Identity”
    針對近年興起的加料、共發酵與浸漬咖啡(Infused / Co-fermented Coffees),探討產業中「Pro-stuff(創新派,主張賦予小農風味溢價)」與「Anti-stuff(純粹派,強調生豆純潔性與食品安全)」之間的辯論。

三篇文章我尚算都看得懂啦,一篇關於檢測與優化精品咖啡產出流程,可以變成一位可愛的女科學家,一篇探討咖啡產業永續的商業架構,可以變成一個關注永續的漂亮虛構 SCA 專案負責人,一篇探索創新咖啡製作形式與傳統純粹派的辯論,就可以化成一位新潮的年紀輕輕的哥德少女。


角色立繪與虛擬化身:Midjourney 產出三位靈魂女主角

Midjourney 生成的三個角色立繪
▲ 圖 6:Midjourney 生成的三位靈魂女主角立繪

好吧我就喜歡用 Midjourney 產出三個角色的立繪,嵌入在遊戲當中,讓整體與角色的互動過程當中變得有趣好看!

這次就借用一下 iThome 的後台吧,把圖像嵌入在 iThome 的文章頁面上我便能夠得到一串圖像存放的網址,圖像存放的網址將會在之後備被 Vibe Coding 工具使用!(這次想要輕微的借這個位置,非常感謝,我還沒有深入研究出線上圖像存放位置與連結的部份🫠)


Vibe Coding 實戰:從 Antigravity 到 Google AI Studio 的多檔案原型

最後把 NotebookLM 萃取出來的知識點,結合圖像的網址,加上下載下來的三篇文章,丟!到 Vibe Coding 的工具,例如說 Antigravity!讓他生成出可以嵌入在 Google Sites 的 HTML 程式代碼⋯⋯

其實我隱約就覺得不對勁了,因為這樣子的話代碼可能就有 2000 多行⋯⋯有可能會讓網頁變得卡卡的,大家手機會發熱⋯⋯所以⋯⋯

後來 AI Studio 的遊戲畫面
▲ 圖 7:後來在 Google AI Studio 打造出的咖啡館 RPG 探索遊戲畫面

產出好 HTML!我就把檔案丟包到 Google 的 AI Studio 去啦!

某程度上 Google 的 AI Studio 作為一個線上 Vibe Coding 工具,同樣也可以產出不同的檔案,而不像當初最基本的 AI 只能夠產出單一檔案的部份(大概 2025 年尾左右?)。這種情況下 AI Studio 設計出來的遊戲通常都能夠比較生動有趣一點。

好吧,Prompt 的話其實這次會有點複雜但大概結構會是:

我想要設計一款名為「咖啡色計劃」的戀愛遊戲,會把我給予你的三篇文獻及以下的知識點變成對應的遊戲角色,主角可以自選是男是女並且設定性別,玩家能夠操控角色在咖啡廳裏面移動遊走與不同的角色聊天,透過與他們的聊天了解三篇文獻的知識,並且透過聊天提升好感度,好感到足夠高的話,就能夠解鎖最終隱藏圖像。每一天都會有不同的 1-3 位的女角色來到咖啡廳。

💡 提示:以上內容直接複製即為標準 Prompt!

好吧,就是這麼的口語化~


「咖啡色計劃:戀愛咖啡師物語」正式上線!

那麼請大家就這次的「咖啡色計劃:戀愛咖啡師物語」!來了解及學習一些前沿的精品咖啡研究成果與知識吧!

最後的通關畫面 AwA
▲ 圖 8:咖啡色計劃的最終好感度通關結算畫面 AwA

  • 咖啡色計劃:戀愛咖啡師物語
    結合 SCA 前沿學術文獻、RPG 自由走動與 Galgame 好感度戀愛對話的咖啡知識冒險遊戲。
    🔗 遊戲體驗連結點此在 Google AI Studio 立即遊玩體驗

📌 本篇重點整理

核心維度 重點摘要
文獻研讀個人化(NotebookLM) 把艱澀的英文學術文章與研究報告交給 Google NotebookLM 做初步的知識點提取,大幅降低閱讀門檻,成為學生或自學者跨領域研讀與嚴格知識審查的超實用利器!
知識傳播遊戲化(Paper to Galgame) 結合 Vibe Coding 將學術知識點轉化為戀愛 Galgame,套用 AI 虛擬角色的立體人設,在咖啡廳走動、點單與聊天互動中「一邊玩遊戲、一邊學知識」,讓學術理論生動有趣!
多檔案敏捷原型(Google AI Studio) 針對高達 2,000 多行的複雜專案,善用 Google AI Studio 多檔案組織架構,突破單檔 HTML 的效能瓶頸,快速建構出順暢不卡機、互動體驗更佳的生動 Prototype!

上一篇
Day 8 一起來預習香港的強制性基本安全訓練課程(平安卡)吧!(?)
下一篇
Day 10 我要讓大家逐漸變成絕地武士!不單單是虛擬的!還要推現實的!
系列文
學生身份如何每天透過Vibe Coding每天做跨領域的創新項目11
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言