Stage 2 Prompt 模板庫 — Vibe Coding 上線你的網頁

M2-1 Round 4 寫法範例庫

R4 ・讓 IDE 幫你寫好 commit 訊息再 push

改完一輪檔案後,不要自己想「我剛改了什麼」。叫 AI 看 git diff 自己寫一句白話的 commit 訊息,然後 commit + push 上 GitHub。三個月後翻紀錄看得懂。

動手前先確認: 已建立 GitHub repo,在 agy / Claude Code 裡打開資料夾,剛改過至少一個檔案還沒 commit。

給 AI 的 Prompt

幫我看我剛才改了哪些檔案哪幾行

用一句白話中文寫 commit 訊息 動詞開頭 15 字以內
例如 加什麼 / 改什麼 / 換什麼 / 修什麼
不要寫 update / fix / 改一下 / 改一些 這種看不出做了什麼的

然後 commit 跟 push 上 GitHub
完成後告訴我這次 commit 的訊息是什麼
我去 GitHub 看 commit history 確認

複製按鈕複製的是精煉一句話版(給 AI 跑),上面顯示的是完整版含反面範例(給你讀理解)。

跑完之後 commit history 會長這樣:

github.com/你/my-first-page/commits

a3f2c8d加深色模式切換按鈕good

9b1e44a換 hero 標題 + 加自我介紹段落good

e87d2c1updatebad

5a9c33ffixbad

三個月後翻 commit history,只有「加深色模式」看得懂改了什麼,「update / fix」完全沒線索

提示 AI 寫出來的 commit 訊息你不滿意?可以這樣補一句:

這次 commit 訊息我不喜歡
我這次主要是 [加了深色模式按鈕 / 修首頁圖跑版 / ...]
請用這個重點重寫 commit 訊息 再 push 一次

M2-1 Round 5 教學素材 M2-4 會用到

R5 ・故意 commit 假 API Key(教學伏筆)

這張卡的目的是「先犯錯」。把一段假 API Key code 貼進 index.html commit 上去 — 觀察 GitHub 多快會通知你 secret 外洩。M2-4 學員會用 IDE 把這條 Key 清掉。

動手前先確認: 已有 my-first-page repo。這是假 Key,不是真的 — 機器人會掃到但不會真的有人盜用。

給 AI 的 Prompt

我在做 Stage 2 的安全教學示範
請幫我做這幾件事

1. 在 index.html 裡面加一段 JavaScript
   裡面放兩個假的 API Key 像這樣
   FAKE_API_KEY 設成 "sk-proj-FAKE1234567890abcdefghij"
   FAKE_GH_TOKEN 設成 "ghp_FAKEabcdefg1234567890hijklmn"
   旁邊寫個註解 說這是教學用假 Key 之後會清掉

2. 幫我 commit 訊息寫「教學示範 故意放假 Key」
   然後 push 上 GitHub

3. 完成後告訴我
   等 5-10 分鐘後我要去 GitHub repo 頁面
   看 Secret scanning alert 黃色警示條有沒有跳
   也會收到 GitHub 寄的 email

觀察結果: 5-10 分鐘內 GitHub 會寄 email 告訴你「Secret scanning alert」,repo 頁面也會出現黃色警示條。這就是為什麼真實 Key 永遠不能寫在程式碼裡。

github.com/你/my-first-page/blob/main/index.html

index.html ・已被機器人掃描

12<script>

13const FAKE_API_KEY = "sk-proj-FAKE1234...";

14const FAKE_GH_TOKEN = "ghp_FAKEabcde...";

15</script>

Secret scanning alert ・偵測到 2 筆可能的 secret 外洩,請立刻 revoke

機器人會把可能的 Key 標紅圈,寄信通知,並在 repo 頁面顯示警示 — M2-4 R2 教你怎麼用 IDE 一句話清掉

為什麼這樣設計先讓你「感受到」洩漏的可怕,M2-4 R2 你會學會建一個 check-secrets skill 自動掃整個 repo。沒踩過洩漏的雷,學員不會認真做安全檢查。

M2-1 LV3 個人品牌

LV3 ・ Profile README 個性化

GitHub 用戶名同名的 repo(例如你叫 alanchen 就建 alanchen/alanchen)裡放一個 README.md,會顯示在你個人首頁最上方 — 等於 GitHub 上的名片。

動手前先確認: 知道自己的 GitHub username。建一個跟 username 完全一樣的 repo(public),裡面放 README.md。

給 AI 的 Prompt

幫我寫 GitHub Profile 的 README.md

我是 [你的工作 — 例如 顧問 / 老師 / 行銷企劃]
擅長 [三個技能 — 例如 用 AI 做網頁 / 帶工作坊 / 整理大量 Excel 資料]
最近在做的事 [一句話 — 例如 在學用 AI 做客戶提案頁]
聯絡方式 [Email 跟 LinkedIn 網址]

風格
- 簡潔有個人特色 一眼看出我是做什麼的
- 一句話自我介紹 像名片正面那種
- 不要放一大堆 emoji 不要列一長串技能圖示
- 不要太花俏

完成後請幫我
- 建一個跟我 GitHub 帳號名同名的 repo
- 把 README.md 放進去
- push 上 GitHub
- 告訴我 GitHub 個人首頁網址 我去看

把 [ ... ] 填空後再貼到 AI。每個 [ ] 都是你的個人資訊。

預期 GitHub 個人首頁長這樣:

github.com/alanchen

AC

陳光・ ESG 顧問

「幫品牌把永續報告寫得有人想看」

擅長 ESG 簡報設計、AI 提效流程、客戶提案頁

最近在學 vibe coding 做客戶簡報頁

ESG AI 提效簡報設計

[email protected] ・ linkedin.com/in/alanchen

大頭像左側,README 渲染右側,3 秒就能讓人記住你是做什麼的

提示很多人 README 寫得太長(列 20 個 badge / 一堆動畫 GIF)反而沒人看完。一句話 bio + 3 個技能 + 一句最近在做什麼,這個比例最好。

M2-2 Round 3 LV1 IDE 第一句

R3-A ・在 IDE 對 AI 說第一句

M1-1 在瀏覽器跟 AI 對話,Stage 2 在 IDE 跟 AI 對話 — 差別是 AI 能直接改你電腦的檔。最簡單的開場:讓 AI 改一行顏色。

動手前先確認: 已安裝 agy(或 Claude Code),在裝有 my-first-page 的資料夾打開 IDE。看得到檔案樹左邊 + 編輯區中間 + 對話 Chat 右邊。

給 AI 的 Prompt

幫我把 index.html 第一個 h1 改成綠色 #0F9D8A

預期 IDE 介面變化:

