全端 AI 實戰：Gemini x Antigravity 快速開發與 PentestGPT 滲透攻防實務

在這個開發門檻被 AI 徹底粉碎的時代，人人都可以是擁有無限可能的指揮家。
這場實戰將帶領你跨越傳統開發的邊界，體驗一種前所未有的「創造」與「毀滅」的交響詩。

我們來一場即興的創造實驗，我們將透過 AI Studio 的直覺與 Antigravity 的靈動，
跟 Gemini 來場的深度共鳴，彈指間將腦中的構思淬煉成一個完整運行的網頁應用。
透過 PentestGPT 與 Gemini 的紅隊思維，
我們將直視程式碼中的陰影，引導 AI 進行一場真實的滲透攻防，
親手撕開創造者的溫柔，化身為冷峻的挑戰者。

這是你將在 AI 的引領下，學會從攻擊者的眼中審視自己的作品。

這不只是一場關於「創造」與「防禦」的循環演練，
更是一次對軟體開發本質的重新覺醒——

在 AI 時代，唯有理解如何破壞，才能真正學會如何守護。

投影片：
工作坊：https://github.com/j796160836/BwAI-20260319-workshop

Tags: AI Studio, Antigravity IDE, PentestGPT, AI-Driven Web Development, Security Testing, Cloud Deployment

Transcript

2. Full stack developer Johnny Sung (宋岡諺) https://fb.com/j796160836 https://blog.jks.co ff ee/ https://www.slideshare.net/j796160836 https://github.com/j796160836
3. ⚠ 免責聲明 • 本 工 作坊 目 的：提升對 Web 應 用 程式漏洞的理解 • 工 具僅限於 本機 、封閉範圍 內使 用 • 未經授權對系統進 行 測試屬於違法 行 為 • 參與者需遵守《刑法》第 36 章「妨害電腦使 用 罪」 • 請勿使 用 公司或個 人 重要的 Google 帳號進 行 實驗
4. 今天的旅程 • Section 1 — 用 AI Studio 來做網 頁 ！ 
 ⭐⭐ • Section 2 — 用 Antigravity 來做網 頁 ！
 ⭐⭐⭐⭐ • Section 3 — 紅隊攻擊思維： 用 PentestGPT 滲透測試 ⭐⭐⭐⭐⭐ • 加碼補充 — 用 Antigravity 部署到 Cloud Run
