Vibe Coding 實戰課 — Stage 3 · 造系統
接上工具、教會技能 — 讓你的 AI 從助手變成專家
按 → 或空白鍵開始
CLI 安裝、GitHub 帳號、終端機基本操作
終端機輸入 claude 能進入對話介面
gh auth status 顯示已認證
這堂課的主軸
從「用 AI」進入「配置 AI」
你的 AI 有多強，取決於你幫它接了什麼工具、教了什麼技能
ROUND 1 · 0:00–0:20
AI 的備忘錄 — 每次啟動都先讀
macOS: Terminal / iTerm
Windows: PowerShell / CMD
進入互動式對話介面
mkdir my-project && cd my-project && claude
幫我建一個 CLAUDE.md 我是 [你的職業] 我的專案是 [簡述你的專案] 我偏好 [你的工作偏好]
AI 會問你幾個問題
根據你的回答生成一份 CLAUDE.md 文件
放在專案根目錄
AI 從零開始
不知道你是誰
不知道專案脈絡
回答泛用、不精準
AI 開場就「懂你了」
回答貼合你的專案
用你偏好的風格
省去重複解釋的時間
同一個 AI，有沒有 CLAUDE.md，回答品質明顯不同
CLI 開啟時自動載入
不需要手動提醒
每個資料夾可以有
自己的 CLAUDE.md
隨著專案演進
不斷補充新的脈絡
塞了 2000 字的個人歷史
技術棧列了 30 項
AI 反而混亂
抓不到重點
角色 + 專案目的
偏好的技術棧
產出風格要求
100~300 字最理想
# 專案：個人品牌網站 - 技術：HTML + CSS + vanilla JS - 風格：簡約、白底、中文介面 - 偏好：不用外部框架、手機優先 - 限制：單頁設計、圖片全部本地 # 產出規範 - commit message 用中文 - CSS 變數管理色彩 - 先確認再動手，不要自己延伸
每次啟動 CLI 都先讀
精簡 100~300 字
專案級的持久記憶
ROUND 2 · 0:20–0:45
同一個 AI，接上工具前後的能力差距
幫我查 GitHub 上最近很紅的 Claude Code 專案
AI 做不到 — 它沒有連接 GitHub 的能力
只能用訓練資料中的記憶回答
資訊可能過時或不準確
Anthropic 提出的開放標準
讓 AI 連接外部工具和資料
在 settings.json 加一段設定
重啟 CLI 就能使用
社群持續開發新的 MCP server
能力不斷擴展
GitHub 官方已經做好現成的，幾乎不用手動設定
在 Claude Code 輸入 /mcp，看到 github server connected 就完成
MCP = 給 AI 的「外掛接口」，讓 Claude 能直接讀 GitHub repo
不用每次貼程式碼，Claude 直接看你的專案
「我無法直接存取 GitHub」
只能給你過時的建議
靠記憶猜測
直接搜尋 GitHub API
即時回傳 repo 列表
Stars、更新時間、描述一次到位
"fetch": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-fetch"]
}
「幫我抓這個網頁的內容摘要」
AI 直接存取 URL、讀取內容、產出摘要
搜尋 repo / issue / PR
讀取程式碼
提交 commit
抓取任意網頁內容
讀取 API 回應
擷取文件摘要
即時網路搜尋
不受訓練資料限制
取得最新資訊
{ "github": { ... } <-- 少了逗號
"fetch": { ... } }
CLI 啟動直接失敗
沒有明確的錯誤提示
用線上 JSON 驗證器檢查
或請 AI 幫你 debug
「我的 settings.json 啟動失敗，幫我檢查格式」
claude mcp add --transport http github \ https://api.githubcopilot.com/mcp/ \ --header "Authorization: Bearer YOUR_GITHUB_PAT" /mcp
用 claude mcp add
不要手寫整份 JSON
需要團隊共用時
放在專案 .mcp.json
local / user scope
由 Claude Code 管理在 ~/.claude.json
MCP = AI 的 USB 插槽
每多接一個 MCP server，AI 就多一種能力
你不需要換一個更聰明的 AI — 只需要給它更多工具
能力不是固定的，而是可以擴展的
用 claude mcp add 新增工具
用 /mcp 確認 server 是否 connected
ROUND 3 · 0:45–1:10
教 AI 一次，它就永遠會這個技能
每個 Skill 一個目錄
裡面放 SKILL.md
description 負責觸發
內文定義流程與格式
放在 ~/.claude/skills/
Claude Code 可重複調用
~/.claude/skills/translate-formal/SKILL.md
翻譯時使用正式書面語
保留專有名詞不翻
附原文對照
讓 description 自動觸發
或輸入 /translate-formal
--- description: Translate English into formal Traditional Chinese --- # 正式翻譯 Skill ## 規則 - 使用正式書面語，避免口語化 - 專有名詞保留英文不翻譯 - 每段翻譯後附原文對照 - 技術文件用「您」不用「你」 ## 格式 - 中文翻譯 - (原文: English original)
「MCP 讓 AI 可以連結外部工具」
風格隨機、口語化
專有名詞可能被硬翻
每次都要重新交代規則
「MCP 使 AI 具備連結外部工具之能力」
(原文: MCP enables AI to connect...)
正式書面語、專有名詞保留
格式一致、可重複產出
# 會議紀錄整理 Skill ## 規則 - 摘要 3~5 條重點 - 每條重點標注負責人 - 列出待辦事項和截止日 - 語氣正式但簡潔 ## 格式 - 會議日期 / 與會者 / 重點 / 待辦
想想你工作中「每次都要重新跟 AI 交代的事」
那就是該寫成 Skill 的候選
「幫我寫好一點」
AI 不知道「好」的標準是什麼
產出不可預測
「正式書面語，保留專有名詞，附原文對照」
每一條都是可驗證的標準
產出穩定一致
| 層級 | 機制 | 範圍 | 學於 |
|---|---|---|---|
| 對話級 | 聊天記錄 | 當次對話 | M1-1 |
| 助手級 | GPT Instructions / Gem | 該助手 | M1-2 |
| 專案級 | CLAUDE.md | 該專案 | M3-1 |
| 全域級 | Skills | 所有專案 | M3-1 |
| 安全級 | .env / Secrets | 機密 | M2-2 / M2-3 |
從一次性對話到永久技能
五個層級組合起來就是你的「AI 配置」
教一次，永遠會
要具體有標準，不要太通用
記憶五層：對話 → 助手 → 專案 → 全域 → 安全
ROUND 4 · 1:10–1:30
不用全部自己寫 — 站在社群的肩膀上
commit-msg / code-review / translate / summarize 等
複製 .md 檔案到 ~/.claude/skills/
有 Skill vs 沒有 Skill 的產出差異
| 類型 | 名稱 | 功能 |
|---|---|---|
| MCP | GitHub | 查 repo / issue / PR |
| MCP | Fetch | 抓網頁內容 |
| MCP | Brave Search | 網路搜尋 |
| Skill | commit-msg | 規範 commit message |
| Skill | code-review | 程式碼審查 |
| Skill | translate | 翻譯 |
接外部工具
連接 GitHub / 網頁 / 搜尋引擎
讓 AI「出門辦事」
教方法和標準
控制品質和風格
讓 AI「做得專業」
MCP 查 GitHub + Skill 教寫好 commit
MCP 抓網頁 + Skill 教如何摘要
工具 + 方法 = 完整能力
modelcontextprotocol
GitHub 組織下的官方 server
awesome-mcp-servers
社群精選的 MCP 合集
任何 CLI 或 API
都能包成 MCP server
選 MCP 就像選 App — 先看有沒有人在用、有沒有持續維護
~/.claude/skills/ ├── translate-formal.md # 正式翻譯 ├── translate-casual.md # 口語翻譯 ├── code-review.md # 程式碼審查 ├── commit-msg.md # 規範 commit ├── meeting-notes.md # 會議紀錄 ├── blog-writer.md # 部落格寫作 └── data-analysis.md # 資料分析
用 kebab-case（小寫 + 連字號）
名稱就是功能 — 一看就知道這個 Skill 做什麼
MCP = 能做什麼（工具）
Skills = 怎麼做得好（方法）
社群生態讓你快速組裝出強大的 AI 配置
ROUND 5 · 1:30–1:50
工具 + 方法的乘法效果
GitHub MCP — 讀取 repo 程式碼
code-review Skill — 定義審查標準和格式
translate Skill — 確保產出是正式中文
「請提供程式碼，我來分析」
AI 無法自己讀 repo
你得手動貼程式碼
審查沒有統一標準
產出格式每次不同
「已讀取 32 個檔案，以下是審查報告」
自動讀取整個 repo
按照 code-review 標準審查
中文正式書面語輸出
格式統一、可重複執行
可以用講師提供的或自己找
「分析 [repo URL] 的程式碼品質，
用 code-review 標準，產出中文報告」
它會呼叫 GitHub MCP 讀程式碼
套用 code-review Skill 的標準
用 translate Skill 的格式輸出
「造 AI」不是開發 AI 模型
而是配置 AI 的能力
你的 AI 有多強，取決於你的配置有多完整
Fetch MCP 抓原文
+ translate Skill 翻譯
一鍵完成
GitHub MCP 讀 commit
+ summarize Skill 摘要
自動產出週報
Brave Search 搜資料
+ analysis Skill 框架
結構化分析報告
GitHub MCP 的 token 過期 → AI 說「無法存取」
Fetch MCP 沒裝 → AI 說「我無法抓取網頁」
Skill 檔名打錯 → AI 找不到對應技能
1. 確認 settings.json 格式正確
2. 確認 MCP server 能正常啟動
3. 確認 token / API key 有效
4. 確認 Skill 檔案在正確路徑
不是用 AI，而是配置 AI
MCP + Skills 組合起來
你的 AI 就是你的專屬專家團隊
ROUND 6 · 1:50–2:00
回顧 + 帶走完整的 AI 配置
每一輪都新增了一層能力
現在把它們整合成你的「AI 環境設定單」
~/.claude/
├── CLAUDE.md # AI 的備忘錄（全域）
├── settings.json # MCP 設定 + 權限
└── skills/ # 技能卡庫
├── translate.md
├── code-review.md
└── your-work.md # 你自己場景的 Skill
每個專案根目錄的 CLAUDE.md 是專案級備忘錄
~/.claude/CLAUDE.md 是全域級備忘錄
兩者共存，專案級優先
不只學了什麼，是想法怎麼變了
從「用通用 AI」→ 配置個人 AI 工作環境
| # | 常見問題 | 學到什麼 |
|---|---|---|
| 1 | CLAUDE.md 寫太長 | 精簡才有效 |
| 2 | JSON 格式錯 CLI 掛掉 | JSON 格式精確 |
| 3 | Skill 太通用 | 要具體有標準 |
| 4 | MCP 沒設好問題做不到 | 能力 = 工具配置 |
| 5 | 不知道社群有哪些資源 | 社群生態導覽 |
Stage 1~2 你在「用」AI
Stage 3 開始你在「造」自己的 AI 環境
這個環境會隨著你的經驗持續進化
全域 CLAUDE.md → 你的通用偏好 專案 CLAUDE.md → 專案脈絡 Skills → 可重複調用的技能
GitHub MCP → 版控 + 程式碼 Fetch MCP → 抓取網頁內容 Brave Search MCP → 即時搜尋
記憶層控制「品質」，工具層擴展「能力」
兩層疊加，AI 就是你的專屬專家
下一堂課 — M3-2
下一堂課的主題：站在巨人的肩膀上 — 大神專案 + 開源套用 + 風險辨識
M3-1 完成