🎨 #99 考試卷生圖 Studio：四欄位 20 秒生兩張黑白線稿，列印不吃墨水的備課救星
#99 考試卷生圖 Studio 是阿凱寫給自己備課用的 AI 插圖工具：填四個欄位（標題、對話、角色、場景），按一鍵 20 秒生兩張 1024×1024 純黑白線稿 PNG，校園黑白印表機友善、可當著色頁、中文精準渲染，每天免費 5 次。
出題時被卡住的不是題目，是「圖」
寫完一道閱讀理解題，到了「題目要配張圖」這步 — 卡住。
- Google 圖片找半天，要嘛有浮水印、要嘛版權不明、要嘛畫風雜亂跟試卷不搭
- 圖庫網站要付費，一張 9 美金，一份學習單放 5 張圖等於一份午餐錢
- 自己畫？我畫不出來
- 拿彩色圖列印？校園黑白印表機印出來糊成一坨
更氣的是有時候只是想要「兩個小孩在公園聊天的對話框」這種簡單畫面 — 找不到、買不到、畫不出來，題目就乾乾的沒圖。
學生看試卷就少了「進入情境」的那一步。
#99 怎麼解？四個欄位、一鍵生兩張
「考試卷生圖 Studio」是阿凱寫給自己每天備課用的工具，後來覺得別的老師也會卡同一個地方，就放上 GitHub Pages 免費開放。
核心流程超短：左邊填 4 個欄位 → 按「生成兩張線稿」→ 右邊 10–20 秒後出現 2 張 1024×1024 PNG → 點 DOWNLOAD 拿走。
4 個欄位分工：
- T 標題（選填） — 顯示在圖片上方，大寫粗體（適合放題號或單元名）
- D 對話內容（選填） — 放進對話氣泡（適合英文對話題、社會課情境題）
- C 角色描述（必填） — 主角是誰、在做什麼（這個一定要寫）
- S 背景場景（選填） — 在哪裡（科學課、農場、市場、博物館⋯）
填好按一下，20 秒內兩張任挑。覺得不夠的話再按一次，每天免費 5 次 = 10 張圖，一般備課量綽綽有餘。
為什麼是「純黑白線稿」？三個非常實際的理由
第一次看到「Studio 只產黑白線稿」會以為是限制，其實是設計選擇：
① 校園印表機友善 — 國小教室那台黑白雷射印表機印彩色圖會糊成黑漬，但線稿印出來邊緣清晰，每張紙印刷成本接近 0。
② 兼作著色頁 — 同一張圖小考完直接讓孩子塗色 → 「試卷插圖」秒變「課後著色教具」，一張圖兩種用途。
③ 學生能改造 — 線稿學生可以自己加細節、自己上色、自己幫角色加配件，創作參與感從打開試卷那一刻就開始。
「彩色 = 強」是大人的錯覺。線稿留白給孩子，他們會自己填進去。
真實技術棧（藏在「擦掉」按鈕旁邊的 OpenAI）
- 前端：純 HTML + 原生 JS（黑板 × 工作室主題，跟阿凱其他工具設計語彙一致）
- AI 模型：OpenAI gpt-image-2（中文精準渲染 ✓，不會把「教室」畫成奇怪的英文字）
- 後端：Cloudflare Workers / Firebase Functions 代理 API Key（前端看不到 key）
- 配額管理：每日 5 次（IP + localStorage 雙保險），擋濫用
- Prompt 透明化：產圖後會顯示 AI Prompt 全文 + 一鍵複製，老師可拿到 ChatGPT / Bing Image Creator 換引擎再試
- 部署：GitHub Pages（cagoooo/picture-master）
「Prompt 可複製」這點老師會無感、但設計師朋友看到都笑 — 這是把工具當「Prompt 教學示範」用，老師多按幾次自然學會怎麼寫好提示詞。
真實教學情境 5 種
阿凱自己這學期用 Studio 出的圖大致這 5 類：
① 英語對話題配圖
T: Unit 5 / D: Where is the library? / C: 兩個小學生 / S: 校園走廊 → 出來兩個 Q 版小朋友站走廊比手畫腳，對話框直接寫上 D 欄位文字
② 社會課情境題
C: 一位媽媽和小孩在傳統市場挑水果 / S: 攤位上有香蕉、蘋果、芒果 → 出來情境立刻有畫面，學生看圖回答「媽媽買了什麼」
③ 自然觀察題
T: 觀察記錄 / C: 一隻獨角仙在樹幹上 / S: 旁邊有放大鏡和記錄本 → 出來是科學插畫風格，孩子拿到當著色頁還可以順便畫色彩變化
④ 數學應用題
C: 三個小朋友分 12 顆糖果 / S: 桌上有一袋糖果 → 「看圖列式」題的標配，比 emoji 多了情境感
⑤ 注音識字配圖
T: ㄅㄆㄇ / C: 一隻熊在吃蜂蜜 / S: 樹上有蜂窩 → ㄅ = 熊（bear），低年級孩子記字快很多
跟其他工具的關係：出題 → 配圖 → 印單一條龍
考試卷生圖 Studio 不是孤立工具，是阿凱出題工作流的最後一哩：
[#87 PIRLS PRO 生成題目] → [#99 考試卷生圖 Studio 配圖] → Word / Canva 排版 → 列印
對應到阿凱工具集裡的其他備課工具：
- 題目從哪來？ → #87 PIRLS 閱讀理解生成站 PRO 自動生 6 種題型
- 課程怎麼設計？ → #58 教師數位備課教案小幫手 從課綱推教案
- 圖怎麼配？ → #99 本篇主角 填 4 欄位拿圖
- 印好之後孩子做完怎麼批？ → #7 點石成金🐝 評語優化 寫評語
Studio 卡在「教案 → 試卷」的關鍵中段，少了它整條鏈會在「配圖」這步被卡住。
老師回饋
「以前出英語對話題都要去找免費圖庫、改尺寸、加對話框 — 現在 4 個欄位 20 秒搞定，多出來的時間我拿去看孩子作業。」
— 桃園某國小英語老師
「我帶低年級，孩子拿到試卷會先看圖再做題。Studio 出的線稿剛好可以塗色，寫完試卷後變美勞課。」
— 同校一年級導師
「Prompt 顯示這點超讚 — 我複製到 ChatGPT 再叫它出彩色版，一個 Prompt 兩種風格用在不同單元。」
— 美術老師
配對工具推薦
- #87 PIRLS 閱讀理解生成站 PRO — 出題目，Studio 配圖
- #58 教師數位備課教案小幫手 — 教案到試卷的上游
- #99 考試卷生圖 Studio — 本篇主角
適用對象
- 國小各年級任課老師（特別是英語、社會、自然、數學）
- 出學習單 / 試卷頻率高的導師
- 校園印表機只有黑白的學校
- 想讓試卷有畫面感、又不想花錢買圖庫的老師
- 帶低年級、希望「試卷可塗色」的老師
- 想學 AI Prompt 寫法的老師（看 Studio 自動生的 Prompt 學）
想試試？
進去後直接點任一範例下方的「↑ 載入」，4 欄位自動填好，按「生成兩張線稿」感受 20 秒出圖。試完再改成你今天備課要用的情境，整個流程不超過一分鐘。
每天免費額度 5 次（10 張圖），把握黃金備課時間。