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 變成簡報 再裝 skill 升級

今天 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 變成簡報
再裝 skill 升級
2:30 – 3:00
Round 6
回顧反思三層任務對比 帶走清單

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 分鐘

裝好 agy 打開你的 M2-1 資料夾

1
到 antigravity.google 下載安裝

Mac 拖進 Applications　Windows 直接執行 exe

2
Continue with Google 授權登入

選你的 Gmail 帳號　跟 M2-1 GitHub 註冊同一套 OAuth

3
File → Open Folder 打開 my-first-page

跳出 Do you trust this folder 選 Yes

完成判準

左邊檔案樹看到 index.html　右邊 Chat 說 hello 有回應 = 完成

卡住了 — 舉手，或回頭看安裝卡關頁的三種解法

分享與觀察

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 分鐘

讓 AI 改你的網頁 至少 3 個地方

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

看 AI 打開檔案 改 line 存檔的全過程

2
再改兩個 自我介紹段落 + 聯絡按鈕

顏色文字都換成你自己的版本

3
每改完一個 用瀏覽器打開 index.html 確認

眼見為憑 不是 AI 說改了就算改了

完成判準

瀏覽器裡三處修改都看得到 = 完成

卡住了 — 舉手，或把錯誤畫面截圖貼回 Chat 問 AI 哪裡卡住

亮點時刻
一句話讓 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

素材在課程網站 全班同一份

下載wda-talent-investment-plan.pdf（計畫全文　22 頁）

（原始出處：勞動部勞動力發展署官網）　想讀自己工作的 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 變成 report.md

1
把課程素材 PDF（勞動部計畫 22 頁）放進資料夾

你工作會看的 或政府開放資料的研究報告

2
跟 AI 說 幫我讀這份 PDF 整理成 report.md

或挑前一頁三種變化版之一

3
打開 report.md 用 M1-1 四要素優化再跑一次

角色 任務 格式 限制 修到像你要的樣子

完成判準

資料夾多一個 report.md 有結構能直接讀 不用回去翻 PDF = 完成

卡住了 — 舉手，或看下一頁 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 轉成多格式輸出

一份 md 三種格式 再裝一個 skill 升級簡報

一份 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 分鐘

report.md 跑出三種格式 至少完成兩種

1
把 report.md 做成 8 頁 slides.html

跑出來直接用瀏覽器打開翻頁

2
再轉成 PDF 報告

寄客戶 印出來用的版本

3
行有餘力 做成 pptx

給 PowerPoint 開 之後自己還能改

完成判準

至少兩種格式打開能看 截圖貼給同學 = 完成

卡住了 — 舉手，或回看上一頁起點 prompt 原句貼給 AI

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

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

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

簡報做好了 再裝一個 skill 升級

slides.html
AI 預設的長相
→
裝上 skill
frontend-design
→
slides-v2.html
有設計主張的版本
skill 是什麼

寫給 AI 的技能卡 一個資料夾放一份 SKILL.md 說明書
裝進專案的 .agents/skills/　agy 需要時自己翻出來用

今天裝的這張 frontend-design

Anthropic 官方開源 只有一份說明文件 沒有要執行的程式
專門處理 AI 做出來千篇一律的樣板長相

操作指令

指定來源找 skill 先聽 AI 說明再裝

第一句 找 skill 先說明再安裝
到 github.com/anthropics/skills 找適合升級簡報視覺的 skill
先告訴我它會做什麼 有沒有要執行的程式
我確認後 再裝到這個資料夾的 .agents/skills/
第二句 用 skill 升級
用 frontend-design 把 slides.html 升級 另存成 slides-v2.html
每頁內容和翻頁功能都不能變

為什麼要指定來源　skill 是別人寫給 AI 的指令 裝了就照做
來路不明或帶程式的 skill 跟亂下載軟體一樣危險

裝好 skill 會看到這樣

agy ・ my-research/
EXPLORER
▾ my-research
▾ .agents/skills
▾ frontend-design
SKILL.md
report.md
slides.html
slides-v2.html ●
SKILL.md
slides-v2.html
1 ---
2 name: frontend-design
3 description: Guidance for distinctive…
4 license: Complete terms in LICENSE.txt
5 ---
6 
7 # Frontend Design
▸ Chat
到 anthropics/skills 找升級簡報的 skill
找到 frontend-design✓ 只有一份 SKILL.md 說明✓ 沒有要執行的程式
可以 裝好後升級 slides.html
已產出 slides-v2.html✓ 8 頁內容不變✓ 翻頁正常

