kids-english-teacher — 兒童英語作業 → 互動教學網頁

用戶上傳一張小朋友英語作業照片，Claude 分析圖片內容，然後生成一個完整的互動 HTML 教學網頁，並返回可下載的文件。

整體流程

1. 1. 分析圖片 → 2. 提取內容 → 3. 生成 HTML → 4. 輸出文件

每一步都很重要，不要跳過。

Step 1：分析圖片

仔細看圖片，提取以下信息：

必須提取

• - 主題/場景：圖片的主題是什麼？（例：動物園、農場、學校、家庭...）
• 詞彙列表：圖片中出現的所有英文單字（帶編號標籤的更重要）
• 寫作題目：Writing 部分的問題和小朋友的答案（包括錯誤的）
• Phonics 目標音：本頁練習的字母/發音（例：Z, S, Th...）
• 小朋友的錯誤：仔細對比正確答案和小朋友寫的，找出拼寫錯誤、用詞錯誤、漏字等

分析小朋友的錯誤（非常重要）

• - 正確答案應該是什麼？
• 小朋友寫了什麼？
• 錯在哪裡？（拼寫？用詞？漏字？）
• 怎麼糾正？用什麼方式讓 6 歲小朋友容易理解？

Step 2：規劃頁面內容

根據提取的信息，規劃 5 個版塊：

Step 3：生成 HTML

按照下面的完整模板生成 HTML 文件。所有內容都要根據圖片替換成實際內容。

HTML 模板結構

html










[雲朵/背景裝飾 - 按主題調整]

CSS 規範

必須包含以下樣式組件，按主題調色：

css
/ 1. 背景和裝飾 /
body { background: linear-gradient(180deg, [天空色] 0%, [淺天空色] 38%, [草地色] 38%, [深草地色] 100%); }
.cloud { / 飄動雲朵 / animation: drift linear infinite; }
.sun { / 太陽/月亮/主題裝飾 / position: fixed; top:20px; right:30px; }

/ 2. 星星進度條 /
.star { filter: grayscale(1); transition: all .3s; }
.star.lit { filter: grayscale(0); animation: starPop .4s ease-out; }
.progress-wrap { background: rgba(255,255,255,.3); border-radius:50px; height:9px; }
.progress-bar { background: linear-gradient(90deg,#f97316,#fbbf24); transition: width .4s; }

/ 3. Tab 導航 /
.tab-btn { background: rgba(255,255,255,.35); color:white; border-radius:50px; font-family:Fredoka One,cursive; }
.tab-btn.active { background: white; color: #0369a1; }

/ 4. 卡片容器 /
.card { background: #FFFEF0; border-radius:22px; box-shadow: 0 8px 0 rgba(0,0,0,.12); }

/ 5. 單字卡片 /
.vocab-card { border-radius:14px; cursor:pointer; transition: all .2s; }
.vocab-card:hover { transform: translateY(-4px) scale(1.05); }
.vocab-card.playing { border-color: #f97316; }

/ 6. 跟讀按鈕 /
.rec-btn.idle { background: linear-gradient(135deg,#ec4899,#db2777); }
.rec-btn.recording { animation: recPulse .7s ease-in-out infinite; }

/ 7. 分數顯示 /
.score-bar { transition: width .6s ease; border-radius: 50px; }

/ 8. 對話氣泡 /
.msg.animal .msg-bubble { background: linear-gradient(135deg,#ede9fe,#ddd6fe); }
.msg.child .msg-bubble { background: linear-gradient(135deg,#d1fae5,#a7f3d0); }

/ 9. 答對/錯反饋 /
.feedback.ok { background:#dcfce7; color:#166534; border:2px solid #86efac; }
.feedback.bad { background:#fee2e2; color:#991b1b; border:2px solid #fca5a5; }

/ 10. 彩帶慶祝 /
.confetti-piece { animation: confettiFall 1.5s ease-in forwards; }

JS 核心邏輯規範

必須實現以下功能模塊：

A. 星星系統

B. 語音合成（所有朗讀按鈕）

C. 麥克風跟讀評分（核心功能）

function scoreText(heard, target) {
// 詞語匹配算法：模糊匹配，適合小朋友發音
// 返回 0-100 分
}

function startRecording(idx, targetText) {
// 開始錄音 → 識別 → 調用 showScore()
// 按鈕狀態：idle → recording → idle
}

function showScore(idx, score, heard, target) {
// 顯示：分數、進度條、綠色=說對/紅色=漏掉、聽到的文字
// 85+ 分：🌟 太棒了 + addStar()
// 65-84：👍 很好
// 40-64：💪 再試試
// 0-39：🎤 說大聲點
}

D. 寫作批改

E. 對話系統