AI 工具

Vibe Coding 必學的 24 個 Skill

2026年9月20日 trytrycan.ai

24 個全部用 GitHub API 確認過 repo 和 SKILL.md 存在,查證於 2026-09-19

大部分外掛都在官方市集,先加一次,之後只要換名字:

/plugin marketplace add anthropics/claude-plugins-official

Vercel 那組走另一條,一行裝三個:

npx skills add vercel-labs/agent-skills

必裝

Skill	做什麼	怎麼裝
`superpowers`	整套開發流程,從釐清需求到審查	`/plugin install superpowers@claude-plugins-official`
`skill-creator`	把你自己的做法包成 skill	`/plugin install skill-creator@claude-plugins-official`
`frontend-design`	產出不像 AI 做的介面	`/plugin install frontend-design@claude-plugins-official`
`code-review`	寫完先幫你抓 bug	`/plugin install code-review@claude-plugins-official`
`hyperframes`	寫 HTML 產出影片	`/plugin install hyperframes@claude-plugins-official`
`ponytail`	逼它別過度設計,一行寫得完不寫十行	`/plugin marketplace add DietrichGebert/ponytail` 之後 `/plugin install ponytail@ponytail`
`caveman`	壓縮輸出,官方量測砍掉約 65% token	`/plugin marketplace add JuliusBrussee/caveman` 之後 `/plugin install caveman@caveman`
`humanizer`	去掉 AI 味	`npx skills add blader/humanizer --global`

⚠️ caveman 有兩個撞名的,上面裝的是 JuliusBrussee 那個。code-review 也有三個同名的,我列的是官方版

裝了不會自己生效,要照著流程走。前四個是一條完整的前置鏈:探需求 → 逼你講清楚 → 轉成計畫 → 照計畫跑

Skill	做什麼	來源
`brainstorming`	動手前先把需求問清楚	隨 superpowers 一起進來
`grill-me`	反過來拷問你,把講不清楚的逼出來	`/plugin marketplace add mattpocock/skills`
`writing-plans`	需求轉成執行計畫	隨 superpowers
`executing-plans`	照計畫一步步跑完	隨 superpowers
`systematic-debugging`	抓 bug 不靠猜	隨 superpowers
`test-driven-development`	先寫測試再寫實作	隨 superpowers

superpowers 是唯一被 Anthropic 官方市集收錄的第三方 skill。但社群也有負評,有人嫌它錯更多、來回太多很燒錢,自己評估

看你的技術棧

Skill	做什麼	怎麼裝
`web-design-guidelines`	逐行檢查 UI 程式碼,含無障礙	`npx skills add vercel-labs/agent-skills`
`react-best-practices`	React/Next.js 效能準則,出自 Vercel	同上
`deploy-to-vercel`	部署與預覽環境	同上
`canva`	在對話裡做圖、改圖、調尺寸	`/plugin install canva@claude-plugins-official`
`playwright`	瀏覽器自動化與端對端測試	`/plugin install playwright@claude-plugins-official`
`webapp-testing`	開瀏覽器實測你的網站	`/plugin marketplace add anthropics/skills`

⚠️ react-best-practices 的註冊名是 vercel-react-best-practices,呼叫要用後者

Skill	做什麼	怎麼裝
`wayfinder`	大工程拆成決策地圖,一次解一個	隨 `mattpocock/skills` 進來
`karpathy-guidelines`	Karpathy 的四條行為準則	`/plugin marketplace add forrestchang/andrej-karpathy-skills`
`ui-ux-pro-max`	161 組配色與 57 組字體搭配	`/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill`
`agent-browser`	自動操作瀏覽器,填表、截圖、抓資料	`npx skills add vercel-labs/agent-browser`