Vibe Coding — Stage 2 · 上線網頁
M2-2 · IDE 工具

Vibe Coding 實戰課 — Stage 2 · 上線網頁

IDE 工具
登場

AI 直接改你的檔案 從改網頁到讀 PDF 到產簡報

M2-2 3 小時 6 輪循環 agy 主場

按 → 或空白鍵開始

M2-2 ・ 3 小時

本模組你會做出什麼

從讓 AI 改你的網頁 到讀 PDF 整理 到產出簡報 IDE 直接動你的檔案

LV1
agy ・ my-page/
EXPLORER
▾ my-page
index.html
README.md
index.html
8 <h1 style="color:#000">
9  王小明
10 </h1>
▸ Chat
幫我把標題改成綠色
已修改 index.html✓ line 8 color #000 → #0F9D8A

把舊網頁丟給 AI 改

LV2 ・ 必做主線
agy ・ my-research/
EXPLORER
▾ my-research
paper.pdf
report.md ●
paper.pdf
report.md
1 # 報告重點摘要
2 
3 ## 核心發現
4 - 三個關鍵
5 - 兩個建議
▸ Chat
幫我讀 paper.pdf 整理重點寫成 md
已讀完 24 頁✓ 產出 report.md 12 段重點

PDF 丟進來 整理成報告 md

LV3 ・ 完成後加做
agy ・ my-slides/
EXPLORER
▾ my-slides
report.md
slides.html ●
Code
Preview
研究報告摘要
核心發現 ・ 數據洞察
3 個關鍵
2 個建議
1 / 8
▸ Chat
把 report.md 做成 8 頁簡報 html
已產出 slides.html✓ 8 頁 含目錄

md 變成可呈現的簡報

今天 IDE 第一次直接動你的檔案 從改 HTML 到讀 PDF 到產簡報

六輪循環 逐層遞進

Round 1認識 IDE
Round 2裝 agy 連 Google
Round 3LV1 改 HTML
Round 4LV2 讀 PDF 產 md
Round 5LV3 md 變簡報
Round 6回顧反思
每一輪的節奏

操作指令 → 補強版參考 → 操作計時 → 分享觀察 → 小結反思

今天 3 小時的路線

每 30 分鐘一個 Round 中間沒安排休息 卡住的人趁分享觀察喘口氣

0:00 – 0:30
Round 1
認識 IDE從瀏覽器到本機 IDE 是什麼為什麼要用
0:30 – 1:00
Round 2
裝 agy用 Google 一鍵登入 4 IDE 工具比較
1:00 – 1:30
Round 3
LV1 改 HTML把 M2-1 的網頁丟進 IDE AI 直接改
1:30 – 2:00
Round 4
LV2 讀 PDF把 PDF 整理成 md 報告
2:00 – 2:30
Round 5
LV3 產簡報md 變成可呈現的簡報 html
2:30 – 3:00
Round 6
回顧反思三階段對比 M2-3 預告

ROUND 1 · 0:00–0:30

從瀏覽器
走進 IDE

認識本機開發環境 為什麼比 ChatGPT 強

IDE 是什麼

IDE 是什麼字

IDE 是 Integrated Development Environment 縮寫 中文叫整合式開發環境　就是一個程式設計師專用的編輯器

瀏覽器 AI 對話
→
IDE
AI 直接動你的檔案
差別最大的一件事

ChatGPT 給你文字 你自己複製貼上　IDE 裡的 AI 直接改你電腦上的檔案 你看著它在你眼前修改

為什麼要走進 IDE

多檔案一起改

不只改一個 HTML AI 能同時修 CSS JS 圖片 多個檔案一次處理

能讀你的資料

把 PDF Excel 圖片放進資料夾 AI 直接讀 不用一個個複製貼到對話框

能執行能驗證

改完直接在 IDE 開預覽 AI 自己看結果 不對再修

操作指令

先不裝任何東西
看老師示範 IDE 介面三個區塊

三個區塊認識

左邊　檔案樹 你的資料夾長什麼樣
中間　編輯區 程式碼或文件內容
右邊　Chat 跟 AI 對話的地方

IDE 三區塊長什麼樣

agy ・ my-page/
EXPLORER
▾ my-page
index.html
style.css
README.md
A 檔案樹
index.html
1 <!DOCTYPE html>
2 <html>
3 <body>
4  <h1>王小明</h1>
5 </body>
B 編輯區
▸ Chat with AI
幫我改標題
好的 line 4 改成什麼
C Chat

