讓網頁像樣又好用

1. PHASE 01認識 Vibe Coding 和工具
2. PHASE 02第一次做出東西
3. PHASE 03規劃你的產品
4. PHASE 04做出小店預約
5. PHASE 05上線前要懂的事
6. PHASE 06換成你的點子
7. PHASE 07往商用產品前進

這一課動到：網頁

你現在在這裡：第 4 階段的第四課。上一課客人已經能在網頁上預約，這一課把同一個網頁變得像樣又好用。

怎麼讓網頁像樣又好用？

請 Codex 用做圖功能畫出 logo 和主視覺，放進客人的預約網頁，再統一配色和字體。接著補上三件讓客人不會卡住的事：填錯有提示、額滿的時段看得出來、送出後有成功畫面。最後把瀏覽器縮成手機寬度，確認手機上也好看。

做圖功能：Codex 裡的美術

做圖功能像店裡請來的美術：你用一段話說想要什麼圖，它畫出幾張讓你挑，不滿意就說要改哪裡。Codex 的做圖功能叫 imagegen，提示詞裡寫上 $imagegen，就是明確請它用這個功能。官方說明 ↗

做圖要 ChatGPT 付費方案，每月 8 美元起，免費方案不能做圖。官方價格 ↗沒有付費方案的人，可以先用純文字 logo 或自己準備的圖片，做法寫在操作步驟 1 下面。

logo 和主視覺

logo 像店的招牌圖案，小小一個放在網頁左上角，客人看到就認得是哪家店。主視覺是網頁最上面那張大圖，像店門口的櫥窗，客人一打開就知道這是一間什麼樣的店。

統一配色和字體

配色和字體像店員的制服：全店統一兩三個顏色、一種字，看起來才像同一家店。這一課請 Codex 從 logo 挑出主色，整個網頁的按鈕、標題都用同一組顏色。

手機上也好看

很多客人是用手機預約的。網頁可以像摺疊桌一樣，空間大就攤開排、空間小就收成一排，這種做法的正式名稱是響應式設計（RWD）。你不用懂怎麼做，只要縮成手機寬度，看看有沒有跑掉。

三件讓客人不會卡住的事

好的櫃台人員會提醒「電話少一碼喔」、會說「三點已經有人了，換四點好嗎」、收完預約會跟客人確認一次。網頁也要做到這三件事：填錯有提示、額滿的時段看得出來、送出後有成功畫面。

成果預覽：看起來像一個真的產品

你的 logo、配色和版面不會跟這兩張一樣，做圖每次畫出來的都不同。看得到 logo、顏色一致、三件事都做到，就是做對了。

上課前：準備好這四樣

上一課的預約網頁

第 09 課做好的 shop-booking 資料夾，客人網頁 http://localhost:3000 打得開，而且送出過一筆預約。還沒做出來的話，先回第 09 課做完。

Codex

ChatGPT 桌面 App，打開 shop-booking 資料夾。

做圖

ChatGPT 付費方案，每月 8 美元起。沒有的話，準備一張自己店家的圖片，或先用純文字 logo。

Chrome 瀏覽器

縮成手機寬度檢查時用，下面教你安裝。

這兩步要你自己按

安裝軟體、打開 Docker Desktop，要你自己來。挑哪一款 logo，也是你決定。

步驟 2打開 Docker Desktop，確認客人網頁開得起來

1. 從「應用程式」資料夾打開 Docker Desktop，等它顯示正在執行。
2. 用瀏覽器打開 http://localhost:3000。

做完應看到：第 09 課的預約網頁，選得到服務和時段。

如果網頁打不開：在 Codex 貼上「請把專案的服務都跑起來，跑好後告訴我客人網頁的網址」，等它回報再打開一次。

Windows：在同一個下載頁下載 Windows 版 Chrome，照畫面裝好；Docker Desktop 從開始選單打開。

操作步驟：做圖、換裝、補好用、看手機

步驟 1請 Codex 畫 3 款 logo 讓你挑

1. 在 Codex 貼上下面這段，送出。
2. 點開畫好的圖放大看，挑一款你喜歡的。

$imagegen 請替「小森髮廊」畫 3 款 logo 給我挑。
小森髮廊是社區裡的小髮廊，做剪髮、洗髮造型和染髮，感覺溫暖、自然、乾淨。
圖案用簡單的線條，可以用小樹、葉子、剪刀或梳子；縮小放在手機畫面左上角也要看得清楚。
logo 裡不要放任何文字，店名我會用網頁上的文字排；背景用白色。

複製

做完應看到：對話裡出現幾款 logo，你選好其中一款。

都不喜歡：一次只說一個要改的地方，例如「第 2 款，葉子再大一點，其他都不要變」。一次改太多，畫面容易整個跑掉。

沒有付費方案：改貼下面這段，請 Codex 用文字排一個 logo。想用自己的圖片，就把圖片拖進 Codex 的輸入框，再貼第二段。

我的方案不能做圖。請用網頁的文字和顏色排一個簡單的 logo：店名「小森髮廊」配一個葉子符號，不要用圖片檔。

請把我附上的圖片當作小森髮廊的 logo，存進 web/ 資料夾，後面放進預約網頁時用它。

步驟 2請 Codex 畫主視覺

1. 在同一個對話貼上下面這段，送出。
2. 挑一張你喜歡的。

$imagegen 請替小森髮廊的預約網頁畫一張橫式主視覺，放在網頁最上面。
畫面是明亮、乾淨的小髮廊店內，有木頭桌椅、鏡子和綠色植物，早上的自然光從窗戶照進來。
顏色要和我剛選的 logo 搭。不要人臉特寫，不要任何文字和 logo。

複製

做完應看到：一張寬寬的店內圖，沒有文字、沒有人臉特寫。

