🤖 AI 應用

15 章學期制完整課程，分三段：會用 AI（提示詞、Agent、簡報、SPEC）、會做工具（Vibe Coding、串接、除錯）、會上線（安全、Git、部署）。零程式背景，也能做出並部署一個真的能用的小工具。

Part 1 · 會用 AI

把生成式 AI 變成日常工作的助力，從提示詞、AI Agent、簡報，到用 SPEC 指揮 AI。

1
AI 溝通術：提示詞設計原則與技巧
ChatGPTClaudeGemini
提示詞 5 大要素（RTCFE）+ 3 輪迭代練習 + 避開幻覺（AI 不知道但裝懂時編出來的錯誤內容）。
最後修訂日：載入中
2
從靈感到成品：AI 文件自動化與內容生成
NotebookLM（Google 文件 AI）
文件協作三步法（生 → 改 → 審）、會議錄音轉紀錄、Email/SOP（Standard Operating Procedure，標準作業流程）一條龍。
最後修訂日：載入中
3
無程式碼 AI 助理：GPTs、Gems、Projects
ChatGPT GPTsGemini GemsClaude Projects
Agent（會做事的 AI 助理）三元素：角色 + 知識庫 + 行為規則。
最後修訂日：載入中
4
AI Agent 進階應用
Manus多代理框架
多步驟 Agent、if-else 邏輯（電腦「如果…就…否則…」的判斷分岔）、生成器 + 評估器對抗機制。
最後修訂日：載入中
附錄 Claude Skills 進階
5
數據洞察與視覺呈現：AI 高效簡報術
Claude DesignGPT Image 2
資料 → 洞察 → 簡報三步法，繁中字符零失誤的 AI 生圖。
最後修訂日：載入中
6
用 SPEC 指揮 AI：把需求講清楚
SPEC（規格書）橋接章
四區塊萬用模板 Persona／Act／Theme／Structure，以及它和第 1 章 RTCFE 的關係。會把需求講清楚，就完成了開發的一半。
最後修訂日：載入中

Part 2 · 會做工具

不會寫程式，也能用 AI 做出一個真的能用的小工具，並看懂它背後的構造。

7
Vibe Coding 入門：利用 AI 打造個人工具包
Claude CodeVibe Coding
用對話讓 AI 幫忙寫程式，零程式背景也能做出小工具；當好產品經理、把 error 丟回去、分階段驗收。
最後修訂日：載入中
附錄 環境設定速查（動手前） Claude Design 原型 Gemini CLI 實戰
8
看懂網站構造：前端、後端與 API
前端／後端API／伺服器真實案例
用餐廳比喻看懂網站背後的兩個世界，走一次「拖檔案上傳」的完整旅程，最後拆解一個真實上線專案，把前端、後端、API、伺服器對到實際檔案。
最後修訂日：載入中
9
在自己電腦把它跑起來：三個咒語與一個保險箱
Node／npm.env.local
本機三咒語（install、dev、localhost）、指令不認識時怎麼判斷，以及放機密的保險箱。
最後修訂日：載入中
10
串接外部服務：金鑰、服務帳號與權限
Gemini APIApps ScriptVercel動手做
用兩種後端各做一個小工具：Apps Script 做「AI 偽命理師」、Vercel 做「英文日記寫作評分（上傳 PDF）」；學會三種身分、兩道真實的牆與「卡住時換個做法」。
最後修訂日：載入中
選修 資料庫循環系統完整實作
11
看懂錯誤訊息與 AI 除錯
錯誤碼速查靜默失敗
紅字是導航不是責備，三個動作 + 三位數速查（4 看自己、5 看對方、429 太急）+ 三招逼出靜默失敗。
最後修訂日：載入中

Part 3 · 會上線

把工具安全地備份、部署到網路上，讓全世界都能用，並為 Final Project 收尾。

