Vibe Coding — Stage 3 · 造系統
M3-2

Vibe Coding 實戰課 — Stage 3 · 造系統

大神專案
+ 開源風險辨識

站在巨人的肩膀上 — 但先檢查巨人是不是好人

M3-2 3 小時 6 輪循環 帶走工具箱

按 → 或空白鍵開始

M3-1 回顧

上一堂課你已經建好了開發環境

CLI
Claude Code 終端操作
MCP
外部工具串接
Skills
自訂能力擴充
今天的主軸

帶著這些工具，去探索別人的專案
學會判斷哪些值得用、哪些藏了風險

六輪循環，逐層遞進

Round 1
大神專案導覽
Round 2
風險辨識
Round 3
Clone 改造
Round 4
限時 30min 部署
Round 5
注意事項 + 急救卡
Round 6
開源工具箱

今天的節奏
先用 → 帶風險 → 限時部署任務
M3-1 建好的工具，今天全部上場

ROUND 1 · 0:00–0:20

大神專案
AI 幫你讀 repo

30 秒理解別人花三個月寫的專案

為什麼要讀別人的專案

Open Source = 站在巨人肩膀上
從好的基礎改起，不必從零開始

學架構

看大神怎麼組織程式碼
比教科書更真實

省時間

現成的輪子不用重造
改三處就變自己的

建眼光

看多了好專案
判斷力自然提升

推薦大神專案

講師精選，每個都值得一看

1
awesome-claude-code

社群精選 CLAUDE.md 範例與最佳實踐

2
漂亮的個人網站 repo

可直接 Fork 改造成自己的作品集

3
實用自動化工具 repo

CLI 工具、MCP Server、Workflow 自動化

4
ai-cooperation/openclaw

講師實際作品 — 等下用來做資安分析練習

操作：選一個 clone 下來

TERMINAL
git clone https://github.com/xxx/awesome-project.git
cd awesome-project
操作條件

從推薦清單中選一個感興趣的專案
用 Claude Code 在終端機執行 git clone

5 min
選專案 + Clone

AI 30 秒摘要整個專案

PROMPT
幫我看這個專案的結構和功能
重點告訴我：
1. 這專案在做什麼
2. 用了哪些技術
3. 怎麼跑起來
觀察

AI 快速理解別人專案 → 不需要一行行看程式碼
過去需要一整天讀完的 repo，現在 30 秒搞定

AI 摘要會告訴你什麼

專案用途

「這是一個 CLI 工具
用來自動生成 README」

技術棧

「Node.js + TypeScript
依賴 OpenAI API」

啟動方式

「npm install → npm start
需要設定 .env」

不只是讀程式碼 — AI 還會找 README、package.json、設定檔
把分散的資訊整合成一份摘要

注意：clone 超大 repo

注意事項

git clone huge-repo.git

500MB 的 repo
clone 半天還沒完

解法

先到 GitHub 看 repo 大小
或用 --depth 1 只抓最新版

先看大小再 clone
養成好習慣

淺層 CLONE
git clone --depth 1 https://github.com/xxx/big-repo.git

Round 1 小結

AI 是你的 repo 導覽員

不必一行行讀程式碼
30 秒掌握專案全貌，決定值不值得深入

ROUND 2 · 0:20–0:45

風險辨識
OpenClaw 真實案例

用講師的 repo 當活靶，學會安全檢查

為什麼需要風險辨識

npm install 一個套件
等於信任了它背後的整條供應鏈
真實事件

event-stream 事件 — 熱門套件被惡意接管，植入竊取比特幣的程式碼
ua-parser-js 事件 — 週下載量 700 萬的套件被注入挖礦程式

供應鏈攻擊怎麼發生

熱門套件
→
維護者交出權限
→
植入惡意程式碼
→
npm install
→
你的機器中招
重點

攻擊者不需要直接攻擊你
只要汙染你信任的套件就夠了

Repo 安全檢查清單

1
Stars + 活躍度

Stars 數量、最近 commit 時間、Issue 回覆速度

2
package.json scripts

postinstall / preinstall 有沒有可疑指令

3
.env.example 需要什麼 Key

列了哪些 API Key — 你願意提供嗎