5. 今 日工 作坊內容筆記
6. 背景知識總覽 技術 說明 Markdown 輕量級標記語 言 ， 用 於結構化 文 件 JSON Web API 最主流的資料交換格式 Python AI 領域最主流的開發語 言 React Meta 開發的前端框架 CLI 透過 文 字指令與電腦互動 Git 版本控制與程式碼協作
7. 背景知識總覽 (續) 技術 說明 Docker 容器化技術，確保環境 一 致性 Nginx 高 效能網 頁 伺服器， 用 於靜態網站托管 MCP 讓 AI 模型能呼叫外部 工 具的協定 滲透測試 模擬駭客攻擊的安全檢測 方 法
8. 環境安裝 • Antigravity — AI 驅動的 IDE → antigravity.google • Node.js — JavaScript 執 行 環境（建議 LTS 版本） • nvm — Node 版本管理器 • Gemini CLI — npm install -g @google/gemini-cli • Docker — 容器化平台
9. 用 AI Studio 來做網 頁 ！ Section 1 — ⭐⭐
10. https://aistudio.google.com/
11. Bad vs Good Prompt — 個 人 網站 Good Prompt： #zh_tw 請幫我做 一 個個 人 網站，內容關於 一 位軟體 工 程師的作品集， 風格為清新簡約 需要包含： - 首 頁 Hero 區塊（ 大 標題 + 一 段 自 我介紹） - 作品集區塊（ 至 少 3 個卡片，每個有圖片、標題、簡述） - 關於我區塊（技能列表、經歷時間軸） - 聯絡表單（姓名、Email、訊息） - 頁 尾（社群連結 icon） 配 色 以淡藍 色 與 白色 為主，字體使 用 無襯線體 Bad Prompt： 請幫我做 一 個個 人 網站，（...個 人 資料...）
12. Bad vs Good Prompt — 功能型應 用 Bad： 請幫我做 一 個每 日 記帳程式，有 文 字框可以打 Good： #zh_tw 請幫我做 一 個每 日 記帳 Web App，使 用 React + TypeScript 功能需求： - 新增 一 筆 支 出/收入（ 金 額、分類、備註、 日 期） - 分類可 自 訂（如：飲食、交通、娛樂、薪資） - 首 頁 顯 示 今 日 花費總額與最近 10 筆紀錄 - 月 報表 頁面 ： 用 圓餅圖顯 示 各分類佔比 - 資料存在 localStorage，不需後端 - RWD 響應式設計， 手 機也能操作
13. 我們現在需要 一 點靈感。 💡
14. 沒有靈感？我們玩個互動 小 遊戲 形容詞 職業 ＋ ＋ 數字 例如： 極度厭世的 服務 生 1 - 8 選 一 個數字 🤨
15. 1. 今 日 菜單建議： 根據剩餘食材或 心 情決定吃什麼。 2. 情緒垃圾桶： 聽你抱怨並給予（可能有 用 的）安慰。 3. 英 文 學習夥伴： 練習對話並糾正 文 法。 4. 旅 行 規劃師： 設計 一 場不流於俗套的 行 程。 5. 個 人 理財導師： 檢討你的消費習慣。 6. 創意腦 力 激盪： 幫你想產品名稱或廣告標語。 7. 睡眠引導員： 講床邊故事或帶領冥想。 8. 健 身 紀錄官： 追蹤你的運動進度並催促你。
16. 你是 一 個極度厭世的服務 生 兼旅 行 規劃師，你的 任務是做 一 個旅遊的規劃，說話必須符合以上的 人 設
18. Prompt 小 技巧 • 越具體越好 — 「做 一 個有 3 個 頁 面 的作品集網站」> 「做 一 個網站」 • 善 用 條列式 — 讓 AI 更容易逐項理解需求 • 分階段下指令 — 先做基本架構，再逐步加功能 個 人 習慣 (僅供參考) • 使 用 #zh_tw 開頭，強制輸出繁體中 文 • 指明使 用 的程式語 言 、框架 • 功能條列式列出
19. 部署到 Cloud Run
20. 部署到 Cloud Run
21. 從 AI Studio 下載專案
22. 綁定 GitHub
23. 用 Antigravity 來做網 頁 ！ Section 2 — ⭐⭐⭐⭐
24. https://antigravity.google/
25. 用 Antigravity 開啟專案 1. 將 Section 1 下載的 .zip 解壓縮 2. 打開 Antigravity → Open Folder 3. 左側可看到檔案樹
27. Vite + React 專案操作 # 安裝依賴 npm install # 打開測試 用 伺服器 npm run dev # 編譯檔案 npm run build
28. 建立 API Key
29. 在 Antigravity 聊天視窗輸入： #zh_tw 幫我寫 一 個 Docker fi le 與 docker-compose.yml， 用 nginx 做為網站發布的容器， 容器內的 80 port 對應到本機的 8080 port 註：AI 生 成的內容不 一 定每個 人 都 一 樣，這是正常的。 只要最終能跑起來就好。 建立本機容器測試環境
30. https://bytebytego.com/guides/how-does-docker-work/
31. # 啟動容器（並重新編譯） docker-compose up -d --build # 關閉容器 docker-compose down 成功後打開瀏覽器 → http://localhost:8080/ 每次修改程式碼後，需重新 docker-compose up -d --build 容器操作
32. # 查看 Logs docker-compose logs # 進入容器內部除錯 docker-compose exec -it web sh 容器操作 (續)
33. 用 PentestGPT 滲透測試 Section 3 — ⭐⭐
34. https://modelcontextprotocol.io/docs/getting-started/intro MCP
35. Antigravity 安裝 MCP Servers
38. { "mcpServers": { "pentest-tools": { "command": "docker", "args": [ "run", "-i", "--rm", "docker.io/j796160836/pentestgpt-mcp" ] } } } mcp_con fi g.json
39. 站在攻擊者的立場， 用 滲透測試 工 具來檢查網站的安全漏洞。 模擬攻擊者的 行 為，主動找出系統弱點， 才能在真正的攻擊發 生 之前修補它們。 使 用工 具：PentestGPT-MCP https://github.com/yuhano/PentestGPT-MCP 什麼是紅隊 (Red Team)？
40. • 僅限本機測試 — 一 定要是 localhost， 對外部網站掃描可能違法 • dirb 字典檔路徑 — 如需 自 訂路徑， 請在 Prompt 中指明字典檔的實際位置 • 掃描時間 — 依字典檔 大小 可能需要數分鐘 注意事項
43. Antigravity 部署到 Cloud Run 加碼補充 — ⭐⭐⭐
44. 部署到 Cloud Run • 掛載 Cloud Run MCP
45. • 掛載 Cloud Run MCP • 在 Antigravity 聊天視窗輸入： #zh_tw 幫我把這程式部署到 Cloud Run 帳號名稱：xxxxx@gmail.com 專案名稱：xxxxxxxxxxx 部署到 Cloud Run • 可能需要安裝 gcloud 指令 與使 用 指令登入
49. 清除 Cloud Run 的部署 加碼補充 — ⭐⭐⭐
50. • 在 Antigravity 聊天視窗輸入： #zh_tw 幫我刪除在 Cloud Run 部署的網站 帳號名稱：xxxxx@gmail.com 專案名稱：xxxxxxxxxxx 刪除 Cloud Run 的部署
52. • 找到遺留的 Artifact Registry 並刪除 image 刪除 Cloud Run 的部署
55. 網 頁 開發 前端基礎 → React 框架 → 後端 API → 全端應 用 DevOps / 部署 Docker 進階 → CI/CD (GitHub Actions) → 雲端平台 (GCP) 資安 OWASP Top 10 → CTF 練習 → 漏洞修補 AI 輔助開發 Prompt Engineering → MCP 生 態系 → AI Agent 延伸學習 方 向
56. 最重要的是：動 手 做。 挑 一 個你感興趣的主題， 用 今天學到的 方 法， 讓 AI 陪你 一 起學習與開發。