Day09：做一台會生學習單的機器

回顧昨天（C004：如何獎勵乖小孩一份運筆練習），我們提到了主要的問題點在於

• 練習本買了用不完
• 自己做又做不完

而且就連請 AI 直接生幾張也不是最划算的選擇
因為今天剛練完，明天又重來

所以我們不請 AI 直接幫我們做學習單
那要請它做什麼呢？

是的
與其要一張一張的學習單
不如要一台會生學習單的機器

對不起了孩紙，希望你不會因此在半夜難過的唱出

咳咳，扯遠了
還是回頭來看一下

這是一個什麼工具？

用起來大概是這樣
今天老師說要練 A、K、N、T，左邊點一點
覺得小孩的 4 和 9 老是寫反，再加進來
想讓她先描再自己寫，就選「越往右越淡」
然後按一下匯出，印出來的就可以讓他今天練習

不過這次我選擇製作的工具不同了
那...

這次為什麼是 Claude Code 呢？

主要因為覺得這東西之後可能會部署出來
然後覺得靜態 HTML 單一頁面就夠了

再加上考慮參考資料的數量和來源（要從教育部去抓各種注音的寫法筆順等）
所以這邊主要是用 Claude Code 做會比較方便調整和後續部署

而且這次的主要不是手寫計算的複雜
最主要就是要包含很多功能和設計體驗的部分，所以就先使用規劃模式（Plan Mode）

第一句提示詞是這樣：

我想要製作一個給幼稚園小朋友的，對於基本的英文字母或數字等符號的寫字運筆練習
可能會是一個 HTML 可以在網頁上預覽，然後可以匯出 pdf
幫我思考規劃看看有哪些功能可以加入？

Plan Mode 下 Claude 不會直接動手，而是先反問了用戶需求

你想要哪一種產品形式？

• 互動產生器：左側控制面板即時調整、右側 A4 預覽，可重複產生各種不同學習單
• 固定範本：我直接幫你排好幾張現成學習單，不需自己調設定

做起來快嗎？改起來呢？

也很快
而且因為 Claude Code 的話
它可以自己直接開網頁去測試功能和畫面
就省下很多自己人工測試的時間了

Vibe Coding 小技巧：
如果是用本地的 AI Agent 工具的話
開啟 Computer use / Chrome DevTools MCP
可以減少很多自己手動測試的時間
（但會需要考慮 token 消耗量）

從最開始的計畫到最後的畫面，大概十來幾分鐘
中間我回答幾個選擇題

唯一就是小調整一些地方
就是我自己第一次試用之後的細節調整
當下的回饋文字是

我看了一下，以下有問題

* 大寫 U 看起來像是小寫的 u
* 小寫字母很多看起來都很奇怪
* 筆順標記有些地方會蓋住本來的字或是重疊

前兩個的原因是字體
讓 Claude 換了一個字體就好了

第三個是擺編號的規則
後來它改成把編號推到字的外面、彼此不重疊就解決了

如上
這就是做「工具」而不是做「成品」的差別
如果我手上是一疊做好的 PDF，這三個問題就得一張一張重來
現在是改一次，之後就都能受益

從 CDD / Vibe Coding 的角度來看，這次的價值在於？

工具的價值

需求每天都在變
而工具不用重做
點一點就生出今天要的那張

工具的成本

從決定要做到能用，大概一個多小時不到
而且大部分時間我只是在旁邊放著

真正貴的是筆順
這部分

• 教育部的筆順系統有注音
• 英文字母根本沒有公認的標準筆順資料

所以會需要一些額外的處理和轉換

工具的極限，容易遇到嗎？

這次的話，過程中就遇到了2個侷限

• 字體
• 筆順

這些東西都屬於是 AI 擅長的領域（aka 純程式撰寫）以外的實際生活經驗部分
也算是人類目前還能展現價值的部分吧

結語

與其一張一張做學習單
不如做一台會生學習單的機器

授人以魚，不如授人以漁

這算是一種工程師父親的『無限劍製』嗎（？

C004 也在此告一段落～