前幾天一直都在規劃，今天終於要開始真正做程式了！！

前面已經完成了功能規劃、系統架構和首頁 UI 草圖，所以今天的目標就是把昨天的設計開始變成真正可以開啟的網頁。

一、今天先決定使用什麼技術

目前我決定先用比較基礎的網頁技術來製作：

• HTML：負責網頁的內容和結構
• CSS：負責網頁的外觀、排版和樣式
• JavaScript：之後負責互動功能

因為我希望這個作品可以用瀏覽器開啟，所以先從網頁版本開始會比較適合。
今天先以 HTML 和 CSS 的畫面為主，JavaScript 暫時不需要加入太複雜的功能。

二、第一次請 Codex 幫我建立網頁

前幾天主要是使用 ChatGPT 幫我規劃和討論，今天開始進入實作，我讓 Codex 協助我建立專案的第一版。

** 我下的 Prompt

「請根據以下需求建立一個 AI 保健小幫手的第一版網頁。使用 HTML、CSS 和 JavaScript。首先製作首頁 UI，不需要實作資料庫、AI 或通知功能。首頁需要包含今天日期、今日用藥、喝水紀錄、睡眠紀錄、每日狀況，以及底部導覽列。介面需要簡潔、容易操作，並適合在平板裝置上使用。請將 HTML、CSS 和 JavaScript 分開，並在程式中加入必要的註解。」

我沒有要求 Codex 把所有功能做完，而是給它一個比較明確的範圍。

三、今天實際完成的成果

今天 Codex 根據我的需求建立了第一版的網頁。

目前已經產生了第一個 index.html：

C:/Users/user/Documents/Codex/2026-09-20/
ai-html-css-javascript-ui-ai/outputs/index.html

目前第一版主要是先把首頁的基本架構建立起來，包括：

• 🩺 AI 保健小幫手的標題
• 📅 日期資訊
• 💊 今日用藥區域
• 💧 喝水紀錄
• 😴 睡眠紀錄
• 📝 每日狀況
• 📱 底部導覽列

四、從 UI 草圖到真正的網頁

我覺得今天比較有感的一件事情，就是昨天還只是一張 UI 草圖。

今天變成：

Day 5
UI 草圖
   ↓
Day 6
告訴 Codex 我的需求
   ↓
Codex 建立程式
   ↓
index.html
   ↓
瀏覽器看到真正的網頁

五、我也開始發現「AI 幫忙」不代表什麼都不用管

Codex 幫我產生程式之後，還是需要確認：

• 畫面是不是我想要的？
• 功能的位置對不對？
• 有沒有多出我不需要的東西？
• 之後要修改的地方在哪裡？
• 程式到底是在做什麼？

所以我現在比較希望把 Codex 當成一個開發上的助手，而不是完全把作品交給它。
我提出需求，它完成一部分
如果結果不符合我的想法，再告訴它要怎麼修改。

六、今天的成果：

目前很多功能都只是先把位置留好，還沒有真正加入資料儲存、提醒和 AI。

明天要做什麼？

Day 7｜首頁：讓使用者一眼看到今天的狀態

明天會繼續處理首頁，讓目前比較像靜態畫面的首頁開始變得更完整。

預計開始研究日期、今日用藥、喝水和睡眠等資訊要怎麼呈現，也會開始加入一些可以實際操作的互動功能。