4
AI 掃描外部請求

有沒有向不明 URL 發送資料

5
README 完整度

文件差的專案，維護品質通常也差

操作：用 AI 掃描 OpenClaw

PROMPT
幫我檢查這個 repo 的安全性：
1. package.json 的 scripts 有沒有可疑指令
2. 依賴清單有沒有已知風險套件
3. .env.example 需要什麼 Key
4. 有沒有可疑的外部請求
5. README 完整度如何
操作對象

ai-cooperation/openclaw — 講師的真實專案
不是教科書範例，是上線運行的系統

AI 掃描結果解讀

講師帶讀：哪些正常、哪些要注意

正常項目
  • build / start / test 腳本
  • 主流框架依賴
  • MIT / ISC 授權
  • README 有安裝說明
需要注意
  • postinstall 執行外部腳本
  • 需要多組 API Key
  • 直接呼叫外部 API
  • 沒有 .gitignore

.env.example 告訴你什麼

.env.example
OPENAI_API_KEY=your-key-here
FIREBASE_API_KEY=your-key-here
ANTHROPIC_API_KEY=your-key-here
判斷重點

這些 Key 會花你的錢嗎
你願意讓這個專案使用你的 Key 嗎
有沒有替代方案（免費 tier / mock data）

postinstall 風險

package.json
"scripts": {
  "postinstall": "node setup.js",  // 安裝完自動執行
  "build": "next build",           // 正常
  "start": "next start"            // 正常
}
為什麼危險

npm install 之後會自動執行 postinstall
你還沒看過程式碼，它已經在你電腦上跑了

安全做法

先用 npm install --ignore-scripts 安裝
檢查完 postinstall 內容，確認安全再執行

開源專案信任三層模型

1
高信任 — 大型基金會 / 知名團隊維護

React, Vue, Next.js, Express — 可直接使用

2
中信任 — 社群活躍、Stars 多、持續更新

需要看 scripts、依賴、Issue 品質 — 檢查後使用

3
低信任 — 個人專案、久未更新、Stars 少

需要 AI 深度掃描 — 確認安全才使用

供應鏈安全

你信任的套件可能有惡意程式碼
你信任的依賴也可能被接管
關鍵思維

不是「這個套件安不安全」的問題
是「這個套件的依賴的依賴安不安全」的問題
一個 npm install 平均拉進 200+ 個依賴

依賴樹的深度

你的專案
→
套件 A
→
套件 B
→
被接管的套件 C
200+
平均依賴數量
一個 npm install 背後的真相

Round 2 小結

AI 是你的安全掃描器

真實專案比教科書複雜 — AI 幫你快速理解
五步驟檢查清單，養成 clone 前先檢查的習慣

ROUND 3 · 0:45–1:05

Clone
用 MCP/Skills 改造

Fork 一個好專案，用你的工具把它變成你的

Fork 改造工作流

Fork
→
Clone
→
AI 改造
→
Push
TERMINAL
# 1. 在 GitHub 上按 Fork
# 2. Clone 自己的 Fork
git clone https://github.com/你的帳號/awesome-project.git
cd awesome-project

三種 AI 改造武器

Translate Skill

翻譯 README 成中文
讓你的 Fork 更好讀

Code Review Skill

找出可改善的地方
AI 幫你列改善清單

Claude Code 改功能

直接對 AI 說要改什麼
它幫你寫程式碼

操作：翻譯 README

PROMPT
把這個專案的 README.md 翻譯成繁體中文
保留原本的 Markdown 格式
技術名詞不翻譯
效果

30 秒完成整份 README 翻譯
你的 Fork 立刻對中文使用者更友善

操作：AI Code Review

PROMPT
幫我 review 這個專案的程式碼
列出 3 個最值得改善的地方
每個給出具體修改建議
觀察

AI 不只找 bug — 還會建議架構改善、效能優化、安全加固
比你自己讀程式碼有效率得多

操作：改功能

PROMPT 範例
把首頁的配色改成深藍色系
加上一個「回到頂端」按鈕
把 Footer 的連結改成我的社群帳號
改造策略

只改必要部分 — 不要重寫整個專案
每次改一個小點，確認沒壞再改下一個