A 檔案樹看資料夾
B 編輯區看內容
C Chat 跟 AI 對話
不同 IDE 介面類似 只是顏色排列不同

AI 編程工具的三種模式

同一個 AI 服務通常有三種界面 給不同場景用

模式 1

IDE 模式

圖形化完整環境
VS Code + Claude/Copilot/Cursor
Antigravity IDE
  • A. 左檔案樹永遠看得到
  • B. 中編輯區改檔有高亮
  • C. 右 Chat 跟 AI 對話
  • D. 同時開多檔分頁
  • E. 視覺 diff 看哪變了
  • F. 5 分鐘上手 要安裝
模式 2

Codex 模式

終端機內的任務介面
codex 互動
claude code 互動
agy 互動
  • A. 沒檔案樹瀏覽器
  • B. 主畫面是任務 + AI 對話
  • C. 改檔在對話中以 diff 顯示
  • D. 要 ls 才能看資料夾
  • E. 純文字背景
  • F. 比 IDE 輕量 啟動快
模式 3

CLI 模式

純命令列指令
codex exec
claude -p
agy -p
  • A. 一個指令一個任務
  • B. 沒互動 沒 Chat
  • C. 適合腳本自動化
  • D. 拿輸出接其他程式
  • E. 最快最精簡
  • F. 要先寫好完整 prompt

操作計時

15分鐘
看老師示範 + 觀察介面差異
這 15 分鐘你要做的

不裝任何東西 不操作　只認介面 認觀念
看老師打開 agy 操作一輪 改個小東西 你會看到 IDE 跟 ChatGPT 介面的差別

分享與觀察

1
你看到 AI 直接改檔案有什麼感覺

跟你用 ChatGPT 複製貼上的經驗比 哪裡不一樣

2
三區塊你最在意哪個

檔案樹 編輯區 Chat 哪個你覺得最重要 為什麼

3
三個同學講一輪

聽聽大家對 IDE 的第一印象

Round 1 小結

IDE 不是更高級的 ChatGPT
是讓 AI 從建議者變成執行者
這一輪你拿到

IDE 是什麼的概念 ・ 三區塊認識 ・ 看過老師示範 ・ 對 AI 直接改檔案的初印象

ROUND 2 · 0:30–1:00

裝 agy
用 Google 一鍵登入

免費 IDE 主場 順帶看其他三個

市面四個主流 IDE 工具

這堂課主推 agy 因為它免費 其他要付費的看一眼有印象就好

本堂主推
agy
免費 · Google 帳號登入
Antigravity CLI Google 出的 跟 Gemini 整合好 適合入門
付費
Claude Code
需 Claude Pro 訂閱
Anthropic 出 寫程式能力強 適合長期專案
付費
Codex
需 ChatGPT Plus
OpenAI 出 跟 ChatGPT 同源 寫腳本快
免費 + 付費
VS Code + Copilot
VS Code 免費 · Copilot 月費
微軟出 業界標準編輯器 接 Claude 或 Copilot 都可以

介面長得差不多 都有左檔案樹 中編輯區 右 Chat　學一個其他都會用　今天用 agy 因為它免費

操作指令

打開 antigravity.google
下載安裝 用 Google 帳號登入

三步驟

1. 到官網點 Download for Mac / Windows
2. 開啟 dmg 或 exe 拖到 Applications
3. 第一次開啟 Continue with Google 跳到瀏覽器授權

和 GitHub 註冊一樣的 OAuth

你已經會了 不會用 Gmail 一鍵登入的話回 M2-1 R1 看一次

agy 安裝畫面長這樣

antigravity.google
Antigravity
Google 的 IDE 工具 整合 Gemini 模型
Download for Mac
Download for Windows
免費 · 不需信用卡 · 用 Google 帳號登入

下載 dmg 或 exe 安裝　第一次開啟會跳 Continue with Google　選你的 Gmail 帳號授權

預期會踩坑

安裝有 3 種常見卡關

看過這張等下不會慌

Mac 說無法驗證開發者
第一次開啟 Mac 會擋
解 系統設定 → 隱私權與安全性 → 點仍要打開
Windows 防毒擋下載
SmartScreen 警告未知發行者
解 點其他資訊 → 仍要執行
Google 授權卡住
瀏覽器擋 popup 或卡白頁
解 換 Chrome 開 允許 popup

