昨天先把智慧學習卡裡的角色分成了兩種：

Creator：建立、確認與修改 Learning Card
Learner：真正使用 Learning Card 學習的人

Google AI 則負責根據學習需求，產生：

Learning Card Draft

角色分好了，流程也有了。

但現在還有一個很實際的問題：

所以一張 Learning Card 到底要長什麼樣子？

如果連自己都還不知道卡片裡應該放什麼，就算把需求丟給 Gemini，大概也只能請它自由發揮。

所以今天先完成最後一項準備工作：

設計第一版 Learning Card。

從最簡單的學習卡開始

如果想到最傳統的 Flashcard，結構其實非常簡單。

例如英文單字卡：

┌─────────────────────┐
│                     │
│        Apple        │
│                     │
│        蘋果          │
│                     │
└─────────────────────┘

或者最經典的：

正面：問題
背面：答案

這樣的設計很適合背單字或記憶知識。

但這次想做的 Learning Card 稍微不太一樣。

除了讓 Learner「看到一個知識」，我還希望卡片可以多一點簡單的互動：

認識 → 理解 → 想一下

因此第一版除了主題和說明之外，我想再加入一個簡單的問題。

一張卡片需要哪些內容？

先不考慮畫面長什麼樣子，我希望第一版 Learning Card 至少包含以下幾種資訊。

Title

首先一定要知道：

這張卡片在學什麼？

例如：

🐙 章魚

也可能是：

useMemo

或者：

boarding pass

Learner 看到卡片時，應該可以很快知道這張卡片的學習主題。

所以 Title 會是整張 Learning Card 最主要的資訊。

Content

只有標題當然還不夠。

接下來需要一段簡短的：

Content

用來說明這個主題。

例如：

🐙 章魚

章魚有八隻腕足，身體柔軟，可以生活在海洋中。

如果換成程式知識：

useMemo

React Hook，用來快取計算結果，避免不必要的重複計算。

這裡我希望先遵守一個原則：

不要把一整篇文章塞進一張卡片。

畢竟選擇 Learning Card 的原因，就是希望把知識拆成比較容易閱讀的小單位。

如果最後一張卡片塞了五百字，好像就失去做成卡片的意義了（笑）。

所以 Content 先以：

簡短、聚焦、容易理解

為主要方向。

Question

接下來，我不希望 Learner 只是：

看完 → 滑掉 → 下一張

所以想在每張卡片加入一個簡單的：

Question

例如：

🐙 章魚

章魚有八隻腕足，
身體柔軟，可以生活在海洋中。

────────────

💭 想一想

章魚有幾隻腕足？

這個 Question 不一定要是一道正式考題。

也可以只是讓 Learner 在閱讀內容之後：

停一下，想一下。

至少不要變成：

看卡片 → 下一張 → 看卡片 → 下一張 → 全部看完 → 我剛剛到底看了什麼？

好像有點熟悉（笑）。

Answer

既然有 Question，很自然就會需要：

Answer

例如：

Q：章魚有幾隻腕足？

A：八隻。

之後在 UI 上，不一定要一開始就把答案直接顯示出來。

也許可以設計成：

查看答案
↓
顯示 Answer

不過這是之後寫前端時再處理的事情。

目前只需要先確定：

Learning Card 裡需要有 Answer。

圖片呢？

如果是幼兒認知卡，圖片其實滿重要的。

理想中的卡片可能會是：

┌─────────────────────┐
│                     │
│      [章魚圖片]      │
│                     │
│        章魚          │
│                     │
│  章魚有八隻腕足。      │
│                     │
│  💭 章魚有幾隻腕足？   │
│                     │
│     [ 查看答案 ]     │
│                     │
└─────────────────────┘

但只要加入圖片，馬上就會多出很多問題。

圖片從哪裡來？

使用者上傳？

從網路取得？

還是讓 AI 產生？

如果是 AI 生成圖片，又需要考慮圖片是否符合教材內容。

想到這裡，我決定先踩煞車。

第一版先使用最簡單的：

Emoji

例如：

🐙 🐘 🍎 ✈️ 🌍

既可以讓卡片有一些視覺元素，也不用現在就跳進另一個坑。

真正的圖片功能，等核心流程完成之後再回來研究。

第一版 Learning Card

整理完之後，第一版 Learning Card 大概會長這樣：

┌────────────────────────┐
│                        │
│           🐙           │
│                        │
│          章魚           │
│                        │
│  章魚有八隻腕足，         │
│  身體柔軟，可以生活       │
│  在海洋中。              │
│                        │
│  ───────────────────   │
│                        │
│  💭 想一想              │
│                        │
│  章魚有幾隻腕足？         │
│                        │
│     [ 查看答案 ]         │
│                        │
└────────────────────────┘

如果先不管 UI，只看內容，目前需要的其實只有五個部分：

Emoji
Title
Content
Question
Answer

第一版就先這樣，簡單一點。

不同的學習內容真的能共用嗎？

這裡其實還有一個問題。

如果是幼兒認知：

Emoji + Title + Content + Question + Answer

看起來滿合理的。

但如果是英文單字呢？

可能還會想加入：

Translation
Example Sentence

如果是選擇題：

Options

如果是程式學習：

Code Example

如果現在開始替每一種情境增加欄位，很快又會回到前幾天遇到的問題：

功能越想越多。

所以目前先不處理所有可能性。

第一版只保留最基本、看起來比較能共用的五個部分：

Emoji / Title / Content / Question / Answer

後面真的遇到不夠用的情況，再根據實際測試結果調整。

比起現在坐在這裡猜 Gemini 需要什麼，我更想直接把這個版本丟給它看看。

Day 04 小結

今天終於把第一張 Learning Card 畫出來了。

目前第一版的內容是：

Learning Card
├── Emoji
├── Title
├── Content
├── Question
└── Answer

圖片第一階段先使用 Emoji，真正的圖片功能之後再處理。
概念先到這裡，從明天開始，正式進入實作。

第一次打開 Google AI Studio，把今天設計的 Learning Card 交給 Gemini，看看只靠一段 Prompt，它到底會產生什麼結果。

Day 05｜第一次打開 Google AI Studio：讓 Gemini 產生第一張學習卡