AI 寫的程式放在哪？
用 VS Code 改第一個字

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

你現在在這裡：第 2 階段的第二課。上一課請 Codex 做出了第一個網頁，這一課打開它，看看裡面長什麼樣子。

AI 寫的程式放在哪？

Codex 寫的程式，就是存在你電腦資料夾裡的一般檔案，第 04 課的網頁就是 my-shop 資料夾裡的 index.html。用 VS Code 打開這個資料夾，看得到每個檔案，也能自己改字。改之前先請 Codex 存一個版本，改壞了就請它退回。

VS Code：專門看程式的檔案櫃

VS Code 像一個專門放程式的檔案櫃：左邊一格一格是資料夾裡的檔案，點一個就攤開在右邊，可以直接改。它的正式名稱是程式編輯器，由微軟免費提供，Mac 和 Windows 都有。官方下載頁 ↗

專案就是一個資料夾

一個產品的所有檔案放在同一個資料夾裡，這個資料夾就叫專案。第 04 課的專案裡只有 index.html 一個檔案；第 07 課以後，專案裡會分出好幾個資料夾，每個各管一件事，例如客人的網頁放一區、店家的後台放一區。

程式長什麼樣子

下面是一個跟第 04 課差不多的 index.html。你的檔案不會一字不差，Codex 每次寫的都不同，找得到店名那一行就好。

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="utf-8">
  <title>小森髮廊</title>
</head>
<body>
  <h1>小森髮廊</h1>
  <p>營業時間：每天 10:00–19:00</p>
  <p>歡迎光臨，想換個髮型就來找我們。</p>
</body>
</html>

用 < > 包起來的英文叫標籤，像貼在文字前後的便利貼，告訴瀏覽器「這行是大標題」「這行是一段文字」。標籤中間的字，才是畫面上看得到的字（上面標成綠底的部分）。<head> 裡是給瀏覽器的設定，例如分頁上顯示的名稱；<body> 裡是畫面上的內容。

改字時只改標籤中間的字，< > 和裡面的英文不要動。

存檔點：改壞了可以退回

存版本像打電動的存檔點：每過一關存一次，打輸了就從上一個存檔點重來。Codex 可以替你的專案存版本，改壞了就請它退回上一個版本。它通常用一個叫 Git 的工具來存，你不用學 Git 的指令，說一句話就好。什麼是版本控制 ↗

成果預覽：自己改的字出現在網頁上

上課前：準備好這兩樣

上一課的網頁

第 04 課做好的 my-shop 資料夾。還沒做出來的話，到第 04 課的成果檢查下載進度存檔，解開後放進「文件」裡。

Codex

ChatGPT 桌面 App，打開 my-shop 資料夾。可以接著用第 04 課的對話，也可以在 my-shop 裡開新對話。

這兩步要你自己按

安裝軟體、決定要信任哪個資料夾，都要你自己來。

步驟 1下載並安裝 VS Code

1. 打開官方下載頁 code.visualstudio.com/download，下載 Mac 版。
2. 打開下載好的 .dmg 檔，把 Visual Studio Code 拖進「應用程式」資料夾。

做完應看到：「應用程式」資料夾裡多了 Visual Studio Code。

如果 Mac 跳出「確定要打開嗎？」：這是 Mac 對網路下載的 App 的例行確認，按「打開」。

步驟 2用 VS Code 打開 my-shop 資料夾

1. 從「應用程式」資料夾打開 VS Code。第一次打開會先出現英文的設定畫面，按「Continue without Signing In」就好。
2. 從上方選單按「File」→「Open Folder…」，選「文件」裡的 my-shop。
3. VS Code 問你信不信任這個資料夾的作者時，按「Yes, I trust the authors」；如果沒有跳出詢問，而是上方出現「Restricted Mode」，就按「Manage」再按「Trust」。這是你自己建的資料夾。

做完應看到：VS Code 左邊列出 my-shop 裡的檔案，看得到 index.html。