這三個踩到都不用慌 一句話有解　跑除錯儀式 截錯誤 + 描述狀況問 AI 也行

操作指令

打開 agy 後
File → Open Folder 選你 M2-1 的 my-first-page 資料夾

關鍵觀念 信任資料夾

agy 第一次開資料夾會問 Do you trust this folder
選 Yes 才能讓 AI 看到你的檔案　不信任就只能讀不能改

怎麼確認資料夾在哪

M2-1 你從 GitHub 下載 zip 解壓縮 或從 GitHub 點 Code → Download ZIP　通常在下載資料夾

打開資料夾後看到三區塊

agy ・ my-first-page/
EXPLORER
▾ my-first-page
.gitignore
README.md
index.html
index.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4  <title>我的網頁</title>
5 </head>
6 <body>
7  <h1>王小明</h1>
▸ Chat with Gemini
準備好對話了 試試 say hello

左邊看到你的檔案了　中間打開 index.html 看內容　右邊 Chat 等你說話　準備好開始 vibe coding 了

操作計時

20分鐘
含下載安裝 OAuth 開資料夾
完成目標

agy 已開啟 ・ Gmail 登入完成 ・ 你的 my-first-page 資料夾打開了 ・ 看到 index.html 內容

分享與觀察

1
大家都裝好了嗎

有人卡住的舉手 同學或老師幫忙除錯

2
跟 agy 說 hello 看看回什麼

第一次跟 IDE 裡的 AI 對話 感受跟 ChatGPT 的不同

3
觀察 Chat 區的提示

它會建議你問什麼 你會發現它已經知道你開了什麼資料夾

Round 2 小結

裝好 IDE 才是真正進入了開發者的世界
從此 AI 不再只是給建議 它跟你一起做事
這一輪你拿到

agy 安裝完成 ・ Google 帳號授權登入 ・ M2-1 資料夾打開 ・ 看過 4 種 IDE 介面對比

ROUND 3 · 1:00–1:30

LV1
把 HTML 丟給 AI 改

把 M2-1 的網頁丟進 agy 一句話讓 AI 改

AI 直接改檔案是什麼意思

M1-1 的做法

跟 ChatGPT 說 幫我把標題改綠色
它給你一段新的 HTML
你複製 貼回你的 index.html
存檔 重新打開瀏覽器看

M2-2 的做法

跟 agy 說 幫我把標題改綠色
agy 直接打開 index.html
改 line 8 自動存檔
跟你說 改好了 在 line 8

為什麼重要

5 個小改動 用 ChatGPT 要 5 次複製貼上　用 IDE 跟 AI 講就好
10 個檔案的專案 更明顯

操作指令

在 agy Chat 區輸入
幫我把 index.html 的標題改成綠色

這次只改一個地方

就先做最簡單的　看 AI 怎麼回應 看它真的去動你的檔案
改完瀏覽器打開 index.html 確認標題真的變綠

AI 改完會看到這樣

agy ・ my-first-page/
EXPLORER
▾ my-first-page
index.html ●
README.md
index.html
7 <body>
8  <h1 style="color:#0F9D8A">王小明</h1>
9  <p>全端工程師</p>
10 </body>
▸ Chat
幫我把 index.html 標題改綠
已修改 index.html✓ line 8 加上 style 屬性✓ color #0F9D8A 品牌綠

看到綠色高亮 那就是 AI 改的地方　檔名旁邊小圓點 ● 表示有未存的修改 或剛存好

操作計時

20分鐘
至少改 3 個地方 體驗 AI 多檔案改
建議改的三件事

1. 標題顏色 換成你喜歡的
2. 加一個自我介紹段落
3. 加一個聯絡按鈕
每改一個就用瀏覽器打開 index.html 確認

亮點時刻
一句話讓 AI 改了你的檔案
你像看魔術一樣站在旁邊

不用複製 不用貼上 不用存檔　你只是說了你要什麼
這就是 vibe coding

3 倍
改檔速度
0 次
複製貼上
多檔案
同步修改

分享與觀察

1
跟同學交換 看對方改了什麼

同樣是 M2-1 的網頁 不同人改出來不一樣

2
觀察你的指令跟 AI 回應

下指令越具體 AI 動越精準　模糊指令會被反問

3
記下你想試的下一步

R4 我們會挑戰更難的 讀 PDF 整理成 md

Round 3 小結

寫得越具體 AI 動得越精準
同樣的 IDE 你的描述能力決定產出
這一輪你拿到

