用 AI 做第一個小工具：英文單字卡
先完成一張能翻的卡片，再看看單字、跟讀與模擬測驗怎麼一步步長出來
來到第 30 天，我不想再塞給你一個全新的名詞了。前面聊過 AI、前端、後端、Git、部署和資安，不是要你全部背起來才准開始，而是希望你想做東西時，大概知道自己走到哪一步，卡住時也知道可以往哪裡找答案。
所以最後一篇就別再只聊名詞了，我們直接做個小工具吧。題目很小：一張可以看英文、翻開中文、換下一張的單字卡。 不用先做成完整學習平台，也不用為了六個單字架一套資料庫。把它做出來、自己真的按過，再讓別人也打得開，這一輪就算完成。🙂
先說清楚，這只是本文的教學範例，不是口袋單字王的早期版本。後面我會再帶你看看，我自己因為想學英文，最後真的做出了哪些工具。
第一步：先把「做完」講清楚
先別想太多，我們就放六個示範單字，也先不要接外部 API。畫面上有英文、「翻開中文」、「下一張」，再告訴使用者現在是第幾張，這樣就夠了。
按下翻開後，顯示中文和一個短例句；換到下一張時，答案要自己收起來。一路按到最後一張，再按一次，就回到第一張。
接著把這一版不做什麼也寫下來：不登入、不接資料庫、不加語音，也不保存進度。重新整理後就從第一張開始。
這不是偷懶，而是先替第一個版本畫一條終點線。要是現在就加上記憶曲線、會員帳號和九種發音角色，光討論規格大概又能再辦一屆鐵人賽。😅
單字資料可以先直接放在 JavaScript 裡，長得像這樣：
const words = [
{ english: "practice", chinese: "練習", example: "I practice English every day." },
{ english: "repeat", chinese: "重複", example: "Please repeat the sentence." },
]你可以把它想成一張很小的資料表：一列是一個單字，裡面放英文、中文和例句。網頁一打開就已經有這些資料，不用先去問後端。
這時前面聊過的前端三層和網站是否需要後端就派上用場了：網站會動，不代表第一天就一定要有資料庫。
第二步：請 AI 動手，但先限定這一輪
如果你手上的 AI Coding 工具可以讀取資料夾，先建立一個空的新資料夾，再把下面這段需求交給它。這次只用原生 HTML、CSS、JavaScript，不急著加框架；等需求真的變大，再考慮 Vite 也來得及。想先看看怎麼把需求說清楚，可以回頭看提示詞那篇。
請在目前這個空資料夾，做一個「我的第一個英文單字卡」。
只用 index.html、style.css、app.js，不要安裝套件，也不要加登入、資料庫、API Key 或語音。
先放 6 個示範英文單字，每個有英文、中文和短例句。
畫面要能顯示目前第幾張。按「翻開中文」顯示答案，再按一次可收起。
按「下一張」切換單字並收起答案；最後一張之後回到第一張。
手機畫面也要能正常閱讀和按按鈕。重新整理後從第一張開始。
先告訴我你準備建立哪三個檔案、怎麼確認功能正確，再開始修改。
完成後請在本機打開網站，實際按過翻卡與下一張，回報你測到的結果。
這次先不要建立 GitHub 儲存庫，也不要部署網站。這段看起來有點囉嗦，不過每一句都有用。「只用三個檔案」是在控制規模；「最後一張回到第一張」是在補邊界情況；「本機實際按過」則是要它交出可以檢查的結果。
如果 AI 一轉頭就幫你加了會員系統，先不用急著感謝它做得真多。直接請它回來，把這一輪說好的小目標完成就好。
第三步：不要只看「完成了」，自己玩一次
下面這份範例就是照著剛才的範圍做的，而且我真的有打開來按。圖片也不是 AI 想像出來的介面：一開始只看到英文，按下「翻開中文」後，才會出現答案和例句。
如果 AI 做的是這種三個檔案的靜態網頁，先在自己的電腦打開 index.html 就能試。這時先別急著讀每一行程式，把自己當成第一次來的使用者，直接開始按：
- 點「翻開中文」，有沒有出現對應的中文和例句？再點一次會不會收起？
- 點「下一張」，英文、中文和張數有沒有一起變？上一張的答案有沒有收起來？
- 一路點到最後一張，再點一次會不會回到第一張？
- 用手機寬度看一次，按鈕會不會擠在一起？重新整理後是否回到第一張？
這份範例我已經從第一張點到最後，再一路回到第一張，也試過重新整理後會重新開始。它沒有保存進度，所以當然還不是完整的背單字工具；不過第一版答應要做的事情，都做到了。
如果哪一項不對，就把現象直接講給 AI 聽。例如「第六張按下一張時畫面空白」，一定比只丟一句「壞掉了」更容易修。
做到這裡，你其實已經把前面學過的東西串起來了：HTML 放畫面內容，CSS 管排版和顏色，JavaScript 決定按鈕點下去之後要顯示哪個字。那些散在前面文章裡的名詞，現在終於一起動了起來。
第四步：保存版本，再讓別人也打得開
本機能打開，只代表你的電腦看得到。想丟網址給朋友，這時才輪到 Git 和部署。
因為這份範例只有靜態的 HTML、CSS、JavaScript，先走最簡單的路就好：把三個檔案放進準備公開的 GitHub 儲存庫，再用 GitHub Pages 發布。推上去以前，記得先看一次 Git 差異，確認沒有把 .env、金鑰、個資或其他不該公開的檔案一起送出去。[1]
Git、GitHub 和 Pages 的操作畫面，前面已經在版本控制、GitHub和免費架網站幾篇走過，這裡就不重播每一個按鈕了。
這次只記得三件事：推對資料夾、選對發布分支、拿到公開網址後真的打開並按一次。
如果你已經在用 Vite，也可以繼續用它做本機開發，再把建置後的 dist 交給部署平台。只是 GitHub Pages 的專案網址通常還要注意 base 路徑。
這篇故意只用三個原生檔案，是想讓第一個成果少一層設定，不是說 Vite 沒用了。選工具要看現在的需求，不是把這 30 天出現過的工具全部塞進同一個專案。[2]
網站放上去後，也別忘了上一篇聊過的資安習慣：公開前看一下資料和權限，出了問題也要知道怎麼回頭修。第一個工具不用完美，但你至少要知道自己公開了什麼。
迷你卡片做完，再問：我還想練什麼？
上面的單字卡是給你練習的，不是我下面兩個產品的「第一版考古現場」。我自己是因為真的想學英文，後來做出了口袋單字王和英文跟讀。它們在解決不同問題，也不是把今天的小範例多加幾顆按鈕，就突然變成完整平台。
先看口袋單字王。一開始，我只是想知道自己大概認得多少單字；真的開始用之後，又會想安排每天要學什麼、把例句聽清楚，甚至試試自己能不能撐過一回有時間壓力的測驗。功能就是這樣一塊一塊長出來的。
背完單字，我又想知道自己到底會不會
最近我又替口袋單字王加了模擬測驗。現在有多益、IELTS 學術組題型和 TOEFL iBT® 題型，各有 4 份迷你卷。
這次我在意的也不只是「有題目可以寫」而已。考試會照時間倒數，聽力錄音會限制播放次數。要開始考得先登入，這樣做到一半的進度才留得住；交卷後，也可以看本站估算的分數和逐題解析，回頭找自己到底卡在哪裡。
換句話說，原本那張只會翻面的單字卡，慢慢長出了另一個問題的答案：我背了這些東西，真的會用嗎？
當然，迷你卷不是官方考試，題數、流程和分數換算也不會和正式考試完全一樣。我比較希望你拿它來熟悉題型、練時間感、找出弱點，而不是把估算分數當成正式成績。
發音這件事，我有點龜毛
我想學英文，所以不只希望畫面能顯示單字，也希望發音聽起來舒服一點。口袋單字王的例句語音，會先用本地端的算力逐句產生音檔，再把音檔放到 Cloudflare R2，讓網站需要時直接拿來播放。這是口袋單字王的做法；英文跟讀的 YouTube 影片原音不是走同一套流程。
這張圖比第一版單字卡多了好幾個步驟，也剛好說明一件事：不是因為「AI 很會」就把新技術硬塞進去，而是需求真的走到這裡了。
R2 在這裡就是放音檔的倉庫。想更清楚分辨它和 Worker、D1 各自在忙什麼，可以回頭看前面那篇 Cloudflare 分工。但今天這張入門單字卡，完全不用扛這些工作。
想練聽說，我又做了另一個工具
另一個英文跟讀工具是從影片出發。貼一支有英文字幕的 YouTube 影片，它會把字幕切成一句一句，讓你重播、放慢，再錄下自己的聲音跟原句對照。現在也可以依程度挑影片，還有句子排序和拼字練習。
它處理的是另一種學習情境，所以別把它的影片原音，和口袋單字王在本機產生的例句音檔混在一起。
我想學英文，所以後來做出的不只一種工具。功能雖然比今天這張單字卡多很多，背後的做法其實沒有變：練習時哪裡不順手，下一個版本就先處理那件事。
要先解決哪個問題、發音做到什麼程度才算好，不能全部丟給 AI 決定。AI 可以幫我寫程式、整理內容、批次處理和測試，但最後我還是得自己打開工具，看看它到底有沒有幫上忙。
30 天後，帶走一個能繼續走的方法
如果你真的跟著做完一張單字卡，手上就已經有一個可以點、可以翻、也可以分享的小作品。它可能沒登入、沒資料庫，也沒有漂亮的語音；沒關係。先把第一版做完，比第一天就規劃十種進階功能重要得多。
從 Day 1 到現在，我真正想說的從來不是「AI 會幫你做好所有事」。比較像是：先找一件自己在意的小事，告訴 AI 這次做到哪裡，讓它幫忙實作。接著看修改、動手試、修掉錯誤、保存版本，最後再決定要不要分享給別人。作品真的長大了，再把新技術一項一項接上去。
所以 30 天結束後，不用急著再蒐集 30 個工具名稱。回頭問自己：現在這個小工具，我明天還會想打開嗎？ 如果會，先把它留下來；如果哪裡不好用，就從那裡開始做第二版。這會比做出一個功能很多、自己卻不想再碰的專案，還更像真正的 AI Coding。🚀
GitHub Docs，Quickstart for GitHub Pages。 ↩︎