前幾天，我終於建立了「泰語小旅伴」的第一個專案，也從 file:// 的問題認識了 localhost，開始知道開發網頁時該怎麼把專案跑起來。

不過，目前的成果其實還很陽春。

打開網頁後，只有「泰語小旅伴」、「Thai Buddy」和一段簡單的歡迎文字。雖然已經能正常顯示，但距離我想像中的泰語學習 App，還有一段距離。

圖 1：泰語小旅伴最初的歡迎畫面，當時還沒有課程卡片、學習進度與底部導覽。

所以今天的目標很明確：先把首頁做出來，讓它看起來更像一個可以在手機上使用的 App。

但這次我不打算直接叫 Codex「幫我設計一個漂亮的首頁」，而是先和 ChatGPT 討論，首頁到底需要有哪些東西。

首頁不只是好看，還要讓使用者知道能做什麼

前面 Day 2 已經決定，「泰語小旅伴」主要是給泰語零基礎到初學者使用，內容以旅遊情境為主。

既然如此，使用者打開 App 後，應該要能很快知道這是什麼工具，以及可以從哪裡開始學習。

因此，我先和 ChatGPT 整理首頁需要的內容，最後決定包含幾個主要區域：

• 品牌名稱
• 歡迎區
• 開始學習按鈕
• 五個情境課程
• 學習進度
• 底部導覽列

歡迎區會放上「สวัสดี 👋」和「今天學一句實用泰語吧！」，讓首頁不只是顯示專案名稱，也能帶出泰語學習的感覺。

情境課程則沿用 Day 2 規劃的五個分類：基本問候、購物、餐廳點餐、咖啡店，以及交通問路。

這樣整理之後，首頁的結構就比較清楚了。除了讓使用者知道有哪些課程，也要能看出從哪裡開始，以及之後可以在哪裡查看學習進度。

先做靜態首頁，不急著加入功能

討論首頁時，我們也決定這次先不要做真正的互動功能。

例如，首頁可以先顯示「開始學習」按鈕，但不代表今天就要完成點擊後的操作；五張情境課程卡片可以先出現在畫面上，也不代表五個課程都已經完成。

學習進度同樣先使用靜態資料呈現，不急著加入真正的紀錄功能。

對現在的我來說，這樣比較容易驗收。因為今天只需要確認首頁的內容和版面是否符合需求，不用同時檢查課程切換、測驗、發音和進度計算。

所以這次的目標可以再縮小成一句話：

先完成首頁畫面，互動功能留到後面逐步加入。

這也延續了 Day 3 討論的開發方式：一次只交給 Codex 一個範圍明確的任務。

把首頁需求交給 Codex

需求整理好之後，接著才交給 Codex 實作。

這次的工作主要是把原本簡單的歡迎畫面，改成手機 App 式的首頁，加入前面討論好的品牌、歡迎區、課程卡片、學習進度和底部導覽。

根據 Codex 的工作紀錄，這次實際修改的檔案只有兩個：

index.html
css/style.css

index.html 負責加入首頁需要的內容與結構，style.css 則負責調整畫面的外觀和排列方式。

至於下面兩個檔案，這次沒有修改：

js/app.js
data/lessons.js

這也剛好對應到 Day 4 學到的概念。

今天主要是在調整畫面內容和外觀，還沒有加入真正的課程互動，也沒有開始建立教材資料。

第一次看到 Codex 的修改範圍，我也比較能理解，為什麼前面要先搞清楚每個檔案的用途。

至少現在看到它只修改 HTML 和 CSS，我就知道這次主要是在處理首頁畫面，而不是新增 JavaScript 功能。

第一版首頁完成了

Codex 完成修改後，我實際打開首頁，並且將畫面截圖貼回 ChatGPT 討論。

這次看到的內容比原本豐富許多。

除了品牌名稱和歡迎區，首頁已經有「開始學習」按鈕、五個旅遊情境、學習進度和底部導覽列，整體也採用手機優先的版面，延續先前決定的淡藍色設計方向。

圖 2：Codex 完成的第一版手機式首頁，已經有五個旅遊情境、靜態學習進度與底部導覽，但目前還沒有真正的課程互動功能。

和最初的歡迎畫面相比，現在已經有了比較完整的 App 首頁結構。

不過，我也提醒自己：畫面看起來完整，不代表功能都已經完成。

目前的課程卡片、學習進度和底部導覽，大部分都還只是靜態畫面。今天的驗收目標是確認它們有沒有正確顯示，而不是把整個 App 當成已經做完。

回頭看，Codex 也曾做了我沒要求的內容

整理這次的首頁開發過程時，我也注意到最初建立專案時的一個小地方。

回頭看第一張截圖，畫面上方有一行紅色的泰文「สวัสดี」。

這其實不是最初建立專案的 Prompt 明確要求的內容，而是 Codex 自行加入的。

雖然它看起來和泰語學習 App 很搭，後來我們也確實在新版首頁規劃了泰文歡迎語，但這仍然讓我注意到一件事：

AI 可能會根據它對需求的理解，自行補上一些內容。

這些內容不一定有問題，但也不能因為畫面看起來不錯，就直接認為它完全符合原本的要求。

所以驗收時，我需要回頭對照一開始討論好的需求，而不是只看最後的畫面漂不漂亮。

這也是目前使用 AI 開發時，我正在練習的事情。

今天到底驗收了什麼？

這次完成首頁後，我主要確認的是畫面上的內容有沒有正確出現，包括品牌名稱、歡迎區、開始學習按鈕、五個情境課程、學習進度和底部導覽列。

這些內容都可以從當時貼回的首頁截圖確認。

至於按鈕能不能真的切換畫面、課程資料能不能正常顯示，以及學習進度會不會更新，都還不在今天的驗收範圍內。

因此，這次的結果應該是：

第一版靜態首頁已經完成，並且確認主要畫面內容有正常顯示。

剩下的互動功能，之後再一個一個加入。

這樣也讓我比較清楚知道，目前到底完成了什麼，還有哪些事情只是先放在畫面上。

今天學到什麼？

今天最大的收穫，是開始理解「做畫面」和「做功能」可以分開處理。

原本只是想著要把首頁做出來，但和 ChatGPT 討論後，我們先確定需要哪些內容，再把範圍限制在靜態畫面，最後才交給 Codex 修改。

這樣不但比較容易知道這次要做什麼，也比較容易驗收。

而且透過實際修改，我也再次看到 HTML 和 CSS 的分工：一個處理內容與結構，另一個處理外觀與版面。

目前的「泰語小旅伴」終於有了比較完整的首頁，但這也代表專案開始累積更多程式碼和檔案修改。

接下來，我開始需要思考另一個問題。

如果今天的首頁已經確認正常，之後又請 AI 繼續修改，結果不小心把原本的東西弄壞了，該怎麼辦？

有沒有辦法先把現在這個可以正常運作的階段保存起來？

下一篇，就來記錄我第一次接觸 Git，以及怎麼開始替「泰語小旅伴」保存版本。