.agents 開頭有一個點 Mac 的 Finder 預設隱藏
在 agy 左邊檔案樹看得到

換你操作 10 分鐘

裝 frontend-design 升級你的簡報

1
請 agy 到 anthropics/skills 找 skill

先聽它說明 確認沒有要執行的程式

2
確認後裝進 .agents/skills/

左邊檔案樹看得到 SKILL.md 才算裝好

3
升級成 slides-v2.html 跟原版並排打開

內容一樣 看配色 字體 版面差在哪

完成判準

slides-v2.html 翻頁正常 跟原版並排看得出差別 = 完成

卡住了 — 舉手，或跟 AI 說 以 slides.html 為準 把翻頁修回來

分享與觀察

1
把升級前後截圖貼到群組

slides.html 跟 slides-v2.html 各截一頁

2
看大家簡報長什麼樣

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

3
skill 改變了什麼

配色 字體 版面 哪一項差最多 你想留哪一版

Round 5 小結

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

slides.html 簡報作品 ・ PDF 到簡報的完整工作流
md 跟 html 的分工觀念 ・ 裝 skill 升級作品 ・ 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 頁簡報　再裝 frontend-design 升級視覺　簡報 prompt 模板

三層共通的事

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

M2-2 帶走清單

作品產出
  • ✓ 改過的 index.html
  • ✓ 一份 report.md
  • ✓ slides.html 跟升級版 v2
能力習慣
  • ✓ agy 操作流程
  • ✓ 信任資料夾的觀念
  • ✓ PDF / 簡報 prompt 模板
  • ✓ 裝 skill 先讀再裝
  • ✓ 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 部署上線

彩蛋 · 補充教材

彩蛋
agy 接手你的 GAS 專案

用 clasp 把 M1 做的 GAS 抓下來 盤點 修改 推回雲端

agy 直接改雲端上的 GAS

M1 的做法

跟 AI 說需求 它給你一段程式碼
你打開 script.google.com 找到專案
全選 貼上取代 存檔
哪個專案做什麼 全靠自己記

今天的做法

跟 agy 說需求
agy 用 clasp 把專案抓到本機
讀懂程式碼 直接改
改完推回雲端

clasp 是什麼

Google 官方的 GAS 搬運工具
把雲端的專案抓下來（clone） 改完再推回去（push）

操作指令

第一步 打開 Apps Script API 開關
這一步 agy 做不到 要你自己按

script.google.com/home/usersettings
設定
Google Apps Script API
開啟
電腦要先有 Node.js

clasp 靠它執行　沒裝的話到 nodejs.org 下載 LTS 版安裝

操作指令

第二步 請 agy 用 clasp 登入你的 Google 帳號

在 agy Chat 區輸入
用 npx 執行 Google 的 clasp 登入我的 Google 帳號
不要全域安裝 每個指令執行前先跟我說它在做什麼
agy ・ gas-projects/
EXPLORER
▾ gas-projects
TERMINAL
$ npx -y @google/clasp login
▸ Chat
要執行 npx -y @google/clasp login用途 登入 Google 帳號 等你按允許
允許
瀏覽器授權完成✓ 已登入你的 Google 帳號
瀏覽器跳出 Google 授權

選你做 M1 專案的那個 Gmail　選錯帳號 等一下會看不到你的專案

登入之後 agy 能改你所有的 GAS 專案

指令看清楚再允許

push 會覆蓋雲端
delete 會刪整個專案
出現這兩個字先停下來

資料夾分開放

gas-projects 獨立放
不要放進 my-first-page
下一堂推 GitHub 才不會帶到

寫死的 key 搬進保險箱

清單表抓到寫死的 key
改放 Script Properties
M1-4 教過的那招

方便跟風險是同一件事

agy 能做的越多 你越要看清楚它要執行什麼

操作指令

第三步 開一個新資料夾 gas-projects
請 agy 盤點你所有的 GAS 專案

在 agy Chat 區輸入
列出我所有的 GAS 專案 每個都 clone 到 gas-projects/
讀完程式碼做成清單表 存成 gas-list.md
欄位 專案名稱 主要函式 功能一句話 有沒有寫死的 key
clasp 只給名字 功能要靠 AI 讀