agy ・ ~/my-first-page

📁 my-first-page
● index.html
styles.css
README.md

6<body>

7 <header>

8 <h1 style="color:#0F9D8A">我的網頁</h1>

9 </header>

10 <main>...

你

把 index.html 第一個 h1 改成綠色

agy

已改 index.html line 8,加了 style="color:#0F9D8A"。要看效果可以打開瀏覽器或按 Preview。

左側檔案樹標紅點(改過),中間編輯區第 8 行高亮新加的 style,右側 Chat 報告做了什麼

提示如果頁面有多個 h1,AI 可能改錯位置,補一句指定:

第一個 h1 是 hero 區的「我的網頁」標題
不是 footer 那個 — 改錯了的話請改回來

M2-2 Round 3 LV1 變化 1

R3-B-1 ・加深色模式切換按鈕

改 HTML 第二題 — 加深色模式。讓網頁有質感,也學 AI 怎麼處理「狀態切換」這種需要邏輯的需求。

動手前先確認: R3-A 已完成。網頁能正常顯示,h1 是綠色。

給 AI 的 Prompt

幫我幫這個網頁加深色模式切換按鈕

按一下 body 顏色翻轉
按鈕放右上角 用文字「深色模式」「淺色模式」切換
深色 主色維持綠 #0F9D8A 背景改深灰 #1a1a1a 文字白
把切換選擇記下來 下次打開還是這個模式

預期效果: 右上角出現切換按鈕,按下去整個網頁背景翻黑、文字翻白,綠色主色維持。重新整理保持上次選的模式。

提示按一下沒反應?多半是 JS 沒寫進來。叫 AI 印 console.log 確認:

按鈕按下去沒反應 主控台也沒訊息
請在 toggle function 第一行加 console.log("toggle clicked")
我再試一次看 console

M2-2 Round 3 LV1 變化 2

R3-B-2 ・加自我介紹區塊

改 HTML 第三題 — 加一個含大頭像 + 介紹 + 技能標籤的區塊。練 AI 怎麼處理「結構化內容」。

動手前先確認: 已有 index.html 基本骨架。準備一張你自己的大頭照(或先用 placeholder 圖)。

給 AI 的 Prompt

在我的網頁加一個自我介紹區塊