MCP + Skills 改造別人專案特別有效

沒有工具
  • 手動讀程式碼理解架構
  • 自己搜尋翻譯工具
  • 手動一個檔案一個檔案改
  • 不確定改了會不會壞
有 MCP + Skills
  • AI 30 秒摘要架構
  • Translate Skill 一鍵翻
  • Claude Code 批次改
  • Code Review 確認品質

Push 到自己的 repo

TERMINAL
git add .
git commit -m "feat: 翻譯 README + 改配色 + 加回頂按鈕"
git push origin main
成果

你的 GitHub 上多了一個改造過的專案
這就是你的 Portfolio — 面試時能展示的作品

Round 3 小結

Fork + AI 改造 = 最快的作品累積法

不必從零開始 — 站在好專案的基礎上
用 M3-1 建好的工具，讓改造效率翻倍

ROUND 4 · 1:05–1:35

限時任務
30 分鐘部署上線

自己找專案、掃描、改造、部署 — 全流程

限時任務規則

1
自己去 GitHub 找一個開源專案

限制：≤10MB / Stars ≥50 / 6 個月內有更新

2
AI 協助初篩 → 依五項證據判斷是否低風險試跑

先看 scripts / .env.example / 外部請求
授權 / 最近活躍度，再用 npm install --ignore-scripts 或 sandbox 試跑

3
Clone → AI 改造至少 3 處

翻譯、改配色、加功能，至少改三個地方

4
Push → 部署上線

GitHub Pages 或本機跑起來都算

計時開始

30
分鐘
能部署成功的舉手
時間分配建議

找專案 + 安全掃描：10 min
Clone + AI 改造：15 min
Push + 部署：5 min

專案篩選三條件

≤10MB
Repo 大小
≥50
Stars 數量
6 月
最近更新時間
搜尋技巧

GitHub 搜尋欄 → 加上 stars:>50 size:<10000
選 Recently updated 排序

30 分鐘成功的關鍵

選對專案

簡單、文件好、依賴少
HTML/CSS 類最容易成功

AI 快速理解

不要自己讀程式碼
讓 AI 30 秒摘要結構

只改必要部分

不要想重寫整個專案
改三處就夠了

常見失敗原因

1
選太複雜的專案

30 分鐘搞不定 → 花太多時間在理解架構

2
依賴太多 npm install 一堆錯

Node 版本不對、平台不相容、套件衝突

3
README 差不知道怎麼跑

文件品質差 = 選擇失誤的訊號

分享：成功與失敗

成功的同學
  • 選了什麼專案
  • 改了哪三處
  • 怎麼部署的
卡住的同學
  • 卡在哪一步
  • 時間花在哪裡最多
  • 下次會怎麼選

失敗不丟臉 — 失敗的經驗更值錢
知道「什麼不能選」也是判斷力

專案選擇判斷力

會挑比會做更重要
— 選錯專案，AI 也救不了你
判斷公式

好專案 = 文件清楚 + 依賴少 + 大小合理 + 最近有人維護
壞專案 = README 不完整 + 依賴爆多 + 三年沒更新

Round 4 小結

限時任務練的是判斷力

30 分鐘夠不夠，取決於你的選擇
「會挑比會做更重要」是這一輪的核心

ROUND 5 · 1:35–1:50

注意事項分享
+ Git 急救卡

每個坑都有一句話解法 — 不用背，遇到問 AI

講師真實注意事項

這些坑我都踩過 — 分享解法讓你少走彎路

1
index.lock 卡住

Git 操作中斷留下鎖檔 → 所有 git 指令都失敗

2
git push rejected

遠端有新 commit 你沒拉 → push 被拒絕

3
npm install 失敗

Node 版本不對 / 平台不相容 / 套件衝突

更多真實注意事項

4
SSH timeout

網路問題或 SSH Agent 沒載入 → 連不上 GitHub

5
pre-commit hook 擋住

Hook 檢查不通過 → commit 被攔截

共通解法

遇到任何錯誤 → 複製錯誤訊息 → 貼給 AI
AI 比 Google 更快給你正確解法

Git 急救卡

一個問題一句話解法 — 存在手機裡隨時查

index.lock 卡住

