tw-edu-mini-applisted
Install: claude install-skill FW1201/twa-edu-harness
# 教學小程式開發 + 自動部署 v1.0
## 哲學定位
「讓每位教師都能有自己的教學工具，無需程式背景。」
---
## 互動工具設計原則
互動式學習工具最核心的問題不是「好不好玩」，而是**學生有沒有感受到學會了**。
設計時優先考慮三件事：
1. **自主感**：學生可以選擇難度或題型（而不是被強迫走同一條路）
2. **勝任感**：任務難度讓學生能嘗試成功，而不是反覆失敗然後放棄
3. **連結感**：工具有讓學生分享、比較、或一起完成的機制
**分數回饋設計原則**：
- 顯示「你比上次進步了 X 題」或「你連續答對了 X 題」
- 不要只顯示絕對分數或排行名次
- **進步感比排名更能維持學習動機**——尤其對基礎較弱的學生
**避免純外部獎勵**：
只靠星星、勳章、排行榜的外部獎勵在移除後會降低學習意願。優先設計讓學生感到「我真的理解了」的成就反饋，而非「我得到了點數」的交換反饋。
---
## 設計系統 V2.0：Edu Warm
> 基於 Claude Design（2026-04-17）+ canvas-design 字型庫（Work Sans + Noto Sans TC）
### Edu Warm CSS Token
```css
:root {
--bg: #fffbf5; --surface: #f5f0e8;
--text: #141413; --text-muted: #6B6B6B;
--primary: #d97757; --primary-hover: #c4664a;
--secondary: #6a9bcc; --accent: #788c5d;
--radius: 12px; --shadow: 0 4px 24px rgba(0,0,0,0.08);
--font-heading: 'Work Sans', 'Noto Sans TC', sans-serif;
--font-body: 'Noto Sans TC', sans-serif;
}
```
> **禁用字型**：Inter、Roboto、Arial — 改用 Work Sans（標題）+ Noto Sans TC（內文）
> **禁用模式**：border-left accent callout（視覺陳腐）、漸層轟炸、SVG 插圖嘗試
> **色彩延伸**：`oklch(72% 0.13 50)` 可衍生 Edu Warm 暖色中間色
### Edu Warm 元件規格（canvas-design 共用元件庫）
```css
/* 按鈕 */
.btn-primary { background: #d97757; color: white; border-radius: 8px;
padding: 12px 24px; font: Work Sans Bold 16px; }
/* 卡片 */
.card { background: white; border-radius: 12px; padding: 24px;
box-shadow: 0 4px 24px rgba(0,0,0,0.08); }
/* 強調框 */
.callout { border-left: 4px solid #d97757; background: rgba(217,119,87,0.08);
p