iT邦幫忙

2025 iThome 鐵人賽

DAY 12
0
生成式 AI

VIBE CODING 全紀錄:0 經驗用 AI 打造 PWA 兒童任務管理平台》系列 第 12

(Day 12)從任務清單到動物冒險地圖:AI 輔助下的兒童互動設計(下集)

  • 分享至 

  • xImage
  •  

在上一篇文章中,我已經成功用 amCharts5 建立了一個互動世界地圖,讓孩子們能在地圖上看到不同國家的位置與形狀。接下來的挑戰,就是把這張「全球地圖」變成一場真正的冒險旅程——每個國家都可以解鎖,進入後還有屬於自己的動物圖鑑,讓孩子們邊玩邊學。


解鎖國家與動物的機制

我的規劃很簡單:

  • 國家頁面:需要先解鎖,才能進入。
  • 動物頁面:在國家頁面內,每隻動物也需要解鎖才能查看。

至於解鎖的鑰匙?當然是靠日常做任務累積啦!
在孩子完成額外的 支線任務 後,系統會跳出一個題目,答對就能獲得拼圖碎片,集滿碎片就能解鎖新國家或動物。
這樣的設計,可以把 學習遊戲 巧妙結合,讓孩子有持續探索的動力。


大量素材,該怎麼生?

一開始我在想,世界上這麼多國家,每個國家又有好幾種動物,更別說我完全沒有美術背景,要一個人畫出這些圖片根本不可能。

不過仔細想想,其實不用一次全做完,還且還有多個 AI 夥伴,應該不用擔心。
只要架構先搭好,就能先做幾個國家,後續慢慢擴充。
孩子解鎖的速度也沒那麼快,素材完全可以「邊做邊上」。


從台灣開始

我決定先從 台灣 開始,製作一個包含圖片與簡介的國家介紹頁面,並根據內容設計對應的題庫。
這部分光用想的就覺得頭大,因為教育性質的軟體,資料正確性非常重要,還需要確保資訊有趣又易懂。

幸好這也正是 AI 擅長的事。

無論是資料查詢、整理、還是初步審核,AI 的速度與效率都遠勝我自己逐一搜尋。
我甚至可以讓 ChatGPT、Grok、Gemini 三個 AI 交叉比對資料,確保內容正確率更高。

AI 建議我把國家介紹與題庫統一儲存為 JSON 檔,方便後續直接擴充。
這個設計也不錯,資料結構化後,前端顯示與後續維護都會更輕鬆。


圖片生成的挑戰

文字部分生成得很順利,但圖片就不一樣了。
我希望的風格是真實場景圖,可以變換不同美術風格,但畫面中不能有真實不存在的建築或景物。
然而直接讓 AI 畫,穩定性實在不高,畫一張就得等很久,而且常常產出不符需求的作品。

後來我找到一個更穩的方法:
先找一張真實的參考照片,再讓 AI 按指定風格重繪

就像之前流行的「吉卜力風格照片生成」一樣,有了準確的參考圖,AI 的輸出品質和一致性都大幅提升,而且更容易控制畫面細節。
雖然產圖速度還是慢,但至少不會浪費時間在不合格的成品上。

https://ithelp.ithome.com.tw/upload/images/20250813/20177927QeNWbz8Fb3.png

https://ithelp.ithome.com.tw/upload/images/20250813/20177927UybXg9fHE2.png

平行作業提升效率

既然產圖需要等待,我就改成 邊做其他功能、邊等 AI 生成圖片
等素材一批產好後,再一次性把它們套進國家與動物頁面,並調整位置與大小。

這樣我就完成了第一個國家——台灣的介紹頁與動物圖鑑
孩子解鎖的動物可以隨時點進來看介紹,等之後遇到相關題目時,就有更高的正確率。


題庫與知識累積

題庫的設計邏輯是:

  • 題目會從已解鎖的國家與動物中出題。
  • 解鎖越多,題庫越豐富。

這意味著,隨著孩子探索更多國家與動物,他們的知識面會不斷擴張。
這種 邊玩邊累積知識 的循環,正是我想要的學習體驗。


剩下就是重複性的工作

  • 產生國家介紹與圖片
  • 收集動物資料與圖片
  • 設計題庫
  • 放進專案中測試顯示

雖然步驟簡單,但因為圖片生成速度慢,我決定先實作兩個國家,等孩子的解鎖進度追上,再持續擴充新的國家與動物。

透過這次的嘗試,我更確定 AI 不只是「輔助」,而是讓這個專案成形的 關鍵工具——沒有 AI,這種量級的教育內容製作,根本不可能一人完成。


接下來就是重頭戲——有趣的題目與動畫互動

在正式實作題目系統之前,我早已準備好 題庫 JSON 檔,並將解鎖國家的資料存進資料庫,另外也把先前開發的 語音模組 一併納入計劃。
當這些素材與功能都到位後,我就直接請 AI 協助撰寫程式碼,結果很快就完成了題庫與前端頁面的串接。

答題後出現的獲得拼圖碎片動畫,我也花了點時間調整,讓畫面既簡單又有成就感。搭配語音問答的互動,孩子在答對題目的瞬間,彷彿真的拿到了一塊珍貴的寶藏。

https://ithelp.ithome.com.tw/upload/images/20250813/20177927cd9zYaUups.png

第一版平台上線後,我立刻上線給自己孩子來試用。
他們在解鎖地圖的同時,臉上全是興奮的笑容。每當獲得拼圖碎片時,眼睛都會亮一下;碎片湊齊的那一刻,更是會小心翼翼地打開解鎖介面,認真討論要先選哪一個動物。當按下解鎖按鈕、看到新動物出現在圖鑑中時,甚至高興得原地跳舞。

那一刻,我感覺這個冒險地圖真的活了起來,不再只是程式碼和素材的集合,而是一個能帶來歡笑與好奇心的世界。

https://ithelp.ithome.com.tw/upload/images/20250813/20177927bq5XkQsIjR.png


當然,目前還是有些小遺憾——例如動物頁面暫時還沒有加入互動機制,也沒有播放動物叫聲。
本來想一次做到位,但考慮到開發成本與優先順序,這部分只好先擱置,等之後有空再來補強。
畢竟,偶爾偷個懶,也是長期開發過程中必不可少的養分

敬請期待下一篇:《讓孩子愛上成語學習:AI 驅動的漸進式挑戰》


上一篇
(Day 11)從任務清單到動物冒險地圖:AI 輔助下的兒童互動設計(上集)
下一篇
(Day 13)讓孩子愛上成語學習:AI 驅動的漸進式挑戰
系列文
VIBE CODING 全紀錄:0 經驗用 AI 打造 PWA 兒童任務管理平台》30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言