rm .git/index.lock

push rejected

git pull --rebase
git push

SSH timeout

eval "$(ssh-agent -s)"
ssh-add

Git 急救卡（續）

hook 擋住 commit

cat .git/hooks/pre-commit
# 看 hook 內容再決定

npm install 失敗

node -v # 檢查版本
# 或貼錯誤訊息問 AI

merge conflict

# 讓 AI 幫你解衝突
把衝突檔案貼給 Claude

不用背，遇到問 AI

遇到錯誤時的 PROMPT
我在執行 git push 時遇到這個錯誤：
[貼上完整錯誤訊息]

請告訴我原因和解法
重點

完整貼上錯誤訊息 — 不要只說「git push 失敗了」
AI 需要看到具體錯誤才能給精準解法

M3-2 注意事項總覽

1
clone 超大 repo

引出：先看大小再 clone

2
postinstall 惡意腳本

引出：供應鏈安全

3
選太複雜的專案

引出：專案選擇判斷力

4
npm install 錯誤

引出：依賴管理

5
README 差不會跑

引出：文件品質也是選擇標準

Round 5 小結

坑不可怕，沒有解法才可怕

每個坑都有一句話解法
急救卡存起來，遇到時比 Google 更快

ROUND 6 · 1:50–2:00

回顧
你的開源工具箱

今天帶走四件東西

六維度反思

判斷力

我能快速判斷一個
專案值不值得用嗎

安全意識

我知道 clone 前
要檢查什麼嗎

改造能力

我能用 AI 工具
快速改造專案嗎

部署經驗

我能在限時內
把專案上線嗎

除錯能力

遇到 Git 問題
我知道怎麼解決嗎

協作思維

我理解 Fork / PR
的開源協作流程嗎

你的開源工具箱

1
推薦大神專案清單

精選過的好專案，直接 Fork 或學習

2
Repo 安全檢查清單

五步驟掃描，clone 前必跑

3
Git 急救卡

一個問題一句話解法，存手機裡備用

4
Fork 改造過的作品

你的 GitHub 上多了一個 Portfolio

安全檢查清單（完整版）

!
Stars + 最近活躍度

Stars ≥50、6 個月內有 commit

!
package.json scripts

postinstall / preinstall 有沒有可疑指令

!
.env.example 需要什麼 Key

你願意提供這些 Key 嗎

!
AI 掃描外部請求

有沒有向不明 URL 發送資料

!
README + LICENSE 完整度

授權類型確認、文件品質評估

!
依賴數量 + 大小

依賴越少越安全，repo ≤10MB 為佳

帶走清單

本堂定位 複製、抄襲是學習的開始

不只學了什麼，是想法怎麼變了
從「拿來用」→ 負責任地繼承與改造

從「大神專案直接用」
↓
偉大背後也有脈絡
從「開源等於安全」
↓
風險藏在信任裡
從「改一改就變我的」
↓
繼承先要懂脈絡
從「部署成功就穩了」
↓
上線只是風險開始
從「壞了再找人救」
↓
急救能力也是資產
從「我只是使用者」
↓
我是生態的繼承者

從 Round 1 到 Round 6

看專案
→
辨風險
→
改造
→
部署
→
急救
→
工具箱
能力成長

M3-1 建好了環境和工具
M3-2 學會了用這些工具去探索和判斷
你已經從「會用」進化到「會選」

Stage 3 · 造系統 — 進度

M3-1 CLI + MCP + Skills
M3-2 開源 + 風險辨識
M3-3 問題集大成
M3-4 多 Agent 協作

你已經完成 Stage 3 的前兩堂
下一堂會把所有的坑集大成，用 spec.md 系統化解決

下一堂預告：M3-3

問題集大成

所有的坑走過一遍
然後用一份文件避開它們

spec.md 架構思維

系統藍圖 = 你跟 AI 的溝通契約
有規格才不會每次蓋不同的房子

M3-3 題目

諮詢時段預約系統 — 講師自己要用的
做完真的上線

站在巨人肩膀上
但先確認巨人是好人

大神專案篩選 + 風險判斷 + 限時部署 + Git 急救卡

M3-2 完成

1 / 58
◈ 章節 ▲