# Tw Stu Concept Viz
> 將學科抽象概念轉化為互動式視覺化圖形，幫助台灣中小學生建立直觀理解。 產出 HTML Artifact（互動圖形，可懸停、點擊）搭配理解驗收問答。 支援概念地圖、流程圖、時間軸、比較矩陣、因果關係圖等多種圖形類型。 當使用者提及「畫個圖幫我理解」「我看不懂這個概念」「概念地圖」 「視覺化」「幫我畫流程圖」「用圖解釋」「抽象概念」「關係圖」時觸發。 分類：K-12 學習（tw-stu-*）
- Skill: `fw1201/tw-stu-concept-viz` (Agent Skill)
- Install (CLI): `npx skillmds@latest add fw1201/tw-stu-concept-viz`
- Raw SKILL.md: https://api.skillmd.com/api/skills/fw1201/tw-stu-concept-viz/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: fw1201 (https://skillmd.com/u/fw1201)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/fw1201/tw-stu-concept-viz
---
# 抽象概念互動視覺化問答 v1.0
## 核心理念
「**圖形是思考的快捷鍵。**
看懂圖，才代表真正理解了概念之間的關係。
但看圖之後，你還要能「說」出來，才是真的會了。」
---
## Step 0：讀取前置文件
1. `references/visualization_types.md` — 視覺化圖形類型指南
2. `references/tw_curriculum_concepts.md` — 台灣課綱重要概念庫
3. `../../tw_edu_concept_alignment.md` — 概念對齊協議
---
## Step 1：概念對齊確認卡
```
╔══════════════ 概念對齊確認 ══════════════╗
📌 任務：抽象概念視覺化 + 理解驗收
🎯 目標：先看圖理解，再用問答確認真的懂了
👤 學生狀況：（待確認）
⚠️ 流程：視覺化 → 解說 → 5 題驗收問答
請告訴我要視覺化的概念：
╚═══════════════════════════════════════════╝
```
---
## Step 2：概念分析與圖形類型選擇
### 概念類型 → 最佳圖形匹配
```
流程/步驟概念：
例：光合作用、消化系統、立法流程
→ 流程圖（Flowchart）
→ HTML：SVG 箭頭流程圖
因果關係概念：
例：溫室效應、經濟循環、生態系統
→ 因果關係圖（Causal Loop）
→ HTML：有向圖（DAG）
比較/對比概念：
例：動植物細胞比較、民主 vs 威權、文言 vs 白話
→ 比較矩陣 / 韋恩圖
→ HTML：交互式韋恩圖
層次/分類概念：
例：生物分類、詞性分類、地理行政區
→ 樹狀圖（Tree Diagram）
→ HTML：可展開/收合的樹狀結構
時間/歷史概念：
例：台灣歷史年表、地質年代、文學發展史
→ 互動時間軸
→ HTML：可點擊的 Timeline
關係網絡概念：
例：文章人物關係、食物鏈、政治派系
→ 關係網絡圖（Network）
→ HTML：節點連線圖（可拖拉）
```
---
## Step 3：HTML 視覺化生成
根據概念類型，生成完整 HTML Artifact：
### 技術規格
```html
[概念名稱] 視覺化
```
### 視覺化生成後的說明文字格式
```
## [概念名稱] 視覺化說明
### 圖形解讀指南
1. 用滑鼠懸停在 [元素] 上，可以看到詳細說明
2. 點擊 [節點/箭頭] 可以展開/收合子概念
3. 圖形中的顏色代表：[藍色 = ..., 紫色 = ..., 橘色 = ...]
### 核心關係說明
（3-5 句話解釋圖形中最重要的連結）
### 常見誤解提醒
（學生最容易搞混的地方）
```
---
## Step 4：理解驗收問答（5 題固定流程）
視覺化生成後，**強制進行 5 題驗收問答**：
```
視覺化完成！現在讓我來考考你，確認你真的看懂了：
第 1 題（記憶層次）：
「在剛才的圖裡，[X] 和 [Y] 的關係是什麼？
直接看圖回答就好。」
第 2 題（理解層次）：
「圖中顯示 [A] 會導致 [B]，
你能用自己的話解釋這是為什麼嗎？」
第 3 題（應用層次）：
「如果 [條件改變]，圖中哪個部分會跟著改變？」
第 4 題（分析層次）：
「圖中有沒有什麼是你覺得奇怪或不理解的地方？」
第 5 題（創造層次）：
「你能想到一個現實生活中的例子，
符合這個圖所表達的概念嗎？」
---
每題作答後，AI 依蘇格拉底模式引導，不直接評分，
而是繼續追問直到學生建立完整理解。
```
---
## Step 5：圖形類型範例庫
### 範例：光合作用流程圖（自然科）
```
互動元素：
- 點擊「太陽」→ 展開光能說明
- 點擊「葉綠體」→ 顯示細胞結構
- 懸停「CO₂」→ 顯示來源說明
- 懸停「O₂」→ 顯示去向說明
- 進度條顯示反應步驟
```
### 範例：韋恩圖（文言文 vs 白話文）
```
互動元素：
- 左圓 = 文言文特徵（點擊顯示例句）
- 右圓 = 白話文特徵（點擊顯示例句）
- 交集 = 共同特徵（懸停顯示說明）
```
### 範例：台灣歷史互動時間軸
```
互動元素：
- 可拖拉縮放的時間軸
- 點擊事件節點 → 彈出卡片（事件說明、重要性、影響）
- 顏色區分朝代/政權
- 側邊欄顯示當前視窗的時代背景
```
---
## Step 6：搭配建議
```
💡 最佳搭配：
tw-stu-concept-viz + tw-stu-socratic
使用流程：
1. 用 tw-stu-concept-viz 建立視覺化理解
2. 用 tw-stu-socratic 進行深度問答追蹤
→ 一個給「圖像記憶」，一個給「邏輯理解」
```
---
## 降級方案（無 HTML 支援時）
- 輸出 Mermaid 語法（可在 Obsidian/Notion 中渲染）
- 輸出 ASCII 圖形
- 提供 draw.io / Excalidraw XML 格式