AI工具 on Yanmu

Web Design Skill 實操手冊（詳細版）

Wed, 27 May 2026 00:00:00 +0800

Web Design Skill 實操手冊（詳細版）

適用工具： Claude Code / OpenCode 目標： 跟著本筆記，你將用 AI 生成一個高品質的太空探索博物館網頁 預計耗時： 40-90 分鐘

在開始之前：理解我們要做什麼

整體流程概覽

`1`	`準備環境 → 安裝 Skill → 創建項目 → 裸跑體驗 → Skill 加持 → 對比`

為什麼先「裸跑」再用 Skill？

這是一個對比實驗：

如果你直接用 Skill，你不會感受到 Skill 的價值
先讓 AI 自由發揮 → 你會看到典型的 AI 味網頁（紫粉藍漸變、大圓角卡片、Emoji 圖標……）
然後用 Skill 再做一遍 → 你會親眼看到同一個主題、同一個模型做出截然不同的效果

你需要的工具清單

工具	是什麼	去哪裡獲取
終端	你和 AI 對話的地方	Windows: PowerShell / Terminal；macOS: Terminal
Claude Code 或 OpenCode	AI 編碼 Agent	見下方安裝說明
Git	從 GitHub 下載 Skill 文件	`winget install Git.Git`（Win）/ `brew install git`（macOS）
瀏覽器	預覽網頁效果	Chrome / Edge / Firefox
錄屏軟件（可選）	錄製操作過程	OBS Studio（免費）/ 系統自帶錄屏

確認 Agent 已就緒

如果你用 Claude Code

是什麼： Anthropic 官方的終端 AI 編碼工具。

確認已安裝：

`1`	`claude --version`

如果顯示版本號（如 1.0.x），說明已安裝。

如果沒安裝：

1
2

# 需要先安裝 Node.js（https://nodejs.org），然後：
npm install -g @anthropic-ai/claude-code

如果你用 OpenCode

是什麼： SST 團隊開發的開源終端 AI 編碼工具。

確認已安裝：

`1`	`opencode --version`

如果沒安裝：

# 方法 1：通過 Go 安裝
go install github.com/sst/opencode@latest

# 方法 2：通過 Homebrew（macOS/Linux）
brew install sst/tap/opencode

創建項目目錄

創建工作文件夾

1
2
3

cd ~/Desktop
mkdir space-museum-demo
cd space-museum-demo

初始化 Git 倉庫

`1`	`git init`

創建初始文件

claude

輸入：

請在當前目錄創建一個 index.html 文件，只包含最基本的 HTML5 結構（DOCTYPE、head、body），不需要任何樣式和內容。HTML lang 設為 zh-CN，title 設為「太空探索博物館」。

啟動本地預覽服務器

`1`	`npx serve .`

打開瀏覽器訪問 http://localhost:3000。

下載 web-design-skill

克隆倉庫

1
2

cd ~/Desktop/space-museum-demo
git clone https://github.com/ConardLi/web-design-skill.git

裸跑體驗 — 見識 AI 的「原生審美」

🎯 目的： 讓 AI 用默認方式生成網頁，觀察它的「原生審美」。

啟動 Agent（不加載 Skill）

1
2
3

claude
# 或
opencode

輸入設計需求

請幫我做一個太空探索博物館的線上展覽網頁，所有代碼寫在一個 index.html 文件裡（HTML + CSS + JS 都內聯），要求如下：

1. 深色主題，有宇宙感和科幻氛圍
2. Hero 區域展示博物館名稱「星際探索博物館」和一句標語
3. 展品卡片區域，展示 4 個太空探索裡程碑事件（加加林、阿波羅 11 號、哈勃望遠鏡、韋伯望遠鏡）
4. 時間線區域，展示太空探索的關鍵年份
5. 有滾動動畫效果（元素隨滾動漸入）
6. 響應式布局，手機端也能看

請直接生成完整代碼，寫入 index.html 文件。

等待 AI 生成

整個過程大約需要 1-3 分鐘。

查看結果

刷新 http://localhost:3000。

觀察清單：

配色：是否有紫粉藍的漸變？
布局：Hero 區域是不是標準的「居中標題 + 副標題」？
AI 味特徵：有沒有用 Emoji 當圖標？有沒有大圓角卡片？

保存裸跑版本

`1`	`請把當前的 index.html 複製一份，命名為 index-no-skill.html`

安裝 Skill 到 Agent 中

🎯 目的： 把 web-design-skill 的規則注入到 Agent 的系統提示中。

Claude Code — 兩種安裝方式

方式 A：寫入 CLAUDE.md（推薦，永久生效）

`1`	`請讀取 web-design-skill/skill.md 文件的全部內容，然後創建一個 CLAUDE.md 文件，把 skill.md 的內容寫進去。`

方式 B：在對話中引用（臨時生效）

`1`	`@web-design-skill/skill.md 請根據這個 Skill 文件的規則來幫我設計網頁。`

OpenCode — 安裝方式

方式 A：寫入 AGENTS.md（推薦）

`1`	`cp web-design-skill/skill.md AGENTS.md`

驗證 Skill 是否生效

啟動 Agent，輸入：

`1`	`在開始設計之前，請告訴我：按照你的設計系統，你會使用什麼配色方案？什麼字體？什麼間距規則？有哪些絕對不能做的事情？`

如果 Skill 生效了，AI 的回答應該包含：

提到 OKLCH 色彩空間
列出具體的字體推薦
提到「去除 AI 味」的具體規則

Skill 加持 — 打磨高級感

🎯 目的： 用同樣的需求，讓 Skill 引導 AI 做出完全不同的網頁。

啟動新的對話

重要：必須新開一個對話！

輸入設計需求

這次我們故意只給極簡需求：

`1`	`幫我做一個太空探索博物館的線上展覽網頁，所有代碼寫在一個 index.html 文件裡。`

階段 A：AI 提問

AI 先問你幾個關鍵問題。

階段 B：AI 說明設計系統

AI 在寫代碼之前，先用自然語言描述它的設計系統：

設計系統：
━━━━━━━━━━━━
配色方案（基於 OKLCH）：
- 背景：oklch(15% 0.02 260) — 極深的太空藍
- 主色：oklch(70% 0.15 250) — 冷藍色
- 輔色：oklch(60% 0.12 310) — 深紫色
- 文字：oklch(95% 0.01 260) — 近白色

字體：
- 標題：Orbitron（科技感強）
- 正文：Space Grotesk（可讀性好）

間距系統：基於 8px 網格

布局策略：雜誌式大圖排版，非傳統的卡片網格

階段 C：AI 輸出 V0（粗糙初版）

刷新瀏覽器查看效果，判斷方向是否正確。

階段 D：迭代打磨

每輪只提 1-2 個修改點。

階段 E：最終驗證

請你現在以一個全新設計評審專家的視角，全面檢查這個網頁：
1. 是否有任何「一看就是 AI 做的」的特徵？逐一列出。
2. 配色是否和諧？有沒有用 OKLCH？
3. 字體使用是否恰當？有沒有用到爛大街的字體？
4. 布局是否有創意？還是標準的 Hero + 卡片網格？
5. 動畫是否自然？有沒有過度使用發光效果？
6. 移動端適配是否正常？
列出所有需要改進的地方，然後逐一修復。

保存 Skill 版本

AI 完成後，保存最終版：

# 如果你還在 Agent 對話中，讓 AI 幫你複製：
# "請把當前的 index.html 複製一份，命名為 index-with-skill.html"

# 或者退出 Agent 後手動複製：
cp index.html index-with-skill.html

對比兩個版本

在瀏覽器中同時打開兩個文件：

1
2

http://localhost:3000/index-no-skill.html     ← 裸跑版本
http://localhost:3000/index.html               ← Skill 版本

錄製成視頻（可選）

建議錄製的鏡頭

鏡頭 1：【成品展示】（30 秒）
鏡頭 2：【對比展示】（1 分鐘）
鏡頭 3：【過程回放】（2-3 分鐘）
鏡頭 4：【設計細節講解】（1 分鐘）
鏡頭 5：【總結】（30 秒）

附錄 A：常用提示詞速查

讓 AI 先說設計系統

在寫任何代碼之前，請先用自然語言描述你的設計系統，包括：
1. 配色方案（使用 OKLCH）
2. 字體選擇（標題和正文分別用什麼）
3. 間距系統
4. 布局策略
5. 絕對不能做的事情
我確認後再開始寫代碼。

要求快速 V0

先給我一個最小可用版本（V0）。
可以有佔位符和未完成的部分。
我確認方向後再完善細節。
不要花太多時間在細節上。

觸發全面驗證

請以一個全新的設計評審專家視角，全面檢查當前網頁。
列出所有「一看就是 AI 做的」的特徵，
以及配色、字體、布局上的所有問題。
然後逐一修復。

最後總結

1
2

做網頁的核心流程：
理解需求 → 確認設計系統 → 快速 V0 → 迭代打磨 → 驗證

三句話記住 Skill 的精髓：

先說設計系統，再寫代碼 — 方向不對，代碼白寫
先出粗糙 V0，再精雕細琢 — 快速試錯，成本最低
大膽留白，每個元素要證明自己 — 克制即高級

Web Design Skill 學習筆記

Tue, 26 May 2026 00:00:00 +0800

Web Design Skill 學習筆記

Claude Design 是什麼？

Claude Design 是 Anthropic 發佈的設計工具，發佈當天直接導致了 Figma 股價暴跌。

核心理念： 左邊打字，右邊直接出設計稿（本質上是可運行的網頁，不是圖片）

與傳統設計工具的區別

維度	傳統設計工具（如 Figma）	Claude Design
主導者	人在畫布上操作，AI 輔助提速	AI 是主要生成者，人負責審核
輸出物	設計圖/圖片	真實可運行的代碼
交互方式	手動繪製	文字描述 → 自動生成
版本管理	需手動操作	鏈接可點擊，標籤可切版本

本質： Claude Design 更像 Claude Code（設計師版），而不是 AI 版 Figma。

核心提示詞拆解（6 大要點）

視頻對 Claude Design 洩露的提示詞進行了深度拆解，提煉出 6 個核心設計原則：

角色定位 —— 動態身份切換

提示詞原文要旨： “你是一個專家設計師，而用戶是你的產品經理”

關鍵洞察：

❌ 不要說"你是一個 AI 助手"
✅ 建立設計師 ↔ 產品經理的協作關係

兩個好處：

AI 決策更果斷 — 設計師本身應該有判斷力，不用事事請示
關鍵點會來問你 — 因為用戶是產品經理，最終由用戶拍板

動態身份切換：

做動畫 → 動效設計師
做原型 → UX 設計師
做 PPT → Deck 設計師

💡 啟示： 很多人的提示詞只寫一句"你是個前端開發者"就完事了。好的角色定位應該是動態的，根據具體任務靈活切換身份。

工作流 —— 六步流程

`1`	`理解需求 → 探索資源 → 制定計劃 → 搭建結構 → 完成驗證 → 簡要總結`

細節一：提問的藝術（什麼時候該問？什麼時候直接幹？）

問題： 很多 Agent 要麼先問你一堆問題，要麼啥也不問悶頭就幹。

Claude Design 的策略：

輸入 “幫我做個 PPT” → 先問幾個問題（信息不足）
輸入 “幫我做個 PPT，全運會馬上要用，10 分鐘” → 直接開幹（緊急場景，信息充分）

💡 啟示： 根據上下文的緊迫程度和信息完整度，靈活決定是提問還是執行。

細節二：總結原則

✅ 只說關鍵注意事項和下一步動作
❌ 不要復述自己已經做了什麼

💡 啟示： 這個原則可以有效避免 AI 產生大量廢話。

