Skill 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 全深度指南：開源版 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 標記的即可免費使用）`

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

接入頂級模型

方式一：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 安裝指南

Skill 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 全深度指南：開源版 Claude Code 的安裝、配置與進階玩法

📋 目錄

一、什麼是 OpenCode？

與 Claude Code 對比

核心定位

二、四種安裝形態

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

2. 桌面客戶端（Beta）

3. VS Code 外掛版

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

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

`/compact` — 上下文壓縮