不確定資料夾從哪裡來的時候：按「No, I don't trust the authors」。VS Code 不會自動執行裡面的程式，照樣能看檔案、改字。官方說明 ↗

Windows：在同一個下載頁下載 Windows 版安裝程式，照畫面按「下一步」裝好；打開資料夾一樣是「File」→「Open Folder…」。

操作步驟：看懂、存版本、改字、退回

步驟 1請 Codex 帶你看懂這個資料夾

1. 在 Codex 貼上下面這段，送出。
2. 回到 VS Code 點 index.html，找到 Codex 說的那幾行。

請用白話告訴我，這個資料夾裡每個檔案在做什麼；index.html 裡哪幾行是畫面上看得到的字。

複製

做完應看到：你在 VS Code 裡找得到店名、營業時間在哪幾行。

步驟 2請 Codex 存一個版本

1. 在 Codex 貼上下面這段，送出。

請幫這個專案存一個版本，說明寫「第一個網頁完成」。
之後每完成一步，都請你幫我存一個版本；我說「改壞了」，就請你退回上一個版本。

複製

做完應看到：Codex 回報已經存好一個版本。

如果 Mac 跳出要安裝「命令列開發者工具」：這是 Codex 存版本要用到的工具，按「安裝」，等下載完成，再請 Codex 存一次。

步驟 3自己改一個字

1. 在 VS Code 的 index.html 找到店名那一行，把店名改一個字，例如「小森髮廊」改成「小林髮廊」。
2. 按 ⌘S 存檔。
3. 回到瀏覽器的網頁，按 ⌘R 重新整理。

做完應看到：網頁上的店名跟著變了。

如果網頁沒變：看 VS Code 分頁上的檔名旁邊有沒有圓點。有圓點代表還沒存檔，按 ⌘S 再重新整理一次。

步驟 4請 Codex 退回上一個版本

1. 在 Codex 貼上下面這段，送出。
2. 回到瀏覽器重新整理。

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

複製

做完應看到：VS Code 裡的店名回到原本的字，網頁重新整理後也回到原樣。

Windows：存檔按 Ctrl + S，重新整理按 Ctrl + R。從這一課開始，每完成一步都請 Codex 存一個版本；之後每一課結束時，也會用 VS Code 打開專案，看 Codex 這一課改了哪些檔案。

成果檢查

成功的樣子：

• 用 VS Code 打開了 my-shop，說得出 index.html 在做什麼、店名在哪一行。
• 自己改了一個字，存檔、重新整理後，網頁跟著變。
• 請 Codex 存了一個版本，也請它退回過一次，店名回到原樣。

還沒成功的樣子：改了字網頁卻沒變、VS Code 左邊是空的，或 Codex 說存不了版本。照下面「卡住時怎麼辦」處理。

還是做不出來也沒關係：下載本課的進度存檔，用 VS Code 打開，下一課接著做。

下載第 05 課的進度存檔（05.zip）

卡住時怎麼辦

改了字，網頁沒變

先確認 VS Code 分頁上的檔名旁邊沒有圓點（有圓點代表還沒存檔），再到瀏覽器重新整理。還是沒變，確認瀏覽器打開的是 my-shop 裡的 index.html，不是別的檔案。

改完網頁整個跑掉

多半是不小心刪到了 < >。不用自己找，請 Codex 退回：

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

VS Code 左邊是空的

打開的是別的資料夾。重新按「File」→「Open Folder…」，選「文件」裡的 my-shop。

Codex 說存不了版本

Mac 如果跳出要安裝「命令列開發者工具」的視窗，按「安裝」，等下載完成再請 Codex 存一次。Windows 如果 Codex 說電腦沒有 Git，請它帶你安裝，或到 Git 官方下載頁下載 Windows 版。

練習：自己改，再請 Codex 比給你看

我剛剛自己改了 index.html，請跟上一個版本比，用白話告訴我改了哪些地方。

常見問題