去除 AI 味（最有價值的部分）

典型的 AI 生成網頁特徵：

紫粉藍漸變背景
大圓角卡片
Emoji 當圖標
到處堆砌假數據
左側彩色邊框的圓角卡片
爛大街的字體
無意義的數據和圖標堆砌

這就像文章裡通篇都是"此外"“值得注意的是"“綜上所述"一樣，一眼就能聞出來是 AI 寫的。

Claude Design 的做法： 列出一份完整的"雷區清單”，逐條告訴 AI 不能走這些老套路。

字體推薦也很講究：

明確列出千萬不能用的字體 + 替代方案
推薦小眾但品質很高的字體

色彩系統 —— OKLCH 色彩空間

配色策略優先級：

`1`	`品牌色 → OKLCH 派生顏色 → 絕不憑空編新顏色`

為什麼用 OKLCH 而不是 HSL？

	HSL	OKLCH
感知均勻性	❌ 不均勻（同亮度值，黃色比藍色亮很多）	✅ 均勻
AI 配色效果	數值沒問題但看著不舒服	保持亮度和色度不變，只轉色相，顏色自然和諧

💡 啟示： OKLCH 這個看似很小的細節，能讓網頁的高級感直接提升一個檔次。

內容原則 —— “用 1000 個 NO 換一個 YES”

引用喬布斯經典名言。

AI 做網頁的傳統毛病： 恨不得把空間全塞滿 — Hero、特性、評價、數據、FAQ、聯繫方式……一股腦全上，但每塊都平庸。

Claude Design 的態度：

每個元素都得證明自己為什麼應該在那裡
如果覺得頁面空 → 可能是排版問題，用留白來解決
一個大膽的留白 > 十個湊數的板塊

驗證機制 —— 子 Agent 檢查

原理： 開發完成後，fork 出一個獨立的子 Agent 對網頁做全面檢查。

為什麼要獨立的子 Agent？

同一個上下文裡的 AI 容易"自我感覺良好”
獨立的子 Agent 沒有"感情包袱"，更容易發現問題

驗證內容：

是否有 AI 味特徵？
配色是否和諧？
字體是否恰當？
布局是否有創意？

Skill 文件的核心優化

Skill 文件在 Claude Design 提示詞的基礎上，做了三個關鍵優化：

先說設計系統再寫代碼

在開始編碼之前，要求 AI 明確列出：

配色方案
字體選擇
間距系統
……

為什麼？ 如果不說清楚，AI 會默默自己做決定直接寫代碼。等你看到成品時，如果方向不對只能推翻重來。提前說出來，還沒寫代碼就能糾偏。

儘早輸出最小可用版本

要求 AI 先拿出一個帶假設和佔位符的粗糙 V0 版本
一個粗糙的 V0 > 花幾倍時間做出精雕細琢的 V1

為什麼？ 如果整個方向都錯了，V1 做得再精緻也全白幹了。

額外補充

補充了更多去除 AI 味的條目
增加了幾套經過驗證的字體和配色參考對照表
附帶 reference 文件（典型代碼模板，來源於提示詞中的 “copy study the component” 部分）

效果對比演示

測試環境：Cursor + Claude 4.7（有 Skill vs 無 Skill）

太空探索博物館線上展覽頁

	無 Skill	有 Skill
配色	青紫粉漸變，典型 AI 霓虹感	OKLCH 定義，接近雜誌印刷的深沉色調
字體	比較老套	標題和正文都有特點，科技感十足
布局	標準 Hero + 卡片，教科書式落地頁	非傳統卡片式，有創意感
動畫	有星空和行星動畫，但堆砌了大量發光特效	舒適、有創意感
總體	有太空感，缺少創意	像非常有經驗的設計師的傑作

獨立攝影師個人作品集（極簡提示詞）

	無 Skill	有 Skill
設計風格	深色背景 + 霓虹發光 + 半透明卡片，老套	虛構了一位北歐攝影師，從頭設計完整視覺風格
文案	滿滿的 AI 感	—
情感表達	攝影師本該有的自由感完全沒體現	像在翻一本高端攝影畫冊
決策策略	直接開幹，沒問問題	主動提問了配色傾向、核心元素等

最終結論

1
2

無 Skill: 85 分 → 能用、完整、合格
有 Skill: 95 分 → 好看、精緻、有風格

Skill 裡的每條規則單獨看效果不大，但加起來就會產生質變。這就是從"能用"到"好看"、從"完整"到"精緻"、從"合格"到"有風格"的差距。

核心知識點速查

#	知識點	一句話總結
1	動態角色定位	根據任務靈活切換 AI 身份，而不是一句"你是前端"了事
2	工作流六步法	理解需求→探索資源→制定計劃→搭建結構→完成驗證→簡要總結
3	提問的藝術	根據信息完整度和緊迫度決定是提問還是直接幹
4	去除 AI 味	列出雷區清單，禁用漸變/Emoji/大圓角卡片等老套路
5	OKLCH 配色	感知均勻的色彩空間，比 HSL 更能產生和諧配色
6	內容克制	每個元素都要證明自己存在的理由，大膽留白
7	子 Agent 驗證	用獨立上下文檢查，避免"自我感覺良好"
8	先說設計系統再寫代碼	提前暴露設計決策，避免方向性錯誤
9	快速出 V0	粗糙但快速的原型 > 精緻但方向錯誤的成品

OpenCode + Obsidian：打造你的AI驅動知識管理工作流

Thu, 30 Apr 2026 02:00:15 +0800

📋 目錄

一、什麼是 opencode-obsidian 外掛？

opencode-obsidian 是一個第三方社群外掛，它將 OpenCode AI 助手直接嵌入到 Obsidian 視窗中。不同於傳統的終端機整合方案，這個外掛使用 OpenCode 的 Web 視圖直接嵌入，你看到的就是完整的 OpenCode 介面，不需要在終端機和 Obsidian 之間來回切換。

核心特性：

🖥️ OpenCode 介面直接嵌入 Obsidian 側邊欄或主編輯區
🔄 伺服端自動管理——開啟面板即啟動，關閉即停止
📄 實驗性的上下文注入——自動將當前開啟的筆記和選中文本傳給 AI
⌨️ 快捷鍵 Ctrl/Cmd + Shift + O 快速切換面板

適用場景：

總結和提煉長文本內容
起草、編輯和潤色寫作
查詢和探索你的知識庫
生成大綱和結構化筆記

⚠️ 外掛作者與 OpenCode / Obsidian 無關聯，這是一個獨立的第三方專案。目前版本為 0.2.1（Beta 階段），僅支援桌面端。

二、環境準備

在開始之前，確保你已準備好以下內容：

項目	要求	說明
Obsidian	≥ 1.4.0	官網下載
Node.js	≥ 18+	下載地址，用於安裝 OpenCode

準備就緒後，跟著下面的步驟走就行。

三、安裝 BRAT 外掛

BRAT（Beta Reviewer’s Auto-update Tool）是 Obsidian 的一個社群外掛，專門用來安裝尚未上架社群外掛市場的 Beta 版外掛。opencode-obsidian 目前還沒有正式上架，所以需要透過 BRAT 安裝。

步驟 1：開啟社群外掛市場

在 Obsidian 中依次點擊：設定 → 第三方外掛 → 關閉「安全模式」→ 社群外掛市場

步驟 2：搜尋並安裝 BRAT

在社群外掛市場中搜尋 BRAT（全名：Obsidian42 - BRAT），點擊「安裝」→「啟用」。

💡 BRAT 的全稱是 Beta Reviewer’s Auto-update Tool，由 TfTHacker 開發。它能自動偵測 Beta 外掛的更新並提醒你升級。

四、透過 BRAT 安裝 opencode-obsidian

安裝好 BRAT 後，就可以用它來安裝 opencode-obsidian 外掛了。

步驟 1：開啟 BRAT 設定

設定 → 第三方外掛 → 找到已安裝的 BRAT，點擊右側的齒輪圖標進入設定。

步驟 2：添加 Beta 外掛

在 BRAT 設定頁面中，點擊 「Add Beta plugin」 按鈕。

步驟 3：輸入倉庫地址

在彈出的輸入框中輸入：

`1`	`mtymek/opencode-obsidian`

點擊 「Add Plugin」。

BRAT 會自動從 GitHub 拉取最新的 release 版本並安裝。

步驟 4：啟用外掛

安裝完成後，前往設定 → 第三方外掛 → 在「已安裝外掛」列表中找到 OpenCode-Obsidian，開啟開關啟用它。

✅ 啟用後，Obsidian 左側欄會出現一個終端機樣式的圖標——這就是 OpenCode 的入口。

自動更新

BRAT 會定期檢查 GitHub 上的新版本。當有更新時，它會在 Obsidian 中彈出通知，你只需點擊確認即可自動升級。

五、安裝 OpenCode CLI

外掛本身只是一個「殼」——它會在後台啟動 opencode serve 服務，然後把 OpenCode 的 Web 介面嵌入到 Obsidian 裡。所以你只需要透過 npm 安裝 OpenCode CLI 就夠了。

開啟系統的終端機（Windows 用 PowerShell，macOS/Linux 用 Terminal）：

`1`	`npm i -g opencode-ai`

驗證安裝：

1
2

opencode --version
# 期望輸出類似: 1.14.39

⚠️ Windows 使用者：如果外掛提示「Executable not found at ‘opencode’」，請跳到本文第十節查看解決方案。

六、外掛設定詳解

啟用外掛後，進入設定 → 第三方外掛 → OpenCode-Obsidian 的齒輪圖標，可以看到以下配置項：

基礎設定

設定項	預設值	說明
OpenCode 可執行檔路徑	`opencode`	如果系統 PATH 中找不到，填入完整路徑
連接埠	`14096`	OpenCode 服務監聽的連接埠號
主機名稱	`127.0.0.1`	服務綁定的地址
專案目錄	（自動取 Vault 路徑）	OpenCode 操作的工作目錄
啟動逾時	`45000` (45秒)	等待服務啟動的最大毫秒數

介面設定

設定項	預設值	說明
預設視圖位置	`sidebar`	`sidebar` = 側邊欄，`main` = 主編輯區
自動啟動	`關閉`	開啟 Obsidian 時自動啟動 OpenCode 服務

上下文注入（實驗性）

設定項	預設值	說明
注入工作區上下文	`關閉`	自動將當前筆記資訊傳給 OpenCode
最大筆記數量	`20`	上下文中包含的最大筆記數
最大選中文本長度	`2000`	傳給 AI 的選中文本字元上限

自訂命令

設定項	預設值	說明
使用自訂命令	`關閉`	啟用後可自訂 OpenCode 啟動命令
自訂命令	（空）	自訂的啟動命令（見第九節）

七、首次使用

開啟 OpenCode 面板

有三種方式開啟 OpenCode：

點擊側邊欄圖標：點擊左側欄的終端機圖標
快捷鍵：Ctrl + Shift + O（macOS 用 Cmd + Shift + O）
命令面板：Ctrl/Cmd + P → 輸入 Toggle OpenCode panel

首次啟動流程

開啟面板後，外掛會自動執行以下操作：

偵測 OpenCode 可執行檔路徑
啟動 OpenCode 服務（opencode serve）
在嵌入式 Web 視圖中載入 OpenCode 介面

啟動成功後，你會看到完整的 OpenCode 對話介面，可以直接在裡面輸入 prompt。

驗證一切正常

在 OpenCode 介面中輸入：

/help

如果看到命令列表，說明一切正常。你也可以輸入：

/models

查看可用的 AI 模型。OpenCode 內建了免費模型（如 GLM-4.7、MiniMax-2.1），無需任何配置即可使用。

快捷鍵速查

