我們每次生日都只有吃飯，然後買個東西給他，我覺得有點無聊。
剛好那時候我正在學 vibe coding，就想說不如直接做一個遊戲送他。
結果他真的坐在電腦前，從頭玩到最後一關。
這篇會把整個做法寫出來：我用了什麼工具、素材要準備哪些、可以直接複製的提示詞，還有做好之後要怎麼傳給對方才不會破圖。
你不需要會寫程式，也不用安裝遊戲引擎。你負責出想法跟心意，AI 負責把它變成可以玩的東西。
我也把整個製作過程剪成了一支短影片。想先看成品長什麼樣子，可以從這裡開始：
為什麼送一個自己做的小遊戲
吃飯、買禮物都很好，但如果你想讓對方記得久一點，親手做一個只屬於他的小遊戲，是很少人試過、卻意外好入手的選項。
它非常有趣。遊戲是可以「玩」的禮物。對方的名字、你們的寵物、只有你們才懂的梗，全部都可以做進去。拆禮物的瞬間會變成一段一起玩、一起笑的體驗，而且世界上只有這一份。
它給人很用心的感覺。做一個小遊戲，代表你花時間想過對方喜歡什麼：他愛的作品、常說的話、你們共同的回憶。收到的人會感覺到自己被放在心上，這比禮物本身更難得。
而且有了 AI，這件事不再需要工程師背景。
禮物拆了就沒了，但當下一起體驗、一起玩的時光能被記得更久。
我做的是什麼樣的遊戲
我想到他很喜歡 Metal Gear 系列，裡面有一個通訊介面，我就決定用這個介面為主。
點擊開始就播放音效，做出「接起電話」的感覺。頭像做了綠色像素化的特殊處理，貼合通訊介面的氛圍。中間放了幾題只有我們兩個知道答案的問題，包含生日跟重要日期。互動選項一步一步加上去，最後還加了一關潛行小遊戲，要安撫我們家的貓守衛才能通關。
因為我能做到的程度有限，一開始就決定做一個簡單的文字遊戲。雖然沒辦法做到 3D 的那種效果，但把貓放進去當守衛之後，整個遊戲突然就變成只有我們才懂的東西了。
✦Annie 分享
本來想把他玩的反應放出來，但一看錄影發現他沒穿上衣，所以就沒放了 XD
開始之前：你需要準備什麼
你不需要會寫程式，也不用安裝遊戲引擎，可以直接請 AI 把遊戲做成 HTML 網頁。選工具的時候，先確認它能不能取得你授權的資料夾、直接建立和修改檔案。
可以直接操作檔案的工具
我自己實際使用的是 Claude Code CLI，不過 Claude Cowork 和 Codex 也能做這類 HTML 小遊戲。功能會依方案、裝置和資料夾權限而不同。
如果操作時遇到介面、權限或錯誤訊息看不懂，直接把畫面或錯誤訊息貼給 AI 問，通常會比自己一直找原因更快。
只能回傳程式碼的對話版
如果你用的 AI 只能在對話框提供程式碼，就照下面的方式手動組裝：
整段複製完整程式碼到記事本，選「另存新檔」→「所有檔案」→ UTF-8，檔名輸入 game.html。接著照下面的示意建立「人物照片」和「音效」資料夾，不要任意更動檔名和層級。每次修改都請 AI 回傳完整最新版 HTML，全選取代舊內容，存檔後重新測試。
素材少、願意自己貼檔案，手動版就能完成。想省掉複製、存檔和反覆替換程式碼的步驟，再考慮能直接操作本機資料夾的工具。
準備清單一：視覺與美術素材
開工前先把素材備齊，AI 做起來會順很多。視覺決定了遊戲一打開的第一印象。
人物素材：對方、你們或寵物的照片。可以請 AI 做像素化之類的特殊處理，變成遊戲角色的頭像。
對話框樣式：想要像哪一款遊戲的感覺？找一張參考圖給 AI 看，比用形容的快很多。
色彩風格與整體視覺：主色調、介面氛圍、文字的感覺，先講好整體方向再開工，做出來才會統一。
準備素材的時候有三個小訣竅。素材照分類放好，檔名寫清楚是誰、用在哪裡，例如「男友-生氣.jpg」，可以降低 AI 放錯的機率。圖片用 JPG／PNG，音效用 MP3／標準 WAV，完成後仍要在目標瀏覽器測試。沒有插畫也沒關係，照片請 AI 處理過，就很有遊戲的味道。
資料夾可以照這樣的層級建立：
生日禮物遊戲/ ├── game.html 遊戲主檔 ├── 人物照片/ │ ├── 男友-正常.jpg │ ├── 男友-生氣.jpg │ └── 貓-睡覺.jpg ├── 對話框參考.png 想要的介面感覺 ├── 音效/ 開場音.wav、點擊音.wav、過關音.wav └── 文本大綱.txt 對話內容、回憶和梗
準備清單二：遊戲機制與企劃資料
機制不用複雜，但你要先講得出「這個遊戲怎麼玩」，AI 才做得出你要的東西。
遊戲機制：例如點擊推進對話、出現選項讓對方選、答對問題才能進下一關。
文本與劇情：對話內容、想放進去的回憶和梗，先寫成大綱，再交給 AI 排進遊戲裡。
音效：開場音、點擊音、過關音。建議去免版稅音效庫找，搜尋 royalty free sound effects 就有很多免費資源，下載後讓 AI 去取用。
其實你只要負責文本設計，還有那些只有你們才懂的互動，把介面設計、程式這些自己沒辦法做到的部分，直接外包給 AI 就好。
遊戲化設計：怎麼讓它真的「可以玩」
這是我覺得最容易被忽略的一段。很多人做出來的東西，其實只是一份會自己播放的電子卡片，對方從頭到尾只能按「下一頁」。
差別在於對方有沒有事情可以做。只要讓他有選擇、有輸入、有可能答錯，同樣的內容就會從觀看變成參與。我自己用了四個做法。
把只有你們知道的事做成題目
我中間放了幾題身份驗證：我們的紀念日、我的生日、我們家的貓叫什麼名字。這種題目對外人毫無意義，但對他來說每一題都是一次確認。
題目排序我是刻意的，最難的紀念日放第一題，讓心跳出現在最前面。錯誤選項也不要隨便填，要放接近正確答案的誘餌，例如正解是 7 月 17 日，旁邊就放 6 月 17 日和 8 月 17 日。這樣答對才是真的記得，不是用排除法猜到的。
答錯要有反應，而且要像你會說的話
答錯的回覆是整個遊戲最有記憶點的地方，因為那是他預期不到的部分。我三題答錯的語氣是遞減的兇：第一題「你。應。該。要。記。得。」用句讀把每個字切開，模擬咬牙一字一字講出來的感覺；到第三題連貓的名字都答錯，反而變成「你在開玩笑嗎？」的無語。
答對也不要只寫「正確」。我寫的是「記得就好，不然我會生氣」，嘴硬但有情緒，比稱讚更像我本人。
用回合制，不要硬做即時操作
我後面加了一個潛行關卡，本來想做更有遊戲性的版本，但最後還是決定用回合制呈現。這個取捨我覺得很值得分享：回合制只要處理「選一個動作、看結果」，不用碰角色移動、碰撞判定、動畫時間軸，難度差非常多。
關卡設計就用三關遞進。守衛是我們家的貓，第一關牠在理毛，第二關剛睡醒心情不好，第三關坐在出口正中央不動。三句環境描寫就把緊張感疊了三層，我沒有寫任何一句「難度提升」。
讓進度看得見
畫面上我放了兩條狀態條，一條是守衛的偵測值，一條是自己的隱蔽度。選錯動作隱蔽度就往下掉，數字會動，對方就知道自己剛剛做了不好的選擇。
道具也一樣。凍乾、貓草、球各有各的反應，過關之後補給箱會給下一關要用的道具。這些設計其實都很單純，但加起來就會讓人覺得「這是一款遊戲」，不是一個網頁。
✦小提醒
道具和關卡的設定不用先想完整。我是先做出一關能通，再把第二、第三關照同一個結構複製過去，只改貓的狀態和懲罰力道。
介面設計：氛圍是怎麼做出來的
介面不用自己發明。我做的事情就是選一個現成的視覺語言直接借過來，因為對方一眼就認得出那是什麼，情緒會先到位，我也不用從零決定所有細節。
顏色只用兩三個
我整個遊戲只有黑底加螢光綠，加上少量的暗綠當次要文字。顏色一多就會看起來像草稿，限制在兩三個色反而更像成品。找一張參考圖給 AI 看，比用形容詞描述快很多。
文字一個字一個字出現
對話我沒有一次顯示完整段落，而是做成打字機效果，一個字一個字打出來，每幾個字配一聲很輕的電子音。同樣一句話，逐字出現就會有人在跟你說話的感覺。
說話的那一邊頭像亮起來，沒說話的那一邊暗下去。這個細節成本很低，但畫面立刻就有「兩個人在對話」的分量。
照片統一處理過，風格才會一致
我把我們和貓的照片都交給 AI 做像素化，再統一套上綠色調。原始照片直接放進去會很突兀，處理過之後就變成同一個世界裡的東西了。
加一點雜訊，畫面才不會太乾淨
最後我在整個畫面上疊了一層很淡的橫向掃描線，還有四角壓暗的暈影。這兩個東西加上去，畫面就從「一個網頁」變成「一台老螢幕」。
這些都是用說的就能請 AI 加上去，你只要講得出想要的感覺。不確定怎麼形容的時候，直接說「我想要老電視那種畫面」也可以。
四個步驟做出你的送禮小遊戲
不用一次想到完美。先做出一個能動的初稿，再一個功能一個功能加上去。
Step.1｜ 定主題與類型
從對方喜歡的作品、角色或你們的共同回憶出發，選一個文字或視覺小說類型的形式，把可執行度放在第一位。
Step.2｜ 準備素材
照前面的清單建立專案資料夾，人物圖放進「人物照片」、音效放進「音效」，其他參考資料放在根目錄。檔名直接寫清楚每個檔案是誰、用在哪裡。
Step.3｜ 讓 AI 做出初稿
直接跟它講你想要什麼類型的東西，讓它去製作。想要更多遊戲系統也一樣用說的，先求有一個跑得動的版本。
Step.4｜ 再開始調整其他細節
初稿出來後，再慢慢調整畫面、補上互動選項，甚至加一個小遊戲關卡。每次只改一點，改完就存檔測試一次。
送出前再從 game.html 雙擊開啟，從頭玩到結局，測過所有按鈕、答案分支、圖片和音效。最後把 ZIP 解壓到另一個資料夾，再完整測試一次。
先有一個能玩的版本，比一開始就想做出完美的版本重要。
可以直接用的提示詞
把方括號裡的地方換成你自己的內容，整段複製貼給 AI 就可以開工。不用寫得很漂亮，講清楚就好。
我想做一個小遊戲送給［對象，例如男友／朋友／媽媽］當［生日／紀念日］禮物。 請做成可以直接雙擊、以 file:// 離線執行的 game.html；CSS 和 JavaScript 都放在 HTML 裡，不要使用 fetch、XHR、ES module、外部 API、npm 或任何需要本機伺服器的 功能。圖片與音效放在旁邊的子資料夾，全部使用相對路徑。 我想要的風格是［像素風／漫畫風／復古終端機風］，他很喜歡［某個作品或遊戲］， 我想做成像裡面［某個畫面，例如通訊對話畫面］那樣。 畫面我想要［配色與感覺，例如黑底配螢光綠的字］。 遊戲流程我想這樣安排： 一、開場：［例如一通打進來的電話，按任意鍵或點擊畫面接聽］ 二、中段：出［幾］題只有我們兩個知道答案的問題，例如［紀念日、寵物名字］， 答錯就回［你會說的那句話］ 三、關卡：［一個小挑戰，例如要用道具安撫我們家的貓才能過關］ 四、結局：［最後最想跟他說的話］ 素材我會給你：［幾張照片、幾個音效檔］。照片請做成［想要的效果，例如綠色像素化 的頭像］的感覺。 請一次只做一個段落。每做完一段先讓我打開看畫面，我確認之後再繼續下一段。 如果要支援手機，所有鍵盤操作都要同時提供可點擊或可觸控的按鈕。
如果你用的是只能回傳程式碼的對話版，再補一句：「每次修改都請回傳完整最新版 HTML，讓我整段取代後重新存檔測試。」
想修改的時候，可以這樣講：
［想改的那一段］我想改成［新的樣子］，其他地方都不要動。
✦小提醒
最後那句「其他地方都不要動」很重要。一次只改一個地方，可以降低 AI 動到其他已調整內容的機率，修改後仍要重新測試。
做好之後，怎麼給對方看
HTML 不是「安裝程式」，是一個網頁檔案。但也正因為這樣，傳送的方式不對，圖片跟聲音很容易不見。
EXE 是 Windows 的執行檔，有些需要安裝，有些可以直接執行。這裡選擇 HTML，是因為一般電腦可以用瀏覽器直接開啟。手機開啟本機 HTML 和素材資料夾的方式會依系統與瀏覽器而不同，一定要先用對方實際使用的裝置測試。
.html 檔案本身只有文字和程式，裡面用到的照片、音效其實是另外存放的檔案，靠資料夾裡的相對位置去找到彼此。如果你只把 .html 檔案單獨傳給對方，例如用 LINE 只傳這一個檔案，照片和音效的資料夾沒有一起過去，就可能會出現破圖、沒有聲音，嚴重的時候遊戲根本無法開始。
✦注意事項
game.html 要跟「人物照片」和「音效」資料夾待在同一層，整個資料夾一起移動、一起傳，不能只挑 HTML 檔案單獨傳出去。
安全的給法有兩種。
最保險的是在自己電腦上打開給對方看。不傳檔案出去，直接在你已經完整測試過的電腦上打開，讓對方在你身邊玩，或視訊分享畫面。這種方式最容易保留原本的素材路徑，適合當面送禮的場合。
想讓對方自己收著玩，就整包壓縮成 ZIP 再傳。記得跟對方說：先把 ZIP 完整解壓縮，保留原本的資料夾層級，不要移動或改名，再到解壓後的根目錄雙擊 game.html，不要直接從 ZIP 預覽裡開啟。
動工前的檢查清單
不用全部準備好才開始，缺的部分邊做邊補也可以。卡住的時候，記得你隨時可以直接問 AI。
- 我已經選好遊戲類型（新手建議文字或視覺小說類）
- 我已經準備好可用的 AI 工具（對話版，或可操作本機資料夾的工具）
- 人物素材備好了（照片可以請 AI 做特殊處理）
- 對話框樣式和色彩方向想好了（有參考圖更好）
- 我講得出這個遊戲要怎麼進行
- 文本大綱寫好了（想放的回憶和梗）
- 音效包找好了
- 我準備好先做初稿、再慢慢調整細節
✦注意事項
我這份範例的介面靈感與音效素材來自 Metal Gear Solid，相關著作權與商標均屬 Konami 所有，我不主張任何權利。它是做給一個人玩的私人禮物，沒有販售也沒有公開發布。如果你要做的作品會公開分享，建議改用免版稅音效庫的素材，避免版權爭議。
結語
這件事最有趣的地方，是你不用變成工程師，也能做出一個世界上只有一份的東西。
AI 不是只能用在工作上，生活中蠻多地方都可以用到，做出來真的還蠻特別的。如果你也想試試看，從一個能動的文字遊戲開始就好，剩下的慢慢加。
做完之後有做出什麼有趣的版本，也歡迎回來跟我說。
如果你也想把 AI 用在自己的生活或內容上，我整理了一份免費的創作者資源包，另外也有一個帶大家把內容系統做出來的陪跑營。
