by Rain Chu | 6 月 18, 2026 | AI , skills
要用在 WordPress 的細節是這樣:
UIUX Pro Max 不是在 WordPress 後台裡用,也不是在 Elementor 裡直接用語音說話。 它是在你的「開發專案資料夾」裡,讓 Claude Code、Cursor、Codex CLI、Windsurf 這類 AI 工具讀到這個 Skill,然後你在 AI 工具的聊天框或 CLI 裡用文字下指令。
官方 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 頁面,可以直接在 AI 工具中用自然語言描述需求;如果要讓 AI 讀取或修改 WordPress 主題、外掛、template 或 CSS,則建議在 WordPress 專案根目錄下安裝與使用,讓 AI 能理解目前的檔案結構與實際程式碼。
最簡單一句話: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 產生程式碼; 丟進錯誤訊息,AI 幫忙修 Bug; 給它一個功能描述,它甚至可以幫你改好整個模組。
但實際進入專案後,問題也很快浮現:
AI 寫出來的程式碼不一定符合需求。 AI 常常講太多,卻沒有抓到專案真正的語言。 AI 產出的程式碼看起來合理,但跑不起來。 AI 加速了開發,也同時加速了技術債。
這正是 Matt Pocock 開源 skills 專案想解決的問題。
Matt Pocock 在官方 GitHub 專案中寫下這句話:
Skills for Real Engineers. Straight from my .claude directory.
這句話很關鍵。
它不是在說「給 AI 更多 Prompt」。 而是在說:把真實工程師每天會做的判斷、流程、檢查與紀律,包裝成可重複使用的 Skill,讓 AI Agent 不是單純寫程式,而是按照工程流程做事。
什麼是 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 編碼不是取代軟體工程,而是更需要軟體工程。
AI 編碼痛點一:Agent 沒有真正理解需求
問題
AI Coding 最常見的失敗,不是語法錯誤,而是「它做的不是你要的」。
你可能請 AI 做一個後台報表頁面。 AI 可能很快生成 UI、API、資料表與測試。
但等你看完結果才發現:
欄位不是老師真正需要看的欄位
查詢條件不符合業務流程
權限設計漏掉角色差異
空狀態、錯誤狀態、邊界案例沒有處理
它理解的「報表」跟你理解的完全不同
這不是 AI 不聰明,而是需求沒有對齊。
對應 Skill:/grill-me 與 /grill-with-docs
Matt Pocock 的解法是: 在寫程式前,先讓 AI 反問你。
/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。 它會要求 Agent 依照更有紀律的流程處理問題:
重現錯誤
最小化案例
提出假設
加入觀測與紀錄
修正問題
補上回歸測試
這比直接叫 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 的用途是掃描程式碼庫,找出架構可以改善的地方。 它不是單純叫 AI 重構,而是先分析:
哪些模組太淺
哪些抽象不夠穩定
哪些介面太大
哪些責任混在一起
哪些地方不容易測試
哪些功能應該被拆成更深的模組
codebase-design 則提供一套讓 AI 判斷模組設計的語言。 核心精神是:好的模組應該把複雜行為包在簡單介面後面。
這對 AI Coding 非常重要。 因為 AI 很容易局部最佳化,卻忽略整體設計。
實務建議
如果你的 AI Agent 已經連續幫你開發好幾天,建議定期執行:
/improve-codebase-architecture
可以設定成每幾天做一次架構健檢,尤其是在以下情境:
新功能大量加入後
多個 Agent 平行開發後
頁面開始變得難維護
測試越來越難寫
開發者開始不確定邏輯應該放哪裡
同一種資料轉換出現在很多檔案中
AI 不只應該幫你加功能,也應該幫你守住系統結構。
一張圖看懂 Matt Pocock Skills 工作流
可以把這套流程想成四個階段:
這個流程的重點不是工具本身,而是節奏。
AI 不應該一次吃下整個專案。 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
第一次導入時使用。 用來設定 Issue Tracker、標籤、文件位置與專案工作流。
/grill-me
讓 AI 針對你的想法進行深入提問。 適合非程式碼需求、產品想法、設計方向。
/grill-with-docs
進階版需求釐清。 除了問問題,也會協助建立上下文文件與架構決策紀錄。
/to-prd
把目前對話整理成 PRD。 適合在需求已經大致釐清後使用。
/to-issues
把 PRD、計畫或規格拆成可執行的 Issues。 重點是拆成垂直切片,而不是技術分工清單。
/tdd
用測試驅動開發方式完成任務。 適合功能開發與 Bug 修復。
/diagnosing-bugs
用紀律化方式診斷 Bug。 適合複雜錯誤、效能問題與回歸問題。
/improve-codebase-architecture
掃描程式碼庫並提出架構改善方向。 適合定期做技術債整理。
git-guardrails-claude-code
設定 Git 安全防護,避免 Agent 執行危險 Git 指令。 例如阻擋 reset --hard、clean 或不該執行的 push 行為。
為什麼這套方法值得關注?
Matt Pocock Skills 的重點,不是發明一個全新的 AI 工具。 它真正有價值的地方,是把「工程師本來就該做的事」變成 AI 可以遵循的工作流。
它提醒我們:
AI 不缺寫程式碼的能力。 AI 缺的是上下文、回饋、邊界、命名、架構與驗證。
而這些東西,正是軟體工程的核心。
如果你只把 AI 當成程式碼產生器,它很快會帶來混亂。 如果你把 AI 當成需要被管理、被引導、被驗證的工程協作者,它就能變成很強的開發加速器。
AI Coding 的下一步,是工作流工程化
AI 編碼正在從「Prompt 技巧」進入「工作流設計」。
早期大家在比較誰的 Prompt 寫得好。 現在真正重要的是:
有沒有清楚的需求釐清流程
有沒有穩定的專案上下文
有沒有測試回饋
有沒有架構守門
有沒有 Issue 拆解
有沒有安全邊界
有沒有讓人類重新介入審查的節點
Matt Pocock 的 Skills 專案,正好提供了一個很好的起點。
它不是叫你把專案完全交給 AI。 它是讓 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
第一次一定要選。 這是初始化 Matt Pocock Skills 工作流用的,會幫你建立專案設定、issue tracker、文件位置等基本配置。
2. grill-with-docs
用來讓 AI 先問清楚需求,不要一開始就亂寫 code。 很適合你現在的 AI Grader、WordPress、SaaS、工具頁面開發。
3. to-prd
把討論內容整理成 PRD。 適合把「想法」轉成產品需求文件。
4. to-issues
把 PRD 拆成一個一個可執行的 issue。 這很重要,因為 AI 最怕一次任務太大。
5. tdd
用測試驅動開發方式實作。 讓 AI 先寫測試,再寫功能,比較不容易寫出看起來對、實際不能跑的程式碼。
6. diagnosing-bugs
Debug 專用。 遇到錯誤時,不要讓 AI 直接亂猜修法,而是要求它先重現、分析、找 root cause。
7. improve-codebase-architecture
定期檢查專案架構。 AI 寫久了很容易讓專案變成一團泥球,這個 skill 用來做架構整理。
8. codebase-design
用來建立或檢查程式碼設計原則。 適合你要讓 AI 理解「這個專案的架構應該怎麼長」。
第二批可以考慮加裝
等你開始穩定使用後,再加這些:
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
不是不好,而是它們比較偏教學、寫作、知識整理或特殊用途。 你現在如果目標是 AI Grader / WordPress / SaaS / Claude Code 開發流程,先不用裝那麼多。
實戰開發組合的選法
可以先這樣選:
[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
by Rain Chu | 6 月 18, 2026 | AI , skills
如果你已經開始使用 Claude Code 寫程式,你可能很快會遇到一個問題:AI 很會寫程式碼,但不一定會像真正的工程團隊一樣工作。
真正的軟體開發,不只是「寫出功能」而已,它還包含需求判斷、產品取捨、架構審查、設計檢查、品質測試、安全稽核、文件更新、部署驗證與事後回顧。
這也是 gstack 受到開發者關注的原因。
gstack 是由 Garry Tan 開源的 Claude Code 外掛式工具組。它的核心概念很簡單:不要再把 Claude Code 當成單一聊天機器人,而是把它變成一支有分工、有角色、有流程的 AI 工程團隊。
官方 GitHub:https://github.com/garrytan/gstack
下載 ZIP:https://github.com/garrytan/gstack/archive/refs/heads/main.zip
gstack 是什麼?
gstack 可以理解成一套 Claude Code 的「專家角色技能包」。
安裝之後,你可以在 Claude Code 中使用一系列 slash command,讓 AI 以不同角色協助你完成軟體開發流程。例如:
CEO:重新檢查產品方向與市場價值
工程主管:審查架構、資料流、邊界條件與測試策略
設計師:檢查 UI/UX 品質,避免 AI 產生粗糙介面
QA:實際開啟瀏覽器測試網頁流程
資安主管:用 OWASP Top 10 與 STRIDE 角度檢查安全風險
Release Manager:協助測試、合併、部署與驗證正式環境
換句話說,gstack 不是單純幫你多加幾個提示詞,而是把 AI 寫程式這件事,從「單人問答」升級成「團隊協作流程」。
為什麼它像一支 20 人的矽谷工程團隊?
一般使用 Claude Code 時,你可能會這樣下指令:
「幫我做一個登入頁。」
Claude Code 會照做,但它不一定會主動幫你思考:
這個功能真的重要嗎?
使用者流程是否清楚?
架構是否會造成未來維護困難?
邊界條件是否處理完整?
UI 是否有 AI 生成感?
有沒有資安風險?
上線後要怎麼驗證?
gstack 的價值就在於把這些問題拆成不同角色,由不同指令分別處理。
你不再只是在叫 AI 寫程式,而是在指揮一組 AI 產品與工程團隊。
特色
1. 從提示詞升級為角色分工
gstack 最大的特色,是把 Claude Code 的能力拆成不同專家角色。你可以根據任務階段,呼叫 CEO、工程主管、設計師、QA、資安主管或發布工程師。
這讓 AI 不只是執行命令,而是從不同專業角度幫你審查決策。
2. 適合個人開發者與小團隊
對一人公司、獨立開發者、小型新創團隊來說,最缺的通常不是點子,而是完整的開發紀律。
gstack 可以補上這些角色:
產品判斷
架構審查
設計審查
程式碼審查
QA 測試
資安檢查
部署流程
文件更新
它不會真的取代 20 個人,但可以讓一個開發者在流程上更接近成熟工程團隊。
3. 專為 Claude Code 設計
gstack 是圍繞 Claude Code 的工作方式設計的。安裝後會加入 Claude Code 的 skills,讓你直接在 Claude Code 中用 slash command 操作。
例如:
/plan-ceo-review
/plan-eng-review
/review
/qa
/ship
這比每次重新寫一大段提示詞更穩定,也更容易建立固定工作流程。
4. 可以實際操作瀏覽器做 QA
gstack 的 /qa 與 /browse 類指令不是單純在腦中想像測試流程,而是能搭配瀏覽器自動化工具,實際開啟網頁、點擊、觀察畫面、檢查錯誤。
這對前端開發、後台系統、SaaS 產品特別有用。
5. 支援團隊模式
如果你不是一個人開發,而是和其他工程師共同維護 repo,gstack 也提供 Team mode。你可以把 gstack 的要求寫入專案設定,讓團隊成員在使用 Claude Code 時都採用同一套 AI 協作規範。
這對團隊一致性很重要,因為 AI 工具最怕的不是不能寫,而是每個人用法不同、品質標準不同、上下文不同。
關鍵指令
以下是實務上最值得先學的 gstack 指令。
/office-hours
適合在專案早期使用。你可以用它描述你正在做的產品、功能或問題,讓 AI 協助你釐清方向。
適合情境:
新功能發想
專案方向討論
不確定下一步要做什麼
想讓 AI 先理解整體背景
/plan-ceo-review
用 CEO 或創辦人的角度檢查產品方向。
它會幫你思考:
這個功能是否真的值得做?
是否能創造足夠價值?
是否有更簡單、更有效的做法?
這是不是只是在做「看起來很忙」的功能?
適合在開始寫程式前使用。
/plan-eng-review
用工程主管角度檢查技術計畫。
它會關注:
架構是否合理
資料流是否清楚
邊界條件是否完整
測試策略是否足夠
是否有隱藏假設
適合在準備開發前使用,尤其是資料庫、API、權限、部署流程相關功能。
/plan-design-review
用設計師角度檢查功能規劃。
它會關注:
使用者流程是否清楚
UI 是否直覺
視覺層級是否合理
是否有 AI 生成感
是否符合產品定位
如果你正在做前端頁面、後台介面、SaaS Dashboard,這個指令非常有價值。
/design-consultation
適合從零開始建立設計方向。
例如你可以請它協助:
設計首頁
規劃後台介面
建立設計系統
產生多種 UI 方向
檢查競品與市場風格
/review
用資深工程師角度檢查目前分支的程式碼。
它不是只看語法,而是會幫你找:
CI 可能不會抓到的正式環境 Bug
架構問題
可維護性問題
遺漏的錯誤處理
測試不足的地方
開 PR 前可以先跑一次。
/investigate
除錯專用指令。
這個指令的重點是:先調查,再修復。
很多 AI 寫程式的問題,是一看到錯誤就直接亂改。/investigate 比較像真正的資深工程師,會先找根因、追資料流、確認假設,再提出修正方式。
/qa
用 QA 角度測試你的應用程式。
它適合用在:
前端頁面測試
表單流程測試
登入後台測試
SaaS 使用者流程測試
修復 Bug 後的回歸測試
如果你有 staging URL,可以讓它實際操作頁面。
/qa-only
和 /qa 類似,但只產出報告,不直接修改程式碼。
適合你只想知道問題在哪裡,暫時不想讓 AI 動手修。
/cso
用資安主管角度做安全檢查。
它會從常見 Web 安全風險與威脅模型角度檢查問題,例如:
權限控管
資料外洩
Injection 風險
身分驗證問題
API 濫用
邊界條件
對 SaaS、會員系統、後台系統、金流系統特別重要。
/ship
協助準備發布。
它通常會處理:
同步主分支
執行測試
檢查覆蓋率
推送變更
開啟 PR
適合功能完成後使用。
/land-and-deploy
協助合併與部署後驗證。
它的目標不是只把程式碼合併,而是一路確認部署結果與正式環境健康狀態。
/canary
適合部署後觀察。
可以用來檢查:
Console error
效能退化
頁面故障
部署後異常
/benchmark
做效能基準測試。
適合比較功能修改前後:
頁面載入速度
Core Web Vitals
資源大小
前端效能變化
/document-release
發布後更新文件。
它可以協助你檢查 README、使用說明、版本紀錄是否跟實際功能一致。
/retro
做專案回顧。
適合每週或每個功能完成後使用,檢討:
哪裡做得好
哪裡卡住
測試健康度
發布節奏
下次如何改善
安裝方式
官方建議先準備以下工具:
Claude Code
Git
Bun v1.0+
Windows 使用者需額外準備 Node.js
Claude Code 安裝指令
在 Claude Code 中貼上以下指令:
git clone --single-branch --depth 1 https://github.com/garrytan/gstack.git ~/.claude/skills/gstack && cd ~/.claude/skills/gstack && ./setup
接著依照官方 README 的建議,在 CLAUDE.md 加入 gstack 區塊,讓 Claude Code 知道可以使用 gstack skills。
Team mode:讓整個團隊一起使用 gstack
如果你希望整個 repo 都採用 gstack,可以在專案目錄內執行:
(cd ~/.claude/skills/gstack && ./setup --team) && ~/.claude/skills/gstack/bin/gstack-team-init required && git add .claude/ CLAUDE.md && git commit -m "require gstack for AI-assisted work"
如果你不想強制團隊成員使用,可以把:
改成:
Windows 使用者注意事項
如果你在 Windows 11 上使用 gstack,官方建議透過 Git Bash 或 WSL 使用。除了 Bun 之外,也需要 Node.js。
如果你使用 Git Bash,而且沒有開啟 Windows Developer Mode,安裝方式可能會改用檔案複製而不是 symlink。這種情況下,每次 git pull 更新 gstack 後,建議重新執行:
cd ~/.claude/skills/gstack && ./setup
gstack 適合誰?
1. 獨立開發者
如果你一個人同時要負責產品、設計、前端、後端、測試、部署,gstack 可以幫你補上流程與審查角色。
2. 技術創業者
如果你是創辦人,還想自己快速做 MVP、測試市場、修功能、部署產品,gstack 可以讓 Claude Code 更像一支小型產品工程團隊。
3. 小型工程團隊
如果團隊已經在使用 Claude Code,gstack 可以統一 AI 協作流程,避免每個工程師都用不同提示詞、不同品質標準。
4. 想建立 AI 開發流程的人
gstack 的價值不只在工具本身,也在於它示範了一種新的 AI 開發方法:
不是叫 AI「幫我寫程式」,而是讓 AI 依照產品、工程、設計、QA、資安、部署流程協作。
建議工作流程
如果你是第一次使用 gstack,可以先照這個流程:
先描述你要做的產品或功能。
確認這個功能是否值得做。
確認架構與資料流是否合理。
確認使用者體驗與畫面設計是否足夠好。
開發完成後做程式碼審查。
實際測試頁面與流程。
針對安全風險做檢查。
準備發布。
合併、部署並驗證正式環境。
完成後做回顧,整理下次可以改善的地方。
gstack 的真正價值:讓 AI 開發變得有紀律
很多人使用 AI 寫程式時,最大的問題不是 AI 不夠強,而是流程太鬆散。
今天叫 AI 改一點,明天叫 AI 補一點,後天再叫 AI 修 Bug。久了之後,專案很容易變成:
架構混亂
文件過期
UI 不一致
測試不足
部署流程不穩
功能越改越難維護
gstack 的出現,代表 AI 輔助開發正在從「聊天式開發」進入「流程式開發」。
它把專業團隊的工作方式拆成一個個明確指令,讓 Claude Code 不只是會寫程式,而是能依照更成熟的軟體工程流程工作。
by Rain Chu | 6 月 18, 2026 | AI , skills
現在越來越多工程師會使用 Claude Code、Cursor、Codex、Gemini CLI 或其他 AI coding agent 來協助寫程式。只要輸入一句「幫我做登入功能」、「幫我修這個 bug」,AI 就能快速產生程式碼,看起來效率很高。
但真正把 AI 放進日常開發流程後,很快就會遇到幾個問題:
需求還沒釐清,AI 就開始寫程式。 測試沒有先寫,甚至根本沒寫。 AI 說「完成了」,但實際執行才發現功能壞掉。 修改一個 bug,結果又製造出另一個 bug。 程式碼看起來能跑,但沒留下設計紀錄,也很難交接。
這些問題通常不是模型不夠聰明,而是工作流程不夠可靠。
Superpowers 要解決的,正是這件事。
Superpowers 是什麼?
Superpowers 是目前 Claude Code 社群裡很熱門的 Skills 框架之一,專門用來強化 AI 的開發流程。它不是單純讓 AI 「更會寫程式」,而是讓 AI 在寫程式之前、寫程式之中、寫完之後,都按照一套更有紀律的流程工作。
你可以把 Superpowers 想成一套給 AI coding agent 使用的「開發工作手冊」。
它會提醒或要求 AI 在不同階段使用對應的 Skill,例如:
需求不清楚時,先進行 brainstorming。 要開始實作前,先寫 writing-plans。 要寫功能時,使用 test-driven-development。 遇到 bug 時,進入 systematic-debugging。 說完成之前,先執行 verification-before-completion。 需要隔離工作時,使用 using-git-worktrees。 需要審查時,使用 requesting-code-review。
也就是說,Superpowers 的價值不只是「增加功能」,而是讓 AI 開發變成一個可檢查、可追蹤、可驗證的流程。
為什麼需要 Superpowers?
很多人使用 AI 寫程式的方式,其實還停留在「提需求,等結果」。
例如:
幫我新增一個學生作業上傳功能。
AI 可能很快就改了一堆檔案,新增 API、修改 UI、調整資料庫欄位,看起來很有效率。但問題是:
它真的理解需求嗎? 有沒有考慮錯誤情境? 有沒有測試? 有沒有驗證現有功能沒有被破壞? 有沒有留下文件? 有沒有清楚說明改了哪些地方?
如果這些問題沒有被處理,AI 寫得越快,後續返工可能越多。
Superpowers 的核心理念是:
聰明是模型的事,可靠是流程的事。
模型可以幫你寫程式,但流程要讓它知道什麼時候該停下來、什麼時候該問問題、什麼時候該測試、什麼時候才算真的完成。
Superpowers 的核心流程
Superpowers 的開發流程可以簡化成四個階段:
1. Design:先設計,不急著寫
當你要做新功能時,不要一開始就叫 AI 寫程式。Superpowers 會鼓勵 AI 先透過 brainstorming 釐清需求。
這個階段的重點包括:
確認真正要解決的問題 一次只問一個問題 避免一次丟出太多開放式問題 提出不同方案與取捨 砍掉不必要的功能,遵守 YAGNI 原則
這可以避免 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 特別適合以下情境:
長期維護的產品 多人協作的專案 重視測試與品質的團隊 需要讓 AI 參與正式開發流程 常常遇到 AI 寫完但不能跑的問題 想把 AI 從「寫 code 工具」變成「開發夥伴」
如果你只是想快速做一個一次性 demo,Superpowers 可能會顯得比較重。因為它會要求你先釐清需求、寫計畫、寫測試、做驗證,流程比單純 vibe coding 更嚴謹。
但如果你的目標是打造可維護、可驗證、可交接的程式碼,Superpowers 的價值就很明顯。
Superpowers 的限制
Superpowers 不是萬靈丹。
它可以讓 AI 更有紀律,但仍然有幾個限制:
第一,它主要依靠 AI 遵守規則。 如果 AI 沒有正確載入 Skill,或跳過流程,還是需要人類提醒。
第二,它需要專案本身有良好的測試與建置指令。 如果你的專案沒有 test、build、lint,Superpowers 很難幫你驗證。
第三,它會增加前期流程成本。 小任務可能會覺得太重,但大型功能會因此更穩。
第四,開發者仍然要審查結果。 Superpowers 可以減少 AI 亂寫,但不能取代人類工程判斷。
所以最好的使用方式不是完全放手,而是把 Superpowers 當成一套「AI 開發 SOP」。
一張圖理解 Superpowers 流程
這套流程的核心不是讓 AI 一次寫更多程式,而是讓 AI 每一步都可被確認、可被驗證、可被追蹤。
參考資源
官方 GitHub:https://github.com/obra/superpowers
近期留言