快捷鍵	功能
`Ctrl/Cmd + Shift + O`	切換 OpenCode 面板

八、上下文注入（實驗性功能）

這是 opencode-obsidian 外掛最獨特的功能之一——它可以自動將 Obsidian 的工作上下文傳遞給 OpenCode。

開啟方式

在外掛設定中，開啟 「注入工作區上下文」 開關。

注入的內容

啟用後，外掛會自動將以下資訊傳給正在執行的 OpenCode 實例：

📂 當前開啟的筆記列表：你正在編輯哪些檔案
📝 選中的文本：你在筆記中選中的文字

使用場景

選中一段文字，開啟 OpenCode 面板，直接說「潤色這段話」——AI 已經知道你說的是哪段文字
同時開啟多篇筆記，讓 AI「對比這兩篇筆記的差異」——AI 已經知道你開啟的是哪些檔案

局限性

⚠️ 這是實驗性功能，目前有一些限制：

在 OpenCode 介面中建立新 Session 時，上下文不會自動注入

上下文更新有一定的延遲

九、自訂命令模式

預設情況下，外掛會自動呼叫 opencode serve 命令啟動服務。如果你需要更多控制，可以啟用自訂命令模式。

什麼時候需要自訂命令？

需要添加額外的 CLI 參數
使用自訂的啟動腳本
透過容器或虛擬環境執行 OpenCode
OpenCode 安裝在非標準路徑

配置步驟

在外掛設定中開啟 「使用自訂命令」
在 「自訂命令」 輸入框中填寫完整命令

命令模板

`1`	`opencode serve --port 14096 --hostname 127.0.0.1 --cors app://obsidian.md`

⚠️ 重要注意事項

連接埠和主機名稱必須與設定中的值一致
必須包含 --cors app://obsidian.md，否則 Obsidian 無法嵌入 OpenCode 的 Web 介面

十、常見問題與故障排除

❌ 找不到 OpenCode 可執行檔

現象：開啟面板後提示「Executable not found at ‘opencode’」，但終端機中執行 opencode 是正常的。

原因：Electron（Obsidian 底層框架）在 Windows 上不完全繼承系統 PATH 環境變數。

解決方案：

在終端機中查找 opencode.cmd 的完整路徑：

`1`	`where opencode.cmd`

將輸出的完整路徑填入外掛設定的「OpenCode 可執行檔路徑」中，例如：

`1`	`C:\Users\你的使用者名稱\AppData\Roaming\npm\opencode.cmd`

❌ 服務啟動逾時

可能原因：網路問題、模型載入慢、連接埠被佔用。

解決方案：

檢查連接埠 14096 是否被其他程式佔用
嘗試修改連接埠號（比如改成 15096）
增加啟動逾時時間

❌ 面板顯示空白

可能原因：CORS 配置不正確。

解決方案：

如果使用了自訂命令，確保命令中包含 --cors app://obsidian.md。

❌ 面板無法嵌入

可能原因：OpenCode 版本過舊。

解決方案：

`1`	`npm i -g opencode-ai@latest`

❌ 中文檔名亂碼（Windows）

解決方案：在 PowerShell 中執行：

`1`	`chcp 65001`

然後重新啟動 Obsidian。

❌ 外掛更新後需要重新配置

BRAT 更新外掛時會保留你的設定資料。如果發現設定遺失，重新進入設定頁面配置即可。

總結

整個安裝流程可以用一張圖概括：

┌──────────────────────────────────────────┐
│           安裝 BRAT 外掛                  │
│   設定 → 社群外掛市場 → 搜尋 BRAT → 安裝   │
└──────────────────┬───────────────────────┘
                   │
                   ▼
┌──────────────────────────────────────────┐
│      透過 BRAT 安裝 opencode-obsidian      │
│   BRAT 設定 → Add Beta plugin             │
│   輸入: mtymek/opencode-obsidian           │
└──────────────────┬───────────────────────┘
                   │
                   ▼
┌──────────────────────────────────────────┐
│           安裝 OpenCode CLI               │
│   npm i -g opencode-ai                   │
└──────────────────┬───────────────────────┘
                   │
                   ▼
┌──────────────────────────────────────────┐
│         啟用外掛，開始使用                  │
│   Ctrl+Shift+O 開啟面板                   │
│   直接在 Obsidian 裡使用 OpenCode         │
└──────────────────────────────────────────┘

一句話總結：裝 BRAT → 搜 mtymek/opencode-obsidian → 裝好 OpenCode CLI → Ctrl+Shift+O 開始用。就這麼簡單。

📚 參考來源：

opencode-obsidian GitHub 倉庫

BRAT 外掛 GitHub 倉庫

OpenCode 官方文件

OpenCode 全深度指南：開源版 Claude Code 的安裝、配置與進階玩法

Thu, 30 Apr 2026 02:00:15 +0800

📋 目錄

一、什麼是 OpenCode？

OpenCode 是近期熱度最高的 AI 程式設計工具，本質上是一個開源版的 Claude Code。它幾乎復刻了 Claude Code 的所有核心功能，同時解決了 Claude Code 在中國使用者中常見的限速、封號等痛點。

與 Claude Code 對比

對比維度	Claude Code	OpenCode
開源	❌ 閉源	✅ 開源
免費模型	❌ 需付費 API	✅ 內建免費模型
中國使用者友善	⚠️ 限速/封號風險	✅ 無限制
Skills/MCP	✅ 支援	✅ 完全相容
Session 並行	❌	✅ 核心亮點

核心定位

開源版 Claude Code：具備幾乎全部功能，中國使用者友善，不限速不封號
免費模型：開箱即用 GLM-4.7、MiniMax-2.1 等免費模型，零配置即可上手
頂級模型接入：透過 Antigravity 外掛免費接入 Gemini 3 Pro、Claude 4.5 Opus；透過 /connect 接入 GPT Codex
殺手級功能：Session 並行、Timeline 回退、Share 分享、Ultra Work 多智能體協作
外掛生態：Oh My Open Code (OMO) 整合七大程式設計智能體 + 三大 MCP Server + 多種工具

二、四種安裝形態

⭐ 1. 命令列版（主力推薦）

最穩定、功能最全的使用方式。

# 安裝（需先安裝 Node.js）
npm i -g opencode-ai

# 啟動
opencode

前置條件：需要安裝 Node.js（前往 nodejs.org 下載對應系統版本）

2. 桌面客戶端（Beta）

從官網下載客戶端，一路下一步安裝，選擇專案資料夾即可使用。

⚠️ 目前處於 Beta 測試階段，bug 較多，暫不推薦作為主力工具。

3. VS Code 外掛版

前提：已安裝命令列版 OpenCode。外掛版的核心價值在於與 IDE 的無縫整合，讓 AI 直接感知你的程式碼上下文。

在 VS Code 擴充商店搜尋 OpenCode 並安裝
快捷鍵 Ctrl + Shift + P → 輸入 open opencode 回車
外掛會自動關聯左側視窗開啟的程式碼檔案
選中程式碼後按 Ctrl + Alt + K 可快速貼到 OpenCode 聊天視窗

4. 雲端執行環境（GitHub Actions）

非常適合開源專案的自動化 Issue 修復：

將專案上傳到 GitHub 公開倉庫
在倉庫中配置 API Key（Settings → Secrets and Variables → Actions）
在 Issue 評論中輸入 /opencode + 需求描述
GitHub Actions 自動執行 OpenCode 工作流程
完成後自動建立 Pull Request

三、免費模型配置

查看可用模型

`1`	`/models # 查看所有可用模型（帶 free 標記的即可免費使用）`

接入頂級模型

方式一：Antigravity 外掛（免費接入 Gemini + Claude）

Antigravity 是 Google 推出的 AI 程式設計 IDE，它慷慨地免費提供了 Gemini 3 Pro 和 Claude 4.5 Opus。

在 OpenCode 中貼上安裝提示詞（從 Antigravity GitHub 首頁複製）
等待 AI 自動完成安裝
開啟新終端機執行登入命令，選擇 Google → Antigravity 登入
登入 Google 帳戶，貼上生成的 URL
重新啟動 OpenCode，/models 即可看到 Gemini 3 Pro 和 Claude 4.5 Opus

方式二：GPT Codex（OpenAI 官方合作）

OpenAI 與 OpenCode 官宣合作，可直接接入 ChatGPT Codex。

`1`	`/connect # 選擇 OpenAI → GPT Pro → 瀏覽器登入`

前提：需要有 ChatGPT Plus 或以上訂閱。

方式三：OpenRouter（萬能接入）

透過 OpenRouter 可以接入市面上幾乎所有大模型，國內使用者也能方便獲取額度。

`1`	`/connect # 選擇 OpenRouter → 填寫 API Key`

OpenCode 支援 75 種 AI 接入方式，幾乎囊括所有模型供應商。

四、核心功能亮點

1. 反問式需求澄清

在動手編碼之前，OpenCode 會反向詢問你一系列問題：

只需要程式碼樣例，還是完整可執行的程式？
哪些功能是必須實現的？
呼叫哪個模型？
環境變數如何儲存？

這種「先問清楚再動手」的機制，大幅減少了返工。

2. 命令列程式碼比對介面

OpenCode 的命令列 diff 展示被認為是所有命令列程式設計工具中做得最好的，程式碼變更一目了然。

⭐ 3. Session 並行處理

這是 OpenCode 最具特色的功能——多 Session 並行執行：

# 發起第一個任務（如：增加計時器）
# 任務執行中，建立新 session
/new

# 發起第二個任務（如：畫筆調色）
# 查看所有 session 狀態
/sessions

# 在 session 間切換
/session <id>

打轉符號表示 Session 正在後台執行。兩個需求可以完全並行開發，互不干擾。

4. Timeline 檢查點回退

`1`	`/timeline # 查看當前 Session 的完整對話記錄`

選擇任意歷史節點：

Revert：將程式碼和聊天內容同時回退到該時間點
View：查看當時 AI 做了什麼修改

相當於程式設計過程中的「時光機」，可以大膽嘗試不同方案。

1
2
3

/share      # 將對話記錄分享為網頁
/unshare    # 取消分享
/export     # 匯出對話記錄為檔案

分享後生成一個網頁連結，展示完整的對話記錄和程式碼修改過程，方便與他人協作或展示。

五、Skills 技能遷移

OpenCode 完全相容 Claude Code 的 Skills 目錄結構，遷移成本極低：

1
2

# 目錄結構對應關係
.claude/skills/<skill-name>/    →    .opencode/skills/<skill-name>/

操作步驟

在專案根目錄新建 .opencode 資料夾
在 .opencode 下新建 skills 資料夾
將原 .claude/skills/ 下的技能資料夾直接複製過來
重新啟動 OpenCode，AI 即可識別並呼叫這些 Skills

每個 Skill 就是一個帶目錄的說明書，告訴 AI 如何完成特定領域的任務。

六、MCP 配置

OpenCode 支援兩種 MCP（Model Context Protocol）模式：

本地 MCP（Local）

透過本地命令執行。在 ~/.config/opencode/opencode.json 中配置：

{
  "mcpServers": {
    "shed-cn": {
      "type": "local",
      "command": "npx",
      "args": ["shed-cn"],
      "enabled": true
    }
  }
}

遠端 MCP（Remote）

透過 URL 遠端呼叫。以 Context7 為例：

{
  "mcpServers": {
    "context7": {
      "type": "remote",
      "url": "https://context7-mcp-server-url",
      "headers": {
        "Authorization": "Bearer <your-api-key>"
      },
      "enabled": true
    }
  }
}

配置完成後重新啟動 OpenCode，輸入 /mcp 即可查看已配置的 MCP Server。

七、Oh My Open Code (OMO) 超強外掛 ⭐

