kids-english-teacher

根據上傳的小朋友英語作業圖片，自動生成一個完整的互動教學網頁（HTML），包含：單字發音、句子跟讀評分（麥克風）、寫作練習、Phonics 和對話練習。Use when: (1) 用戶上傳小朋友英語作業照片, (2) 用戶說「幫小朋友做英語學習頁」, (3) 用戶說「生成教學網頁」, (4) 用戶說「分析這張作業」並希望做成互動頁面。即使用戶只說「幫我做一個學習頁」並附有圖片，也應觸發此技能。NOT for: 純文字英語練習、成人英語學習、非圖片輸入的一般英語問題。

IfeyChan702@ifeychan702

Install

openclaw skills install @ifeychan702/kids-english-teacher

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

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

整體流程

text

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

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

Step 1：分析圖片

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

必須提取

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

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

對每道 Writing 題：

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

Step 2：規劃頁面內容

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

版塊	內容來源	說明
🐾 單字版塊	圖片中的詞彙	點擊動物/物品聽讀音 + 數字練習
🎤 跟讀評分	主題相關句子	聽→跟讀→麥克風評分
✏️ 寫作練習	Writing 題目	帶針對性錯誤提示的填空
🔤 Phonics	圖片中的目標音	找目標音開頭的單字
🎭 對話練習	主題角色	選角色→多輪對話

Step 3：生成 HTML

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

HTML 模板結構

html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🌟 [主題] English Fun!</title>
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;700;900&display=swap" rel="stylesheet">
<style>
  /* === 完整樣式 - 按主題調整配色 === */
  /* 主題色變量：根據場景替換 */
  /* 動物園: --primary:#87CEEB  農場: --primary:#90EE90  海洋: --primary:#006994 */
  [貼入完整CSS - 見下方 CSS 規範]
</style>
</head>
<body>
  [雲朵/背景裝飾 - 按主題調整]
  
  <div class="container">
    <div class="title">[主題 emoji] [主題名] English!</div>
    <div class="subtitle">[中文副標題] / [英文副標題]!</div>
    
    [星星進度條]
    
    [5個Tab按鈕]
    
    [Tab 1: 單字版塊]
    [Tab 2: 跟讀評分版塊 - 含麥克風]
    [Tab 3: 寫作練習版塊 - 含錯誤提示]
    [Tab 4: Phonics版塊]
    [Tab 5: 對話練習版塊]
  </div>
  
  <script>
    [完整JS邏輯]
  </script>
</body>
</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. 星星系統

javascript

let starCount = 0, MAX_STARS = 10;
function addStar() { /* 點亮下一顆星，集滿觸發 celebrate() */ }
function celebrate() { /* 生成彩帶 confetti */ }

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

javascript

function speak(text, rate=0.82, callback) {
  const u = new SpeechSynthesisUtterance(text);
  u.lang = 'en-US';
  u.rate = rate;
  speechSynthesis.speak(u);
}
// 慢速版本：rate=0.6
// 句子版本：rate=0.78

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

javascript

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

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. 寫作批改

javascript

function checkAnswer(questionId) {
  // 1. 取得用戶輸入
  // 2. 對比正確答案（支持多種正確寫法）
  // 3. 檢測常見錯誤（從圖片分析的錯誤）
  // 4. 顯示針對性反饋
  // 5. 答對 → addStar() + speak(正確句子)
}

E. 對話系統

javascript

// 數據結構
const dialogues = {
  [角色名]: [
    { who:'animal', en:"...", zh:"..." },
    { who:'child', opts:[
      { en:"...", zh:"...", ok:true },
      { en:"...", zh:"...", ok:false, msg:"提示..." },
    ]},
    // ...
  ]
};

function runStep() { /* 驅動對話流程 */ }
function selectReply(opt, btn) { /* 處理選項，答對繼續，答錯給提示 */ }

Step 4：內容填充指南

單字版塊

從圖片提取所有詞彙，每個配上合適的 emoji
加入中文翻譯
數字 1-5（或根據題目數量調整）也要加入

句子版塊（10-12句）

必須包含：

圖片中 Writing 部分的問題句（How many...? What is...?）
正確答案句（There are... / It is a...）
主題相關延伸句（I like... / I can see... / The [animal] is...）
日常用語（Hello! / Goodbye! / I love...!）

寫作批改

對每道題：

javascript

// 正確答案（支持多種寫法）
const correct = ['正確答案1', '正確答案2'];

// 從圖片分析到的小朋友錯誤 → 特定提示
if (val.includes('常見錯誤片段')) {
  // 顯示針對性提示，用中英文解釋
}

提示框格式：

html

<div class="error-note">
  💡 你寫了 "[小朋友的錯誤]" — [用中文解釋錯在哪]！<br>
  [英文]的[複數/時態/拼寫]規則：<b>[正確寫法]</b>！
</div>

Phonics 版塊

目標音字母大展示（動畫）
6個單字：3個是目標音開頭，3個不是（做干擾項）
加一個包含2個目標音的完整句子
提供正常速度和慢速兩個播放按鈕

對話版塊

3個角色可選（來自圖片的詞彙）
每個角色 4 輪對話（1輪 = 動物說 + 小朋友選擇回答）
每輪 3 個選項（1個正確，2個錯誤但有針對性提示）
對話內容要包含圖片中的句型（How many...? There are...）
最後一輪動物說再見

Step 5：輸出文件

將完整 HTML 保存到 /mnt/user-data/outputs/[主題]-english-lesson.html
使用 present_files 工具返回文件給用戶
在回覆中說明：
- 網頁包含哪些版塊
- 找到了哪些作業錯誤並已內置提示
- 下載後用 Chrome 打開，麥克風功能才能正常使用
- 第一次打開時允許麥克風權限

質量檢查清單

生成 HTML 前確認：

所有詞彙都來自圖片（不要憑空添加無關詞彙）
圖片中小朋友的錯誤已被識別並有針對性提示
句子版塊包含作業原題的句型
對話腳本至少使用 2 個作業中的句型
麥克風按鈕有 idle / recording / processing 三種狀態
答對後有 speak() 朗讀正確答案
星星系統連接到所有互動（跟讀85分+、寫作答對、Phonics答對、對話答對）
有「無麥克風」的降級提示（.no-mic banner）
文件名反映主題（例：zoo-english-lesson.html，不要用 learn.html）

主題配色參考

場景	天空色	草地色	強調色	裝飾
動物園	#87CEEB	#5DBB63	#f97316	☀️ 太陽
農場	#FFF4B2	#8BC34A	#f59e0b	🌻 向日葵
海洋	#E0F7FA	#006994	#0284c7	🌊 海浪
學校	#F3E5F5	#C8E6C9	#7c3aed	📚 書本
家庭	#FFF8E1	#DCEDC8	#ec4899	🏠 房子
超市/食物	#FFF3E0	#E8F5E9	#16a34a	🛒 購物車

注意事項

年齡適配：所有文字說明要同時有中文和英文，方便 6 歲小朋友和家長一起使用
字體：標題用 Fredoka One，正文用 Nunito（從 Google Fonts 加載）
離線兼容：字體加載失敗時要有備用字體，核心功能不依賴網路
麥克風：在本地 Chrome 中正常工作；Claude 預覽環境因安全限制無法使用，要告知用戶需下載後在 Chrome 中打開
文件大小：整個 HTML 控制在 60KB 以內（單文件，CSS/JS 都內聯）
不要外部依賴：除 Google Fonts 外，不引用任何外部 JS 庫