第一次 vibe coding 經驗 ・ 3 個 AI 改的版本 ・ 觀察精準指令的影響 ・ LV1 達成

ROUND 4 · 1:30–2:00

LV2
讀 PDF 整理成 md

把資料夾裡的 PDF 丟給 AI 一句話整理成報告

關鍵觀念 信任資料夾

PDF 檔丟進資料夾
→
IDE 看到
→
AI 能讀
不用複製貼上
核心邏輯

IDE 打開資料夾後 整個資料夾的檔案都是 AI 看得到的
你想讓 AI 處理什麼資料 把檔案放進來就行

注意 PDF 不能太大

免費版額度有限 PDF 超過 50 頁可能撞 token 上限　建議 10-30 頁
如果有超大 PDF 先用免費工具拆成幾份再放進來

操作指令

把一份 PDF 放進你的資料夾
跟 AI 說 幫我讀這個 PDF 整理重點寫成 report.md

沒有 PDF 的話

用任何你手邊的 找一份你工作會看的
或下載一份公開研究報告 PDF 例如政府開放資料的研究報告

整理 PDF 的起點 prompt

先簡單下 然後用 M1-1 四要素持續優化

起點 一行就好
幫我讀 paper.pdf 整理成 report.md
第一次跑出來後 用 M1-1 四要素優化

角色 我是 ESG 顧問 客戶看這份要做策略決策
任務 摘要重點 不要照抄全文
格式 三層架構 核心發現 數據洞察 行動建議
限制 保留原文關鍵術語 不要意譯

完整變化版見 prompt 教材

同一份 PDF 不同目的有不同 prompt 寫法　簡報大綱 / 報告格式 / 摘要卡片 / 比較表　prompt 教材檔都有範例

同 PDF 三種 prompt 變化

同份 PDF 不同目的 prompt 寫法完全不同

變化 1 簡報大綱

幫我把 paper.pdf 轉成 8 頁簡報大綱
每頁 1 個主標題 + 3 個 bullet
用 markdown 列出 我之後做成 PPT

變化 2 報告格式

幫我整理成正式報告 report.md
結構 摘要 + 三章節 + 結論
每章節 200 字 + 一個重點數據表

變化 3 摘要卡片

幫我用一張卡片 50 字內
摘要這份報告最重要的 3 件事
給沒空看的人用

學員任務

挑一個變化版用
跑出第一版後 再用 M1-1 四要素優化　持續修 prompt 直到產出像你想要的格式為止

產出 md 會像這樣

agy ・ my-research/
EXPLORER
▾ my-research
paper.pdf
report.md ●
paper.pdf
report.md
1 # AI 教育市場 2026 報告
2 
3 ## 核心發現
4 - 企業導入率年增 78%
5 - 員工培訓需求最大
6 
7 ## 數據洞察
8 | 產業 | 採用率 |
9 | --- | --- |
10 | 製造 | 65% |
▸ Chat
幫我讀 paper.pdf 整理成 report.md
已讀完 24 頁 PDF✓ 產出 report.md✓ 12 段重點✓ 3 張數據表

操作計時

25分鐘
放 PDF 進去 寫 prompt 跑出 md
完成目標

你的資料夾多了一個 report.md
內容有結構 不是一坨文字
能直接讀 不用回去翻 PDF

預期會踩坑

PDF 讀不出來常見原因

PDF 是掃描檔
不是真實文字 是圖片
解 用線上 OCR 工具轉文字版 PDF 再放進來
PDF 太大撞 token
超過 50 頁額度爆掉
解 拆成 10-30 頁 或先告訴 AI 只讀某幾章
產出 md 太精簡
AI 自己決定保留什麼
解 prompt 加 詳細列出每個段落的重點 不要省略

分享與觀察

1
大家用了什麼 PDF

產業報告 學術論文 公司文件 大家用的不同

2
產出的 md 品質差別

同樣 prompt 不同 PDF 出來的結構不一樣 AI 會自動依內容調整

3
誰的 prompt 寫得最好用

學起來 你工作上常讀的 PDF 之後都能這樣處理

Round 4 小結

你不用再花一小時讀 PDF
把它丟進資料夾 AI 5 分鐘幫你整理完
這一輪你拿到

一個 report.md ・ PDF prompt 模板 ・ AI 讀外部檔案的能力認知 ・ LV2 主線達成

ROUND 5 · 2:00–2:30

LV3
md 轉成多格式輸出