OMO 是 OpenCode 上最火的程式設計外掛，本質上是 工具 + MCP + 程式設計 Agent 的組合捆綁包。

七大程式設計智能體

智能體	角色	推薦模型
🧠 西西弗斯 (Sisyphus)	主智能體，規劃與調度	Claude 4.5 Opus / GPT 5.2
🔮 先知 (Prophet)	架構設計、程式碼審查	—
📚 圖書管理員 (Librarian)	查閱文獻、文件檢索	—
🔍 探索者 (Explorer)	網路搜尋	—
🎨 前端工程師	前端開發	Gemini 3 Pro
📝 文件編寫者	文件生成	—
🖼️ 多模態	圖片/PDF 理解	—

每個智能體都分配了最適合其工作的大模型，據作者稱耗費了 24,000 美元的 Token 才找到最佳組合。

三大 MCP Server

Web Search：網路搜尋
Context7：獲取最新技術文件
Grep App：GitHub 倉庫快速程式碼搜尋

整合工具

LSP 進階版：透過程式語言的語法和語義幫助 AI 快速定位程式碼
AST 工具：透過程式碼語法樹進行關聯搜尋
LOC 工具：藉助多模態視覺能力理解圖片、PDF
Delegate Task / Background Task：Agent 任務分配和後台調度

安裝與使用

配置檔案位置：C:\Users\<使用者名稱>\.config\opencode\oh-my-opencode.json

從 OMO GitHub 首頁複製 install 開頭的提示詞
貼到 OpenCode 中，回答配置問題（訂閱情況等）
自動完成安裝

兩種核心用法

① @ 指定智能體

`1`	`@前端工程師幫我優化這個頁面的響應式佈局`

② Ultra Work 模式（魔法詞 ULW）

`1`	`ULW 幫我建立一個寵物商店應用`

Ultra Work 模式下，西西弗斯作為主智能體會：

將任務拆解成 Todo List
同時開啟多個後台任務並行執行
居中調度各個智能體協同工作
最終交付完整專案

Ralph Loop 迴圈模式

強制 AI 長時間迴圈工作，適合極難任務：

`1`	`/ralph-loop`

範例：「使用 Spring Boot 4 最新標準重構整個專案，直到所有測試用例通過」——可以連續執行數小時直到任務完成。

八、其他實用功能

`/init` — 專案知識初始化

讓 AI 通讀整個專案資料夾，生成 agents.md 檔案作為系統提示詞，幫助 AI 快速了解專案。

`/compact` — 上下文壓縮

將之前的對話提煉為簡潔摘要，釋放模型上下文視窗，避免 Token 超限。

自訂命令

在 ~/.config/opencode/commands/ 下建立 .md 檔案定義自訂命令：

# 執行測試
模式：build
命令：npm test
描述：執行專案的全部測試用例

使用：/執行測試 即可觸發。

自訂智能體

在 ~/.config/opencode/agents/ 下建立 .md 檔案：

# Code Review Agent
類型：subagent
模型：claude-4.5-opus
描述：專門負責程式碼審查，檢查程式碼品質、安全漏洞和最佳實踐。

Primary Agent：按 Tab 鍵切換，在對話中直接使用
Sub Agent：由主智能體在後台自動調度

九、總結與推薦

適用場景

場景	推薦度	說明
新手入門 AI 程式設計	⭐⭐⭐⭐⭐	免費模型零成本上手
日常開發輔助	⭐⭐⭐⭐⭐	Session 並行 + Timeline 回退
複雜專案開發	⭐⭐⭐⭐⭐	OMO 外掛多智能體協作
開源專案維護	⭐⭐⭐⭐	GitHub Actions 雲端自動化
練習 Skills/MCP	⭐⭐⭐⭐⭐	完全相容 Claude Code 生態

十、實戰記錄：安裝 Oh My OpenAgent

以下是筆者親測安裝 Oh My OpenAgent（原 Oh My Open Code）的完整對話記錄，環境為 Windows + PowerShell。

環境檢查

1
2

opencode --version
# 輸出: 1.14.39

安裝過程

在 OpenCode 對話中直接告訴 AI：

“Install and configure oh-my-openagent by following the instructions here: https://raw.githubusercontent.com/code-yeongyu/oh-my-openagent/refs/heads/dev/docs/guide/installation.md"

AI 會先詢問你擁有的模型訂閱情況：

訂閱	我的情況
Claude Pro/Max	❌ 無
OpenAI / ChatGPT Plus	❌ 無
Gemini	❌ 無
GitHub Copilot	✅ 學生認證版
OpenCode Zen	✅ 免費可用
Z.ai Coding Plan	❌ 無
OpenCode Go	❌ 無
Kimi for Coding	❌ 無
Vercel AI Gateway	❌ 無

⚠️ AI 會提示 “Without a Claude subscription, the Sisyphus agent might not work ideally”，但 GitHub Copilot 會作為後備模型自動接管。

確認訂閱後，AI 自動執行安裝命令：

bunx oh-my-openagent install --no-tui \
  --claude=no --openai=no --gemini=no \
  --copilot=yes --opencode-zen=yes \
  --zai-coding-plan=no --opencode-go=no \
  --kimi-for-coding=no --vercel-ai-gateway=no

安裝成功的輸出：

[1/4] Checking OpenCode installation...
[OK] OpenCode 1.14.39 detected
[2/4] Adding oh-my-openagent plugin...
[OK] Plugin added -> C:\Users\<使用者名稱>\.config\opencode\opencode.json

安裝後的配置檔案

主配置檔案 ~/.config/opencode/opencode.json：

{
  "plugin": [
    "oh-my-openagent@latest"
  ]
}

Agent 模型配置 ~/.config/opencode/oh-my-openagent.json：

AI 自動根據 GitHub Copilot 訂閱分配了模型：

Agent	分配的模型
Sisyphus（主智能體）	`github-copilot/claude-opus-4.7`
Oracle（先知）	`github-copilot/gpt-5.5` (medium)
其餘 Agent	自動選擇 Copilot 可用模型

認證配置

安裝完成後需要手動認證 GitHub Copilot：

`1`	`opencode auth login`

互動步驟：

上下鍵選擇 GitHub Copilot
按回車確認
瀏覽器自動開啟，登入 GitHub 學生帳號
授權完成，終端機顯示認證成功

如何重新配置 Agent 模型？

方式一：直接告訴 AI

“把 Sisyphus 的模型改成 claude-sonnet-4.6” “Oracle 用 gpt-5.5”

方式二：手動編輯配置檔案

直接修改 ~/.config/opencode/oh-my-openagent.json 中對應 agent 的 model 欄位。

追加配置：補上 OpenCode Zen 作為備選

安裝時遺漏了免費的 OpenCode Zen（--opencode-zen=no），後續在 OpenCode 新對話中直接讓 AI 幫忙修正：

“其實我還有你免費的 OpenCode Zen，但是我已經登入 GitHub Copilot 了，你幫我修改一下”

AI 的第一次嘗試把 OpenCode Zen 設成了主力（opencode/claude-opus-4-7），GitHub Copilot 變成了備選。實際需求是反過來的：

“不是，是 GitHub Copilot 作為主力，OpenCode Zen 自帶的免費模型作為備選”

AI 修正後，最終配置策略：

1
2