12
安全：金鑰保管與 .gitignore
.gitignore金鑰保管
兩道防線（保險箱 + 別上傳名單）、範本公開實際保密、金鑰外露就作廢重產。
最後修訂日：載入中
13
備份與分享：Git 與 GitHub
GitGitHub
記憶卡 vs 雲端相簿、commit／push、改壞了能回到舊版本、上傳前安全檢查，public 為何也不可怕。
最後修訂日：載入中
14
部署上線：從本機到 Vercel
VercelFirebase部署動手做
一張全景圖看懂從本機到公開網址、兩種上線方式；build 打包、雲端保險箱重設、打得開不等於功能正常、上線後四種狀況的自救法；最後動手做一個全端網站、真的上線。
最後修訂日：載入中
15
踩坑地圖與 Final Project
踩坑地圖Final Project
術語小抄、踩坑地圖、四句心法的隨查懶人包，加上做出並部署你自己的小工具。
最後修訂日：載入中
選修 Final Project 完整開工指南

延伸應用 · 帶回你的工作

學完核心 15 章後，把這套能力變成每天自動運轉的工作流。

16
讓 AI 記住你的 SOP：說明書檔與 Skill 自動化重複作業
AGENTS.mdSkill自動化動手做
把每月重複的文書工作交給 AI：寫一份 AGENTS.md 說明書、做一個 Skill，之後把檔案丟進收件匣、說一句話，AI 就照你的 SOP 篩選整理、產出報告。
最後修訂日：載入中

AI 協作實例

把課程知識落地的實際成果展示。

★
本課成品規格書自動評分網站
SPECGemini APIApps Script全端部署
本課 Part 2、Part 3 從頭打造並部署上線的成品：把規格書拖進網頁，AI 從六個面向評分並給改進建議，結果自動存進 Google 試算表。點開直接用，也可拿來驗收你自己寫的 SPEC。
最後修訂日：載入中
案 1
高齡臺語運動指導備課實戰
Gemini GemsClaudeClaude Code教師備課型
Gemini Gems → Claude → Claude Code 三步接力，把一堂高齡運動指導課的備課做成 6 份組別活動單、1 份同儕檢核表、1 份教師指導手冊，共 8 份可印發 .docx。含 5 段可複製的指令範本。
最後修訂日：載入中
案 2
成 品日本關東八日旅遊指南
TailwindChart.js個人展示型
日式視覺單頁網頁：行前清單、車種對照、八日體力/花費圖表、每日交通指引、實用日語。可離線、可列印，點開直接看精緻成品。
最後修訂日：載入中
案 2
製作說明關東八日旅遊指南
Vibe CodingClaude Design示範性流程
從成品反向推導的製作流程：風格指定、版型生成、加互動、Chart.js 整合、部署到 GitHub Pages。含 5 段可複製的指令範本，學完能套到自己的單頁網頁。
最後修訂日：載入中
案 3
醫療品質專案管理儀表板
Vibe CodingClaude CodeIndexedDB
Gemini → Claude → SPEC（規格書）→ Claude Code 接力，跨醫院評鑑、JCI、QCC、醫策會競賽通用的儀表板。
最後修訂日：載入中
案 4
醫院滿意度自動分類器
Apps ScriptGemini APIGoogle Form
Google Form → Gemini 分類 → Sheets/Email 自動警示，把每天 N 封滿意度通知變成 P0 緊急案件（24 小時內必須處理的最高優先級）警報。
最後修訂日：載入中
案 5
成 品高中升學營隊搜尋平台
FlaskGemini API工具型
聚合 E-port API、unews 編輯精選、Gemini Google Search 三來源，82 所大學、158 個營隊一頁可見。可依地區、學群、費用篩選，截止日近的紅字提醒，點開直接用。
最後修訂日：載入中
案 5
製作說明高中升學營隊搜尋平台
Vibe CodingClaude Code示範性流程
六階段製作流程：搭骨架 → 找對的資料源 → 發現 JSON API → 介面與打包 → 修費用解析與去重 → 查證涵蓋率補位。含 6 段可複製的指令範本與 4 個踩雷紀錄，學完能套到任何「多來源聚合」場景。
最後修訂日：載入中
案 6
上線成品班級許願牆
FirebaseFirestore全端上線
第 14 章「動手做」的成品：用 AI 幾句話做出、再用 Firebase 免費部署上線的全端許願牆。任何人都能即時留言、重整後還在。點開直接玩。
最後修訂日：載入中