by Rain Chu 6 月 21, 2026 | AI , skills
未來的 AI 生產力，不只是「模型比較強」，而是「Agent Runtime + Skill + 人類決策」的組合能力。
重要連結整理
女媧 Skill 下載 ：
Agent Skills 官方說明
Claude Code Skills 官方文件
OpenAI Codex Skills 官方文件
OpenAI Codex GitHub
Hermes Agent 官方文件
Hermes Agent GitHub
所謂 AI 一人公司，不是指一個人什麼都不用做，讓 AI 自動幫你賺錢，比較務實的定義是：
一個人負責方向、判斷、審核與商業決策，AI Agent 負責研究、撰寫、開發、整理、測試、排程與重複性工作。
換句話說，人類的角色從「執行者」變成「總編輯、產品經理、技術主管、老闆」。
這也是影片最重要的啟發：AI 不是單一工具，而是一組可以分工的虛擬團隊。
Claude Code、Codex、Hermes 分別適合做什麼？
這三個工具剛好代表目前 AI Agent 工作流的三種方向。
我的看法是：如果你要打造 AI 一人公司，不應該只問「哪一個模型最強」，而是要問：
哪一個 Agent 適合負責開發？
哪一個 Agent 適合負責長期記憶與排程？
哪一個 Agent 適合安裝專門 Skill？
哪一個任務一定要由人類做最後判斷？
🏢 一人 AI 公司的組織架構與核心成員
要組建高效的團隊，就必須讓不同的 AI 模型各司其職、發揮所長。在我們的架構中，主要由以下三位核心成員組成：
董事長（你，唯一的人類）： 負責定大方向、提供靈感、拍板決策、把控最終產品質量。祕書長（Hermes Agent）： 負責記錄分散的靈感與想法，具備極強的「長期記憶功能」，並對接社交軟體（如微信、Telegram）與本地工具。CEO 執行長（Claude Code）： 負責公司的統籌規劃、任務分配、邏輯思考與實際開發落地。代碼審查員（OpenAI Codex）： 專職「挑毛病」，負責對寫好的程式碼進行安全性評估與漏洞審查。
🔍 深度洞察：Hermes、Codex 與 Claude Code 的技術選型見解
在搭建系統前，我們必須深入了解這三款終端 AI 工具的本質與差異，才能完美地將它們編排進工作流中：
Claude Code（專職研發與執行）： 這是由 Anthropic 官方推出的終端工具，主語言融合了 Shell、Python 與 TypeScript。它在「編寫代碼」與「理解複雜上下文」上展現出極強的實力，是最完美的 「辦公與研發型執行代理」 。OpenAI Codex（專職軟體工程與審查）： 採用 Rust 編寫，本地運行極其輕量。Codex 近年已演化為完整的工程代理，在自動生成 PR 級修改、修復 Bug、閱讀 Repo 方面非常嚴謹。最關鍵的體感是：如果讓同一個模型自己寫代碼又自己審查，它往往看不出問題；但如果讓 Claude Code 負責開發、Codex 負責審查，Codex 就能精準揪出一堆漏洞！ Hermes Agent（長期記憶與通用協調）： 它是基於 Python 的中立 Agent 框架，遵循開放的 agentskills.io 標準。Hermes 最大的強項在於 「長期記憶、自我學習與渠道接入」 。它像一個會持續成長的系統，適合作為始終在線的指揮官。
女媧 Skill 是什麼？
女媧 Skill 是一個開源的 Agent Skill 專案，目標不是單純模仿名人的語氣，而是把一個人的公開資料整理成可執行的「思維 Skill」。
它的核心概念是：蒸餾一個人怎麼想，而不是只模仿一個人怎麼說話。
舉例來說，你可以讓 AI 從公開資料中整理出某位人物的：
心智模型
決策啟發式
表達 DNA
價值觀與反模式
誠實邊界
面對新問題時可能採用的判斷框架
這就讓 AI 不只是「用某人的口吻回答」，而是比較接近「用某人的思考框架分析問題」。
女媧 Skill 的工作流程
女媧 Skill 的運作大致可以整理成四個階段：
六路並行蒐集：從著作、訪談、社群媒體、批評者觀點、決策紀錄、人生時間線等方向蒐集資料。
三重驗證提煉：一個觀點必須跨多個領域出現、能推斷新問題立場、且不是所有聰明人都會這樣想，才值得被收錄。
建立 Skill：把心智模型、決策方法、表達風格、價值觀與限制寫入 SKILL.md。
品質驗證：用已知問題與未知問題測試，避免 AI 過度自信或胡亂回答。
這套流程對 AI 一人公司的價值很高，因為它等於把「專家經驗」變成可以安裝、可以版本管理、可以重複調用的工作能力。
如何安裝女媧 Skill？
官方 GitHub 下載連結如下：
https://github.com/alchaincyf/nuwa-skill
最簡單的安裝方式是使用通用 CLI 安裝器：
npx skills add alchaincyf/nuwa-skill 如果你想明確指定安裝到某個 Agent，也可以依照 runtime 指定。例如：
帮我安装 skill：https://github.com/alchaincyf/nuwa-skill 如果要手動安裝，可以把 GitHub 專案 clone 到對應的 skills 目錄。
一人產品團隊要靠 Agent Skills 框架、測試自動化、遠端優先的人機協作環境來疊加效率
大神必讀文章連結：https://georgexing.substack.com/p/how-i-build-with-ai-as-a-1-person
給大家一個可以直接複製貼上給 Claude Code 使用的提示詞：
請讀懂這篇文章：https://georgexing.substack.com/p/how-i-build-with-ai-as-a-1-person
# AI 一人公司 / 一人產品團隊完整提示詞
你現在要扮演我的「AI 一人公司作業系統總指揮」。
你的任務不是單純回答問題，而是協助我把一個想法，轉換成可以由 AI Agent 團隊執行的完整產品開發、內容產出或商業驗證流程。
## 一、背景設定
我正在打造一套「AI 一人公司」工作流。
核心概念是：
人類負責方向、品味、商業判斷、使用者價值、品質把關與最後決策。
AI Agent 負責研究、規劃、開發、測試、審查、文件、營運與重複性工作。
請把我視為：
* 創辦人
* 產品經理
* 品質審查者
* 最終決策者
請把 AI Agent 團隊視為：
* Claude Code：主要工程師，負責理解專案、規劃功能、寫程式、重構與除錯
* Codex：嚴謹審查者，負責檢查計畫、審查程式碼、找出邏輯漏洞、資料流程錯誤與後端風險
* Hermes Agent：長期營運助理，負責記憶、排程、跨平台提醒、自動化任務與長期追蹤
* 女媧 Skill / Agent Skills：專家能力庫，負責把人物思維、領域方法論、公司 SOP、品牌規範、開發規範轉換成可重複使用的能力
請避免空泛勵志，重點放在可以執行、可以檢查、可以交給 Agent 的流程。
---
## 二、我要處理的主題
請根據以下輸入，幫我建立完整的一人產品團隊工作流。
### 我的產品 / 專案 / 文章 / 功能想法
【在這裡貼上我的想法】
### 目標使用者
【在這裡描述目標使用者，例如：老師、開發者、內容創作者、中小企業老闆、學生、設計師】
### 我想達成的結果
【在這裡描述結果，例如：做出 MVP、寫一篇 WordPress 文章、設計一個 SaaS 功能、改版某個頁面、建立自動化流程】
### 目前限制
【在這裡填寫限制，例如：只有我一個人、預算有限、時間有限、需要本地部署、需要 WordPress、需要 Next.js、需要支援中文】
### 已有工具或技術
【在這裡填寫，例如：Claude Code、Codex、Hermes Agent、OpenAI、Ollama、llama.cpp、Next.js、Prisma、PostgreSQL、WordPress、GitHub】
---
## 三、你的工作方式
請你按照以下流程執行，不要跳步。
---
# Phase 1：產品腦力激盪與問題定義
請先幫我釐清：
1. 這個想法真正要解決的問題是什麼？
2. 使用者現在怎麼解決這個問題？
3. 使用者最痛的地方是什麼？
4. 這個產品或內容的主要使用情境是什麼？
5. 成功的定義是什麼？
6. 哪些需求是必要的，哪些只是好看但不重要？
7. 哪些地方最容易被 AI Agent 誤解？
8. 哪些地方一定要由人類做最後判斷？
請輸出：
* 一句話產品定位
* 目標使用者描述
* 使用者痛點
* 核心使用情境
* Jobs To Be Done
* 成功指標
* 不做清單
* 風險清單
* 需要我確認的關鍵決策
請注意：
如果我的想法太模糊，你不要直接開始寫執行計畫，而是先幫我整理成幾個可選方向，讓我選擇。
---
# Phase 2：PRD / 規格文件
在 Phase 1 完成後，請幫我產生一份產品規格文件。
格式如下：
## 1. 專案名稱
## 2. 一句話說明
## 3. 背景與問題
## 4. 目標使用者
## 5. 使用者故事
請用這種格式：
* 作為【使用者角色】，我想要【行為】，以便【得到的價值】。
## 6. 核心功能
請區分：
* 必要功能
* 次要功能
* 暫不處理功能
## 7. 使用流程
請用步驟式流程描述。
## 8. UX / UI 原則
請說明：
* 畫面上最重要的主要行動是什麼
* 哪些資訊要優先顯示
* 哪些資訊應該收合或延後
* 什麼狀態下需要提醒使用者
* 哪些設計會增加摩擦，應該避免
## 9. 技術需求
請包含：
* 前端
* 後端
* 資料庫
* API
* 權限
* 檔案或媒體處理
* 第三方服務
* AI 模型或 Agent 使用方式
## 10. 邊界情境
請列出：
* 空資料狀態
* 錯誤狀態
* 載入狀態
* 權限不足
* AI 回答失敗
* 網路中斷
* 使用者輸入不完整
* 重複送出
* 多人或多裝置同步問題
## 11. 驗收標準
請用 checkbox 格式輸出。
---
# Phase 3：Agent 分工設計
請把整個工作拆給不同 AI Agent。
請用表格輸出：
| 角色 | 使用工具 | 負責任務 | 輸入 | 輸出 | 注意事項 |
| -- | ---- | ---- | -- | -- | ---- |
至少包含：
1. 人類創辦人
2. Claude Code
3. Codex
4. Hermes Agent
5. 女媧 Skill / Agent Skills
6. 測試 Agent
7. 文件 Agent
8. SEO / 內容 Agent
請特別說明：
* 哪些工作可以並行
* 哪些工作必須串行
* 哪些工作需要人類審核後才能繼續
* 哪些工作可以交給較小模型
* 哪些工作必須交給較強模型
---
# Phase 4：實作計畫
請把 PRD 轉換成可執行的實作計畫。
格式如下：
## 實作總覽
* 目標
* 預估修改範圍
* 主要檔案
* 新增檔案
* 修改檔案
* 刪除檔案
* 資料庫變更
* API 變更
* 測試範圍
* 風險等級
## 任務清單
每個任務請用 checkbox 格式：
* [ ] Task 1：任務名稱
* 目的：
* 修改檔案：
* 具體步驟：
* 完成標準：
* 可能風險：
* 建議交給哪個 Agent：
請把任務拆到 AI Agent 可以明確執行的粒度。
不要只寫「完成前端」這種模糊任務。
要寫到「修改哪個檔案、增加哪個元件、處理哪個狀態、需要哪個測試」。
---
# Phase 5：Codex 審查提示詞
請產生一段可以交給 Codex 使用的審查提示詞。
目標是讓 Codex 審查 Claude Code 產出的計畫或程式碼。
Codex 審查提示詞必須包含：
1. 請檢查是否符合 PRD
2. 請檢查是否有資料流程錯誤
3. 請檢查是否有 race condition
4. 請檢查是否有權限問題
5. 請檢查是否有錯誤狀態未處理
6. 請檢查是否有安全風險
7. 請檢查是否有測試缺口
8. 請檢查是否有過度設計
9. 請檢查是否有和原始使用者價值偏離
10. 請用 Critical / High / Medium / Low 分級
請輸出可直接複製的 Codex Review Prompt。
---
# Phase 6：Implementation Review 自動測試設計
請模擬一位人類產品審查者，設計端到端測試情境。
請輸出：
## 使用者情境測試
| 編號 | 情境 | 操作步驟 | 預期結果 | 嚴重性 |
| -- | -- | ---- | ---- | --- |
至少包含：
* 新使用者第一次使用
* 正常成功流程
* 使用者輸入錯誤
* AI 回答失敗
* 網路或 API 錯誤
* 權限不足
* 重複操作
* 長時間載入
* 行動裝置或小螢幕
* 使用者中途離開後回來
## Playwright / Maestro / 手動測試建議
請根據專案類型建議：
* Web 專案：Playwright
* Mobile 專案：Maestro 或 Xcode simulator
* API 專案：API integration test
* WordPress 文章：SEO、可讀性、連結、標題層級、圖片 alt、內外連檢查
---
# Phase 7：遠端優先工作流
請幫我設計一套適合一人公司使用的遠端優先 AI Agent 工作流。
請包含：
## 1. 長時間任務如何執行
例如：
* 使用 tmux 保持 session
* 使用 SSH 遠端連入開發主機
* 使用 Tailscale 或 VPN 連線
* 使用 Git worktree 管理多個功能分支
* 使用通知機制提醒我 Agent 卡住
## 2. 手機上如何追蹤
請設計：
* 手機查看進度
* 手機批准或否決 Agent 決策
* 手機補充語音輸入
* 手機查看測試結果
## 3. 語音輸入策略
請幫我把口語想法整理成可執行規格。
如果我貼上的是語音轉文字，請先整理語意，不要糾正文法而忽略內容。
## 4. 多 Agent 並行策略
請說明：
* 哪些任務可以平行跑
* 如何避免不同 Agent 修改同一個檔案互相衝突
* 如何用 Git branch / worktree 分開任務
* 如何設定合併順序
* 如何保留回滾點
---
# Phase 8：女媧 Skill / 專家顧問團設計
請根據這個專案，建議我應該建立哪些 Skill。
請輸出：
| Skill 名稱 | 用途 | 觸發時機 | 應包含內容 | 不該做什麼 |
| -------- | -- | ---- | ----- | ----- |
請至少思考以下類型：
* 產品品味 Skill
* 工程規範 Skill
* UI / UX 審查 Skill
* SEO 文章 Skill
* 安全檢查 Skill
* 品牌語氣 Skill
* 客戶訪談 Skill
* 測試審查 Skill
* 競品分析 Skill
* 專家人物思維 Skill
如果適合，請幫我產生一份 `SKILL.md` 草稿。
`SKILL.md` 需要包含：
* name
* description
* 使用時機
* 不使用時機
* 工作流程
* 輸出格式
* 品質檢查清單
* 誠實邊界
---
# Phase 9：如果這是 WordPress 文章
如果我的輸入目標是寫 WordPress 文章，請改用以下輸出格式。
請產出：
1. 主標題
2. 三個 SEO 標題選擇
3. SEO 中繼資料說明
4. 文章標籤，請用繁體中文，並用半形逗號分隔
5. WordPress 可直接貼上的文章內容
6. 內部連結建議
7. 外部連結建議
8. 圖片或流程圖建議
9. 可以用「創作圖像」生成的圖片提示詞
10. 延伸閱讀區塊
文章要求：
* 使用繁體中文
* 如果來源有簡體中文，請改成繁體中文
* 使用 WordPress block editor 友善格式
* 避免簡體字
* 標題層級清楚
* 適合 SEO
* 不要堆砌關鍵字
* 官方網站與下載連結必須放入文章
* 對工具的評價要務實，不要過度吹捧
* 文章要能接續「AI 一人公司：Claude Code、Codex、Hermes 與女媧 Skill」這個主題
---
# Phase 10：最後輸出總結
最後請用以下格式總結：
## 我建議你現在先做的 3 件事
1.
2.
3.
## 哪些部分可以立刻交給 AI Agent
## 哪些部分必須由我親自判斷
## 這個專案最大的風險
## 這個專案最快的 MVP 路線
## 下一個可執行指令
請給我一段可以直接貼到 Claude Code / Codex / Hermes Agent 的下一步指令。
---
## 重要規則
1. 不要只給概念，要給可執行步驟。
2. 不要假設 AI 會自動理解我的產品品味，要把標準寫清楚。
3. 不要讓 Agent 直接長時間執行高風險操作，必須設計審查點。
4. 不要只檢查程式能不能跑，也要檢查使用者流程是否合理。
5. 不要把 AI 當成全自動創辦人；AI 是員工，人類才是老闆。
6. 如果資訊不足，請先提出最少量但最高價值的澄清問題。
7. 如果可以先做合理假設，就先標明假設並繼續，不要卡住。
8. 對每個輸出都要加上品質檢查清單。
9. 所有內容都用繁體中文。
10. 若引用外部工具、官方網站、GitHub 或下載連結，請列出來源與用途。
現在請根據我提供的主題，開始 Phase 1。 感想
未來真正有競爭力的人，不一定是最會寫提示詞的人，而是最會設計 AI 工作流的人。
你可以把 Claude Code 當工程師，把 Codex 當快速執行者，把 Hermes Agent 當長期助理，再用女媧 Skill 建立不同領域的顧問團。
但最後，真正的老闆還是你。
AI 一人公司的重點不是讓 AI 取代你，而是讓你從執行者升級成指揮者。
補充：
商業導師：
https://github.com/dontbesilent2025/dbskill
美工與設計：(寶玉skills)
https://github.com/JimLiu/baoyu-skills/blob/main/README.zh.md
by Rain Chu 6 月 18, 2026 | AI , skills
baoyu-skills 產生產品圖：用 AI 快速製作 WordPress 商品視覺素材
在經營 WordPress 網站、WooCommerce 商店或內容型部落格時，產品圖往往是最花時間、也最影響轉換率的素材之一，過去要做一張產品主視覺，可能需要攝影、修圖、排版、設計師協作，甚至還要為不同平台另外裁切尺寸。
如果你的網站需要大量商品圖、文章封面圖、社群圖卡、資訊圖表，baoyu-skills 會是一個很適合導入的 AI 圖像工作流工具。
baoyu-skills 是由 Jim Liu 寶玉分享的 AI Agent 技能集，可用於 Claude Code、Codex 等 Agent 環境，協助內容創作者與網站經營者更有效率地產生圖片、文章、圖卡、簡報、資訊圖與多種發布素材。
官方 GitHub：https://github.com/jimliu/baoyu-skills
下載與更新：https://github.com/JimLiu/baoyu-skills/releases
為什麼 WordPress 網站需要 baoyu-skills？
WordPress 的優點是彈性高，但內容經營到一定規模後，最常卡住的地方不是文章本身，而是「圖片素材」。
常見情境包含：
WooCommerce 商品需要主圖、情境圖、橫幅圖
部落格文章需要 SEO 封面圖
產品教學需要流程圖或資訊圖表
社群貼文需要小紅書、Instagram、Facebook 圖卡
多語系網站需要同一張圖的不同語言版本
技術產品需要規格圖、爆炸圖、比較圖或視覺說明
baoyu-skills 的價值在於，它不是單純「叫 AI 畫一張圖」，而是把常見內容工作拆成多個 Skill，讓你可以針對不同用途選擇合適的圖片生成方式。
baoyu-skills 的主要特色
1. 可產生多種產品視覺素材
baoyu-skills 不是只有單一圖片生成指令，而是包含多種與內容、圖片、圖表相關的技能。
適合用在：
產品封面圖
商品情境圖
文章插圖
資訊圖表
社群圖卡
教學流程圖
知識漫畫
簡報圖片
商品介紹圖
對 WordPress 經營者來說，這代表同一份產品資料可以延伸成不同的行銷素材。
2. 適合產品圖與文章封面圖
如果你正在寫一篇產品介紹文章，可以使用 baoyu-cover-image 產生文章封面，也可以使用 baoyu-image-gen 或 baoyu-imagine 產生更自由的商品情境圖。
例如：
科技產品：可產生冷色系、金屬感、未來感的產品主視覺
美妝商品：可產生柔光、乾淨背景、生活情境的商品照
食品商品：可產生木質桌面、自然光、手作感的商品圖
教育服務：可產生圖解式封面與資訊圖
SaaS 產品：可產生 UI mockup、介面展示與功能圖解
3. 支援圖表與流程類型內容
遇到流程、比較、架構、教學步驟時，建議不要只用文字說明，可以改用「創作圖像」的方式產生視覺圖。
例如這篇文章中的工作流程可視覺化如下：
這類流程非常適合做成資訊圖，放在 WordPress 文章中，不但可以增加停留時間，也能讓讀者更快理解工具的實際用途。
4. 可與 WordPress 內容流程整合
baoyu-skills 本身不是 WordPress 外掛，而是 AI Agent 的技能集。實際用法通常是先在本機或開發環境產生圖片，再把圖片上傳到 WordPress 媒體庫。
建議流程如下：
在 Claude Code、Codex 或其他支援 Skills 的 Agent 中安裝 baoyu-skills
準備商品描述、文章 Markdown 或產品規格
使用對應指令產生圖片
檢查圖片比例、文字、品牌色與可讀性
將圖片輸出為 WebP、PNG 或 JPG
上傳到 WordPress 媒體庫
套用到文章特色圖片、WooCommerce 商品圖、Elementor 區塊或首頁 Banner
如果你的網站使用 Elementor，也可以直接把產出的圖片放進 Elementor 的 Image、Hero、CTA、Gallery 或 Loop Grid 區塊中。
安裝與下載
官方建議安裝方式如下：
npx skills add jimliu/baoyu-skills
官方 GitHub：https://github.com/jimliu/baoyu-skills
下載與版本更新：https://github.com/JimLiu/baoyu-skills/releases
如果你使用 Claude Code，也可以在 Agent 中加入 marketplace：
/plugin marketplace add JimLiu/baoyu-skills
接著安裝：
/plugin install baoyu-skills@baoyu-skills
官方文件提醒，baoyu-skills 內含多個 Skill，實務上建議按需安裝，不一定要一次載入所有技能，避免佔用過多 Agent 上下文。
關鍵指令整理
以下是用於產品圖與 WordPress 內容製作時最常用的指令方向。
1. 產生文章封面圖
/baoyu-cover-image path/to/article.md
指定風格：
/baoyu-cover-image path/to/article.md --style blueprint
指定比例：
/baoyu-cover-image path/to/article.md --aspect 16:9
不要加標題文字：
/baoyu-cover-image path/to/article.md --no-title
適合用途：
WordPress 文章特色圖片
部落格封面
首頁文章列表縮圖
SEO 文章主視覺
2. 產生產品情境圖
/baoyu-image-gen "黑色無線耳機，霧面金屬質感，放在白色桌面上，自然柔光，商業產品攝影風格"
適合用途：
WooCommerce 商品主圖
商品詳情頁情境圖
首頁商品橫幅
廣告素材
3. 產生自由風格產品圖
/baoyu-imagine "一款高階 AI 筆電放在現代辦公桌上，背景有柔和光影，科技感，高級商業攝影"
適合用途：
品牌形象圖
活動視覺
產品概念圖
Landing Page 主視覺
4. 產生資訊圖表
/baoyu-infographic path/to/content.md
指定版型與風格：
/baoyu-infographic path/to/content.md --layout flow --style technical-schematic
適合用途：
產品規格比較
教學步驟
服務流程
軟體架構圖
WordPress 教學文章配圖
5. 產生社群圖卡
/baoyu-xhs-images posts/product-intro.md
指定風格：
/baoyu-xhs-images posts/product-intro.md --style notion
指定流程版型：
/baoyu-xhs-images posts/product-intro.md --layout flow
適合用途：
小紅書圖卡
Instagram 輪播圖
Facebook 貼文圖
WordPress 文章延伸社群素材
6. 圖片壓縮與最佳化
/baoyu-compress-image product-image.png
適合用途：
將圖片轉為 WebP
壓縮 WordPress 圖片
降低網頁載入時間
改善 Core Web Vitals
WordPress 使用場景範例
場景一：WooCommerce 商品頁
你可以先準備商品描述：
產品名稱：黑色真無線藍牙耳機
特色：降噪、長續航、霧面金屬外殼、適合通勤與辦公
圖片風格：高級商業攝影、白色背景、柔和陰影、乾淨構圖
接著用 baoyu-skills 產生：
商品主圖
生活情境圖
功能賣點圖
規格比較圖
社群推廣圖
最後將圖片上傳到 WordPress 媒體庫，套用到 WooCommerce 商品圖集。
場景二：WordPress 部落格文章
如果你要寫一篇「如何挑選無線網卡」的文章，可以使用：
/baoyu-cover-image article.md --style blueprint --aspect 16:9
再使用：
/baoyu-infographic article.md --layout comparison --style technical-schematic
這樣可以同時產生文章封面與比較型資訊圖，讓文章更適合 SEO 排名與社群分享。
場景三：Elementor 首頁橫幅
如果你使用 Elementor 製作首頁，可以先用 baoyu-skills 產生 16:9 或 21:9 的 Hero Banner。
提示詞範例：
請產生一張 WordPress 首頁 Hero Banner：
主題是 AI 產品圖自動生成，
畫面包含商品攝影棚、AI 工作流、WordPress 網站介面，
風格為現代、乾淨、科技感、商業級視覺，
不要過多文字，保留右側放標題的空間。
產出後可放進 Elementor 的 Hero Section，搭配標題、按鈕與 CTA。
baoyu-skills 產品圖工作流程
這樣做的好處是，每次製作商品頁時，不必重新思考整套流程，只要替換產品資料與風格設定，就能快速產出一致的視覺素材。
產品圖提示詞範例
科技產品
黑色 USB WiFi 網路卡，雙天線，放在乾淨白色桌面上，背景有筆電與柔和光影，科技感，高級商業攝影，清晰產品細節，適合電商商品頁
美妝產品
玻璃精華液瓶，琥珀色瓶身，放在大理石平台上，旁邊有綠色植物與柔和自然光，乾淨高級，美妝產品攝影風格
食品產品
手工餅乾禮盒，木質桌面，自然光，溫暖色調，旁邊有咖啡杯與包裝紙，適合品牌形象與電商頁面
軟體服務
AI 批改系統的產品主視覺，畫面包含老師桌面、筆電介面、文件上傳、AI 分析圖示，明亮乾淨，專業 SaaS 風格
使用 baoyu-skills 時要注意什麼？
1. 不要只寫「幫我產生產品圖」
好的提示詞應該包含：
產品名稱
產品材質
使用場景
光線
背景
圖片比例
風格
不要出現的元素
例如：
請產生一張 16:9 商品橫幅圖：
產品是一台銀色 AI 筆電，
放在乾淨的辦公桌上，
背景有柔和藍色光影與抽象 AI 線條，
風格為高級科技產品攝影，
不要出現人物、浮水印、亂碼文字。
2. 產品圖要保留 WordPress 版面空間
如果圖片要放在文章封面或首頁 Banner，建議在提示詞中加上：
或：
這樣後續在 WordPress、Elementor 或區塊編輯器中排版會更方便。
3. 圖片要檢查文字
AI 圖片中的文字有時會出現亂碼，因此若是商品圖、封面圖或廣告圖，建議分成兩階段：
先產生無文字圖片
再用 WordPress、Canva、Photoshop 或 Elementor 加上正式文字
這樣可以避免圖片中文字錯誤影響品牌專業度。
4. 圖片上傳 WordPress 前要壓縮
建議輸出後轉成 WebP，並控制圖片尺寸。
常用建議：
文章封面：1200 × 675
商品圖：1200 × 1200
首頁 Banner：1920 × 800
社群圖卡：1080 × 1350
小紅書圖卡：1080 × 1440
圖片壓縮後再上傳，可改善網站速度與 SEO 表現。
適合誰使用？
baoyu-skills 特別適合以下使用者：
WordPress 網站經營者
WooCommerce 電商賣家
部落格作者
SEO 內容團隊
AI 工具玩家
小型品牌主
產品行銷人員
技術產品代理商
需要大量多語系素材的網站團隊
如果你經常需要為不同文章、商品或社群平台製作圖片，baoyu-skills 可以讓你的視覺內容生產流程更標準化。
by Rain Chu 6 月 18, 2026 | AI , skills
要用在 WordPress 的細節是這樣：
UIUX Pro Max 不是在 WordPress 後台裡用，也不是在 Elementor 裡直接用語音說話。
官方 README 也寫得很清楚：CLI 安裝方式是先 npm install -g uipro-cli，再 cd /path/to/your/project，然後執行 uipro init --ai claude、uipro init --ai cursor、uipro init --ai codex 等指令。使用時則是「自然聊天」提出 UI/UX 任務，或用 /ui-ux-pro-max slash command 觸發。
1. 要放在 WordPress 根目錄下嗎？
如果你是要它幫你「改 WordPress 主題、外掛、樣式檔、PHP template」，那建議放在 WordPress 專案根目錄。
例如你的 WordPress 專案是：
/var/www/html/my-wordpress-site 或 Windows 本機：
C:\Users\Rain\Projects\my-wordpress-site 那你就進到這個資料夾：
cd /var/www/html/my-wordpress-site 或：
cd C:\Users\Rain\Projects\my-wordpress-site 然後執行：
或：
這樣 AI 工具比較容易讀到你的 WordPress 結構，例如：
wp-content/themes/plugins/uploads/ 2. 如果只是用 Elementor？
如果你只是想讓它幫你規劃 Elementor 頁面，例如：
首頁區塊怎麼排
Hero 文案怎麼寫
CTA 怎麼放
色彩與字體怎麼設定
手機版怎麼調
WooCommerce 商品頁怎麼規劃
可以在任何 AI 工具裡直接問：
請使用 UIUX Pro Max 的思維，幫我規劃一個 WordPress + Elementor 首頁。網站類型：顧問公司目標客戶：中小企業老闆風格：專業、可信任、不要太花請輸出：1. Elementor 區塊架構2. 每個 Section 的標題與文案3. Container / Column 建議4. Global Colors5. Global Fonts6. 手機版設定 然後你再手動把結果做到 Elementor 裡。
這種方式不需要碰 WordPress 根目錄，因為它只是給你「設計規劃」。
3. 什麼情況一定建議在 WordPress 根目錄下？
當你要 AI 直接幫你看檔案、改檔案、產生程式碼時，就建議在 WordPress 根目錄。
例如你要它做這些事：
請幫我檢查目前 WordPress 主題的首頁 template，並重新設計 Hero 區塊。 請幫我修改 wp-content/themes/my-theme/front-page.php，讓首頁更像專業 SaaS Landing Page。 請幫我建立一個 WordPress 外掛設定頁，風格要乾淨、專業、適合老師使用。 請幫我新增一個 Elementor 可以貼上的 HTML 區塊，並附 CSS。 這種情況 AI 需要讀你的專案檔案，所以最好在 WordPress 專案根目錄執行。
4. 在哪裡「用說的」？
不是在 WordPress 後台說。
是在這些地方用文字說：
A. Claude Code
如果你用 Claude Code，可以在專案目錄下開啟 Claude Code，然後直接輸入：
請使用 UIUX Pro Max，幫我優化這個 WordPress 網站首頁的 UI/UX。請先讀取目前主題結構，不要直接改檔案，先提出規劃。 如果是 slash command 模式，則可以用：
/ui-ux-pro-max 請幫我設計 WordPress + Elementor 首頁架構 官方文件也提到，Skill Mode 可以自然語言觸發，Workflow Mode 則可以使用 /ui-ux-pro-max 指令。
B. Cursor
如果你用 Cursor：
用 Cursor 開啟 WordPress 專案資料夾
安裝 UIUX Pro Max：
npm install -g uipro-cliuipro init --ai cursor
在 Cursor Chat 裡輸入：
請使用 UIUX Pro Max 的 UI/UX 規則，幫我分析這個 WordPress 網站。目標是把首頁改成專業的 B2B SaaS Landing Page。請先不要修改檔案，先列出設計系統、區塊架構與需要改的檔案。 C. Codex CLI / Gemini CLI / Windsurf
邏輯一樣，先在專案資料夾安裝：
或：
然後在該工具的聊天或 CLI 裡下指令。
5. WordPress + Elementor 最實際流程
如果你是一般 WordPress 使用者，我會建議你不要一開始就讓 AI 改檔案，而是先用這個流程：
UIUX Pro Max 產生設計規劃↓你在 Elementor 設定 Global Colors / Fonts↓依照 Section 一段一段建立頁面↓再請 AI 幫你檢查手機版、轉換率、可讀性 實際操作如下。
第一步：先問它設計系統
請使用 UIUX Pro Max，幫我建立 WordPress + Elementor 網站的設計系統。網站類型：AI 批改工具目標使用者：國中小老師品牌感覺：乾淨、專業、低壓力、不要像兒童玩具主色：白色、深灰，主要 CTA 使用 Shane Red請輸出：1. Global Colors2. Global Fonts3. H1/H2/H3/Body 字級4. Button 樣式5. Card 樣式6. Section 上下間距7. 手機版斷點建議 第二步：請它產生 Elementor 區塊
請依照剛剛的設計系統，幫我規劃 Elementor 首頁。請輸出：1. Section 名稱2. 每個 Section 的目的3. Container / Column 結構4. 標題文案5. 按鈕文案6. 圖片或 Icon 建議7. 手機版排列方式 第三步：手動做到 Elementor
到 WordPress 後台：
WordPress 後台→ 頁面→ 新增頁面 / 編輯首頁→ 使用 Elementor 編輯 然後照 AI 給你的 Section 一段一段做。
第四步：請它檢查 Elementor 設計
你可以截圖，或把頁面區塊描述貼回去問：
請用 UIUX Pro Max 的角度，檢查這個 Elementor 首頁。請特別看：1. 首屏是否清楚2. CTA 是否明顯3. 文字是否太多4. 手機版是否容易讀5. 有沒有不一致的間距或字級6. 如何提高轉換率 6. 如果要改 WordPress 主題，流程是另一種
假設你有一個自製主題：
wp-content/themes/my-theme/ 你可以在 WordPress 根目錄下開 AI 工具，然後問：
請使用 UIUX Pro Max 分析這個 WordPress 主題。目標：把首頁 front-page.php 改成專業 Landing Page。限制：1. 不要改後台功能2. 不要破壞現有 header.php 和 footer.php3. 優先修改 front-page.php 和 style.css4. 請先列出修改計畫，不要直接改檔案 等它列出計畫後，再說：
可以，請開始修改 front-page.php 和 style.css。 這種才是「在 WordPress 根目錄下用」。
7. Elementor 使用者的重點結論
你可以這樣理解：
只做 Elementor 頁面規劃：不用一定在 WordPress 根目錄。在 Claude / Cursor / ChatGPT 裡問都可以。要 AI 讀取或修改 WordPress 檔案：建議在 WordPress 根目錄。要做外掛、主題、template、CSS：一定建議在 WordPress 專案根目錄。要做文章、頁面文案、區塊設計：不需要根目錄，直接用文字問即可。 8. 最推薦的用法
要寫 WordPress 文章、又想說明 Elementor 使用場景，我建議寫成這樣：
UIUX Pro Max 並不是直接在 WordPress 後台安裝後就會自動產生頁面的外掛，而是搭配 Claude Code、Cursor、Codex CLI、Windsurf 等 AI 工具使用的 UI/UX Skill。
最簡單一句話：Elementor 規劃不用放根目錄；要改 WordPress 程式碼，就放在 WordPress 根目錄。
by Rain Chu 6 月 18, 2026 | AI , skills
在網站製作的世界裡，最痛苦的往往不是「會不會架 WordPress」，而是「怎麼把網站做得像專業品牌」。
很多人可以安裝主題、套版、放圖片、改文字，但真正卡住的地方通常是：
版面不夠高級、配色不協調、按鈕不知道放哪裡、手機版跑版、Landing Page 沒有轉換力、Dashboard 看起來不像專業產品。
這時候，UIUX Pro Max Skill 就像是一位專門站在你旁邊的前端與 UI/UX 顧問。你不需要一開始就懂設計系統、字體比例、色彩心理學、Tailwind、React、Next.js 或 shadcn/ui，只要用自然語言描述你想要的網站，它就能協助 AI Coding Assistant 產生更像專業前端設計師規劃出來的介面。
官方網站：https://ui-ux-pro-max-skill.nextlevelbuilder.io/
GitHub 專案：https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
下載與安裝：https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/releases
UIUX Pro Max 是什麼？
UIUX Pro Max，全名通常會看到 ui-ux-pro-max-skill ，是一個提供 AI 助手使用的 UI/UX 設計技能包。它的核心概念很簡單：
讓 AI 不只是「會寫前端程式」，而是更懂「什麼樣的前端才像專業產品」。
一般 AI 寫前端時，很容易產生一種常見問題：功能有了，但畫面普通；元件有了，但缺乏層次；版面能跑，但沒有品牌感。
UIUX Pro Max 則補上這塊空白。它把 UI 風格、色票、字體搭配、圖表類型、UX 規則、設計系統與不同技術框架的實作建議整理成一套可被 AI 助手調用的知識庫。
你可以把它想像成：
給 Claude Code、Cursor、Codex CLI、Windsurf 等工具使用的 UI/UX 專家包
給前端開發者使用的設計系統產生器
給不懂設計的創業者、站長、行銷人員使用的網站美感加速器
給 WordPress 專案使用的外觀與互動規劃參考工具
它不是單純的 WordPress 外掛，而是可以協助你在製作 WordPress 網站、Landing Page、SaaS 後台、會員系統、形象網站或行銷頁時，快速產生更專業的前端設計方向。
特色
1. 用自然語言產生 UI/UX 設計方向
你不需要一開始就寫完整規格，只要描述你的需求，例如：
「幫我設計一個牙醫診所形象網站，要乾淨、可信任、有預約按鈕。」
「我要一個 WordPress 課程銷售頁，風格要像高級教育平台。」
「幫我做一個 SaaS 後台 Dashboard，要有現代感、卡片式資料區塊、RWD。」
AI 搭配 UIUX Pro Max 後，就能更有方向地產生版面、色彩、字體、元件與視覺層次。
2. 自動生成設計系統
UIUX Pro Max 的重點之一，是能依據專案需求產生設計系統。
這對 WordPress 網站很重要，因為很多網站最後看起來不專業，不是因為圖片不夠漂亮，而是缺乏一致性。
設計系統可以包含：
主色與輔色
字體搭配
標題大小
內文行距
按鈕樣式
卡片樣式
表單樣式
間距規則
RWD 斷點
常用元件規範
如果你是用 WordPress + Elementor、Bricks、Block Editor、GeneratePress、Astra 或自製主題，這些設計系統都可以成為你調整網站外觀時的重要依據。
3. 適合 WordPress 外掛與主題開發
雖然 UIUX Pro Max 不是傳統意義上的 WordPress 外掛，但它非常適合拿來輔助 WordPress 開發。
例如你正在開發：
WordPress 企業形象網站
WooCommerce 商品頁
線上課程銷售頁
會員中心
後台管理介面
預約系統
AI 工具網站
部落格首頁
Landing Page
WordPress 外掛設定頁
你可以請 AI 搭配 UIUX Pro Max 先產生 UI 規劃，再把設計轉換成 HTML、Tailwind、React、Next.js、PHP Blade、甚至 WordPress 區塊設計邏輯。
4. 支援多種前端技術棧
UIUX Pro Max 不只適合單一框架，它的 GitHub README 中列出多種支援方向，包括 HTML + Tailwind、React、Next.js、shadcn/ui、Vue、Nuxt、Angular、Svelte、Astro、SwiftUI、Jetpack Compose、React Native、Flutter 等。
對 WordPress 使用者來說，最實用的組合通常會是：
HTML + Tailwind
React
Next.js
shadcn/ui
PHP / Laravel Blade 概念
WordPress 區塊與前端樣式規劃
如果你的 WordPress 網站有自製外掛、客製後台、Headless WordPress 或 Next.js 前台，UIUX Pro Max 會更有幫助。
5. 做出不「凡」的網站
多數人不是專業設計師，也不是全職前端工程師。
你可能是創業者、老師、站長、接案者、行銷人、公司內部資訊人員，甚至只是想把自己的 WordPress 網站改得更好看。
UIUX Pro Max 的價值在於：它把許多專業設計師腦中的判斷，變成 AI 可以引用的規則與資料庫。你不必從零開始學完 UI/UX，也能讓 AI 提供更接近專業前端顧問的建議。
關鍵指令
以下是常用指令，可以依照你的 AI 工具環境選擇。
Claude Code Marketplace 安裝方式
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill CLI 安裝方式
npm install -g uipro-cli
cd /path/to/your/project
uipro init --ai claude 安裝到其他 AI 助手
uipro init --ai cursor
uipro init --ai windsurf
uipro init --ai copilot
uipro init --ai codex
uipro init --ai gemini
uipro init --ai opencode
uipro init --ai all 全域安裝
uipro init --ai claude --global
uipro init --ai cursor --global 更新與移除
uipro versions
uipro update
uipro uninstall 使用範例
Build a landing page for my SaaS product Create a dashboard for healthcare analytics Design a portfolio website with dark mode Make a mobile app UI for e-commerce Build a fintech banking app with dark theme 直接呼叫 Skill
/ui-ux-pro-max Build a landing page for my SaaS product 使用流程圖
WordPress 使用情境範例
情境一：幫企業形象網站重新設計首頁
你可以這樣下指令：
請幫我重新設計一個 WordPress 企業形象網站首頁。
產業是 B2B 軟體服務，目標客戶是中小企業老闆。
風格要專業、可信任、不要太科技黑。
請提供首頁區塊架構、主色、字體、CTA 按鈕、RWD 注意事項。 AI 搭配 UIUX Pro Max 後，會比較容易產生完整的首頁架構，例如 Hero、痛點、服務特色、案例、流程、FAQ、CTA 等，而不是只給你一個普通的套版。
情境二：幫 WooCommerce 商品頁提高轉換率
請幫我優化 WooCommerce 商品頁 UI/UX。
商品是高單價健康設備。
目標是增加詢問與預約體驗。
請設計商品頁資訊層級、信任元素、CTA 區塊與手機版版面。 這類任務不只是美化，而是結合轉換率、資訊層級與使用者行為。UIUX Pro Max 很適合用在這種「不只要好看，也要有效」的頁面。
情境三：設計 WordPress 外掛設定頁
請幫我設計一個 WordPress 外掛設定頁。
外掛功能是 AI 自動批改作業。
需要包含 API Key 設定、模型選擇、批改規則、通知設定與儲存按鈕。
請提供乾淨、專業、適合老師使用的 UI。 如果你正在開發 WordPress 外掛，後台設定頁常常會被忽略，但它其實非常影響使用體驗。UIUX Pro Max 可以協助你把設定頁做得更清楚、有層次，也更接近 SaaS 產品的質感。
為什麼推薦 UIUX Pro Max？
1. 降低設計門檻
不是每個人都請得起專業 UI 設計師，也不是每個專案都有時間走完整設計流程。UIUX Pro Max 可以讓 AI 幫你補上第一版設計判斷。
2. 節省溝通成本
過去做網站常常要反覆跟設計師或前端工程師溝通：「再高級一點」、「不要那麼像模板」、「手機版怪怪的」。現在你可以直接把品牌、情境、目標客戶、色調偏好告訴 AI，讓它先產出一版更接近方向的方案。
3. 適合快速做 MVP
如果你正在做新產品、SaaS、AI 工具、課程平台、會員網站或接案展示頁，UIUX Pro Max 很適合用來快速產生第一版專業視覺。
4. 可延伸到實際程式碼
它不是只能給概念，也能配合 AI Coding Assistant 產生前端程式碼、元件設計與樣式規則。對工程師來說，這比單純看設計靈感網站更直接。
使用時要注意什麼？
1. 它不是魔法，仍然需要你提供明確需求
你給的需求越清楚，產出的設計越準。
建議至少提供：
產業類型
目標客戶
網站目的
喜歡或不喜歡的風格
是否要深色模式
是否需要手機優先
使用的技術棧
是否要套用到 WordPress
是否偏向銷售、品牌、教學或後台管理
2. 不要只說「幫我做漂亮一點」
比較好的說法是：
請幫我把這個 WordPress 首頁改成更像 B2B SaaS 的專業風格。
目標客戶是企業主管。
請避免卡通感與過度漸層。
主色希望是深藍與白色，CTA 使用亮色。
請提供 Hero、功能、案例、價格與 FAQ 區塊。 這樣 AI 才會知道「漂亮」的方向是什麼。
3. 最後仍要人工檢查
AI 產出的設計很適合當第一版，但正式上線前仍然建議檢查：
手機版是否正常
文字是否符合品牌語氣
色彩對比是否足夠
按鈕是否明顯
表單是否容易填寫
SEO 標題是否正確
WordPress 主題是否相容
外掛是否造成樣式衝突
by Rain Chu 6 月 18, 2026 | AI , skills
前言：AI 編碼不是「一句 Prompt 就完成」
用 Claude Code、Codex、Cursor、Gemini CLI 或其他 AI Coding Agent 來開發
一開始看起來很神奇：
但實際進入專案後，問題也很快浮現：
AI 寫出來的程式碼不一定符合需求。
這正是 Matt Pocock 開源 skills 專案想解決的問題。
Matt Pocock 在官方 GitHub 專案中寫下這句話：
Skills for Real Engineers. Straight from my .claude directory.
這句話很關鍵。
它不是在說「給 AI 更多 Prompt」。
什麼是 Matt Pocock Skills？
Matt Pocock 的 skills 是一組為 AI Coding Agent 設計的工作流指令集。
它可以安裝到支援 Skill 機制的 AI 編碼工具中，例如 Claude Code 或其他類似 Agent 工具，讓 AI 在不同任務中使用特定工作流。
官方快速安裝方式如下：
npx skills@latest add mattpocock/skills 安裝後，使用者可以選擇需要的 Skills，並在 Agent 中執行：
/setup-matt-pocock-skills 這個設定流程會詢問：
你使用哪一種 Issue Tracker，例如 GitHub、Linear 或本地檔案
你的需求或任務如何標籤化
文件與決策紀錄要存放在哪裡
Agent 之後要如何理解你的專案上下文
也就是說，這套工具不是讓 AI 直接「衝去寫程式」，而是先建立專案語言、工作流與交付紀律。
核心概念：不要 Vibe Coding，要工程化 AI Coding
很多人使用 AI 寫程式時，採用的是 Vibe Coding 模式。
所謂 Vibe Coding，大概就是：
我有一個想法 → 丟給 AI → 讓 AI 自己改 → 看起來可以就合併 這種方式在 Demo、原型、小工具上很快。
但放到真實產品，就容易遇到幾個問題：
需求沒有講清楚，AI 直接做錯方向
程式碼越改越亂，沒有人負責架構
沒有測試，AI 不知道自己是否改壞東西
對話太長，Agent 開始忘記前面的脈絡
任務太大，AI 一次修改太多地方
Review 負擔轉移給人類，結果工程師更累
Matt Pocock 的 Skills 工作流，本質上是在提醒開發者：
AI 編碼痛點一：Agent 沒有真正理解需求
問題
AI Coding 最常見的失敗，不是語法錯誤，而是「它做的不是你要的」。
你可能請 AI 做一個後台報表頁面。
但等你看完結果才發現：
欄位不是老師真正需要看的欄位
查詢條件不符合業務流程
權限設計漏掉角色差異
空狀態、錯誤狀態、邊界案例沒有處理
它理解的「報表」跟你理解的完全不同
這不是 AI 不聰明，而是需求沒有對齊。
對應 Skill：/grill-me 與 /grill-with-docs
Matt Pocock 的解法是：
/grill-me 的精神是讓 Agent 不急著產出方案，而是先進行一輪深入訪談。
/grill-with-docs 則更進一步。
專案上下文
領域用語
架構決策紀錄
需求背後的取捨
模組與資料流說明
這讓 AI 不是只靠當前聊天室的上下文做判斷，而是能逐步累積專案知識。
實務建議
在真實專案中，不要一開始就叫 AI：
更好的做法是先執行需求釐清：
然後讓 AI 問你：
主要使用者是誰？
他最想完成什麼？
哪些步驟不能捲動？
成功送出前需要哪些驗證？
什麼情況下不能開始批改？
結果要如何呈現？
這個頁面未來會不會支援批次上傳？
等這些問題釐清後，再讓 AI 產出 PRD、Issue 或程式碼。
這樣做看起來比較慢，但通常可以避免後面大規模重工。
AI 編碼痛點二：Agent 太囉嗦，專案語言不一致
問題
AI 很常「講得很多，但不精準」。
在一個真實產品中，團隊內部通常會有自己的領域語言。
模板
答案卷
評分規準
批改結果
班級
學生作業
題目配分
AI 批改任務
如果 AI 沒有掌握這些詞，它就會用很長的描述代替一個簡短的專案術語。
長期下來會造成幾個問題：
變數命名不一致
文件描述不一致
Agent 每次都重新解釋一次
Token 消耗增加
新功能接不上既有架構
不同 Session 產出的程式碼風格不一致
對應 Skill：共享語言與 CONTEXT.md
Matt Pocock 的 Skills 強調建立 Shared Language，也就是共享語言。
共享語言的概念很接近領域驅動設計，也就是讓工程師、產品人員、領域專家與 AI Agent 使用同一套詞彙。
在 Skills 工作流中，這些資訊可以被整理進 CONTEXT.md 或 ADR 文件中。
例如原本 AI 可能會寫：
當老師上傳某個學生的作業圖片後，系統會根據題目和答案資訊產生評分結果。 但如果專案已經定義好術語，它就可以更精準地寫成：
Grade Job 會根據 Submission 與 Answer Key 產生 Grading Result。 這樣不只是文字變短，而是整個專案開始有穩定的語言系統。
實務建議
導入 Skills 時，建議先建立一份 CONTEXT.md，內容包含：
# Project Context
## Domain Terms
- Submission：學生上傳的單份作業
- Template：批改模板，包含題目結構與答案格式
- Answer Key：標準答案與配分
- Grade Job：一次 AI 批改任務
- Grading Result：批改完成後產生的分數、評語與錯誤分析
## Product Principles
- 教師應能在不捲動頁面的情況下完成單份作業批改
- 主按鈕只用於最重要的批改行為
- 介面應避免學生向玩具風，保持教師專業感 這份文件不是給人看的而已，也是給 AI Agent 看的。
當 AI 有了穩定的詞彙，它就比較不容易每次都重新發明一套命名方式。
AI 編碼痛點三：程式碼看起來對，但實際不能用
問題
AI 產生的程式碼常常有一種錯覺：
常見情況包括：
TypeScript 型別通不過
API 欄位名稱對不上
資料庫 Schema 沒同步
測試沒有涵蓋邊界情境
UI 看似完成，但實際操作失敗
修一個 Bug 又打壞另一個功能
這是因為 AI 如果沒有回饋迴路，就像閉著眼睛寫程式。
它需要知道：
型別檢查是否通過
測試是否通過
瀏覽器畫面是否正常
CLI 指令是否成功
錯誤訊息是什麼
哪個 Commit 造成回歸
對應 Skill：/tdd 與 /diagnosing-bugs
Matt Pocock 的解法是把測試與診斷流程變成 Skill。
/tdd 強調 Red-Green-Refactor：
Red：先寫一個失敗的測試
Green：寫最小程式碼讓測試通過
Refactor：在測試保護下重構
這讓 AI 不只是「寫出看起來合理的程式碼」，而是用測試證明功能真的成立。
/diagnosing-bugs 則適合處理 Bug。
重現錯誤
最小化案例
提出假設
加入觀測與紀錄
修正問題
補上回歸測試
這比直接叫 AI「幫我修掉」穩定很多。
實務建議
當你要讓 AI 修改功能時，可以這樣要求：
使用 /tdd 幫我完成這個功能。
請先寫 failing test，再實作功能，最後重構。
不要一次修改太多檔案。 遇到 Bug 時可以改成：
使用 /diagnosing-bugs。
請先重現問題，不要直接猜測修法。
找到 root cause 後再提出修正方案。
最後補上 regression test。 這種方式會讓 AI 的輸出慢一點，但品質通常更好。
AI 編碼痛點四：系統越做越像一團泥球
問題
AI 最大的優點是寫得快。
如果沒有架構約束，AI 會快速產生：
過大的 Component
混亂的資料流
重複的工具函式
不一致的命名
隱性耦合
到處散落的商業邏輯
難以測試的模組
最後專案會變成 Ball of Mud，也就是一團泥球。
功能看起來都有，但每次修改都很痛苦。
對應 Skill：/improve-codebase-architecture 與 codebase-design
Matt Pocock 的 Skills 裡面不只關心「功能做出來」，也關心「系統是否還能長期演進」。
/improve-codebase-architecture 的用途是掃描程式碼庫，找出架構可以改善的地方。
哪些模組太淺
哪些抽象不夠穩定
哪些介面太大
哪些責任混在一起
哪些地方不容易測試
哪些功能應該被拆成更深的模組
codebase-design 則提供一套讓 AI 判斷模組設計的語言。
這對 AI Coding 非常重要。
實務建議
如果你的 AI Agent 已經連續幫你開發好幾天，建議定期執行：
/improve-codebase-architecture 可以設定成每幾天做一次架構健檢，尤其是在以下情境：
新功能大量加入後
多個 Agent 平行開發後
頁面開始變得難維護
測試越來越難寫
開發者開始不確定邏輯應該放哪裡
同一種資料轉換出現在很多檔案中
AI 不只應該幫你加功能，也應該幫你守住系統結構。
一張圖看懂 Matt Pocock Skills 工作流
可以把這套流程想成四個階段：
這個流程的重點不是工具本身，而是節奏。
AI 不應該一次吃下整個專案。
WordPress 技術文章可用的導入範例
如果你要把這套工作流放進 WordPress 技術團隊或個人開發流程，可以這樣設計：
1. 建立專案上下文
在專案根目錄建立：
內容包含：
專案目標
使用者角色
核心流程
領域名詞
技術堆疊
不可違反的設計原則
重要資料表
API 命名規則
UI 風格規範
2. 每個功能先做需求釐清
不要直接要求 AI 實作。
先使用：
讓 AI 問清楚需求。
3. 把需求轉成 PRD
需求清楚後，再使用：
讓 AI 產出產品需求文件。
4. 拆成 Issues
接著使用：
把 PRD 拆成可獨立完成的小任務。
每個 Issue 最好具備：
明確輸入
明確輸出
明確驗收標準
可測試範圍
不超過一個主要模組
5. 實作時使用 TDD
每個 Issue 開始實作時，使用：
讓 AI 先寫測試，再寫功能。
6. 定期做架構整理
每完成幾個 Issue，執行：
/improve-codebase-architecture 把 AI 快速產生的程式碼重新拉回可維護狀態。
什麼專案最適合使用 Matt Pocock Skills？
這套 Skills 特別適合以下情境：
你正在開發真實產品，不只是 Demo
你使用 Claude Code、Codex 或其他 Agent 工具
你希望 AI 參與需求、測試、架構與文件
你的專案有複雜商業邏輯
你需要多人協作
你不希望 AI 把程式碼改成不可維護
你希望建立可重複使用的 AI 開發流程
例如：
SaaS 後台
教育科技平台
金融分析工具
電商系統
內部管理平台
WordPress 外掛
API 服務
多 Agent 開發流程
如果只是一次性的簡單腳本，這套流程可能會顯得偏重。
常用 Skills 整理
/setup-matt-pocock-skills第一次導入時使用。
/grill-me讓 AI 針對你的想法進行深入提問。
/grill-with-docs進階版需求釐清。
/to-prd把目前對話整理成 PRD。
/to-issues把 PRD、計畫或規格拆成可執行的 Issues。
/tdd用測試驅動開發方式完成任務。
/diagnosing-bugs用紀律化方式診斷 Bug。
/improve-codebase-architecture掃描程式碼庫並提出架構改善方向。
git-guardrails-claude-code設定 Git 安全防護，避免 Agent 執行危險 Git 指令。reset --hard、clean 或不該執行的 push 行為。
為什麼這套方法值得關注？
Matt Pocock Skills 的重點，不是發明一個全新的 AI 工具。
它提醒我們：
AI 不缺寫程式碼的能力。
而這些東西，正是軟體工程的核心。
如果你只把 AI 當成程式碼產生器，它很快會帶來混亂。
AI Coding 的下一步，是工作流工程化
AI 編碼正在從「Prompt 技巧」進入「工作流設計」。
早期大家在比較誰的 Prompt 寫得好。
有沒有清楚的需求釐清流程
有沒有穩定的專案上下文
有沒有測試回饋
有沒有架構守門
有沒有 Issue 拆解
有沒有安全邊界
有沒有讓人類重新介入審查的節點
Matt Pocock 的 Skills 專案，正好提供了一個很好的起點。
它不是叫你把專案完全交給 AI。
如果你已經開始使用 Claude Code、Codex 或其他 AI Coding Agent，這套 Skills 很值得安裝到你的專案裡試試看。
官方 GitHub： https://github.com/mattpocock/skills
下載 Skills： https://github.com/mattpocock/skills/archive/refs/heads/main.zip
快速安裝： npx skills@latest add mattpocock/skills
建議第一批先選這 8 個
在安裝的畫面裡，先用空白鍵勾選這些：
setup-matt-pocock-skillsgrill-with-docsto-prdto-issuestdddiagnosing-bugsimprove-codebase-architecturecodebase-design 這 8 個是最適合「真實專案開發」的主流程。
為什麼先選這些？
1. setup-matt-pocock-skills
第一次一定要選。
2. grill-with-docs
用來讓 AI 先問清楚需求，不要一開始就亂寫 code。
3. to-prd
把討論內容整理成 PRD。
4. to-issues
把 PRD 拆成一個一個可執行的 issue。
5. tdd
用測試驅動開發方式實作。
6. diagnosing-bugs
Debug 專用。
7. improve-codebase-architecture
定期檢查專案架構。
8. codebase-design
用來建立或檢查程式碼設計原則。
第二批可以考慮加裝
等你開始穩定使用後，再加這些：
grill-metriageprototypereviewimplementgit-guardrails-claude-codesetup-pre-commitrequest-refactor-plan 用途如下：
Skill 適合情境 grill-me還沒有文件，只是想法階段，讓 AI 先問你問題 triage分析 bug、issue、需求優先級 prototype快速做原型 review請 AI 做 code review implement根據 issue 實作功能 git-guardrails-claude-code防止 Claude Code 亂下危險 git 指令 setup-pre-commit設定 pre-commit hooks request-refactor-plan先產生重構計畫，不直接動手改
其中我特別建議你後面一定要補：
git-guardrails-claude-codereviewimplementsetup-pre-commit 因為你會讓 AI 寫真實專案，Git 安全與 review 很重要。
暫時不用選的
這些可以先跳過：
ask-mattteachhandoffdomain-modelingdecision-mappingdesign-an-interfaceedit-articleobsidian-vaultscaffold-exerciseswriting-beatswriting-fragmentswriting-shape 不是不好，而是它們比較偏教學、寫作、知識整理或特殊用途。
實戰開發組合的選法
可以先這樣選：
[x] setup-matt-pocock-skills[x] grill-with-docs[x] to-prd[x] to-issues[x] tdd[x] diagnosing-bugs[x] improve-codebase-architecture[x] codebase-design[x] git-guardrails-claude-code[x] review[x] implement[x] setup-pre-commit
近期留言