含
- 一張圓形大頭像 (用 https://placehold.co/200x200 先頂住)
- 一段 100 字介紹 (請先用 [我是 ___ 擅長 ___] 樣板給我填)
- 三個技能標籤 (圓角 hover 變綠)

配色跟原網頁一致
位置放在 hero 區下方

預期效果: hero 下方多一塊自我介紹,左圓形頭像右文字 + 技能標籤。手機版會堆疊成上下。

M2-2 Round 3 LV1 變化 3

R3-B-3 ・加聯絡 CTA 按鈕

改 HTML 第四題 — 加一個「聯絡我」按鈕,點下去開 mailto 寄信。學 AI 怎麼處理「動作觸發」。

動手前先確認: 已有自我介紹區塊。把你想用的聯絡 email 想好。

給 AI 的 Prompt

網頁底部加一個聯絡 CTA 按鈕

按下去開 mailto: 寄信給我 [你的 email]
主旨預填「來自網頁的訊息」
按鈕用主綠 #0F9D8A 圓角 hover 變深綠
位置 sticky 滾到底會吸附在右下角

預期效果: 右下角有個吸附的綠色「聯絡我」按鈕,捲動時不消失。點下去自動打開 email 程式(macOS 是 Mail / Windows 是預設信件 app)填好主旨跟收件人。

提示手機上點按鈕沒反應?手機沒裝 Mail app 會跳「找不到應用程式」。可以叫 AI 改成提示「複製信箱」:

手機點按鈕跳「找不到 mail app」
請改成 hover 時 tooltip 顯示信箱
按下去 navigator.clipboard.writeText 複製信箱
順便顯示 toast 「信箱已複製」

M2-2 Round 4 LV2 PDF → markdown

R4-A ・讓 IDE 把 PDF 整理成 markdown

這是 M2-2 的主菜 — 用 IDE 處理大檔案。瀏覽器版的 AI 看 PDF 有上限,IDE 可以一次處理幾十頁的文件。先學起點 prompt,再學 M1-1 四要素優化版。

動手前先確認: 找一份你想分析的 PDF(10-30 頁最好上手),例如永續報告書、政府開放資料、行業白皮書,丟到 my-first-page 資料夾。

起點 Prompt(一行)

幫我讀 paper.pdf 整理成 report.md

這句會跑,但結果通常是「全文照抄」沒有重點。看出差別後再用下面四要素版重做。

用 M1-1 四要素優化版(推薦)

幫我讀 paper.pdf 整理成 report.md

角色 我是 [你的職位 — 例如 ESG 顧問],
     客戶看這份要做策略決策

任務 摘要重點 不要照抄全文
     找出核心發現 + 關鍵數據 + 可行動建議

格式 三層架構
     1. 核心發現 (3 點 每點 50 字內)
     2. 數據洞察 (含 1 張數據表)
     3. 行動建議 (3 條 每條一個動詞開頭)

限制 保留原文關鍵術語 不要意譯
     原文有英文專有名詞保留英文
     報告長度 1 頁 A4 印得下

預期產出: report.md 渲染後是有結構的三層報告,不是流水帳。

agy ・ report.md 預覽

核心發現

2025 年永續報告書數量年增 38%,中小企業佔比首超 50%
SASB 與 IFRS S1/S2 雙軌揭露成主流,獨採 GRI 比例下滑
第三方驗證需求暴增,Limited Assurance 為主流選項

數據洞察

年度

發行家數

YoY

2023

1,247

+12%

2024

1,524

+22%

2025

2,103

+38%

行動建議

建立 IFRS S2 揭露能力因為金管會 2026 起強制
導入第三方驗證因為投資人開始質疑可信度
對標 SASB 業別指標因為國際買家會查

三層結構清楚,有數據表,行動建議都是動詞開頭 — 客戶看了能決策

提示・ PDF 太大跑不動 PDF 超過 50 頁 IDE 會吃力,先拆段:

paper.pdf 太大跑不動
請先抓 前 30 頁(目錄+前言+第 1 章)
做核心發現摘要 之後我再餵後面章節

PDF 是掃描檔不能複製文字? 叫 AI 先 OCR:

paper.pdf 是掃描檔
請用 pdftotext 或 OCR 工具
先轉成純文字檔 paper.txt
再做後續摘要

M2-2 Round 4 LV2 變化 1 簡報大綱

R4-B ・ PDF 變化 1:簡報大綱

同一份 PDF,目標換成「做 8 頁簡報」。給上司提案、給客戶 pitch 用。

動手前先確認: R4-A 已試過,知道怎麼餵 PDF。準備用同一份 PDF 或換一份新的。

給 AI 的 Prompt

幫我把 paper.pdf 轉成 8 頁簡報大綱

格式 markdown 每頁用 # 標題
每頁 1 個主標題 + 3 個 bullet
重點 不要文字牆 一個 bullet 一句話

8 頁建議結構
1. 封面 (報告標題 + 1 句副標)
2. 為什麼這個議題重要 (3 點)
3. 現況數據 (3 個關鍵數字)
4. 三大發現 (3 點)
5. 案例對照 (3 個產業範例)
6. 行動建議 (3 條)
7. 風險與限制 (3 點)
8. 總結 + 聯絡資訊

我之後用簡報工具做成可投影的簡報檔

預期產出: slides-outline.md 是 8 頁的結構化內容,每頁標題 + 3 bullet。

slides-outline.md ・預覽縮圖

1 ・封面

2025 永續報告趨勢

2 ・為什麼重要

三大趨勢

3 ・現況

關鍵數字

4 ・發現

三大主軸

5 ・案例

產業對照

6 ・建議

行動清單

7 ・風險

限制

8 ・總結

Q&A

8 頁縮圖示意 — 每頁標題明確,可以直接拿去做 PowerPoint / Keynote / Google Slides 任何簡報軟體

M2-2 Round 4 LV2 變化 2 報告格式

R4-C ・ PDF 變化 2:正式報告

變化 1 是 8 頁簡報。變化 2 換成 4-5 頁的正式報告 — 適合寄客戶結案、學術送審、董事會簡報用。

動手前先確認: 同一份 PDF 來源。決定報告給誰看(客戶 / 學術 / 內部高層)— 這影響語氣。

給 AI 的 Prompt

幫我把 paper.pdf 整理成正式報告 report-formal.md

讀者 [客戶高層 / 學術評審 / 董事會 — 三選一]
結構
- 摘要 (一段 100 字 客戶 30 秒讀完抓得到重點)
- 第 1 章 現況分析 (200 字 + 1 個重點數據表)
- 第 2 章 三大發現 (200 字 + 條列)
- 第 3 章 建議方向 (200 字 + 行動清單)
- 結論 (一段 50 字)
- 附錄 (參考資料原始連結)

語氣
- 正式但不繞口 不要學究腔
- 數據都標出處頁碼
- 不要用 emoji
- 不要堆冗詞「值得注意的是」「我們可以發現」

預期產出: report-formal.md 是 4-5 頁的正式報告,結構固定,可以直接複製貼到 Word / Pages / Google Docs 排版。

M2-2 Round 4 LV2 變化 3 摘要卡片

R4-D ・ PDF 變化 3:社群分享卡

變化 3 換成「給沒空看的人」的版本 — 50 字 / 200 字 / 500 字三種長度,直接貼 LinkedIn / Line 群組 / 報告通訊。

動手前先確認: 同一份 PDF 來源。決定要哪個長度(50 / 200 / 500)。

給 AI 的 Prompt(三長度都拿)

幫我用三種長度摘要 paper.pdf

50 字版 (給 Line 群組 / TG 分享用 短到一眼讀完)
200 字版 (給 LinkedIn 貼文用 含 3 個重點 bullet)
500 字版 (給內部信件 / 周報用 含背景 + 重點 + 建議)

風格
- 第一句要鉤子 抓人想往下讀
- 不要學術術語 用人話
- 結尾留問句或行動引導

把三個版本都列出來 我選一個用

預期產出: AI 給你三個版本長度的卡片,可以直接貼到對應平台。

LinkedIn ・發文預覽

200 字版範例・適合 LinkedIn 貼文・ 50 字版可用於 Line 群組 / 500 字版可用於內部信件

M2-2 Round 5 LV3 輸出格式 1 HTML 簡報

R5-A ・ md 轉 HTML 簡報

R4 把 PDF 變 md,R5 把 md 變成可以分享的最終格式。最酷的是 HTML 簡報 — 一個檔案打開就是簡報,還能放上網。

動手前先確認: R4 已產出 slides-outline.md 或 report.md。決定簡報用途(自己練講 / 給客戶 / 投標)。

給 AI 的 Prompt

把 slides-outline.md 做成一個 HTML 簡報 檔名 slides.html

要求
- 一頁一個區塊 滿版顯示 比例 16:9
- 第一頁是封面 最後一頁是問答
- 配色用主綠 #0F9D8A 配深藍 #0B3C5D 加漸層
- 中文字體看起來好看不要鋸齒
- 按鍵盤左右鍵可以翻頁
- 右下角顯示目前第幾頁 共幾頁
- 不要放動畫不要放 emoji

做成一個 HTML 檔就好 我直接用瀏覽器打開就能看
做完幫我 commit + push 上 GitHub
告訴我線上網址

預期產出: 一個 slides.html 檔,瀏覽器打開全螢幕 → 鍵盤翻頁 → 線上網址可分享給別人。

提示・想要更專業的簡報做出來覺得太陽春,叫 AI 升級加轉場跟講者備註:

這版簡報我想要更專業一點
請幫我加
- 換頁淡入淡出的轉場效果
- 每頁下方一個講者備註區只給我看不給觀眾看
- 全螢幕模式按 F 鍵切換
保留我原本的配色不要動 重做後給我新網址

M2-2 Round 5 LV3 輸出格式 2 PDF

R5-B ・ md 轉 PDF 報告

寄客戶 / 投標 / 學術送審還是 PDF 最通用。AI 可以幫你做封面 + 目錄 + 頁碼,還能處理中文字體。

動手前先確認: 已有 report.md 或 report-formal.md。電腦沒裝什麼工具沒關係,AI 會自動幫你裝齊。

給 AI 的 Prompt

把 report.md 轉成 PDF 檔 檔名 report.pdf

要求
- A4 直式
- 含封面 (寫標題 / 副標 / 我的名字 / 日期)
- 含目錄
- 加頁碼放右下角
- 加頁眉 左邊報告標題 右邊我的名字
- 中文字體用系統內建 顯示要清楚不能變方框

我電腦是 [macOS / Windows]
你判斷用哪個工具最穩定 自己選
如果我電腦沒裝那個工具 你先幫我裝

完成後跟我說 PDF 檔放在哪個位置
我點兩下打開檢查

把 [macOS / Windows] 換成你的電腦系統。AI 會挑適合那個系統的工具。

預期產出: 一個 report.pdf 檔,雙擊打開有封面、目錄、頁碼、頁眉,中文清楚不變方框。

提示・ PDF 中文變方框打開 PDF 中文字變方框,叫 AI 換中文字體再做一次:

PDF 打開中文字全變方框
請改用我電腦系統有的中文字體
macOS 用蘋方 PingFang TC
Windows 用微軟正黑體 Microsoft JhengHei
重做一次 PDF 給我

M2-2 Round 5 LV3 輸出格式 3 pptx

R5-C ・ md 轉 PowerPoint 檔

給不會打開 HTML 的人(老闆 / 客戶 / 政府窗口)還是要 pptx。AI 幫你出一份可繼續編輯的 PowerPoint 檔。

動手前先確認: 已有 slides-outline.md。電腦有 Python(沒裝 AI 會教安裝)。

給 AI 的 Prompt

把 slides-outline.md 做成 PowerPoint 檔 檔名 slides.pptx

要求
- 16:9 寬螢幕比例
- 每個大標題一張投影片
- 配色用主綠 #0F9D8A 配深藍 #0B3C5D
- 字體用中文好看的 標題粗一點 內文中等大小
- 第一頁封面寫 大標 / 副標 / 我的名字 / 日期
- 最後一頁是問答頁 加我的聯絡方式

我電腦是 [macOS / Windows]
你判斷用什麼方式最穩 自己選 沒裝的工具先幫我裝

完成後跟我說檔案放在哪
我用 PowerPoint / Keynote / Google Slides 打開繼續調

把 [macOS / Windows] 換成你的電腦系統。

預期產出: 一個 slides.pptx 檔,可用 PowerPoint / Keynote / Google Slides 打開繼續調整圖文。

提示・寄給同事字體變宋體自己 Mac 打開漂亮,寄給 Windows 同事字體變宋體。叫 AI 改成跨系統字體:

pptx 寄給 Windows 同事打開字體變難看
請改用兩邊都有的字體
中文用 微軟正黑體 (Microsoft JhengHei)
這樣 Mac 跟 Windows 打開都好看 重做一次

M2-3 Round 2 SSH 一句話 vibe coding 精神

R2 ・一句話讓 IDE 幫你設好 SSH key

傳統教學會教你開 terminal 下 ssh-keygen 一堆指令 — 但 vibe coding 不該被基礎設施卡住。設 SSH key 也是一句話搞定:讓 IDE 帶你跑。

動手前先確認: agy / Claude Code 已開啟,在你的個人資料夾(不是 my-first-page 內部 — 因為 ssh key 是電腦級不是 repo 級)。GitHub 帳號登入準備好。

給 AI 的 Prompt(一行就夠)

帶我設定 GitHub SSH key 直接下指令
每個步驟完成後告訴我下一步

兩行就夠。AI 會在 Chat 裡一步一步帶,每步等你確認再做下一步。

預期 IDE 跑的流程:

agy ・ SSH 設定流程

1

產生 SSH key pair (在 ~/.ssh/)

ssh-keygen -t ed25519 -C "[email protected]"

2

複製公鑰到剪貼簿

pbcopy < ~/.ssh/id_ed25519.pub

3

換你動作:打開 github.com/settings/keys 貼上公鑰

title: "MacBook Pro 2025"

4

測試連線(回到 IDE 確認)

ssh -T [email protected] → Hi alanchen! 表示成功

4 步驟・第 3 步換你貼到 GitHub 網頁・其他 3 步 AI 都直接幫你跑

提示・私鑰絕不外流 ~/.ssh/ 裡的 id_ed25519 (沒 .pub 那個) 是私鑰,永遠不上傳、不複製給別人、不貼任何網站。只有 id_ed25519.pub 公鑰才能貼 GitHub。

跑失敗時怎麼救?

你看到什麼	把這句貼回 AI
ssh-keygen 跳「Permission denied」	ssh-keygen 跳 permission denied。請檢查 ~/.ssh 資料夾是否存在,沒有就 mkdir ~/.ssh && chmod 700 ~/.ssh,再重跑
貼到 GitHub 後 ssh -T 還是說 access denied	貼公鑰後測試還是 access denied。請確認:(1) GitHub Settings → SSH keys 真的看到那把 key (2) ssh-add ~/.ssh/id_ed25519 加進 agent (3) git remote -v 是不是 SSH 格式 [email protected]:... 而不是 https://...
已經有 id_ed25519 不知道要不要覆蓋	~/.ssh 已經有 id_ed25519。請列出現有的 key 並驗證能不能用,如果能用就不要覆蓋,直接用現有的 .pub 貼到 GitHub

M2-3 Round 3 LV1 第一次 push

R3 ・在 IDE 一句話 push 上 GitHub

SSH 設好之後最爽的時刻 — 不用記 git add / commit / push 三條指令。一句中文 AI 就幫你跑完。

動手前先確認: R2 SSH 已設好。my-first-page 已建好 GitHub repo。git remote 已連到 GitHub (git remote -v 看得到 origin)。剛改完一個檔案準備上傳。

給 AI 的 Prompt

幫我把 slides.html commit 跟 push 上 GitHub
commit message 寫「加上 M2-2 簡報」

預期效果: AI 自動跑 git add slides.html → git commit -m "加上 M2-2 簡報" → git push,Chat 顯示三步完成 + GitHub 網址。重新整理 GitHub repo 頁面看得到新 commit。

agy ・推送結果

✓git add slides.html

✓git commit -m "加上 M2-2 簡報"

[main a3f2c8d] 加上 M2-2 簡報・ 1 file changed

✓git push origin main

→ github.com/alanchen/my-first-page

✓完成・線上可查看

https://alanchen.github.io/my-first-page/slides.html

IDE 把三條 git 指令包成一句中文・完成後直接給你網址

提示・ commit message 別偷懶參照 M2-1 R4 的寫法 — 動詞 + 改了什麼。別寫「update」「fix」「asdfasdf」這三種未來會讓你後悔的寫法。

跑失敗時怎麼救?

你看到什麼	把這句貼回 AI
push 跳 rejected (non-fast-forward)	push 被拒絕說 non-fast-forward。代表遠端有別的 commit 我沒拉。請幫我 git pull --rebase 先同步遠端,再 push
push 後 GitHub 沒看到新 commit	push 顯示成功但 GitHub 看不到。請確認 git branch 我在 main 分支・ git log 真的有新 commit ・ git remote -v 確認 origin 連到對的 repo
GitHub Pages 還沒更新	push 成功但 alanchen.github.io 還是舊版。GitHub Pages build 要 1-2 分鐘,去 repo Actions 頁看 build status,完成才會生效

M2-3 Round 4 LV2 多頁網站

R4 ・從一頁升級成多頁網站

my-first-page 原本只有 index.html。升級成「首頁 + 簡報區 + 檔案區」三頁,加共用 navbar。這是個人作品集網站的基本架構。

動手前先確認: R3 已成功 push 過。my-first-page 有 index.html 跟 slides.html(M2-2 做的)。決定要不要加 files.html(放 PDF / md 檔下載)。

給 AI 的 Prompt

幫我把 my-first-page 升級成多頁個人網站

頁面架構
- index.html  首頁  含 hero + 自我介紹 + Pinned 作品 3 個
- slides.html 簡報區 列我做的所有簡報 含縮圖跟連結
- files.html  檔案下載 提供 PDF / md / pptx 下載

共用 navbar 三個分頁切換
當前頁面 highlight 顯示
手機版 navbar 收成漢堡選單

設計風格
- 配色 主綠 #0F9D8A 配深藍 #0B3C5D
- 字體 Noto Sans TC
- 手機 RWD 支援

每頁底部加一個 footer
含 © 我的名字 + GitHub 圖示 + email 圖示

最後幫我 commit 跟 push 上 GitHub
commit message「升級成多頁個人網站」

預期效果: 線上網址 alanchen.github.io/my-first-page 變成有三個頁面、共用 navbar 的個人網站。

alanchen.github.io/my-first-page

陳光・ ESG 顧問

「幫品牌把永續報告寫得有人想看」

Pinned 作品

2025 永續趨勢報告

客戶碳排試算工具

ESG 簡報範本庫

三頁切換・當前頁面 navbar 高亮・桌機橫排 / 手機收成漢堡

提示・ navbar 切不過去多頁網站最常見的 bug 是 navbar 連結路徑寫錯。叫 AI 檢查:

navbar 點簡報跳不過去 跳 404
請確認 a href 路徑是相對路徑 例如 href="slides.html"
不是 href="/slides.html" (絕對路徑會在 Pages 子目錄出問題)

跑失敗時怎麼救?

你看到什麼	把這句貼回 AI
三頁 navbar 樣式不一致	三頁的 navbar 樣式不一樣排版有差。請把 navbar 抽出來放 partials/navbar.html 或統一寫在 styles.css 三頁都引用
手機版 navbar 擠成一團	手機打開 navbar 三個分頁擠在一起。請加 media query (max-width:600px) 把 navbar 收成漢堡選單點漢堡才展開
GitHub Pages 部署後第二頁 404	首頁 OK 但點簡報跳 404。請確認 slides.html 真的有 commit + push (git status 看) 不是只在我本機存在

M2-3 Round 5 LV3 飲料點餐升級 Stage 1 接續

R5 ・ Stage 1 飲料點餐升級成 GitHub Pages 版

M1-3 你用 GAS Web App 做了飲料點餐系統 — 但網址又長又怪不適合分享。Stage 2 升級:資料改存學員自己的瀏覽器、自訂網址、可放 GitHub Pages,變成可以隨時分享給朋友的網頁。

動手前先確認: M1-3 飲料點餐已能跑(GAS 版)。把 GAS 那邊的 index.html 內容複製下來 — 或叫 IDE 直接從 clasp 拉下來。

給 AI 的 Prompt

幫我把這個飲料點餐網頁改版 放到 GitHub Pages 上線
完成後給我網址

原本網頁的程式碼在下面 (這是 M1-3 用 Google 試算表存資料的版本)
[把你 M1-3 的 index.html 整段貼在這裡]

我要的改版
- 不再連 Google 試算表 改成資料存在使用者的瀏覽器裡
  (這樣不用網路也能用 比較快)
- 保留四個功能 加飲料 / 訂單列表 / 結帳 / 清空訂單
- 結帳後算總金額
- 加一個按鈕可以把訂單分享到 LINE
- 配色維持原本的綠色不要動

完成步驟
1. 幫我建一個新的 GitHub repo 取名 drink-order
2. 用 SSH 推上去 (M2-3 R2 設好的)
3. 開 GitHub Pages 功能
4. 等它部署好 給我最終網址

把 [把你 M1-3 的 index.html 整段貼在這裡] 換成 M1-2 你做的飲料點餐網頁的 code。

預期效果: 線上網址 alanchen.github.io/drink-order 是新 repo,點開是飲料點餐介面,可以加、結帳、看訂單列表。資料存在學員自己的瀏覽器,重新整理還在。

alanchen.github.io/drink-order

小光的飲料店

珍珠奶茶大NT$ 65

四季春中NT$ 45

檸檬綠大NT$ 55

結帳 NT$ 165

3 筆訂單・已存在瀏覽器

手機版預覽・結帳後資料留在自己的瀏覽器・點 LINE 分享按鈕直接傳訂單到群組

提示・跑起來資料沒存到結帳完重新整理發現訂單不見了。叫 AI 修:

我加飲料 結帳後重新整理 訂單不見了
請改成資料存在瀏覽器裡 重新整理還在
原本連 Google 試算表的部分都拿掉 不要有任何 Google 試算表的程式碼殘留

M2-4 Round 2 會記住的指令 M2-1 R5 配套

R2 ・做一個會記住的安全檢查指令

M2-1 R5 你故意 commit 假 Key 體驗洩漏感受。R2 教你做一個「會被 AI 記住」的安全檢查指令 — 以後一句「掃 API Key」AI 就自動跑一次整個資料夾的檢查。這是 vibe coding 的真實價值:設一次永久用。

動手前先確認: agy / Claude Code 已開啟。在 my-first-page 資料夾。M2-1 R5 故意洩漏的假 Key 可能已被你或 GitHub 清掉沒關係 — 下面的 prompt 第一段會自動補回去。

給 AI 的 Prompt

這是兩階段任務 請依序做完

階段一 先補回測試用的假 Key (M2-1 R5 教學素材可能已清掉)
請檢查 index.html 裡面有沒有 sk- 或 ghp_ 開頭的假 Key
如果沒有 幫我加回去這兩行
  FAKE_API_KEY = "sk-proj-FAKE1234567890abcdefghij"
  FAKE_GH_TOKEN = "ghp_FAKEabcdefg1234567890hijklmn"
旁邊註解「教學用假 Key 等下用安全檢查清掉」
有的話直接進階段二

階段二 做一個會記住的安全檢查指令 取名 check-secrets

以後我說「掃 API Key」「檢查 secret」「安全檢查」
這三句任一句 你就自動跑這個檢查

檢查要做的事
1. 看我這個資料夾裡的所有檔案
   找有沒有像下面這幾種開頭的 API Key
   - sk- 開頭 (OpenAI / Anthropic 的)
   - ghp_ 開頭 (GitHub 的)
   - AIza 開頭 (Google 的)
   - xoxb- 開頭 (Slack 的)
2. 找到後一個一個列給我看 (告訴我在哪個檔案哪一行)
3. 每一筆問我
   - 這個是假 Key 要清掉嗎
   - 還是是真 Key 要保留 (那要搬到 .env 檔案不能進 GitHub)
4. 確認我的回答後 幫我改檔 + commit + push 上 GitHub
5. 最後提醒我 .env 檔絕對不能上傳 GitHub

建好之後立刻跑一次測試
找出剛才階段一補回去的那兩條假 Key
幫我把它們清掉 + commit「清掉教學用假 Key」+ push

預期產出: AI 記住這個指令,下次一句「掃 API Key」就會自動跑整個資料夾的檢查。

agy ・指令已建立

check-secrets ・ AI 已記住

觸發句:檢查 secret / 掃 API Key / 安全檢查

掃描範圍:整個資料夾・自動排除系統檔

已存進 AI 的記憶區・換專案也能用

下次一句話就能跑:

你：掃 API Key agy：檢查中... 找到 2 處可疑 → index.html:13 FAKE_API_KEY = "sk-proj-FAKE..." → index.html:14 FAKE_GH_TOKEN = "ghp_FAKE..." 要清掉嗎?(yes / 移到 .env / 保留)

指令一次建好・之後每個專案都能用・不用每次重新解釋掃什麼怎麼掃

提示・取名要短指令名取簡單兩個英文字以下才好觸發。check-secrets 比 verify-api-credentials-leakage 好用 100 倍。

M2-4 Round 3 LV1 變體 A 三層架構便利

R3-A ・三層架構會議摘要器(變體 A 含 Key)

M2-4 主菜 — 學完整三層架構:GitHub Pages 前端 → GAS Web App 後端 proxy → Gemini API。變體 A:Key 寫進 prompt 給 AI,便利但 chat 紀錄留下風險。

動手前先確認: (1) M2-3 SSH 已設好可 push (2) agy / Claude Code 開啟 (3) Google AI Studio 拿到 Gemini API Key (AIzaSy... 開頭) (4) Google 帳號可登入 script.google.com

給 AI 的 Prompt(變體 A:Key 直接放 prompt 裡)

做會議摘要器
前端 index.html 用 SSH 登入放 GitHub Pages
後端用 clasp 幫我設好 GAS 存 GEMINI_KEY
key: AIzaSy你的 Key 整段貼這
保護好 Key 避免上傳洩漏
完成兩個部署 給我兩個網址
完成後告訴我去哪裡確認 Key

把 AIzaSy你的 Key 整段貼這換成你實際的 Gemini API Key。便利度高 — AI 直接幫你寫進 GAS 後台的安全設定區,不用手動貼。

預期產出: agy 自動完成三件事:(1) 開 my-meeting-summary repo + 部署 GitHub Pages (2) 用 clasp 建 GAS Web App + 把 Key 存進 GAS 後台的安全設定區 (3) 前後端串好,給你兩個網址。

三層架構流程

前端

使用者貼會議逐字稿

GitHub Pages

cooperation.tw/meeting-summarizer/

→

後端 proxy

GAS Web App 收請求加 Key 轉 Gemini

script.google.com

GEMINI_KEY 存 Properties

→

AI

Gemini 摘要回傳

generativelanguage.googleapis.com

Key 永遠在 GAS 後台的安全設定區・前端網頁完全沒有 Key ・三層架構保證 Key 不外洩

變體 A 便利:你貼 Key 給 AI 一句話三層全部設好・風險:Key 留在 IDE chat 紀錄(只在自己電腦)

trade-off ・為什麼有 A B 兩變體變體 A 便利但 Key 進過 prompt(chat 紀錄留下 — 只在你電腦)。變體 B(下一張卡)Key 你自己貼進 GAS UI — 多花 30 秒但 Key 從不離開你手。
建議:第一次跑就用變體 A 學流程,熟悉後切變體 B 養成安全習慣。

跑失敗時怎麼救?

你看到什麼	把這句貼回 AI
GAS Web App 第一次點開要求授權	這不是 bug 是 Google 安全機制・第一次點 GAS Web App 網址會要求授權 (個人 Google 帳號 → Advanced → Go to 你的腳本) ・一次授權後永久通行
clasp 找不到	terminal 跳 clasp not found ・請幫我裝:npm install -g @google/clasp ・裝完跑 clasp login 用我的 Google 登入
呼叫 Gemini 跳 403	GAS 呼叫 Gemini 跳 403 ・我的 Key 應該是對的・請確認 (1) Key 真的存在 GAS 後台的安全設定區 (打開 GAS 設定確認) (2) GAS 的 callGemini 函式有從 GAS 後台讀 GEMINI_KEY 而不是寫死在程式碼裡

M2-4 Round 3 LV1 變體 B 三層架構安全推薦

R3-B ・三層架構會議摘要器(變體 B 不含 Key 推薦)

同樣的三層架構,但 Key 不進 prompt。AI 幫你開好 GAS,告訴你 Key 要去哪裡貼 — 你自己手動貼 30 秒。Key 從不離開你手,養成「程式碼跟 secret 永遠分離」的好習慣。

動手前先確認: 同 R3-A,但 Key 不用先準備在剪貼簿 — 開好 GAS 後再去貼。

給 AI 的 Prompt(變體 B:不含 Key 推薦)

做會議摘要器
前端 index.html 用 SSH 登入放 GitHub Pages
後端用 clasp 幫我設好 GAS 存 GEMINI_KEY
保護好 Key 避免上傳洩漏
完成兩個部署 給我兩個網址
完成後告訴我去哪裡放 Key

比變體 A 少兩行(沒貼 Key)。其他都一樣。AI 會幫你開好 GAS、設好後台框架,最後告訴你「請去 script.google.com/d/.../edit 點左下齒輪 → 安全設定區 → 新增一筆 GEMINI_KEY」。

預期產出: 兩個網址 + 一個指示「請去這裡貼 Key」。

agy ・變體 B 流程

1

建 GitHub repo my-meeting-summary + SSH push

2

寫 index.html(前端 fetch GAS endpoint)

3

開啟 GitHub Pages

4

用 clasp 建立 GAS project + Code.gs proxy 邏輯

5

部署 GAS Web App ・拿到 exec 網址

6

把 GAS 網址寫進前端 fetch 路徑

7

換你:去 script.google.com/d/.../edit ・點齒輪 → 安全設定區 → 新增一筆 GEMINI_KEY 把你的 Key 貼進去

完成後測 https://cooperation.tw/meeting-summarizer/

6 步 AI 全跑完・第 7 步換你貼 Key(只貼進 Google 的設定 UI 不留 chat 紀錄)

提示・ GAS Web App 第一次手動授權 GAS Web App 第一次點開會要求授權,這是 Google 安全沙盒要求,不是 bug。流程:點「Advanced」→「Go to your script (unsafe)」→ 給你的 Google 帳號權限 → 完成後就永久通行,使用者不會再看到這個畫面。

M2-4 Round 4 LV2 客服分流 5 產業變化

R4 ・客服分流網頁(5 產業變化)

會議摘要器跑通了之後,同一個三層架構可以做客服分流 — 客戶提問丟進去,AI 分類成售前/售後/抱怨,給對應建議回覆。換 prompt 即可換產業。

動手前先確認: R3-A 或 R3-B 三層架構已部署成功。會議摘要器能跑就能改成客服分流(架構完全一樣只改 prompt)。

起點 Prompt(套你的產業)

幫我做客服分流網頁 串 Gemini
照三層架構 GitHub Pages + GAS + Gemini

業務情境
- 我賣 [產品/服務 — 例如 線上課程 / 飲料外送 / 保險]
- 客戶提問分三類:
  - 售前 (詢問價格 / 比較 / 適不適合我)
  - 售後 (使用問題 / 退換 / 客訴)
  - 抱怨 (情緒性強烈不滿)
- 各類給不同建議回覆
- 抱怨類自動標「轉真人」+ 通知主管 email

介面
- 左側貼客戶訊息
- 右側即時分類 (badge 顏色) + AI 建議回覆草稿
- 採用按鈕 / 修改按鈕 / 轉真人按鈕

風格沿用我的網頁(主綠 #0F9D8A)
完成後給我網址

把 [產品/服務] 換成你的產業。下面 5 個產業變化都可以套這個模板。

5 個產業展開

1餐廳訂位 — 訂位 / 改時間 / 取消 / 客訴菜色

2電商售後 — 退貨 / 物流追蹤 / 商品瑕疵 / 抱怨配送

3SaaS 客服 — 帳號問題 / 訂閱方案 / Bug 回報 / 功能建議

4保險業務 — 保費試算 / 理賠申請 / 條款解釋 / 客訴申訴

5教育機構 — 報名 / 課程內容 / 退費 / 投訴老師

預期產出: 客服面板,左貼訊息右出分類 + 建議回覆。

cooperation.tw/customer-service-flow/

客戶訊息(貼上)

「我昨天訂的珍奶送來只有一杯但我訂兩杯已經放半天了能不能補一杯不然我要去 Google 給負評」

抱怨 + 轉真人

AI 建議回覆草稿

「您好,真的非常抱歉漏送!我們立即為您安排補送 + 額外送一杯作為歉意,5 分鐘內到・已通知主管追蹤」

採用修改轉真人

抱怨類自動偵測情緒強度 + 通知主管 email

飲料外送範例・ AI 偵測情緒強度高 → 標「轉真人」+ 草稿 + 主管收到通知 email

提示・ AI 答非所問客服 AI 最常見問題 — 客戶問價格 AI 卻講保固。商業規則寫越具體 AI 答越準:

AI 把「課程多少錢」答成課程介紹
請在 GAS 那層加 system prompt
強調「客戶問價格 一定先給數字 再附說明」
給 3 個範例對話 讓 AI 學分類後回覆風格

M2-4 Round 5 LV3 agent 模式 4 步任務

R5 ・進 agent 模式跑 4 步任務

前面所有 prompt 都是「一句指令一個動作」。agent 模式 = 給 AI 一個目標 + 一串子任務,AI 自己排順序、自己跑、遇到問題自己除錯,只在完成時報告。學會這個你才算解鎖 vibe coding 真實生產力。

動手前先確認: R3 會議摘要器已部署成功且能跑。準備升級它(加字數限制 / 歷史 / 複製 / 部署驗證)。agy / Claude Code 用 agent 模式啟動。

給 AI 的 Prompt

我要你一次幫我做完四件事 中間不要每件來問我
你自己判斷怎麼做 遇到問題自己想辦法解決
全部做完才回來跟我說結果

目標 把我之前做的會議摘要器升級
網址 https://[你的 username].github.io/meeting-summary/

四件要做的事
1. 輸入框加字數限制 超過 500 字就提示「太長了請縮短」
2. 加歷史紀錄功能 我做過的摘要存最近 10 筆 重新打開還在
3. 摘要結果旁邊加一個按鈕 按下去複製成 email 格式
4. 改完 commit + push 上 GitHub 並且確認線上網站真的更新了

每件做完跟我說做了什麼 用一行字
中間遇到 bug 自己看錯誤訊息修 不要來問我
全部做完給我網址讓我測試

把 [你的 username] 換成你的 GitHub 帳號名。最關鍵的是開頭兩句:「中間不要每件來問我」「你自己判斷怎麼做」 — 這兩句是進 agent 模式的鑰匙。沒這兩句 AI 會每改一行問你一次。

預期 agent 跑的過程:

agy ・ agent 模式運行中

✓Step 1: 加字數限制

改 index.html ・ textarea 加 maxlength + 即時計數

✓Step 2: 加歷史紀錄

資料存在學員自己的瀏覽器・存最近 10 筆・點開可重看

✓Step 3: 一鍵複製 email

摘要產生後加「複製成 email 格式」按鈕

●Step 4: push + 驗證部署

git add → commit「升級會議摘要器加字數限制歷史 email 複製」→ push 中...

等待 GitHub Pages build... (約 60 秒)

✓ HTTP 200 ・部署成功

✓完成・ 4/4 步

https://alanchen.github.io/meeting-summary/ ・請測試

4 步全自動・ AI 自己處理 commit message / build 等待 / HTTP 驗證・你只在完成時看結果

提示・觀察 agent 跑歪的訊號 agent 模式很爽但要會看訊號:(1) 同一個錯誤改 3 次還沒解 → 該停下手動介入 (2) AI 開始亂改不相干的檔案 → 中斷重新給目標 (3) AI 說「完成」但你開網址看不到改動 → 叫 AI curl 驗證部署。

跑失敗時怎麼救?

你看到什麼	把這句貼回 AI
AI 每一步還是問我	你還是每件來問我・請完全自己判斷做完四件事中間都不要問我・全部做完才回來報告結果
AI 跑一半卡住沒進度	你卡在 Step 2 沒進度・把當前狀態跟卡在哪告訴我・我幫你判斷要 skip 還是換做法
說完成但網址沒更新	你說完成但我開網址看不到改動・請 curl https://alanchen.github.io/meeting-summary/ 看 HTTP status + 看回的 HTML 有沒有新功能字串・真的有部署成功嗎

Stage 2 結業整合挑戰

結業・個人 AI 工作站(三選一)

Stage 2 學的 GitHub / IDE / 三層架構 / agent 模式整合起來,做一個自己工作會用到的小系統。三個方向選一,做完上線分享連結。

動手前先確認: M2-1 ~ M2-4 五次主課都跑過。SSH / clasp / Gemini Key 都可用。挑一個方向,寫一頁規格(目標 / 使用者 / 功能 / 部署路徑)再開工。

三個方向選一

方向 A:個人知識庫 + AI 助手

把你常讀的 PDF / 筆記 / 報告丟一個 repo,做一個查詢頁 — 輸入問題 AI 從你的資料找答案。

適合對象:研究員 / 顧問 / 內容創作者 / 業務

方向 B:工作流自動化

GAS 表單收資料 → GitHub Pages 顯示 → AI 分析 → Telegram / email 通知。完整事件驅動架構。

適合對象:行銷 / 行政 / 客服主管 / 課程承辦

方向 C:客戶互動系統

客戶網頁(問卷 / 客服 / 預約)+ AI 即時回覆 + GAS 記錄 + 自動寄信。可以是真實的小品上線給客戶用。

適合對象:個人接案 / 工作室 / 教練 / 自由業

共同架構樣板

my-workstation/
├── index.html        ← GitHub Pages 前端 (使用者介面)
├── styles.css        ← 統一風格
├── app.js            ← 前端邏輯 + fetch GAS endpoint
├── backend.gs        ← GAS API proxy (clasp 部署)
├── 安全設定區        ← GEMINI_KEY 等機密 (放在 GAS 後台不進程式碼)
├── .clasp.json       ← IDE 自動部署 GAS 設定
├── .gitignore        ← 排除 .env / .clasp.json
└── README.md         ← 給未來自己的說明書

給 agent 的 Prompt 樣板

進 agent 模式 我要做 Stage 2 結業作品

方向 [A 個人知識庫 / B 工作流自動化 / C 客戶互動系統]

我的目標
- [一句話描述要解決什麼問題]

使用者是誰
- [你 / 同事 / 客戶 / 學員]

主要功能
1. [功能 1]
2. [功能 2]
3. [功能 3]

部署架構
- 前端 GitHub Pages
- 後端 GAS Web App + 後台安全設定區 (放 GEMINI_KEY)
- AI Gemini API

要求
- 用 SSH + clasp 設好部署
- 全部跑完給我兩個網址 + 一份 README.md
- 我的 GitHub username 是 [你的 username]
- 第一次跑完之後 我會邊用邊回來請你升級

完成 step 自己排 不要每步問我

把 [ ... ] 填空 — 越具體 agent 跑出來的越接近你想要的。第一版跑出來不滿意是正常的,邊用邊升級才是 vibe coding 的常態。

預期產出:

兩個可訪問網址(前端 GitHub Pages + 後端 GAS Web App)
README.md 寫清楚怎麼用
能 demo 給同學看完整流程
能講出「我這個東西替我節省了什麼」一句話

提示・別過度設計結業作品不是要做出可商業化的產品 — 是要證明你能用 Stage 2 工具獨立完成一個三層架構小系統。功能少而完整 > 功能多但跑不動。一開始想做客服 + 知識庫 + 通知三合一的學員通常都做不完。先做 MVP。

R4 ・ 讓 IDE 幫你寫好 commit 訊息再 push

給 AI 的 Prompt

R5 ・ 故意 commit 假 API Key(教學伏筆)

給 AI 的 Prompt

LV3 ・ Profile README 個性化

給 AI 的 Prompt

陳光 ・ ESG 顧問

R3-A ・ 在 IDE 對 AI 說第一句

給 AI 的 Prompt

R3-B-1 ・ 加深色模式切換按鈕

給 AI 的 Prompt

R3-B-2 ・ 加自我介紹區塊

給 AI 的 Prompt

R3-B-3 ・ 加聯絡 CTA 按鈕

給 AI 的 Prompt

R4-A ・ 讓 IDE 把 PDF 整理成 markdown

起點 Prompt(一行)

用 M1-1 四要素優化版(推薦)

核心發現

數據洞察

行動建議

R4-B ・ PDF 變化 1:簡報大綱

給 AI 的 Prompt

R4-C ・ PDF 變化 2:正式報告

給 AI 的 Prompt

R4-D ・ PDF 變化 3:社群分享卡

給 AI 的 Prompt(三長度都拿)

R5-A ・ md 轉 HTML 簡報

給 AI 的 Prompt

R5-B ・ md 轉 PDF 報告

給 AI 的 Prompt

R5-C ・ md 轉 PowerPoint 檔

給 AI 的 Prompt

R2 ・ 一句話讓 IDE 幫你設好 SSH key

給 AI 的 Prompt(一行就夠)

R3 ・ 在 IDE 一句話 push 上 GitHub

給 AI 的 Prompt

R4 ・ 從一頁升級成多頁網站

給 AI 的 Prompt

R5 ・ Stage 1 飲料點餐升級成 GitHub Pages 版

給 AI 的 Prompt

R2 ・ 做一個會記住的安全檢查指令

給 AI 的 Prompt

R3-A ・ 三層架構會議摘要器(變體 A 含 Key)

給 AI 的 Prompt(變體 A:Key 直接放 prompt 裡)

R3-B ・ 三層架構會議摘要器(變體 B 不含 Key 推薦)

給 AI 的 Prompt(變體 B:不含 Key 推薦)

R4 ・ 客服分流網頁(5 產業變化)

起點 Prompt(套你的產業)

5 個產業展開

R5 ・ 進 agent 模式跑 4 步任務

給 AI 的 Prompt

結業 ・ 個人 AI 工作站(三選一)

三個方向選一

共同架構樣板

給 agent 的 Prompt 樣板

R4 ・讓 IDE 幫你寫好 commit 訊息再 push

R5 ・故意 commit 假 API Key(教學伏筆)

陳光・ ESG 顧問

R3-A ・在 IDE 對 AI 說第一句

R3-B-1 ・加深色模式切換按鈕

R3-B-2 ・加自我介紹區塊

R3-B-3 ・加聯絡 CTA 按鈕

R4-A ・讓 IDE 把 PDF 整理成 markdown

R2 ・一句話讓 IDE 幫你設好 SSH key

R3 ・在 IDE 一句話 push 上 GitHub

R4 ・從一頁升級成多頁網站

R2 ・做一個會記住的安全檢查指令

R3-A ・三層架構會議摘要器(變體 A 含 Key)

R3-B ・三層架構會議摘要器(變體 B 不含 Key 推薦)

R4 ・客服分流網頁(5 產業變化)

R5 ・進 agent 模式跑 4 步任務

結業・個人 AI 工作站(三選一)