HTML 簡報 PDF 報告 pptx 一份 md 三種格式

一份 md 三種輸出

report.md
骨架
→
HTML 簡報
線上呈現
→
PDF 報告
寄客戶
→
pptx
會議用
為什麼三種都要試

不同場合需要不同格式　線上分享用 HTML　寄客戶用 PDF　現場開會用 pptx
一份 md 三種格式 不用重做 學員體驗到 內容跟外觀分離 的威力

操作指令

三個任務 一份 md 跑出三種輸出

三個任務

A. 把 report.md 做成 8 頁 slides.html 線上簡報
B. 把 report.md 做成 PDF 報告 適合寄客戶
C. 把 report.md 做成 pptx 給 PowerPoint 開

三個起點 prompt

先一行下 跑出來再用 M1-1 四要素優化

A 簡報 html

把 report.md 做成 8 頁 slides.html

線上用 投影機翻頁

B PDF 報告

把 report.md 轉成 PDF 報告

寄客戶 印出來用

C pptx 簡報檔

把 report.md 做成 pptx 用 python-pptx

PowerPoint 開 自己改

完整版見 prompt 教材

每個格式的進階版本 例如 配色 字體 版型 動畫 都在 prompt 教材檔　今天現場先用最簡版本體驗多格式

操作計時

20分鐘
三個格式 至少完成兩種
完成目標

資料夾多了 slides.html + report.pdf + slides.pptx 其中至少兩個
每個都能打開能看　能截圖貼出來給同學
體會 同一份內容三種輸出 的威力

亮點時刻
PDF 進來 簡報出去
一整天的工作 25 分鐘完成

以前讀報告抓重點 整理成簡報 配色排版要花一整天　今天你 2 個指令完成　而且配色比你做的還好看

2 個
prompt 完成
25 分鐘
PDF 到簡報
0 PowerPoint
不用設計工具

分享與觀察

1
把你的簡報截圖貼到群組

不用真的傳 html 截兩三頁畫面就行

2
看大家簡報長什麼樣

同樣 prompt 不同 PDF 出來的視覺風格不一樣

3
找一個你覺得最美的

下一輪可以叫 AI 學它的風格幫你升級

Round 5 小結

你今天做出了讓你上個月覺得不可能的東西
而且只用了一句話的 prompt
這一輪你拿到

slides.html 簡報作品 ・ PDF 到簡報的完整工作流 ・ md 跟 html 的分工觀念 ・ LV3 達成

ROUND 6 · 2:30–3:00

IDE 你會用了
下一堂要部署

回顧今天三層 預告 M2-3

六輪回顧

Round 1認識 IDE
Round 2裝 agy
Round 3LV1 改 HTML
Round 4LV2 讀 PDF
Round 5LV3 產簡報
Round 6回顧反思

每一輪都讓 AI 幫你做了更複雜的事　最後你帶走的不只是檔案　是整套讓 AI 改檔案的工作流

今天完成的三個任務

LV1

改 HTML

把 M2-1 的網頁丟進 IDE　跟 AI 講一句話它直接改檔　不用複製貼上

LV2 必做主線

讀 PDF 產 md

把 PDF 丟進資料夾　AI 讀完整理成結構化 md 報告　PDF prompt 模板

LV3 完成後加做

md 產簡報

md 變成可呈現的 8 頁簡報　配色字體 AI 自己處理　簡報 prompt 模板

三層共通的事

把檔案放資料夾　信任 IDE　用清楚的指令給 AI　看著它工作

M2-2 帶走清單

作品產出
  • ✓ 改過的 index.html
  • ✓ 一份 report.md
  • ✓ 一份 slides.html
能力習慣
  • ✓ agy 操作流程
  • ✓ 信任資料夾的觀念
  • ✓ PDF / 簡報 prompt 模板
  • ✓ 4 種 IDE 工具認知

下一堂 M2-3 預告

IDE 接到 GitHub

今天你的作品都在本機資料夾　下一堂課教 IDE 怎麼跟你 M2-1 的 GitHub 連起來　AI 改完直接 push 上線

LV1

把今天的 slides.html push 到 GitHub Pages

LV2 必做主線

把 M2-1 個人介紹頁升級成多頁網站 含簡報區跟檔案下載

LV3 加做

重做一個全新專案 從零部署上線

記得帶今天的作品

下一堂課直接用今天的 slides.html 跟 report.md 部署上線

◈ 章節 ▲
1 / 52