2026 全臺戶外教育季是配合教育部專案製作的網頁活動，為期 22 週，涵蓋 180 多個場域、470 多堂課，整個活動從規劃、設計到開發完成不到 2 個月。每堂課對應一個角色，每個角色分幼體、成長、完全體三個階段，上架 480 種、1,440 張圖。這批圖由一張總表驅動：提示詞存在表裡，編號貫穿圖檔、卡片與前端，課程資料更新後可以重新輸出。以下依序說明總表、提示詞、五種尺寸的輸出、分享卡的批次排版，以及前端取圖的方式。
獎勵與帳務的處理見有獎活動平台的帳務、防刷與預算控管，整體建置範圍見活動平台與後台。
總表與編號
角色編號由區域、生態、序號、階段四段組成。以 N-W-01-3 為例，N 是北區，W 是水域（陸域為 L），01 是序號，3 是階段，也就是 Lv3。角色編號與課程編號相同，N-W-01 同時指一堂課與一個角色。1,440 則提示詞全部以編號開頭，整理圖檔的腳本以正規表示式從檔名開頭讀出編號與階段，依用途分流到五個資料夾，再改名為編號、階段與用途字母，例如 N-W-01-3-F。
| 欄位 | 內容 | 用到的地方 |
|---|---|---|
| 編號 | 區域、生態、序號、階段 | 提示詞開頭、圖檔命名、前端取圖 |
| 物種名稱 | 每種角色的名稱 | 卡片文字 |
| 提示詞 | 每個階段一則，長度 679 至 1,445 字元，平均約 970 字元 | 生圖 |
| 進化階段 | Lv1 至 Lv3 | 生圖、卡片星等、前端取圖 |
| 稀有度與能力值 | 稀有度分四級，另有兩項能力值 | 遊戲規則 |
| 課程、場域編號、縣市 | 角色表只記場域編號，場域名稱輸出時查場域表 | 卡片文字、地圖 |
稀有度分四級，數值為 1、2、5、50，排行榜的戰力是兩項能力值相加後乘上稀有度。稀有度與能力值和提示詞在同一張表，生圖與遊戲規則讀同一份資料。
角色數量需要追上課程數量時，總表可以擴充。腳本先算出每區課程數與角色數的差額，依該區水域、陸域課程的比例分配，序號從 31 起編，再由函式依階段、物種描述、區域配色與底色色碼組出提示詞。輸出後逐列比對已出圖角色的名稱與提示詞，確認沒有被改動。10 個部會的資料如何合併進來，見跨部會資料的整合做法。
提示詞的四層結構
角色以 Midjourney 生成。一致的角色是文字生圖的已知難題：Avrahami 等，2024指出，文字生圖模型的使用者難以產生一致的角色，而一致的角色對故事視覺化、遊戲開發、素材設計與廣告都重要。Liu 與 Chilton，2022以五個實驗評估 5,493 張生成結果，建議選提示詞時把重心放在主體與風格關鍵字。
開發團隊把主體與風格再往下拆成四層，存放在總表的提示詞欄。先訂好各層的規則，再批次生成，做法與AI 批次內容的品質關卡一致。
| 層 | 變動方式 | 範例片段 |
|---|---|---|
| 階段層 | 只隨 Lv 變 | Lv1 cute baby form, chibi style, small size；Lv3 fully evolved majestic form, large imposing size |
| 物種層 | 每種一段，三階段沿用 | secretary bird creature with extremely long powerful legs for savanna striding ... |
| 區域層 | 每區一組配色與底色，深度隨階段 | Lv1 warm peach and soft golden yellow；底色 #D4762C |
| 固定層 | 全部相同 | character design, professional illustration、--stylize 300 --raw --ar 1:1、同一個個人化風格檔 |
以南部水域的水棲鳥為例，底色色碼固定。
物種層是唯一需要逐隻創作的內容，480 種各寫一段。程式對 480 種逐一取三階段提示詞的最長共同子字串，平均約 325 字元，三階段因此認得出是同一隻。
三個階段對應收集、答題與到場三種參與深度，各階段的規則與每週節奏見22 週全國活動的平台做法。
階段層放開的是眼神、姿勢、配色深度，以及筆觸與光線，光線從 soft diffused natural lighting 加重為 cinematic golden-hour lighting。每則提示詞出四張候選，由人選定一張。
固定參數與底色
- --stylize 300：Midjourney 的 Stylize 文件載明，低值貼近提示詞，高值較自由，預設值為 100，範圍 0 到 1000。1,440 則提示詞全部固定為 300。
- --raw：Midjourney 的 Raw 文件載明，Raw 關掉標準模式自動加上的創作修飾，風格描述寫得詳細時，較能控制最後外觀。
- --ar 1:1：畫面比例固定為正方形。Midjourney 的參數文件載明參數一律放在提示詞文字之後，所以 1,440 則提示詞都以這組參數收尾。
- 個人化風格檔：Midjourney 的 Personalization 文件載明，風格檔由使用者選圖累積，可把特定風格檔的代碼加在提示詞後重複使用。全部提示詞接同一個風格檔，代碼不公開。
底色也寫進提示詞。五區各有一個色碼，每則提示詞都帶所屬區域的色碼，寫法是 on flat solid warm orange #D4762C color background only。色碼對模型是方向，實際輸出的背景帶有筆觸：北、中、東、離島大多落在低飽和的青灰色調，南部約一半偏暖橘。整批背景維持低飽和，看起來屬於同一個世界。區域的辨識交給卡片上的標籤顏色與小地圖。
| 區域 | 底色 | 張數 |
|---|---|---|
| 北 | deep teal #1A7A6D | 399 |
| 中 | forest green #3D8B37 | 390 |
| 南 | warm orange #D4762C | 435 |
| 東 | dark indigo-slate #2B2B3D | 174 |
| 離島 | warm brown #8B4726 | 42 |
五種尺寸的 AVIF 輸出
- 資料表1,440 列480 種，每種三階段
- 生成與選圖1,440 則提示詞每則四張候選，由人選一張
- 詳情圖1,440 張1218 x 1618 PNG
- 去背與分享卡1,920 張480 張 Lv3 去背、1,440 張分享卡
- 多尺寸輸出5,280 個 AVIF五種用途
檔案數為專案實際使用的 AVIF，不含 PNG 原圖。
產線的最後一步輸出五種 AVIF，格式見 AV1 Image File Format (AVIF) 規格。整理腳本依檔名裡的階段分流：課程預覽圖只取 Lv1，去背大圖只取 Lv3。五種合計 5,280 個 AVIF，約 120 MB。
| 輸出 | 字母 | 用在哪裡 | 尺寸 | 張數 | 平均大小 |
|---|---|---|---|---|---|
| 課程預覽圖 | D | 地圖場域面板與課程列表，只取 Lv1 | 160 x 160 | 480 | 約 2 KB |
| 圖鑑小圖 | C | 圖鑑格，依角色目前的階段取圖 | 163 x 225 | 1,440 | 約 8 KB |
| 詳情圖 | A | 課程詳情視窗，三階段並列，未取得的降到 20% 不透明度 | 1218 x 1618 | 1,440 | 約 21 KB |
| 去背大圖 | F | 開場選夥伴，只取 Lv3 | 1218 x 1218 | 480 | 約 36 KB |
| 分享卡 | B | 收集成功視窗與分享視窗 | 680 x 1182 | 1,440 | 約 44 KB |
徽章沿用同一套做法，固定層換成另一段描述，每枚都以 3D collectible figurine with polished display base 開頭。徽章共 30 枚，分收集 21、好友 5、任務 4 三類，輸出為 300 x 300 的 AVIF，平均約 13 KB。
分享卡的批次排版
分享卡由批次腳本輸出。腳本以 openpyxl 讀總表，設計稿尺寸 340 x 591 直接寫進程式，版面用 HTML 與 CSS 絕對定位：角色圖以 object-fit: cover 鋪滿，圓角 20 px。角色圖與裝飾圖轉成 base64 內嵌，每張卡的 HTML 自成一體。Playwright 啟動無頭 Chromium，視窗與卡片同尺寸，device_scale_factor 設為 2，等網路閒置後再多等 300 毫秒，對 .card 元素截圖並略過頁面背景，輸出圓角外保持透明的 680 x 1182 PNG，共 1,440 張。
- 區域決定場域標籤的顏色與右上角的區域小地圖。
- 階段決定星等圖，貼在卡片右緣垂直置中的位置。
- 角色名稱、場域名稱與縣市決定文字，場域名稱超過 13 字就截斷，後面加刪節號。
場域名稱不在角色表裡，輸出時依場域編號查場域表，場域改名只需要改一處。卡片上的句子由縣市與角色名稱帶入固定句型。課程資料更新後重新執行腳本，卡片隨之更新，版面不變。
前端怎麼取圖
前端沒有角色圖的對照表。各畫面以角色編號與階段組出檔名，用 new URL 搭配 import.meta.url 交給打包工具處理。前端專案裡的 AVIF 檔數與輸出一致：詳情圖、分享卡、圖鑑小圖各 1,440 檔，課程預覽圖與去背大圖各 480 檔。課程詳情、收集成功、圖鑑與課程列表的圖片都加上 loading=lazy，捲動到才載入。
收集成功的視窗以分享卡為主角。卡片入場時由小放大並帶模糊，之後以 5 秒一輪上下浮動，同時在 perspective 1200 px 的容器內以 8 秒一輪緩慢傾斜，角度在 8 度以內。這些動態全是 CSS 動畫。
詳情圖的 PNG 原圖平均約 1.3 MB，總量約 1.9 GB；轉成 AVIF 後平均約 21 KB，總量約 30 MB。地圖與課程列表用約 2 KB 的課程預覽圖，詳情圖與分享卡只在對應的視窗載入。去背大圖需要透明，AOMedia 的說明載明 AVIF 支援透明，也支援有損與無損壓縮，Chrome、Firefox、Safari 等主要瀏覽器都支援，去背大圖因此同樣使用 AVIF。下載量與記憶體預算的訂法，見Web 3D 效能工程的完整流程。
不適合的情況
- 角色只有幾隻，並且要長期當品牌形象。這類角色適合逐張精修，拆成資料表的投資收不回來。
- 圖面需要精確呈現真實物種、文物或人物。生成圖的細節不能當事實使用。
- 角色沒有對應的課程或場域資料。沒有可綁定的資料，重新輸出的能力就用不上。
開始前要準備什麼
需要先備齊五項：角色在活動中的用途、角色數量與階段數、每個角色對應的課程與場域資料、各處圖片的用途與尺寸、風格參考。生成與視覺素材的範圍見AI 圖像與視覺素材。備妥之後，可以討論角色與活動平台的規劃。
