by Rain Chu 6 月 18, 2026 | AI , skills
現在越來越多工程師會使用 Claude Code、Cursor、Codex、Gemini CLI 或其他 AI coding agent 來協助寫程式。只要輸入一句「幫我做登入功能」、「幫我修這個 bug」，AI 就能快速產生程式碼，看起來效率很高。
但真正把 AI 放進日常開發流程後，很快就會遇到幾個問題：
需求還沒釐清，AI 就開始寫程式。
這些問題通常不是模型不夠聰明，而是工作流程不夠可靠。
Superpowers 要解決的，正是這件事。
Superpowers 是什麼？
Superpowers 是目前 Claude Code 社群裡很熱門的 Skills 框架之一，專門用來強化 AI 的開發流程。它不是單純讓 AI 「更會寫程式」，而是讓 AI 在寫程式之前、寫程式之中、寫完之後，都按照一套更有紀律的流程工作。
你可以把 Superpowers 想成一套給 AI coding agent 使用的「開發工作手冊」。
它會提醒或要求 AI 在不同階段使用對應的 Skill，例如：
需求不清楚時，先進行 brainstorming。
也就是說，Superpowers 的價值不只是「增加功能」，而是讓 AI 開發變成一個可檢查、可追蹤、可驗證的流程。
為什麼需要 Superpowers？
很多人使用 AI 寫程式的方式，其實還停留在「提需求，等結果」。
例如：
幫我新增一個學生作業上傳功能。
AI 可能很快就改了一堆檔案，新增 API、修改 UI、調整資料庫欄位，看起來很有效率。但問題是：
它真的理解需求嗎？
如果這些問題沒有被處理，AI 寫得越快，後續返工可能越多。
Superpowers 的核心理念是：
聰明是模型的事，可靠是流程的事。
模型可以幫你寫程式，但流程要讓它知道什麼時候該停下來、什麼時候該問問題、什麼時候該測試、什麼時候才算真的完成。
Superpowers 的核心流程
Superpowers 的開發流程可以簡化成四個階段：
1. Design：先設計，不急著寫
當你要做新功能時，不要一開始就叫 AI 寫程式。Superpowers 會鼓勵 AI 先透過 brainstorming 釐清需求。
這個階段的重點包括：
確認真正要解決的問題
這可以避免 AI 一開始就走錯方向。
2. Plan：把任務拆成可執行步驟
需求確認後，下一步不是直接寫 code，而是建立實作計畫。
常用 Skill：
/superpowers:writing-plans 這個 Skill 會把任務拆成一個個很清楚的小步驟，包括：
要修改哪個檔案
好的計畫不是寫給「很懂專案的人」看的，而是寫給「新開的 AI session 或 junior engineer」也能照著完成的人看的。
這一點非常重要。因為 AI 很容易在長對話中忘記上下文，或在不同 session 之間失去脈絡。明確的 plan 可以降低這個問題。
3. Test：先測試，再實作
Superpowers 很重視 test-driven-development，也就是 TDD。
它希望 AI 不要直接寫功能，而是：
先寫一個會失敗的測試
這種流程看起來比較慢，但對 AI 開發非常重要。
因為 AI 最大的風險之一是「看起來完成了，但其實沒有驗證」。
TDD 可以把完成標準變成具體的測試，而不是只靠 AI 自己說「已經完成」。
4. Quality：完成之前必須驗證
AI 很常說：
功能已完成。
但實際上可能沒有跑測試、沒有 build、沒有 lint，甚至沒有啟動專案確認。
Superpowers 的 verification-before-completion 就是為了解決這個問題。
它會要求 AI 在宣稱完成之前，先執行必要驗證，例如：
npm test
npm run build
npm run lint
npm run typecheck 如果是後端專案，也可以包含：
pytest
go test ./...
cargo test 如果是前端專案，則可能需要：
npm run test
npm run build
npm run dev 重點不是指令本身，而是「不能沒有驗證就說完成」。
Superpowers 常用 Skill 整理
Skill 用途 適合情境 brainstorming 釐清需求 新功能、新模組、新流程 writing-plans 撰寫實作計畫 需求明確後，準備拆任務 test-driven-development 測試驅動開發 新功能、重構、修 bug systematic-debugging 系統化除錯 測試失敗、bug 無法定位 verification-before-completion 完成前驗證 AI 說完成之前 requesting-code-review 請 AI 做程式碼審查 功能完成後 using-git-worktrees 隔離開發環境 多任務、多分支、避免互相污染 subagent-driven-development 透過子代理執行計畫 任務可拆分、需要分工 executing-plans 依照計畫執行 想照步驟穩定完成 finishing-a-development-branch 收尾開發分支 功能完成後準備合併
關鍵指令：find skills
安裝 Superpowers 後，最重要的第一個指令是：
這個指令可以讓 AI 掃描目前可用的 Skills，幫你知道現在有哪些能力可以使用。
建議你在每次進入新專案，或剛安裝 Superpowers 後，都先輸入：
接著可以再問：
請列出目前可用的 Superpowers skills，並說明每個 skill 適合在什麼情境使用。 或是：
請根據目前這個專案，建議我應該優先使用哪些 Superpowers skills。 這樣可以避免你裝了 Skills，卻不知道什麼時候該用。
Claude Code 常用安裝方式
官方 GitHub：https://github.com/obra/superpowers
下載與安裝可以從官方 GitHub 頁面開始：https://github.com/obra/superpowers
如果你使用 Claude Code，可以透過官方 plugin marketplace 安裝：
/plugin install superpowers@claude-plugins-official 也可以加入 Superpowers marketplace：
/plugin marketplace add obra/superpowers-marketplace
/plugin install superpowers@superpowers-marketplace 安裝完成後，建議先執行：
確認 Superpowers 是否正確載入。
建議的日常使用流程
如果你是第一次把 Superpowers 放進專案，可以先採用以下流程：
第一步：先找 Skills
請 AI 列出目前能使用的 Skills，並說明哪些適合目前專案。
第二步：新功能先 brainstorming
你可以這樣對 Claude Code 說：
我要新增一個學生作業上傳與 AI 批改功能，請使用 Superpowers 的 brainstorming 先幫我釐清需求，不要直接寫程式。 這樣可以避免 AI 直接動手，先把需求問清楚。
第三步：確認設計後寫計畫
/superpowers:writing-plans 或直接說：
請根據剛剛確認的設計，使用 writing-plans 幫我建立實作計畫。 第四步：依照計畫執行
如果任務較大，可以使用：
請使用 subagent-driven-development 依照這份 plan 執行。 如果任務比較小，也可以說：
請使用 executing-plans 逐步執行，完成每一步都回報。 第五步：完成前要求驗證
在你說完成之前，請使用 verification-before-completion，實際執行測試、build、lint，並回報結果。 這是整個流程中最重要的一步。
AI 說完成不代表真的完成。
Superpowers 適合哪些人？
Superpowers 特別適合以下情境：
長期維護的產品
如果你只是想快速做一個一次性 demo，Superpowers 可能會顯得比較重。因為它會要求你先釐清需求、寫計畫、寫測試、做驗證，流程比單純 vibe coding 更嚴謹。
但如果你的目標是打造可維護、可驗證、可交接的程式碼，Superpowers 的價值就很明顯。
Superpowers 的限制
Superpowers 不是萬靈丹。
它可以讓 AI 更有紀律，但仍然有幾個限制：
第一，它主要依靠 AI 遵守規則。
第二，它需要專案本身有良好的測試與建置指令。
第三，它會增加前期流程成本。
第四，開發者仍然要審查結果。
所以最好的使用方式不是完全放手，而是把 Superpowers 當成一套「AI 開發 SOP」。
一張圖理解 Superpowers 流程
這套流程的核心不是讓 AI 一次寫更多程式，而是讓 AI 每一步都可被確認、可被驗證、可被追蹤。
參考資源
官方 GitHub：https://github.com/obra/superpowers
by Rain Chu 6 月 18, 2026 | AI , skills
你可以把 find-skills 想成是 Agent 專用的「Skill App Store」。
當你未來想問：
「有沒有適合做 React 優化的 Skill？」
「有沒有可以幫我寫 changelog 的 Skill？」
「有沒有支援 PR Review、測試、自動化部署的 Skill？」
安裝 find-skills 之後，Agent 就可以根據你的需求，去搜尋相關 Skills，並提供安裝建議。
為什麼第一個要裝 find-skills？
一般人在剛開始使用 Agent Skills 時，最常遇到的問題不是「不會安裝」，而是「不知道有哪些 Skills 可以用」。
以前要找 Skills，可能要靠別人分享、GitHub 搜尋、社群文章，或自己慢慢翻各種資源庫。這種方式有幾個缺點：
很容易找不到真正適合的 Skill
搜尋過程會打斷目前工作流程
不知道哪些 Skill 比較可信
不知道該用什麼關鍵字搜尋
找到之後還要自己判斷怎麼安裝
find-skills 解決的就是這個問題。
它讓 Agent 可以根據目前任務，協助你搜尋、比較、推薦甚至安裝其他 Skills。換句話說，安裝它之後，你的 Agent 就不只是被動執行任務，而是能開始主動幫你擴充能力。
find-skills 是什麼？
find-skills 是 Vercel Labs Skills 專案中的一個官方 Skill。
官方頁面說明：https://github.com/vercel-labs/skills/blob/main/skills/find-skills/SKILL.md
它的主要功能是協助使用者從 open agent skills 生態系中發現與安裝 Skills。當你問 Agent「我要怎麼做某件事？」、「有沒有某種 Skill？」、「能不能幫我找某類工具？」時，find-skills 就可以派上用場。
它適合用在這些情境：
你想找某個特定用途的 Skill
你想知道某個任務是否已經有人做成 Skill
你想擴充 Agent 的能力
你想搜尋工具、範本或工作流程
你想讓 Agent 幫你推薦適合目前任務的 Skill
安裝 find-skills
建議直接使用 Vercel Labs 官方 Skills CLI 安裝。
npx skills add https://github.com/vercel-labs/skills --skill find-skills 這是我建議所有 Agent Skills 使用者第一個安裝的指令。
官方頁面：https://github.com/vercel-labs/skills/blob/main/skills/find-skills/SKILL.md
下載 / 安裝來源：https://github.com/vercel-labs/skills
SKILL.md 原始檔下載：https://raw.githubusercontent.com/vercel-labs/skills/main/skills/find-skills/SKILL.md
關鍵指令整理
安裝完成後，最常用的指令有以下幾個。
1. 搜尋 Skills
npx skills find "find skills" 也可以換成更具體的搜尋字，例如：
npx skills find "react performance"
npx skills find "seo meta"
npx skills find "pr review"
npx skills find "changelog"
npx skills find "wordpress" 搜尋關鍵字越具體，結果通常越準。
例如你要找 SEO 相關 Skills，不建議只搜尋：
可以改成：
npx skills find "seo meta"
npx skills find "seo tags"
npx skills find "wordpress seo" 這樣比較容易找到符合任務的 Skill。
2. 安裝 Skill
如果你已經知道要安裝哪個 Skill，可以使用：
例如：
npx skills add https://github.com/vercel-labs/skills --skill find-skills 3. 列出已安裝 Skills
這個指令可以查看目前已安裝的 Skills。
不過要注意，如果某些 Skills 不是透過 npx skills add 安裝的，可能不一定會被完整列出。
4. 檢查更新
這個指令可以檢查已安裝的 Skills 是否有更新。
5. 更新 Skills
這個指令會更新已安裝的 Skills。
建議不要盲目更新所有 Skills。更新前最好先確認來源是否可信、更新內容是否合理，尤其是在正式專案或公司環境中使用時，更應該謹慎。
使用 find-skills 的推薦流程
我會建議用這樣的流程：
Step 1：先描述你的需求
不要只丟一個太籠統的詞。
例如不要只說：
可以改成：
npx skills find "ui design system"
npx skills find "accessibility review"
npx skills find "figma to react" Step 2：查看搜尋結果
搜尋結果出現後，不要只看名稱。
建議至少確認：
Skill 名稱
來源作者或組織
安裝數
GitHub repo
是否有文件
是否近期仍有人維護
是否符合你的實際任務
Step 3：優先選可信來源
如果是正式專案使用，我會優先選擇這幾類來源：
官方組織
大型開源專案
GitHub 星數較高的專案
安裝數較多的 Skill
有清楚文件與範例的 Skill
不要只因為搜尋結果排在前面就直接安裝。
Step 4：安裝後再測試
安裝完成後，建議先用小任務測試。
例如你安裝了 SEO 相關 Skill，可以先讓 Agent 幫你產生一篇文章的：
SEO 標題
Meta description
WordPress 標籤
文章摘要
內部連結建議
確認結果符合預期後，再放進正式工作流程。
find-skills 適合哪些人？
我認為 find-skills 特別適合這幾種使用者。
1. 剛開始使用 Agent Skills 的人
你不需要一開始就知道所有 Skills。先裝 find-skills，讓 Agent 幫你找。
2. 經常做不同任務的開發者
如果你平常會做：
React
Next.js
WordPress
Docker
GitHub Actions
測試
部署
文件產生
Code Review
那 find-skills 很適合當成你的 Skill 搜尋入口。
3. 想打造個人 Agent 工作流的人
如果你希望 Agent 不只是聊天，而是變成真正的工作助理，Skills 會是很重要的擴充方式。
find-skills 則是幫你管理這個擴充入口的第一個工具。
4. 想建立團隊標準工具集的人
公司或團隊也可以先用 find-skills 找出常用 Skills，再建立自己的標準清單。
例如：
前端開發 Skills
測試 Skills
文件 Skills
DevOps Skills
SEO Skills
WordPress Skills
安全檢查 Skills
這樣可以讓團隊的 Agent 能力更一致。
使用 find-skills 的注意事項
find-skills 很方便，但不是所有搜尋結果都應該直接安裝。
使用時建議注意以下幾點。
1. 不要盲目相信搜尋結果
搜尋到 Skill，只代表它可能相關，不代表它一定適合你的任務。
正式使用前，仍然要確認來源、文件與內容。
2. 安裝前先看來源
尤其是來自不熟悉作者的 Skill，要更謹慎。
如果 Skill 會執行命令、讀寫檔案、存取專案內容，就更應該先檢查內容。
3. 搜尋關鍵字要具體
find-skills 的搜尋品質，很大程度取決於你的關鍵字。
比起搜尋：
更建議搜尋：
npx skills find "wordpress seo meta" 比起搜尋：
更建議搜尋：
npx skills find "playwright e2e test" 4. 更新 Skills 要小心
npx skills update 雖然方便，但在正式專案中不要隨便全部更新。
建議先檢查：
確認更新內容後，再決定是否更新。
我的建議：find-skills 是 Agent Skills 的第一個必裝工具
如果你只打算先安裝一個 Skill，我會選 find-skills。
因為它能讓 Agent 具備「找工具」的能力。
這跟一般單一功能 Skill 不一樣。一般 Skill 是讓 Agent 多一項能力，而 find-skills 是讓 Agent 開始知道「還有哪些能力可以被安裝」。
這也是為什麼我會把它稱為 Agent 的 Skill App Store。
先安裝它，之後要找 SEO、WordPress、React、測試、部署、文件、設計、Code Review 等 Skills，都會更有效率。
by Rain Chu 6 月 18, 2026 | AI , skills
skill-creator 是 Anthropic 官方 skills 專案中的一個 Skill 開發助手，可以協助使用者建立 Claude Code 可使用的自訂 Skill，透過 Skill，你可以把固定工作流程、專業知識、工具使用方式、文件格式與腳本包裝成可重複使用的能力，讓 Claude 在特定任務上更穩定、更一致，也更符合你的實際工作需求。
什麼是 Skill？
在 Claude Code 的使用情境中，Skill 可以理解成「給 AI 使用的操作說明書」。
它不是單純的一段 prompt，而是一個可重複使用的能力包。通常一個 Skill 會包含：
skill-name/
├── SKILL.md # 核心說明文件，必要
├── scripts/ # 可執行腳本，選用
├── references/ # 參考文件或知識資料，選用
├── assets/ # 圖片、範本、範例檔案等資源，選用 其中最重要的是 SKILL.md。
這個 Skill 是做什麼的
什麼情境下應該使用
要遵守哪些流程
輸出格式是什麼
是否需要使用特定工具、腳本或範本
簡單來說，Skill 的目標是讓 Claude 不只是「聽懂一次指令」，而是能長期穩定地執行某一類工作。
skill-creator 是什麼？
skill-creator 是 Anthropic 官方提供的 Skill 建立助手，收錄在官方 skills 專案中。
它的作用是協助你從零開始建立一個 Skill，包含：
釐清 Skill 的用途
設計觸發情境
撰寫 SKILL.md
建立參考文件
設計測試案例
評估 Skill 使用前後的效果
最後打包成 .skill 檔案
如果你只是手動寫 SKILL.md，很容易漏掉使用情境、輸出格式、邊界條件或測試流程。skill-creator 的價值就在於，它會像一個 Skill 顧問一樣，逐步問你問題，幫你把需求整理成可以實際使用的 Skill。
官方網頁與下載連結
官方 GitHub 專案：https://github.com/anthropics/skills/tree/main
skill-creator 官方目錄：https://github.com/anthropics/skills/tree/main/skills/skill-creator
下載 Anthropic skills 專案 ZIP：https://github.com/anthropics/skills/archive/refs/heads/main.zip
安裝 skill-creator
如果你已經在使用 Claude Code，可以透過以下方式安裝 skill-creator。
方法一：使用 npx skills add
npx skills add https://github.com/anthropics/skills --skill skill-creator 方法二：使用 claude install
claude install anthropics/skills/skill-creator 安裝完成後，就可以在 Claude Code 中呼叫：
接著 Claude 會開始引導你建立 Skill。
用 skill-creator 建立 Skill 的基本流程
使用 skill-creator 建立 Skill，通常可以分成以下幾個階段。
1. 說明你想建立的 Skill
一開始，你可以用自然語言描述需求，例如：
我想建立一個 Skill，用來把會議逐字稿整理成結構化會議紀要。 或是：
我想建立一個 Skill，用來分析 WordPress 網站錯誤訊息，並提供排查步驟。 這時候不需要一次寫得非常完整，因為 skill-creator 會繼續追問細節。
2. 回答 skill-creator 的需求問題
skill-creator 通常會確認幾個重點：
這個 Skill 主要要完成什麼任務？
使用者在什麼情境下會觸發它？
輸入資料可能是文字、檔案、程式碼還是圖片？
輸出格式要用 Markdown、表格、JSON、Word 文件，還是其他格式？
是否有固定流程、固定語氣或固定檢查清單？
是否需要使用特定工具、腳本或外部文件？
這一步非常重要。
3. 自動產生 SKILL.md 草稿
確認需求後，skill-creator 會協助產生 SKILL.md。
一個基本的 SKILL.md 會長得像這樣：
---
name: meeting-minutes
description: Convert meeting transcripts into structured meeting minutes with decisions and action items.
---
# Meeting Minutes Skill
Use this skill when the user provides a meeting transcript and wants a structured meeting summary.
## Output Format
Include the following sections:
1. Meeting topic
2. Date and time
3. Participants
4. Key discussion points
5. Decisions
6. Action items with owner and deadline
## Guidelines
- Keep the summary concise.
- Preserve important decisions.
- Do not invent missing attendees or dates.
- If information is missing, mark it as "未提供". 這份 SKILL.md 就是 Claude 之後使用 Skill 時會讀取的核心說明。
4. 加入參考資料與範本
如果你的 Skill 需要固定格式，可以把範本放進 references/ 或 assets/。
例如：
meeting-minutes/
├── SKILL.md
├── references/
│ └── meeting-template.md
├── assets/
│ └── company-style-guide.pdf 常見的參考資料包括：
公司品牌規範
文件格式範本
常用表格
API 使用說明
程式碼規範
工作流程 SOP
檢查清單
這樣 Claude 在執行任務時，不只會依照 prompt 回答，也會參考 Skill 內部的固定資料。
5. 設計測試案例
建立 Skill 後，最好不要馬上投入正式工作，而是先做測試。
你可以準備幾組測試資料，例如：
測試一：正常格式的會議逐字稿
測試二：缺少參與人資訊的會議紀錄
測試三：內容很長、決議很多的會議
測試四：只有零散重點，沒有完整逐字稿 測試的目的不是只看 Claude 有沒有回答，而是要比較：
有使用 Skill 時，結果是否更穩定？
輸出格式是否一致？
是否遵守你指定的規則？
是否能處理邊界情況？
是否有少編造、少漏項？
6. 根據測試結果修改 Skill
第一次產生的 Skill 通常不會完美。
常見需要調整的地方包括：
描述太模糊，導致 Claude 不知道何時使用
輸出格式不夠明確
邊界條件沒有寫清楚
範例太少
沒有說明錯誤情況要怎麼處理
沒有限制 Claude 不要自行補資料
建議你把 Skill 當成一份「可持續最佳化的 SOP」。SKILL.md。
7. 打包成 .skill 檔案
當 Skill 測試穩定後，就可以打包成 .skill 檔案，方便匯入、分享或部署。
打包後的 Skill 就像一個可攜式能力包，可以用在支援 Skill 的 Claude 環境中。
skill-creator 適合用在哪些情境？
skill-creator 很適合用來建立以下類型的 Skill：
文件處理類
例如：
會議紀要整理
合約摘要
報告格式化
WordPress 部落格文章產生
SEO 文章檢查
論文格式整理
開發工作類
例如：
Code Review
安全檢查
API 文件產生
Git commit message 規範
Docker 部署檢查
WordPress 錯誤排查
企業流程類
例如：
客服回覆 SOP
品牌語氣檢查
行銷企劃產生
業務提案格式
專案週報整理
個人自動化類
例如：
每週工作回顧
讀書筆記整理
投資研究筆記格式化
學習計畫產生
旅遊規劃模板
建立 Skill 時的實用建議
1. description 要寫清楚
description 不只是說明文字，它會影響 Claude 判斷什麼時候該使用這個 Skill。
不建議這樣寫：
建議改成：
description: Use this skill when the user provides meeting transcripts and wants structured meeting minutes with decisions, discussion points, and action items. 越清楚，Claude 越容易正確觸發。
2. 輸出格式要固定
如果你想要表格，就直接指定表格欄位。
例如：
## Output Format
Return the result in Markdown with the following sections:
# 會議紀要
## 一、會議基本資訊
## 二、討論重點
## 三、決議事項
## 四、待辦事項 3. 明確說明不要編造資料
這一點很重要，尤其是處理會議、合約、財務、法律或客戶資料時。
可以在 Skill 中加入：
## Accuracy Rules
- Do not invent missing information.
- If a field is not provided, write "未提供".
- Preserve names, dates, numbers, and deadlines exactly as given. 4. 加入好範例與壞範例
Skill 裡面可以放 Examples，讓 Claude 更容易理解你要的品質。
例如：
## Examples
Good:
- Clear action item with owner and deadline.
- Concise summary without unnecessary commentary.
Bad:
- Inventing a deadline that was not mentioned.
- Mixing discussion points with final decisions. 常用指令整理
安裝 skill-creator
npx skills add https://github.com/anthropics/skills --skill skill-creator 使用 claude install 安裝
claude install anthropics/skills/skill-creator 呼叫 skill-creator
從官方 GitHub 下載 skills 專案
git clone https://github.com/anthropics/skills.git 或直接下載 ZIP：
https://github.com/anthropics/skills/archive/refs/heads/main.zip 做好 Skill 後，如何移植到其他系統？
建立好 Skill 之後，不一定只能放在 Claude Code 裡使用。
不過要注意一件事：Skill 的核心不是某一個平台的格式，而是裡面的工作流程、判斷規則、輸出格式、參考資料與可執行腳本。
也就是說，真正有價值的是這些內容：
SKILL.md
references/
scripts/
assets/
examples/
只要把這些內容轉成目標 Agent 系統可以讀懂的格式，就可以完成移植。
Skill 移植的核心概念
一個 Skill 通常可以拆成五個部分：
1. 任務說明：這個 Skill 是做什麼的
2. 觸發條件：什麼情況下應該使用
3. 操作流程：執行任務時要照什麼步驟
4. 輸出格式：最後要產生什麼格式
5. 工具資源：是否需要腳本、範本、參考文件或 API
不同 Agent 系統的格式可能不同，但這五個部分通常都可以保留下來。
因此，移植 Skill 的重點不是「直接複製檔案」，而是把原本的 SKILL.md 改寫成目標系統的規則檔、角色設定、工具說明或 system prompt。
建議的 Skill 通用資料夾結構
為了方便未來移植，建議你在建立 Skill 時，就使用比較通用的結構：
my-skill/
├── SKILL.md
├── README.md
├── references/
│ └── knowledge-base.md
├── examples/
│ ├── input-1.md
│ └── output-1.md
├── scripts/
│ └── helper.py
├── assets/
│ └── template.md
└── manifest.json
其中：
SKILL.md：給 Claude 或支援 Skill 的 Agent 使用README.md：給人類維護者閱讀references/：放背景知識、規則、範本examples/：放輸入與輸出範例scripts/：放可執行工具assets/：放模板、圖片、表格等資源manifest.json：給其他 Agent 系統讀取的設定檔
如果你未來要移植到 Hermes Agent 或 Codex，這種結構會比較容易轉換。
範例：建立一個通用 manifest.json
可以在 Skill 裡面額外放一個 manifest.json，用來描述這個 Skill 的基本資訊。
{
"name": "wordpress-seo-writer",
"version": "1.0.0",
"description": "Generate Traditional Chinese WordPress blog posts with SEO title, tags, meta description, and structured article format.",
"language": "zh-TW",
"entry": "SKILL.md",
"references": [
"references/seo-guidelines.md"
],
"examples": [
"examples/input-1.md",
"examples/output-1.md"
],
"tools": [
{
"name": "keyword_checker",
"type": "script",
"path": "scripts/keyword_checker.py"
}
]
}
這個檔案不一定是 Claude Code 必要的，但它很適合給自建 Agent 系統使用。manifest.json，知道這個 Skill 的名稱、用途、入口檔案、參考資料與可用工具。
移植到 Hermes Agent
如果你使用的是自建的 Hermes Agent，建議把 Skill 當成一個「Agent 能力模組」來管理。
可以設計成以下結構：
hermes-agent/
├── agents/
│ └── writer-agent/
│ ├── system.md
│ ├── tools.json
│ └── skills/
│ └── wordpress-seo-writer/
│ ├── SKILL.md
│ ├── manifest.json
│ ├── references/
│ ├── examples/
│ └── scripts/
Hermes Agent 在執行任務時，可以做三件事：
1. 根據使用者輸入，判斷是否需要啟用某個 Skill
2. 讀取該 Skill 的 SKILL.md 與 references/
3. 將 Skill 內容合併進 Agent 的 system prompt 或 task prompt
例如使用者輸入：
請幫我寫一篇 WordPress SEO 文章，主題是 skill-creator。
Hermes Agent 可以比對 Skill 的 description，找到 wordpress-seo-writer，然後載入：
skills/wordpress-seo-writer/SKILL.md
skills/wordpress-seo-writer/references/seo-guidelines.md
skills/wordpress-seo-writer/examples/output-1.md
接著再讓模型依照這些規則產生文章。
Hermes Agent 的 Skill 載入邏輯範例
如果是自己開發 Hermes Agent，可以用簡單的流程實作：
User Request
↓
Intent Router
↓
Skill Matcher
↓
Load SKILL.md
↓
Load references / examples / scripts
↓
Compose Agent Prompt
↓
Run Model
↓
Return Result
也可以設計一個簡單的 Skill Registry：
{
"skills": [
{
"name": "wordpress-seo-writer",
"description": "Write Traditional Chinese WordPress SEO articles.",
"path": "./skills/wordpress-seo-writer",
"trigger_keywords": [
"WordPress",
"SEO文章",
"部落格文章",
"中繼描述",
"標籤"
]
},
{
"name": "code-review-security",
"description": "Review code for security, maintainability, and deployment risks.",
"path": "./skills/code-review-security",
"trigger_keywords": [
"code review",
"安全檢查",
"漏洞",
"重構"
]
}
]
}
這樣 Hermes Agent 就可以根據關鍵字、語意比對或任務分類，自動決定要不要載入某個 Skill。
移植到 Codex
如果要移植到 Codex，建議分成兩層處理：
1. 專案層級規則：放進 AGENTS.md
2. 任務型 Skill：保留成獨立 Skill 資料夾
Codex 會讀取專案中的 AGENTS.md，因此可以把與專案相關的固定規則放在這裡，例如：
# AGENTS.md
## Project Rules
- Use Traditional Chinese when writing user-facing documentation.
- Do not modify database schema unless explicitly requested.
- Before changing code, inspect the existing architecture.
- Prefer small, reviewable changes.
- When writing WordPress articles, use the wordpress-seo-writer skill.
而真正的 Skill 內容則可以保留在專案目錄中：
project/
├── AGENTS.md
├── skills/
│ └── wordpress-seo-writer/
│ ├── SKILL.md
│ ├── references/
│ ├── examples/
│ └── scripts/
這樣做的好處是：
AGENTS.md 負責專案整體規則SKILL.md 負責特定任務流程references/ 保存知識與格式scripts/ 保存可重複使用的工具
Codex 使用 Skill 的建議方式
如果 Skill 是用來處理開發工作，例如 Code Review、安全檢查、部署檢查，建議把 Skill 寫得更像工程 SOP。
例如：
# Code Review Security Skill
Use this skill when reviewing code changes for security, maintainability, and deployment risks.
## Review Checklist
1. Authentication and authorization
2. Input validation
3. SQL injection risk
4. Secrets and environment variables
5. File upload handling
6. Error handling
7. Logging and privacy
8. Deployment risk
## Output Format
Return the review in this format:
# Code Review Report
## Summary
## Critical Issues
## Medium Issues
## Low Risk Suggestions
## Recommended Patch
## Test Plan
然後在 AGENTS.md 裡加入：
## Skills
When the task involves security review, load:
skills/code-review-security/SKILL.md
這樣 Codex 在處理程式碼任務時，就可以依照固定流程執行，而不是每次都靠臨時 prompt。
Claude Skill、Hermes Agent、Codex 的對應關係
Skill 內容 Claude Code Hermes Agent Codex 任務說明 SKILL.md description manifest.json description AGENTS.md 或 Skill description 操作流程 SKILL.md system prompt / task prompt AGENTS.md / Skill 參考資料 references/ knowledge base / RAG project docs / references/ 腳本工具 scripts/ tools / function calling scripts / shell tools 輸出格式 SKILL.md response schema AGENTS.md / task instruction 測試案例 examples/ evaluation set test prompts / eval cases
移植時最容易出問題的地方
1. Skill 觸發條件不清楚
如果 description 寫得太模糊，Agent 不知道什麼時候該使用。
不建議：
建議：
當使用者要求撰寫 WordPress SEO 部落格文章，且需要標題、標籤、中繼描述與繁體中文內容時，使用此 Skill。
2. 原本依賴 Claude 的功能，其他系統沒有
有些 Skill 可能假設 Claude Code 可以讀檔、執行 script 或打包 .skill。
讀取本地檔案
執行 shell 指令
呼叫 Python 腳本
使用 MCP server
使用 function calling
存取 Git repo
存取外部 API
如果不支援，就要改成純文字流程，或另外做工具橋接。
3. references 太大，模型上下文放不下
如果參考文件很多，不建議一次全部塞進 prompt。
1. 先用 Skill description 判斷要不要使用
2. 再根據任務讀取必要 references
3. 只載入與當前任務相關的段落
這樣可以避免上下文太長，也能提升回答品質。
4. 腳本路徑與執行環境不同
例如你在 Claude Code 裡用的是：
但移植到 Hermes Agent 的 Docker 環境後，可能要改成：
python /app/skills/wordpress-seo-writer/scripts/check.py
因此建議在 manifest.json 中明確寫出腳本路徑、執行方式與依賴套件。
建議：把 Skill 設計成可攜式能力包
如果你一開始就希望 Skill 可以移植到 Claude Code、Hermes Agent、Codex 或其他 Agent 系統，建議遵守以下原則：
1. SKILL.md 不要寫死特定平台專用語法
2. 把平台相關設定放到 adapters/ 目錄
3. 把核心流程寫在 core.md
4. 把範例輸入輸出放到 examples/
5. 把工具設定放到 manifest.json
可以設計成：
portable-skill/
├── core.md
├── SKILL.md
├── manifest.json
├── adapters/
│ ├── claude-code.md
│ ├── hermes-agent.md
│ └── codex-agents.md
├── references/
├── examples/
└── scripts/
其中：
core.md：保存跨平台共用的核心流程SKILL.md：給 Claude Code 使用manifest.json：給自建 Agent 系統使用adapters/claude-code.md：Claude Code 專用說明adapters/hermes-agent.md：Hermes Agent 專用說明adapters/codex-agents.md：Codex 專用說明
這樣同一個 Skill 就不會被綁死在單一平台上。
移植檢查清單
在把 Skill 移到其他 Agent 系統前，可以用這份清單檢查：
□ Skill 的用途是否明確？
□ description 是否能讓 Agent 判斷何時使用？
□ 輸入格式是否定義清楚？
□ 輸出格式是否固定？
□ 是否有 examples？
□ 是否有 references？
□ references 是否可以被目標系統讀取？
□ scripts 是否能在目標環境執行？
□ 是否需要 API key 或環境變數？
□ 是否有測試案例？
□ 是否有平台專用 adapter？
□ 是否避免把敏感資訊寫進 Skill？
Skill 應該被設計成 Agent 的可攜式 SOP
skill-creator 產生的 Skill，最好不要只當成 Claude Code 的專用檔案。
Claude Code 可以使用 SKILL.md。manifest.json、references/ 與自訂 router。AGENTS.md、專案規則與 Skill 資料夾來載入任務流程。
只要核心流程設計清楚，Skill 就可以成為跨 Agent 系統共用的能力包，讓同一套工作方法在不同 AI 工具之間延續使用。
by Rain Chu 6 月 14, 2026 | Agent , AI , Hermes , OpenClaw , Prompt
當我們開始用 AI 寫網站、做 Landing Page、產生前端介面時，常常會遇到一個問題
畫面看起來很快就完成了，但總覺得「哪裡怪怪的」。
按鈕很像、卡片很多、漸層很浮誇、字級沒有層次、留白不夠精準，甚至每個 AI 產生的網站都像是同一套模板改出來的。這種「可以用，但不高級」的設計感，就是許多 AI 前端作品容易落入的平庸陷阱。
而 Impeccable 官方網站 想解決的，正是這個問題。
什麼是 Impeccable？
Impeccable 是一套專為 AI Coding Agent 設計的前端設計輔助工具，它不是單純幫你產生漂亮畫面的 AI 設計工具，而是提供一套「設計語彙」與「設計指令」，讓你可以更精準地指揮 AI 改善網站畫面。
簡單說，Impeccable 讓 AI 不只是會寫程式，也更懂設計。
它可以協助 AI 理解網站中的層級、對比、留白、色彩、字體、動畫、產品脈絡與品牌調性，讓 AI 產生的前端畫面不再只是堆滿卡片、套上漸層、加一點陰影，而是更接近真正設計師會思考的介面。
你可以把 Impeccable 想像成：
一套給 AI 前端工程師使用的設計總監指令集。
為什麼 AI 做出來的網站常常很平庸？
現在很多人會用 AI 幫忙做網站，例如請 Claude Code、Cursor、Codex CLI 或 Gemini CLI 產生頁面。AI 很擅長快速完成版型，但如果沒有足夠清楚的設計方向，它很容易產生幾種常見問題：
每個區塊都用卡片包起來，看起來很模板化
喜歡使用過度常見的紫色漸層、玻璃擬態、發光陰影
字體大小與層級不夠精準，主標、副標、內文沒有明確節奏
留白太平均，缺乏視覺重點
按鈕、表單、導覽列看起來功能正確，但沒有品牌感
Landing Page 和後台 Dashboard 使用同一種設計邏輯
作品看起來像 AI 產物，而不是成熟產品
Impeccable 的價值就在於，它不是只叫 AI「設計得漂亮一點」，而是提供更具體的設計方向，例如讓畫面更有層次、更安靜、更大膽、更精煉、更符合產品情境。
Impeccable 的核心特色
1. 提供 AI 可理解的設計語言
Impeccable 的官方介紹中提到，它補上了 AI Agent 缺少的設計語彙，這代表你可以用更接近設計師的方式指揮 AI，例如改善排版、調整顏色、強化視覺層次、降低過度設計、整理產品脈絡。
這對不熟設計術語的人很有幫助，因為你不需要長篇大論解釋「我要更高級、更有質感、更像品牌網站」，而是可以透過 Impeccable 的指令，把設計意圖轉成 AI 比較能執行的動作。
2. 支援多種 AI Coding 工具
Impeccable 可以搭配多種主流 AI Coding 工具使用，例如 Cursor、Claude Code、GitHub Copilot、Gemini CLI、Codex CLI 等。
這代表它不是只服務單一平台，而是比較像一套可以帶進不同開發流程的設計輔助層。對於已經習慣用 AI 寫前端的開發者來說，Impeccable 可以直接加入現有工作流程，不需要重新學一套完整設計軟體。
3. 透過指令改善網站設計
Impeccable 提供多個設計指令，讓你可以針對不同設計任務下達命令。例如：
/impeccable init
/impeccable shape
/impeccable critique
/impeccable audit
/impeccable polish
/impeccable bolder
/impeccable quieter
/impeccable distill
這些指令的好處是，你可以更像在跟設計師溝通，而不是一直對 AI 說：「再漂亮一點」、「再高級一點」、「不要這麼普通」。
4. 幫你減少 AI 生成網站的套路感
很多 AI 產生的網站會有明顯套路，例如紫色漸層、大量圓角卡片、發光邊框、過度一致的版面節奏。Impeccable 內建反套路的設計檢查，可以幫助你找出這些容易讓網站看起來廉價、模板化或過度 AI 感的元素。
這對品牌網站、形象頁、SaaS Landing Page、產品頁、作品集網站尤其重要。因為這些頁面的重點不只是功能完成，而是要讓使用者在第一眼感覺到專業、信任與差異化。
5. 保留你的設計系統，不是硬套新風格
Impeccable 的另一個優點是，它不是粗暴地把你的網站改成另一種風格，而是會盡量尊重既有的設計系統，例如顏色、字體、元件、間距、按鈕樣式與品牌規則。
這對已經有產品雛形或既有網站的人很重要。你不一定想要整個重做，而是希望 AI 幫你把現有介面整理得更成熟、更一致、更像一個真正的產品。
Impeccable 適合誰使用？
Impeccable 特別適合以下幾種人：
1. 用 AI 寫前端的開發者
如果你常用 Cursor、Claude Code、Codex CLI、GitHub Copilot 來產生 React、Next.js、Astro、Tailwind CSS 或其他前端頁面，Impeccable 可以幫你補上 AI 在設計判斷上的不足。
2. 想快速做出高質感 Landing Page 的創業者
很多創業者會用 AI 快速做 MVP，但 Landing Page 如果太普通，會影響使用者信任感，Impeccable 可以幫助你把「能用的頁面」推進到「比較有品牌感的頁面」。
3. 會寫程式但不擅長設計的人
你可能知道功能怎麼做，但不知道為什麼畫面不夠好看。Impeccable 可以用指令化的方式協助你檢查排版、層級、色彩與互動細節。
4. 想降低 AI 生成感的網站製作者
如果你的網站看起來太像 AI 產物，Impeccable 可以幫你找出常見的 AI 設計套路，讓畫面更有辨識度。
如何安裝 Impeccable？
你可以到 GitHub 下載與查看 Impeccable 專案：
Impeccable GitHub 下載頁
官方建議可以在專案根目錄執行：
npx impeccable skills install
接著在你的 AI Coding 工具中執行：
如果之後要更新，可以執行：
npx impeccable skills update
官方網站也提供更多說明與範例：
Impeccable 官方網站
使用 Impeccable 的工作流程建議
如果你正在做一個網站或前端產品，可以用以下流程開始：
第一步，先用 AI 產生基本頁面結構。
第二步，執行 /impeccable init。
第三步，用 /impeccable shape 先整理畫面架構。
第四步，用 /impeccable critique 檢查設計問題。
第五步，用 /impeccable polish 做上線前修飾。
第六步，必要時使用 /impeccable audit。
對 WordPress 網站製作者有什麼幫助？
雖然 Impeccable 本身比較偏向 AI Coding Agent 與前端開發流程，但對 WordPress 網站製作者也很有參考價值。
如果你使用 WordPress 搭配自訂佈景主題、區塊編輯器、Elementor、Bricks、Breakdance 或自製前端元件，你可以先在本機或開發環境中，用 AI 建立前端區塊，再透過 Impeccable 改善設計品質。
例如：
首頁 Hero 區塊不夠有記憶點
服務介紹區塊太像模板
價格表太普通
Call to Action 不夠明確
部落格列表頁缺乏層次
後台管理介面太陽春
品牌網站缺乏高級感
這些都可以透過 Impeccable 的設計指令進行調整，再整合回 WordPress 佈景主題或頁面模板中。
結論：Impeccable 讓 AI 網站設計從「能用」走向「有質感」
AI 讓網站製作變快，但速度不代表品質。真正影響使用者感受的，往往是那些細節：字體層級、留白、對比、色彩、互動節奏、品牌一致性，以及畫面是否有明確的設計意圖。
Impeccable 的重點不是取代設計師，而是讓 AI 更容易理解設計師的語言，也讓開發者可以用更精準的方式指揮 AI 做出不平庸的網站。
如果你正在用 AI 製作網站，卻覺得畫面總是差一點質感，那麼 Impeccable 很值得加入你的前端工作流程。
官方網站：https://impeccable.style/
GitHub 下載：https://github.com/pbakaus/impeccable
近期留言