沒有付費方案：這一步跳過，下一步請 Codex 用一塊和 logo 同色系的底色代替主視覺。

步驟 3放進網頁，統一配色和字體

1. 貼上下面這段，把「（第幾款）」換成你選的那一款，送出。
2. Codex 改好後，回瀏覽器重新整理 http://localhost:3000。

請把我選的（第幾款）logo 和主視覺存進 web/ 資料夾，放到客人的預約網頁上：logo 放左上角，旁邊用文字寫店名「小森髮廊」；主視覺放在最上面。
再從 logo 的顏色挑一個主色、一個輔助色，整個網頁的按鈕、標題和連結都用這兩個顏色；全站統一用一種好讀的中文字體。
只改客人的預約網頁，後端和資料庫不要動。改完告訴我怎麼看。

複製

做完應看到：網頁上有 logo、主視覺，按鈕和標題是同一組顏色。

圖片顯示成破圖：請看下面的「卡住時怎麼辦」。

步驟 4填錯有提示、額滿看得出來、送出有成功畫面

1. 貼上下面這段，送出。
2. Codex 改好後，自己走一次：姓名空白直接按送出、選一個第 09 課預約過的時段、再正常送出一筆。

請讓客人的預約網頁更好用，做到這三件事：
1. 填錯有提示：姓名沒填、電話不像台灣的手機或市話號碼、Email 格式不對時，不要送出，在那一格下面用紅字寫出哪裡要改。
2. 額滿的時段看得出來：已經有人預約的時段不要直接消失，改成灰色、寫「額滿」、不能點。如果後端現在只回傳還有空的時段，請一起調整。
3. 送出後有成功畫面：寫出「預約成功」，列出這次的服務、日期和時段，再放一個回到首頁的按鈕。
改完請用內建瀏覽器打開 http://localhost:3000 實際走一次，告訴我結果。

複製

做完應看到：填錯送不出去而且有紅字、第 09 課那個時段寫著「額滿」點不了、正常送出後看到成功畫面。

如果 Codex 問能不能打開網站：它要用內建瀏覽器打開 localhost 的網頁時會先問你，確認是 http://localhost:3000 再同意。

步驟 5把瀏覽器縮成手機寬度檢查

1. 用 Chrome 打開 http://localhost:3000。
2. 按 ⌘ + Option + I 打開開發人員工具，點左上角像手機和平板疊在一起的圖示（Toggle device toolbar）。
3. 在網頁上方的尺寸選單選一款 iPhone，從選服務到送出，從頭到尾走一次。

做完應看到：不用左右滑，字看得清楚，時段和送出按鈕手指按得到。

手機寬度跑版：把你看到的問題寫進下面這段，貼給 Codex：

在手機寬度（390 像素寬）打開預約網頁時，（寫出你看到的問題，例如：要左右滑才看得到時段、送出按鈕被擠到畫面外）。請修好，並用 390 像素寬和電腦寬度各檢查一次。

複製

Windows：在 Chrome 按 F12 或 Ctrl + Shift + I 打開開發人員工具，一樣點手機和平板的圖示切到手機模式。

步驟 6用 VS Code 看這一課改了哪些檔案，存一個版本

1. 在 Codex 貼上下面這段，送出。
2. 用 VS Code 打開 shop-booking，在左邊找到 Codex 列出的檔案，例如 web/ 裡的 logo 和主視覺圖片。

請跟這一課開始前的版本比，列出新增和改過的檔案，用白話說每個檔案在做什麼。列完請幫我存一個版本，說明寫「第 10 課：網頁像樣又好用」。

複製

做完應看到：改的檔案大多在 web/ 裡；為了顯示額滿時段，後端的 slots.py 也可能改到，這是正常的。Codex 回報版本已經存好。

成果檢查

成功的樣子：

• 客人網頁左上角有 logo 和店名，最上面有主視覺；按鈕和標題是同一組顏色。
• 姓名空白、電話或 Email 填錯時送不出去，那一格下面有提示。
• 第 09 課預約過的時段顯示「額滿」，點不了。
• 正常送出後，出現寫著服務、日期、時段的成功畫面。
• 縮成手機寬度時不用左右滑，按鈕按得到。

還沒成功的樣子：logo 或主視覺顯示成破圖、填錯照樣送出、額滿的時段還點得到，或手機寬度要左右滑。照下面「卡住時怎麼辦」處理。

每個人的畫面不一樣是正常的，只要上面每一項都做到就好。

卡住時怎麼辦

logo 或主視覺顯示成破圖

多半是圖片沒存進專案，或網頁找圖的位置寫錯了。把這段貼給 Codex：

網頁上的 logo（或主視覺）顯示不出來，只看到破圖。請確認圖片有沒有存在 web/ 資料夾裡、網頁找圖的位置對不對，修好後告訴我改了什麼。

Codex 說不能做圖

免費方案不能用做圖功能。回到操作步驟 1 下面，改用純文字 logo 或自己的圖片，其他步驟照做。

額滿的時段還點得到

第 09 課預約過的時段，在網頁上還是可以點。請先查後端回傳的時段有沒有標出哪些已經額滿，再讓網頁把額滿的時段變灰、寫「額滿」、不能點。改完用內建瀏覽器確認一次。

Codex 改完，網頁看起來沒變

在瀏覽器按 ⌘ + Shift + R 重新整理（Windows 按 Ctrl + Shift + R）。還是沒變，請 Codex 確認客人網頁有沒有重新跑起來。

改完整個網頁跑掉

我改壞了，請把專案退回上一個版本，退回後告訴我改回了什麼。

練習：自己改成功畫面上的一句話

成功畫面上「預約成功」下面那一句話，寫在哪個檔案的哪一行？只要告訴我位置，我自己改。

常見問題