主力模型: github-copilot/*     （已付費，優先使用）
備選模型: opencode/*           （免費額度，Copilot 不可用時自動切換）

關鍵配置片段（以 Sisyphus 為例）：

{
  "sisyphus": {
    "model": "github-copilot/claude-opus-4-7",
    "fallback_models": [
      { "model": "opencode/claude-opus-4-7" },
      { "model": "opencode/gpt-5.5" }
    ]
  }
}

💡 經驗：描述配置需求時，主次關係要說清楚——「XX 作為主力，YY 作為備選」，避免 AI 搞反。

使用提示

安裝完成後，在終端機輸入 opencode 即可開始：

在 prompt 中包含 ultrawork 或 ulw 觸發自動並行處理
按 Tab 進入 Prometheus（規劃器）模式
執行 /start-work 執行完整編排

附錄：踩坑記錄

問題	解決
`doctor` 命令超時（30s）	部分檢查可能掛起，加 `--verbose` 排查，或跳過不影響使用
PowerShell 下 `if` 語法報錯	OpenCode 的 bash 命令在 PowerShell 下需轉換語法
Sisyphus 非 Claude 模型效能下降	這是已知限制，有 Claude 訂閱體驗最佳
AI 把主力/備選模型搞反	描述需求時說清主次：「XX 作為主力，YY 作為備選」，不要只說「幫我加上 YY」

📚 參考來源：技術爬爬蝦 - OpenCode 詳細攻略、Oh My OpenAgent 安裝指南

OpenCode 新手進階：並行調度與使用技巧全攻略

Thu, 30 Apr 2026 02:00:15 +0800

📋 目錄

📌 核心要點概括

功能	一句話說明
Session 並行	OpenCode 殺手級功能，多個任務同時跑，互不干擾，效率翻倍
Ultra Work 模式	輸入 `ULW`，主智能體自動拆解任務、調度多個子智能體並行幹活
@ 指定智能體	讓擅長前端的幹前端，擅長架構的做評審，人盡其才
Timeline 時光機	隨時回退到任意歷史節點，大膽試錯零成本
Ralph Loop	讓 AI 迴圈工作數小時，攻堅極難任務

一、Session 並行：讓 AI 同時幹多件事

這是 OpenCode 相比其他 AI 程式設計工具最大的差異化優勢。傳統工具只能串行——一個任務跑完才能開始下一個。OpenCode 可以同時開啟多個 Session，互不干擾。

基礎操作

/new              # 建立新 Session
/sessions         # 查看所有 Session 的狀態（打轉符號 = 正在執行）
/session <id>     # 切換到指定 Session
/session prev     # 回到上一個 Session

實戰場景

假設你在開發一個「你畫我猜」小遊戲，有兩個獨立需求：

需求 A：增加一個計時器，首次落筆開始計時，超過 20 秒遊戲失敗
需求 B：畫筆可以調節顏色

傳統做法

先做完 A，再做 B → 需求 B 白白等待 5-10 分鐘。

OpenCode 做法

1. 輸入需求 A，AI 開始工作
2. 輸入 /new，建立新 Session
3. 輸入需求 B，AI 開始工作
4. 輸入 /sessions 查看進度：

   Session 1  ◐  正在添加計時器邏輯...
   Session 2  ◐  正在添加顏色選擇器...

兩個需求完全並行開發，總耗時從 15 分鐘壓縮到 8 分鐘。

注意事項

⚠️ Session 之間完全隔離，修改同一檔案可能衝突，建議分配給不同模組
⚠️ 後台 Session 不會自動通知完成，需要手動 /sessions 查看
✅ 可以隨時 /new 開第三個、第四個……沒有數量限制

二、Ultra Work：一鍵召喚 AI 程式設計團隊

如果說 Session 並行是「手動擋」，那 Ultra Work 就是「全自動駕駛」。輸入一個魔法詞，AI 自動把任務拆開、分配給最合適的智能體、並行執行。

觸發方式

在 prompt 中包含以下任一關鍵詞：

1
2
3

ULW
ultrawork
Ultra Work

工作原理

你的需求：幫我做一個寵物商店網站
        │
        ▼
  ┌─────────────────────────────┐
  │  西西弗斯（主智能體）         │
  │  1. 拆解任務 → Todo List     │
  │  2. 分配子任務              │
  └──────┬──────────┬───────────┘
         │          │
    ┌────▼───┐ ┌───▼────┐ ┌────────▼────┐
    │ 先知    │ │ 前端    │ │ 文件編寫者   │
    │ 架構設計 │ │ UI 開發 │ │ 文件生成     │
    └────────┘ └────────┘ └─────────────┘
         │          │            │
         └──────────┴────────────┘
                    │
                    ▼
              完整專案交付

自動拆分 Todo List
同時開啟 3 個後台任務並行執行
主智能體居中調度
最終交付完整專案

什麼時候用？

場景	適用	說明
從零建立完整專案	✅ 極佳	自動拆分前端、後端、文件
多模組並行開發	✅ 極佳	各智能體分工明確
單檔案小修改	❌ 不推薦	殺雞用牛刀，反而更慢
簡單 bug 修復	❌ 不推薦	普通對話更快

💡 複雜度越高，Ultra Work 的價值越大。簡單任務反而會因為調度開銷變慢。

實際效果

用 Ultra Work 模式建立了一個寵物商店網站：

✅ 在沒有任何圖片素材的情況下，用 emoji 作為裝飾
✅ 介面清新、互動流暢、動畫完整

三、@ 指定智能體：讓專業的人幹專業的事

安裝了 Oh My OpenAgent（OMO）後，你擁有一個 AI 程式設計團隊。透過 @ 可以點名讓特定智能體幹活。

智能體能力表

智能體	擅長領域	最適模型	範例用法
🧠 西西弗斯	統籌規劃、任務調度	Claude Opus	複雜多步驟任務
🔮 先知	架構設計、程式碼審查	GPT 5.5	專案結構設計
🎨 前端工程師	UI 開發、頁面佈局	Gemini 3 Pro	響應式佈局優化
🔍 探索者	網路搜尋、查資料	MiniMax	查最新 API 文件
📚 圖書管理員	文獻查閱、文件檢索	—	梳理開源專案源碼
📝 文件編寫者	README、註釋生成	—	生成專案文件
🖼️ 多模態	圖片/PDF 理解	—	根據設計稿寫程式碼

使用範例

@前端工程師 幫我把這個登入頁改成響應式佈局，行動端也要好看

@先知 審查一下 src/service/ 目錄下的程式碼，找出潛在的效能問題

@探索者 查一下 React 19 的 Server Components 最新用法

@文件編寫者 給整個專案生成一份 API 文件

切換主智能體

按 Tab 鍵可以切換當前對話的主智能體，適合長時間使用某個特定角色。

四、Timeline 時光機：隨意試錯，隨時回退

程式設計中最怕什麼？改了一大堆程式碼，發現方向錯了，又回不去。Timeline 就是你的後悔藥。

基本用法

`1`	`/timeline # 列出當前 Session 的每一步對話記錄`

選擇任意節點：

Revert：程式碼和聊天內容同時回退到該節點，就像什麼都沒發生過
View：查看當時 AI 做了什麼修改

實戰場景

1
2
3

1. 你讓 AI 重構了某個模組 → 效果不理想
2. /timeline → 選擇重構前的節點 → Revert
3. 程式碼回到重構前，換個思路重新來

使用技巧

🕐 完成一個階段性任務後，在心裡記下那個節點（第幾次對話）
🕐 大膽嘗試激進方案——反正可以一鍵回退
🕐 對比兩個方案：Revert 到 A 方案 → 看看效果 → Revert 到 B 方案 → 對比

這就是程式設計版的「存檔/讀檔」，讓你敢於探索任何可能性。

五、Ralph Loop：讓 AI 死磕到底

這個模式會讓 AI 持續迴圈工作，直到任務真正完成。適合那些需要反覆迭代的硬骨頭。

啟動方式

`1`	`/ralph-loop`

適用場景

"使用 Spring Boot 4 最新標準重構整個專案，直到所有測試用例通過"

"逐個檢查 src/ 下所有檔案的程式碼規範，修復每一個違規項"

"為專案添加完整的單元測試，直到覆蓋率達到 90%"

和 Ultra Work 的區別

對比維度	Ultra Work	Ralph Loop
工作機制	並行拆分、多智能體協作	串行迴圈、持續迭代
適合場景	從零構建、多模組專案	重構、修復、達標類任務
耗時	幾分鐘到十幾分鐘	可能數小時
終點	任務拆解完成	滿足終止條件

⚠️ Ralph Loop 可能執行很久，注意 API 額度消耗。

六、日常提速小技巧

1. 善用 `/compact` 節省上下文

當你和 AI 聊了很多輪，上下文視窗快滿時：

`1`	`/compact`

AI 會把之前的對話提煉成一個摘要，釋放空間繼續工作。不需要開新對話丟失上下文。

2. 用 `/init` 讓 AI 快速上手新專案

進入一個新專案時，先讓 AI 通讀程式碼：

/init

AI 會掃描整個專案，生成 agents.md 作為系統提示詞。之後任何對話都會基於這個理解，效率大幅提升。

1
2
3

/share      # 生成分享連結，展示完整對話和程式碼修改
/unshare    # 取消分享，連結失效
/export     # 匯出對話記錄為檔案

適合場景：

給同事展示你是如何用 AI 解決某個問題的
記錄踩坑過程，供團隊參考
寫部落格時的素材

4. 查看可用模型

`1`	`/models # 帶 free 標記的是免費模型`

GLM-4.7 和 MiniMax-2.1 程式設計能力不錯，適合輕量任務。

5. 快速貼上程式碼（VS Code 外掛）

在 VS Code 中選中程式碼片段 → Ctrl + Alt + K → 直接貼到 OpenCode 對話框。

省去複製貼上的切換成本，保持心流。

七、新手推薦工作流

┌─────────────────────────────────────────────┐
│                 拿到新需求                    │
└──────────────────┬──────────────────────────┘
                   │
                   ▼
          ┌────────────────┐
          │ 簡單？          │
          └───┬────────┬───┘
              │ 是      │ 否（複雜/多模組）
              ▼         ▼
    ┌─────────────┐  ┌─────────────────┐
    │ 普通對話搞定  │  │ 輸入 ULW 觸發    │
    │             │  │ Ultra Work 模式  │
    └─────────────┘  └────────┬────────┘
                              │
                   ┌──────────▼──────────┐
                   │ 多個獨立子任務？       │
                   └───┬──────────┬──────┘
                       │ 是        │ 否
                       ▼           ▼
              ┌─────────────┐ ┌──────────────┐
              │ /new 開多個   │ │ 等 Ultra Work │
              │ Session 並行  │ │ 自動完成       │
              └──────┬──────┘ └──────────────┘
                     │
                     ▼
              ┌─────────────┐
              │ /sessions    │
              │ 查看所有進度  │
              └──────┬──────┘
                     │
                     ▼
              ┌─────────────┐
              │ 某個方向錯了？ │
              └───┬─────────┘
                  │
                  ▼
              ┌─────────────┐
              │ /timeline →  │
              │ Revert 回退   │
              └─────────────┘

一句話總結

小活直接聊，大活喊 ULW，並行用 Session，錯了就 Timeline 回退，死磕開 Ralph Loop。

八、一個真實案例

在 Oh My OpenAgent 安裝完成後，想調整 Agent 模型配置——讓 GitHub Copilot 作為主力，免費的 OpenCode Zen 作為備選。

第一次嘗試

直接在 OpenCode 對話中說：

“其實我還有你免費的 OpenCode Zen，但是我已經登入 GitHub Copilot 了，你幫我修改一下”

AI 把 OpenCode Zen 設成了主力——因為沒說清楚主次關係。❌

糾正

“不是，是 GitHub Copilot 作為主力，OpenCode Zen 自帶的免費模型作為備選”

AI 立即修正，更新了 oh-my-openagent.json，所有 Agent 都用 github-copilot/* 為主、opencode/* 為 fallback。✅

💡 教訓：跟 AI 描述需求時，主次關係一定要說清楚——「XX 作為主力，YY 作為備選」，不要只說「幫我加上 YY」。

📚 參考來源：OpenCode 全深度指南、Oh My OpenAgent 📅 筆記生成日期：2026-05-07

5分鐘安裝ClaudeCode並接入DeepSeek

Sun, 26 Apr 2026 02:00:15 +0800

概述

Claude Code 是 Anthropic 推出的命令列 AI 程式設計助手，內建多種 Skills 外掛，透過不同組合可以完成許多 AI 單獨做不到的事。接入國產大模型 DeepSeek V4 後，可以大幅降低使用成本。

核心用途：

建立個人知識庫，自動化整理學習筆記
按時蒐集行業資訊並整理成文稿
自動發佈到各大社交媒體平台

第一步：安裝執行環境

1.1 安裝 Node.js

前往 Node.js 官網下載 Windows 安裝包（.msi），雙擊後一路下一步。

驗證安裝：

1
2

node -v
npm -v

1.2 配置 npm 國內鏡像

`1`	`npm config set registry https://registry.npmmirror.com/`

💡 為什麼要配置鏡像？

預設 npm 源在國外，下載速度很慢。配置國內鏡像後安裝速度可提升 10 倍以上。

1.3 安裝 Git

前往 Git 官網下載對應版本安裝包，一路下一步。

驗證安裝：

git -v

1.4 安裝 CC-Switch

CC-Switch 用於將第三方模型接入 Claude Code。

前往 GitHub Release 頁面下載對應版本（如 Windows MSI），雙擊安裝，一路下一步。

第二步：安裝 Claude Code

`1`	`npm install -g @anthropic-ai/claude-code`

驗證：

`1`	`claude --version`

跳過登入（使用第三方 API）

啟動一次 Claude Code 後關閉
在使用者目錄下找到 .claude.json 檔案
添加以下欄位（注意上一欄位尾部需加英文逗號）：

`1`	`"hasCompletedOnboarding": true`

重新執行 claude 啟動，選擇信任當前資料夾即可

⚠️ 常見錯誤

如果忘記在上一欄位末尾加逗號，會導致 JSON 解析錯誤，Claude Code 無法啟動。

第三步：接入 DeepSeek

3.1 獲取 API Key

開啟 DeepSeek 開放平台，註冊登入
確保帳戶有餘額
右側 API Keys → 建立 API Key → 複製儲存（關閉後無法再次查看）

🚨 密鑰安全

密鑰不要分享給他人，否則會消耗你的餘額。

3.2 配置 CC-Switch

開啟 CC-Switch，點擊右上角 + 號
模型預設選擇 DeepSeek
填入 API Key
模型名稱統一改為：deepseek-v4-pro[1m]（上下文 1M，Claude Code 預設使用 128K）
點擊添加

3.3 驗證模型

在 Claude Code 對話框中輸入：

/model

可查看當前可用模型，或直接問「你當前是什麼模型」確認接入成功。

第四步：實戰範例

桌面新建一個資料夾
在網址列輸入 CMD 回車
執行 claude 啟動，選擇信任當前資料夾
輸入需求：使用 HTML + JS + CSS 做一個 Todo 軟體
執行中會申請工具權限，選擇 Yes 即可
完成後讓它幫你開啟頁面預覽

💡 小技巧

可以用中文直接描述需求，Claude Code 支援中英文混合輸入。

命令速查表

操作	命令
Node 版本檢查	`node -v`
npm 版本檢查	`npm -v`
npm 國內鏡像	`npm config set registry https://registry.npmmirror.com/`
Git 版本檢查	`git -v`
安裝 Claude Code	`npm install -g @anthropic-ai/claude-code`
Claude Code 版本檢查	`claude --version`
啟動 Claude Code	`claude`
切換模型	`/model`

常見問題

執行 claude 後提示找不到命令？

檢查 Node.js 是否安裝成功（node -v），以及 npm 全域路徑是否在系統 PATH 中。

啟動後要求登入 Anthropic 帳號？

說明 .claude.json 中的 hasCompletedOnboarding 未正確配置，請回到第二步檢查。

模型呼叫報錯 / 無回應？

檢查 DeepSeek 帳戶餘額是否充足，以及 CC-Switch 中 API Key 是否正確填寫。

安裝ClaudeCode並接入DeepSeek（面向小白）

Sun, 26 Apr 2026 02:00:15 +0800

概述

這份教學是給誰看的？

這份教學面向完全沒有電腦基礎的使用者。你不需要知道什麼是「命令列」、什麼是「環境變數」、什麼是「版本管理」——我會把每一步都拆解到最細，告訴你在哪裡點、點什麼、輸入什麼、看到什麼說明成功了。

你要裝什麼？為什麼要裝這些？

在開始之前，先瞭解我們一共要安裝 3 個東西，它們各自的作用：

序號	軟體名稱	一句話解釋	為什麼必須裝
1	Node.js	讓你的電腦能執行 JavaScript 程式的「引擎」	Claude Code 是用 JavaScript 寫的，沒有它就跑不起來
2	Claude Code	一個住在你電腦終端機裡的 AI 程式設計助手	這就是我們最終要用的東西
3	CC-Switch	一個給 Claude Code「換大腦」的小工具	讓 Claude Code 從昂貴的官方模型換成便宜的 DeepSeek

整個過程大約需要 10-15 分鐘。請按順序一步步來，不要跳步。

📌 前提條件

你需要一台 Windows 電腦（Windows 10/11），能正常上網。

安裝 Node.js

什麼是 Node.js？

Node.js = 讓電腦能執行 Claude Code 的執行環境。它是完全免費的，就像你需要先裝好 Windows 系統才能執行軟體一樣，你需要先裝好 Node.js 才能執行 Claude Code。

下載 Node.js

第 1 步：開啟瀏覽器

開啟你電腦上任意一個瀏覽器（Chrome、Edge、Firefox 都可以）。

第 2 步：前往 Node.js 官網

在瀏覽器網址列（頂部輸入網址的長條框）中輸入以下網址，然後按 Enter：

`1`	`https://nodejs.org/`

第 3 步：找到下載按鈕

開啟網頁後，你會看到頁面中央有兩個大按鈕：

左邊的按鈕寫著 LTS（推薦的版本號，比如 22.16.0 LTS）
右邊的按鈕寫著 Current

點選左邊的 LTS 按鈕，瀏覽器會自動開始下載一個 .msi 檔案。

第 4 步：找到下載好的檔案

下載完成後（通常只需幾秒鐘），有兩種方式找到這個檔案：

方式一：點選瀏覽器右上角的下載列表（通常是一個向下的箭頭 ↓ 圖示），在列表中找到剛才下載的檔案，檔名類似 node-v22.16.0-x64.msi
方式二：開啟檔案總管（就是你看資料夾的那個視窗），在左側找到下載資料夾，裡面就有這個檔案

安裝 Node.js

第 1 步：按兩下安裝檔案

在下載資料夾中，找到 node-v22.16.0-x64.msi（版本號可能略有不同），按兩下它。

第 2 步：歡迎介面

彈出一個標題為 Node.js Setup（Node.js 安裝精靈）的視窗。點選底部的 Next（下一步）按鈕。

第 3 步：授權合約

視窗中顯示一大段英文合約文字。

勾選左下角的核取方塊：I accept the terms in the License Agreement（我接受授權合約中的條款）
點選 Next

第 4 步：安裝位置（⚠️ 重要！需要修改路徑）

這裡顯示的是 Node.js 將要安裝到你電腦的哪個位置。

預設路徑是：C:\Program Files\nodejs\

📌 我們要把它改到 D 磁碟！

建議安裝到 D 磁碟，原因：

C 磁碟是系統磁碟，放太多東西會影響電腦速度

D 磁碟專門用來裝軟體，萬一系統重灌了，D 磁碟的東西還在

方便管理和查詢

修改步驟：

點選路徑輸入框，把裡面的內容全部選中（按 Ctrl + A），然後刪除
輸入新的路徑：
1

D:\nodejs\
點選 Next

💡 注意

路徑中不要有中文和空格，否則可能導致安裝出錯。

第 5 步：自訂安裝

顯示一個帶有樹狀核取方塊的頁面（Custom Setup）。

什麼都不要改，直接點選 Next。

第 6 步：確認安裝

點選 Install（安裝）按鈕。如果彈出安全提示，點選是。

第 7 步：等待安裝

進度條會走完，通常只需 10-30 秒。

第 8 步：完成

點選 Finish（完成）。

Node.js 安裝完成！

此時 Node.js 和 npm（Node.js 的套件管理器，可以理解為「軟體商店」）都已經裝好了。

驗證 Node.js 是否安裝成功

安裝完成後，我們需要驗證一下——就像買完菜要檢查一下有沒有漏掉的東西。

第 1 步：開啟命令提示字元（CMD）

什麼是「命令提示字元」？

命令提示字元（也叫 CMD）是一個黑色背景、白色文字的視窗，你可以在這個視窗裡輸入文字命令來讓電腦執行操作。以後會經常用到它。

開啟方式（任選一種）：

方式一（推薦）：
1. 按住鍵盤上的 Win 鍵（鍵盤左下角，畫著 Windows 圖示的那個鍵）
2. 同時按下 R 鍵
3. 彈出一個小視窗（標題是「執行」），在裡面輸入 cmd
4. 點選確定，或直接按Enter 鍵
方式二：
1. 點選桌面左下角的開始功能表（Windows 圖示）
2. 在搜尋框中輸入 cmd
3. 點選搜尋結果中的 命令提示字元

第 2 步：輸入驗證命令

在開啟的黑色視窗中，輸入以下內容（輸入時螢幕上會顯示你打的字），然後按Enter 鍵：

node -v

如果視窗中顯示類似 v22.16.0 的內容，說明 Node.js 安裝成功了 ✅

繼續輸入以下命令，按 Enter：

npm -v

如果顯示類似 10.9.2 的版本號，說明 npm 也正常 ✅

⚠️ 提示「不是內部或外部命令」？

說明環境變數沒有配置好，請看下面的 1.4 如何配置環境變數。

如何配置環境變數

什麼是環境變數（PATH）？

PATH 可以理解為電腦的「通訊錄」。當你在命令提示字元裡輸入 node 時，電腦不知道 node 裝在哪裡，它會去 PATH 這個「通訊錄」裡找。如果 PATH 裡沒有 Node.js 的安裝目錄，電腦就找不到它，就會報「不是內部或外部命令」。

正常情況下，Node.js 安裝時會自動把自己加到 PATH 裡。但如果出了問題，你需要手動新增。

檢視 PATH 裡有沒有 Node.js

按 Win + R，輸入 sysdm.cpl，Enter
點選頂部的進階索引標籤
點選底部的 環境變數 按鈕
在下方 系統變數 列表中，找到 Path 這一行，選中它，點選編輯

在彈出的列表中，檢查有沒有類似這樣的條目：

`1`	`D:\nodejs\`

💡 路徑要和你安裝時設定的一致

如果你當時裝在了 D:\Software\nodejs\，那這裡也應該顯示 D:\Software\nodejs\。

如果有這個條目：說明 PATH 沒問題，但仍然報錯的話，關掉當前命令提示字元視窗，重新開啟一個新的再試。

如果沒有這個條目：按下面步驟手動新增。

手動新增 Node.js 到 PATH

在剛才開啟的 編輯環境變數 視窗中，點選新增
輸入 Node.js 的安裝路徑：
1

D:\nodejs\
點選確定
點選確定關閉環境變數視窗
點選確定關閉系統內容視窗
關掉所有已開啟的命令提示字元視窗，重新開啟一個新的（舊視窗不會識別新配置）
再次輸入 node -v 驗證

配置 npm 國內鏡像（強烈推薦）

💡 為什麼要配置？

npm 預設從國外下載軟體，速度很慢。配置國內鏡像後下載速度提升 10 倍以上。

在命令提示字元中輸入以下命令，按 Enter：

`1`	`npm config set registry https://registry.npmmirror.com/`

輸入以下命令驗證，如果顯示 https://registry.npmmirror.com/ 則成功 ✅：

`1`	`npm config get registry`

第一步完成！

你已經在電腦上安裝好了 Node.js，並且配置了國內鏡像。接下來安裝 Claude Code。

安裝 Claude Code

透過 npm 安裝 Claude Code

開啟命令提示字元（如果還沒開啟的話），輸入以下命令，按 Enter：

`1`	`npm install -g @anthropic-ai/claude-code`

等待安裝完成（一般 1-3 分鐘）。螢幕上會捲動一些文字，只要最後沒有報錯就行。

驗證安裝

輸入：

`1`	`claude --version`

按 Enter。如果顯示版本號（例如 1.0.x），說明安裝成功 ✅

首次啟動（跳過登入）

為什麼要跳過登入？

Claude Code 官方要求你用 Anthropic 帳號登入才能使用。但 Anthropic 的服務需要海外信用卡支付，對國內使用者很不方便。

我們的方案是：先跳過登入，然後透過 CC-Switch 工具接入國產的 DeepSeek 模型，這樣就不需要 Anthropic 帳號了，費用也低得多。

第 1 步：先啟動一次 Claude Code

在命令提示字元中輸入：

claude

按 Enter。Claude Code 會啟動，可能會顯示一些介紹資訊或要求你登入。

不用管它，直接關閉這個命令提示字元視窗（點右上角的 ×）。

第 2 步：找到配置檔案

按 Win + R（Win 鍵 + R 鍵同時按）
在彈出的「執行」視窗中，輸入 %USERPROFILE%
點選確定或按 Enter
開啟後，你會看到一個資料夾，裡面有各種檔案和子資料夾

第 3 步：找到 .claude.json 檔案

在這個資料夾中，找到一個名為 .claude.json 的檔案。

⚠️ 找不到這個檔案？

如果找不到 .claude.json，可能是以下原因：

副檔名被隱藏了——在資料夾視窗頂部，點選檢視 → 勾選 副檔名 和 隱藏的專案

Claude Code 還沒有建立這個檔案——請回到第 1 步，確保你成功啟動過一次 Claude Code

在某些情況下，這個檔案可能在 .claude 資料夾裡面，檔名為 settings.json

第 4 步：用記事本開啟配置檔案

右鍵點選 .claude.json 檔案
在彈出的選單中，選擇 開啟方式
選擇 記事本（Notepad）
- 如果列表中沒有記事本，選擇 選擇其他應用 → 在列表中找到 記事本 → 點選確定

第 5 步：編輯配置檔案

開啟後，你會看到類似這樣的內容（具體內容可能不同）：

{
  "someField": "someValue",
  "anotherField": "anotherValue"
}

我們需要在最後的 } 前面，新增一行 "hasCompletedOnboarding": true。

修改後的樣子應該是這樣的：

{
  "someField": "someValue",
  "anotherField": "anotherValue",
  "hasCompletedOnboarding": true
}

📌 ⚠️ 注意三個細節，否則會報錯！

加逗號：hasCompletedOnboarding 前面那行的末尾要加一個英文逗號 ,

用英文引號：引號必須是英文的 "，不能是中文的 "

true 是小寫：必須寫 true，不能寫 True

第 6 步：儲存檔案

按 Ctrl + S 儲存（或者點選左上角檔案 → 儲存）
關閉記事本視窗

第 7 步：驗證跳過登入是否成功

重新開啟命令提示字元（Win + R → cmd → Enter）
輸入 claude，按 Enter
如果直接進入了 Claude Code 的主介面（沒有要求你登入），說明跳過登入成功 ✅

第二步完成！

Claude Code 安裝完畢，並且跳過了登入步驟。接下來安裝 CC-Switch 來接入 DeepSeek。

安裝 CC-Switch（模型切換工具）

什麼是 CC-Switch？

CC-Switch 是一個視覺化工具，讓你不用手動改配置檔案，點點滑鼠就能把 Claude Code 的「大腦」從官方模型換成 DeepSeek。

下載 CC-Switch

第 1 步：開啟下載頁面

在瀏覽器網址列中輸入以下網址，按 Enter：

`1`	`https://github.com/cc-switch/cc-switch/releases`

第 2 步：找到最新版本

開啟頁面後，找到帶有綠色 Latest 標籤的版本，點選展開。

第 3 步：找到下載連結

展開後往下捲動，找到 Assets 這個詞（旁邊可能有個小箭頭 ▾），點選展開它。

找到以 .msi 結尾的檔案（Windows 安裝包），點選檔名開始下載。

💡 選哪個檔案？

Windows 電腦：選 x64.msi 結尾的檔案

Mac 電腦：選 .dmg 結尾的檔案

安裝 CC-Switch

第 1 步：按兩下安裝檔案

在下載資料夾中，按兩下下載好的 .msi 檔案。如果彈出安全提示，點選 仍要執行 或 更多資訊 → 仍要執行。

第 2 步：按提示安裝

安裝精靈和 Node.js 類似：

點選 Next
接受合約 → Next
保持預設安裝路徑 → Next
點選 Install
等待安裝完成 → Finish

第三步完成！

CC-Switch 安裝好了。接下來獲取 DeepSeek 的 API Key。

獲取 DeepSeek API Key

什麼是 DeepSeek？

國產大語言模型，效能強大且價格低廉（日常使用每月約 10-30 元），接入後可以大幅降低使用成本。

什麼是 API Key？

API Key 是一把鑰匙，用來呼叫 DeepSeek 的 AI 服務，每次使用會從帳戶餘額中扣費。你需要：① 註冊帳號 ② 充值 ③ 建立 Key

註冊 DeepSeek 帳號

第 1 步：開啟 DeepSeek 開放平臺

在瀏覽器網址列中輸入：

`1`	`https://platform.deepseek.com/`

按 Enter。

💡 注意

這是 DeepSeek 的開發者平臺（platform.deepseek.com），不是聊天網站（chat.deepseek.com），別搞混了。

第 2 步：註冊/登入

頁面右上角有登入 / 註冊按鈕
點選註冊（如果沒有帳號）或登入（已有帳號）
按頁面提示填寫資訊完成註冊

充值餘額

💡 費用參考

日常使用一個月大約只需 10-30 元，建議首次充值 20-50 元。

登入後，在頁面左側選單中找到充值（或錢包 / Billing），點選它
選擇充值金額，選擇支付方式，完成支付
確保帳戶餘額大於 0（沒有餘額無法使用 API）

建立 API Key

第 1 步：進入 API Keys 頁面

登入後，在左側選單中找到 API Keys，點選它
你會看到一個 API Keys 管理頁面

第 2 步：建立新的 API Key

點選 建立 API Key 按鈕
彈出一個對話方塊，要求你輸入 Key 的名稱
- 可以隨意填寫，比如 claude-code、我的key、test 都行
- 這個名稱只是給你自己看的，用來區分不同的 Key
點選確認或建立

第 3 步：複製 API Key（⚠️ 最關鍵的一步！）

建立成功後，頁面會顯示你的 API Key，格式類似：

`1`	`sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx`

⚠️ 這個 Key 只會顯示一次！

關閉對話方塊後就再也看不到了。請立即複製儲存到記事本或微信檔案傳輸助手。

🚨 安全提醒

API Key 等同於你的帳號密碼，不要分享給任何人，不要發到公開場合。如果懷疑洩露，立即刪除並重新建立。

第四步完成！

你已經有了 DeepSeek 的 API Key（鑰匙）。最後一步，把這把鑰匙交給 CC-Switch，完成接入。

配置 CC-Switch 接入 DeepSeek

開啟 CC-Switch

在桌面上或開始選單中找到 CC-Switch 的圖示，按兩下開啟。

新增 DeepSeek 配置

第 1 步：點選新增按鈕

CC-Switch 開啟後，找到右上角的 + 號（加號按鈕），點選它。

第 2 步：填寫配置資訊

點選 + 號後，會彈出一個配置面板，填寫以下資訊：

① 模型預設（Model Preset）：選擇 DeepSeek

② API Key：貼上你之前複製的 DeepSeek API Key（注意首尾不要有空格）

③ 模型名稱（Model Name）：把輸入框內容刪掉，輸入：

`1`	`deepseek-v4-pro[1m]`

④ Base URL / API 位址（如果有的話）：

`1`	`https://api.deepseek.com`

第 3 步：儲存配置

檢查所有資訊都填好後，點選新增 / 儲存 / 確認按鈕。

切換到 DeepSeek

回到 CC-Switch 的主介面
你會看到剛才新增的 DeepSeek 配置已經出現在列表中
點選該配置旁邊的切換 / 啟用按鈕
介面上應該會顯示「當前模型：DeepSeek」或類似的資訊

驗證接入是否成功

開啟命令提示字元，輸入 claude 啟動 Claude Code。

在 Claude Code 中輸入：

/model

按 Enter。如果顯示的模型資訊中包含 DeepSeek，說明接入成功 ✅

全部配置完成！

現在可以開始使用 AI 程式設計助手了！

開始使用（實戰範例）

配置完成後，做一個簡單的練習確保一切正常。

建立專案資料夾並開啟命令提示字元

在桌面右鍵 → 新增 → 資料夾，命名為 my-first-ai-project
按兩下開啟這個資料夾
點選視窗頂部的網址列，輸入 cmd，按 Enter

啟動 Claude Code

在彈出的命令提示字元視窗中，輸入：

claude

按 Enter。如果詢問是否信任這個資料夾，輸入 y 按 Enter。

發出第一個指令

Claude Code 啟動後，輸入以下內容（可以直接用中文）：

`1`	`幫我建立一個簡單的個人主頁，使用 HTML + CSS + JavaScript，包含一個標題、一段自我介紹和一個深色模式切換按鈕`

按 Enter 提交。

處理權限請求

執行過程中 Claude Code 可能會詢問是否允許建立/修改檔案，選擇 Yes 即可。建議在自己建立的專案中選擇 Yes, always allow（以後不再詢問）。

檢視成果

完成後，回到專案資料夾，按兩下 index.html，它會在瀏覽器中開啟，你就能看到 AI 幫你建立的網頁了！

恭喜！

你已經用 Claude Code + DeepSeek 完成了第一個專案！

常用命令速查表

操作	命令	說明
檢查 Node.js 版本	`node -v`	驗證 Node.js 是否安裝
檢查 npm 版本	`npm -v`	驗證 npm 是否正常
設定 npm 鏡像	`npm config set registry https://registry.npmmirror.com/`	加速下載
檢查 npm 鏡像	`npm config get registry`	驗證鏡像是否生效
安裝 Claude Code	`npm install -g @anthropic-ai/claude-code`	全域安裝
檢查 Claude Code 版本	`claude --version`	驗證 Claude Code 是否安裝
啟動 Claude Code	`claude`	在當前資料夾啟動
檢視當前模型	`/model`	在 Claude Code 內輸入
退出 Claude Code	`/exit` 或按兩次 `Ctrl + C`	退出程式

常見問題 FAQ

輸入 node -v 提示「不是內部或外部命令」？

Node.js 的環境變數（PATH）沒有配置好。開啟檔案總管，進入 D:\nodejs\ 看看裡面有沒有 node.exe：

有這個檔案：說明安裝了但 PATH 沒配好，按照上方 1.4 如何配置環境變數 的步驟手動新增

沒有這個檔案：說明安裝失敗了，重新下載安裝

輸入 claude 提示「不是內部或外部命令」？

Claude Code 安裝沒成功。先確認 node -v 和 npm -v 正常，然後重新執行 npm install -g @anthropic-ai/claude-code。

啟動 Claude Code 後要求登入 Anthropic 帳號？

.claude.json 沒改對。按 Win + R，輸入 %USERPROFILE% Enter，找到 .claude.json 用記事本開啟，確認裡面有 "hasCompletedOnboarding": true，且前面那行末尾有英文逗號、true 是小寫、引號是英文引號。

Claude Code 對話時報錯 / 無回應？

常見原因：① DeepSeek 餘額不足 ② API Key 填寫錯誤 ③ 模型名稱不是 deepseek-v4-pro[1m] ④ 網路問題。逐項檢查即可。

npm 安裝 Claude Code 非常慢（超過 5 分鐘）？

檢查是否配置了國內鏡像：npm config get registry（應顯示 registry.npmmirror.com）。如果沒有，執行 npm config set registry https://registry.npmmirror.com/ 後重試。

CC-Switch 打不開或閃退？

到 GitHub Release 重新下載最新版本，或嘗試右鍵以系統管理員身份執行。

GitHub 頁面打不開？

原因：GitHub 在國內可能訪問不穩定。解決：

多重新整理幾次頁面

嘗試使用不同的瀏覽器

如果實在打不開，可以在網上搜尋「CC-Switch 下載」，有些國內鏡像站也提供了下載

完整流程回顧

步驟內容一句話總結

第一步安裝 Node.js 裝好「執行引擎」，讓電腦能跑 JavaScript 程式

第二步安裝 Claude Code 裝好「AI 助手」，並跳過登入

第三步安裝 CC-Switch 裝好「換腦器」，用來切換 AI 模型

第四步獲取 DeepSeek API Key 拿到「鑰匙」，用來呼叫 DeepSeek 的 AI 服務

第五步配置 CC-Switch 用「換腦器」+「鑰匙」，把 Claude Code 的大腦換成 DeepSeek

第六步開始使用在任何資料夾中輸入 claude 啟動 AI 助手！

完成全部步驟後，你就可以在電腦的任何資料夾中，輸入 claude 命令，啟動一個由 DeepSeek 驅動的 AI 程式設計助手了！

小白也能學會！用 AI 快速畫出漂亮的技術架構圖

Tue, 31 Mar 2026 19:51:00 +0800

✈️ 小白也能學會！用 AI 快速畫出漂亮的技術架構圖

👋 這份文件是寫給完全沒畫過架構圖的新手看的。你不需要會設計、不需要會寫程式碼，只要會用 AI 聊天就能跟著做。

什麼是技術架構圖？我為什麼要畫它？

簡單說，技術架構圖就是把你腦子裡的系統「畫出來」——

比如你要做一個 App，它有哪些功能模組？使用者怎麼用？資料怎麼流轉？把這些關係畫成圖，就是架構圖。

畫它的好處很實在：

✅ 自己理清思路——畫圖的過程就是你梳理系統設計的過程
✅ 跟同事溝通不費勁——一張圖勝過千言萬語
✅ 彙報展示有面子——老闆和客戶一看就明白你的方案有多棒
✅ AI 幫你畫，省時省力——現在用 AI，幾分鐘就能出一張像樣的圖

🤔 新手該選哪種方法？（先看這個）

你的情況	推薦方案	難度
就想最快出一張好看的圖，後期不改了	方案一（AI 直接生成圖片）	⭐
願意多一步，讓圖以後好修改	方案二（Mermaid.js 程式碼生成）	⭐⭐
做正式文件，需要反覆修改、風格統一	方案三（Excalidraw 本機畫圖）	⭐⭐⭐

💡 新手建議：先試 方案一 感受一下，再嘗試 方案二。方案三等你需要做正式文件時再研究。

方案一：直接讓 AI 幫你畫一張圖（最簡單，最快）

⏱ 耗時：2-3 分鐘 🛠 工具：Gemini 3.1 Pro（谷歌出品，免費可用）

一句話原理

讓你用的 AI（比如 Gemini）先寫出「畫圖描述詞」，再把這個描述詞餵給 AI 的畫圖功能，AI 就幫你把圖畫出來了。

步驟

第 1 步：讓 AI 幫你寫「畫圖描述詞」

開啟 Gemini，輸入下面這段話（直接複製，替換你的內容就行）：

請幫我寫一段用於生成技術架構圖的提示詞（prompt），
我要畫的是一個 [你的系統名稱，比如：電子商務網站] 的架構圖，
包含以下模組：使用者端、商品管理、訂單系統、支付系統、後臺管理。
模組之間的資料流向是：使用者下單 → 訂單系統呼叫支付 → 支付完成通知商品管理扣庫存。
請用英文給出適合文生圖模型的詳細提示詞，風格要專業、清晰、好看。

AI 會還你一段英文描述詞。

第 2 步：把提示詞餵給 AI 畫圖

在 Gemini（或其他支援畫圖的 AI）裡，選擇畫圖功能，然後把上一步得到的描述詞貼上，點生成。

第 3 步：完成 🎉

AI 會輸出一張圖片。不滿意就重新生成一次，直到滿意為止。

📌 新手避坑提示

提示詞一定要詳細——你給 AI 的資訊越具體，出圖越準
多試幾次——第一次出的圖如果不滿意很正常
英文提示詞效果更好——大部分畫圖模型對英文理解更好

方案二：讓 AI 先生成程式碼，再用程式碼渲染成圖（推薦新手嘗試）

⏱ 耗時：3-5 分鐘 🛠 工具：任意 AI（ChatGPT、Claude、Gemini 都行）+ Mermaid.js

一句話原理

流程圖的本質是一段程式碼（Mermaid.js 語法）。你讓 AI 幫你寫出這段程式碼，然後透過一個免費線上網站把程式碼渲染成圖片。想改圖？讓 AI 改程式碼，重新渲染就行。

📌 新手避坑提示

Mermaid 語法有固定格式——讓 AI 生成時明確說「用 Mermaid 語法」
mermaid.live 是神器——貼上即預覽，完全免費，不用註冊帳號
匯出選 SVG 更好——SVG 是向量圖，放到多大都不模糊
程式碼儲存好——以後修改時直接把舊程式碼發給 AI

方案三：讓 AI 生成可編輯的架構圖（適合做正式文件）

⏱ 耗時：10-15 分鐘（第一次設定稍久） 🛠 需要：一個 AI 程式設計工具 + Obsidian + 一個「畫圖指令包」

一句話原理

這是最專業的方法，但第一次需要花點時間設定。裝好之後，你告訴 AI 想畫什麼，AI 直接生成一個可以拖拽修改的架構圖檔案，你用 Obsidian 開啟，哪裡不滿意就手動調一下。方案一方案二出的圖是「死圖」，這個方案出的圖是「活的」。

🤔 先搞懂：什麼是「畫圖指令包」（Skills）？

Skills 就是一套寫好的「說明書」，告訴 AI 怎麼幫你畫圖。

這個指令包叫 axton-obsidian-visual-skills，是一個叫 Axton 的人做的免費開源專案。它含 3 種畫圖能力：

畫圖方式	產生的檔案	適合畫什麼	畫面風格
Excalidraw 畫圖	`.excalidraw` 檔案	流程圖、心智圖、架構圖	✏️ 手繪風格
Mermaid 畫圖	一段文字規則	流程圖、時序圖、對比圖	🎯 商務專業風格
Canvas 畫布	`.canvas` 檔案	心智圖、知識整理	🎨 彩色卡片

🔧 前置安裝（只需一次）

C:\Users\你的使用者名稱\.claude\skills\

安裝方式一：讓 AI 幫你裝（推薦，最簡單）

不管你用 OpenCode、Claude Code 還是 Cursor，直接對它說：

1
2
3

幫我從 GitHub 下載 axtonliu/axton-obsidian-visual-skills，
解壓縮後把 excalidraw-diagram、mermaid-visualizer、obsidian-canvas-creator
這三個資料夾放到 C:\Users\你的電腦使用者名稱\.claude\skills\ 目錄下。

安裝方式二：自己手動下載

開啟下載頁面
點綠色的 Code 按鈕 → Download ZIP
把 3 個資料夾拖進 C:\Users\你的使用者名稱\.claude\skills\

還需要裝這些：

軟體	用途	費用
OpenCode / Claude Code / Cursor	用來執行 AI 生成畫圖檔案	各有免費方案
Obsidian	用來檢視和手動調整架構圖	免費
Obsidian Excalidraw 外掛程式	在 Obsidian 裡編輯 Excalidraw 檔案	免費

🖐️ 步驟

第 1 步：裝好 Skills，告訴 AI 你想畫什麼

Excalidraw 手繪風格架構圖：

用 Excalidraw 幫我畫一個電子商務系統的架構圖，包含：
使用者端、商品管理、訂單系統、支付系統、後臺管理。
使用者下單 → 訂單系統呼叫支付 → 支付完成扣庫存。
用中文標註。

Mermaid 商務風格流程圖：

1
2

把這個流程轉成 Mermaid 圖表：
使用者訪問首頁 → 瀏覽商品 → 加入購物車 → 提交訂單 → 線上支付 → 完成交易

Canvas 心智圖：

1
2

把這篇文章整理成 Obsidian Canvas 心智圖：
[貼上你的內容]

第 2 步：在 Obsidian 中手動調整

開啟 Obsidian，把上一步產生的檔案拖進去
如果是 Excalidraw 檔案，雙擊就能進入編輯模式
你可以隨意拖拽方框、調整箭頭、修改文字、換顏色

第 3 步（可選）：用 AI 換風格

`1`	`幫我把圖1轉換成類似圖2的手繪風格，並加入適量的圖畫幫助使用者理解`

⚠️ 常見問題與解決

Q：中文字體沒有手寫效果怎麼辦？ A：Excalidraw 的手寫字體（Excalifont）預設只支援英文，中文字體需要連線載入。

Q：生成出來的圖有點亂怎麼辦？ A：這很正常，因為 AI 生成的排版不一定完美。手動在 Obsidian 裡拖拽調整一下就行。

Q：一定要用 Claude Code 嗎？ A：不一定。這套 Skills 在 OpenCode、Claude Code、Cursor 上都能用。

📌 新手避坑提示

建議先用方案一和方案二，熟悉了再嘗試方案三
Skills 安裝是關鍵一步——裝好了 AI 才知道怎麼生成可編輯的檔案
Excalidraw 預設是手繪風格
方案三最大的價值是可修改——一次設定好，後續改圖只需要拖拽幾步

🔧 經常用到的工具彙總

工具	用途	費用	難度
Gemini	對話 + 文生圖	免費	低
ChatGPT	對話 + 文生圖	付費/免費版	低
OpenCode	AI 程式設計工具	免費	中
Claude Code	AI 程式設計工具	API 用量付費	中
Cursor	AI 程式設計工具	免費版夠用	中
mermaid.live	Mermaid 程式碼轉圖片	免費	低
Excalidraw	可編輯架構圖工具	免費開源	低
Obsidian	筆記軟體 + Excalidraw 外掛程式	免費	中
axton-obsidian-visual-skills	AI 畫圖指令包	免費開源	中

🎯 新手快速入門路線圖

第1天 → 試方案一：用 Gemini 直接生圖（體驗一下）
         ↓
第2天 → 試方案二：用 Mermaid.js 生成流程圖
         ↓
第3天 → 把方案二的圖用在你的文件裡
         ↓
需要了 → 再研究方案三

💬 常見問題（新手 FAQ）

Q：這些工具都是免費的嗎？ A：Gemini 和 mermaid.live 完全免費。ChatGPT 和 Claude 有免費額度。

Q：生成出來的圖片能商用嗎？ A：可以，架構圖是你自己的設計，AI 只是幫你畫出來。

Q：我是產品經理/營運，不是程式設計師，也能畫嗎？ A：完全沒問題。方案一隻需要打字，方案二隻要會複製貼上。

Q：Mac 和 Windows 都能用嗎？ A：文中所有工具都有網頁版，作業系統不影響。

📝 最後的話：畫架構圖最重要的是理清你想表達什麼，AI 只是幫你把想法變成圖片。先從最簡單的方案一開始動手，邁出第一步最重要！

模型	特點
GLM-4.7	程式設計能力強，零配置
MiniMax-2.1	程式設計能力出色，回應快

步驟	內容	一句話總結
第一步	安裝 Node.js	裝好「執行引擎」，讓電腦能跑 JavaScript 程式
第二步	安裝 Claude Code	裝好「AI 助手」，並跳過登入
第三步	安裝 CC-Switch	裝好「換腦器」，用來切換 AI 模型
第四步	獲取 DeepSeek API Key	拿到「鑰匙」，用來呼叫 DeepSeek 的 AI 服務
第五步	配置 CC-Switch	用「換腦器」+「鑰匙」，把 Claude Code 的大腦換成 DeepSeek
第六步	開始使用	在任何資料夾中輸入 `claude` 啟動 AI 助手！

AI工具 on Yanmu

Web Design Skill 實操手冊（詳細版）

Web Design Skill 實操手冊（詳細版）

在開始之前：理解我們要做什麼

整體流程概覽

為什麼先「裸跑」再用 Skill？

你需要的工具清單

確認 Agent 已就緒

如果你用 Claude Code

如果你用 OpenCode

創建項目目錄

創建工作文件夾

初始化 Git 倉庫

創建初始文件

啟動本地預覽服務器

下載 web-design-skill

克隆倉庫

裸跑體驗 — 見識 AI 的「原生審美」

啟動 Agent（不加載 Skill）

輸入設計需求

等待 AI 生成

查看結果

保存裸跑版本

安裝 Skill 到 Agent 中

Claude Code — 兩種安裝方式

方式 A：寫入 CLAUDE.md（推薦，永久生效）

方式 B：在對話中引用（臨時生效）

OpenCode — 安裝方式

方式 A：寫入 AGENTS.md（推薦）

驗證 Skill 是否生效

Skill 加持 — 打磨高級感

啟動新的對話

輸入設計需求

階段 A：AI 提問

階段 B：AI 說明設計系統

階段 C：AI 輸出 V0（粗糙初版）

階段 D：迭代打磨

階段 E：最終驗證

保存 Skill 版本

對比兩個版本

錄製成視頻（可選）

建議錄製的鏡頭

附錄 A：常用提示詞速查

讓 AI 先說設計系統

要求快速 V0

觸發全面驗證

最後總結

Web Design Skill 學習筆記

Web Design Skill 學習筆記

Claude Design 是什麼？

與傳統設計工具的區別

核心提示詞拆解（6 大要點）

角色定位 —— 動態身份切換

工作流 —— 六步流程

細節一：提問的藝術（什麼時候該問？什麼時候直接幹？）

細節二：總結原則

去除 AI 味（最有價值的部分）

色彩系統 —— OKLCH 色彩空間

內容原則 —— “用 1000 個 NO 換一個 YES”

驗證機制 —— 子 Agent 檢查

Skill 文件的核心優化

先說設計系統再寫代碼

儘早輸出最小可用版本

額外補充

效果對比演示

太空探索博物館線上展覽頁

獨立攝影師個人作品集（極簡提示詞）

最終結論

核心知識點速查

相關資源

OpenCode + Obsidian：打造你的AI驅動知識管理工作流

📋 目錄

一、什麼是 opencode-obsidian 外掛？

二、環境準備

三、安裝 BRAT 外掛

步驟 1：開啟社群外掛市場

步驟 2：搜尋並安裝 BRAT

四、透過 BRAT 安裝 opencode-obsidian

步驟 1：開啟 BRAT 設定

步驟 2：添加 Beta 外掛