clasp 列得出專案名稱跟網址
每個專案在做什麼 是 agy 讀完程式碼寫出來的

盤點完會看到這樣

agy ・ gas-projects/
EXPLORER
▾ gas-projects
▸ 個人網站
▸ 飲料點單
▸ 意見回饋
▸ 未命名的專案
gas-list.md ●
gas-list.md
1 # 我的 GAS 專案清單
2 | 專案 | 主要函式 | 功能 | 寫死 key |
3 | 個人網站 | doGet | 個人頁 + 聯絡表單 | 無 |
4 | 飲料點單 | onFormSubmit | 點單統計 寄通知 | 無 |
5 | 意見回饋 | doPost | AI 分類 推 TG | 有 1 個 |
6 | 未命名的專案 | myFunction | 空白專案 | 無 |
▸ Chat
盤點我所有的 GAS 專案 做成清單表
clasp 找到 4 個專案✓ 已 clone 到 gas-projects/✓ gas-list.md 已產生✗ 意見回饋 有 1 個寫死的 key

你在 M1 做過的專案 一張表全部攤開
忘記在做什麼的「未命名的專案」也一起現形

操作指令

第四步 挑一個專案改一個小地方
推回雲端 再到網頁編輯器確認

在 agy Chat 區輸入
先 pull 飲料點單 拿雲端最新版
把通知信的主旨改成 新訂單通知
改完 push 回雲端 告訴我改了哪一行
push 會整份覆蓋雲端

網頁編輯器同時開著改的東西 會被蓋掉
所以改之前先 pull 一次

推回雲端後 兩邊都看得到

agy ・ gas-projects/飲料點單/
EXPLORER
▾ 飲料點單
.clasp.json
appsscript.json
Code.js ●
Code.js
11 function notifyOwner(order) {
12  MailApp.sendEmail(OWNER,
13   '新訂單通知',
14   order.summary);
15 }
▸ Chat
已修改 Code.js line 13✓ clasp push 完成
script.google.com ・ 飲料點單
檔案
Code.gs
11 function notifyOwner(order) {
12  MailApp.sendEmail(OWNER,
13   '新訂單通知',
14   order.summary);
15 }
網頁的網址不會馬上變

/exec 網址跑的是部署的版本 push 只換了程式碼
要讓網址也更新 到編輯器 部署 → 管理部署作業 建新版本

換你操作 25 分鐘

agy 盤點並修改你的 GAS 專案

1
打開 API 開關 請 agy 用 clasp 登入

登入的 Gmail 要跟做 M1 專案的同一個

2
盤點所有專案 產出 gas-list.md

每個專案做什麼 一句話講得清楚

3
挑一個專案改一個小地方 push 回去

到 script.google.com 打開專案 看得到那一行

完成判準

gas-list.md 有清單 網頁編輯器看得到 AI 改的那一行 = 完成

卡住了 — 舉手，或看下一頁四種常見卡關
沒有 M1 專案的人 請 agy 用 clasp 建一個新專案練習

預期會踩坑

clasp 有 4 種常見卡關

找不到 node 或 npx
電腦還沒裝 Node.js
解 到 nodejs.org 裝 LTS 版 再重開 agy
錯誤說 Apps Script API 沒啟用
第一步的開關沒打開
解 回設定頁把開關打開 等一兩分鐘再試
清單少了某個專案
從試算表 擴充功能 開的 GAS 不會列出來
解 抄專案設定裡的指令碼 ID
請 agy 用這個 ID clone
改完網址沒變
/exec 跑的是部署的版本
解 部署 → 管理部署作業 建新版本

其他錯誤 把錯誤訊息整段貼給 agy　它看得懂 clasp 的錯誤

分享與觀察

1
你有幾個 GAS 專案

清單表裡 有沒有忘記在做什麼的專案

2
有人抓到寫死的 key 嗎

說說 AI 怎麼找到的 你打算怎麼處理

3
同樣是改 GAS

M1 複製貼上 跟今天 agy 直接改 差在哪

彩蛋小結

AI 不只改你電腦裡的檔案
放在雲端的專案 它也能接手
這一輪你拿到

clasp 連線 ・ GAS 專案清單表 ・ 一次雲端修改 ・ 第一次 push 體驗

◈ 章節 ▲
1 / 71