野马归鞍才上程,Claude Code十大Skills 装弹
用Claude Code有几天时间了,它聪明是真的聪明,聪明到像一个刚进项目组的天才实习生。脑子快,手也快,你跟它说帮我做个登录页,十分钟给你撸出一个能跑的。
但你得给它装上该装的东西。流程不告诉它、审美不告诉它、怎么查文档怎么做测试怎么留记忆不告诉它,它写出来的东西就是那种,乍一看很猛,仔细一看想报警。
今天推荐10个我实际在用的Skills,按需自取。
1. Superpowers
Claude最容易犯的病,就是一上来就写代码。
需求还没问清楚,项目结构还没摸完,它已经激情输出了。更可怕的是,写得还挺像那么回事。等你 review 才发现,方向从第一步就偏了。
Superpowers会把Claude拉回正常工程流程:先澄清需求,再拆设计,再写计划,再执行。中间还会强调 TDD、系统性调试、代码 review、验证完成。
它的价值是让Claude别那么莽。
claude plugin install superpowers
@claude-plugins-official
GitHub:
2. ui-ux-pro-max
AI 写页面是它真心觉得自己写得挺好看。
紫色渐变、大圆角卡片、满屏玻璃拟态、所有按钮都像SaaS官网,三件套一上,AI味儿就来了。你说它不对吧,它还真对齐了什么现代设计趋势。你说它对,又总觉得哪里不对。
ui-ux-pro-max 给Claude补了一层 UI/UX 设计常识。配色、字体、布局、图表、交互、设计风格,装了之后它写页面会收敛很多,更像一个见过真实产品的人。
特别适合做后台、官网、工具类产品、数据看板。
装了至少不会再每次都给你端上来一套 AI 生成感拉满的页面。
claude plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
claude plugin install ui-ux-pro-max
@ui-ux-pro-max-skill
GitHub:
3. web-design-guidelines
有时候页面能用,但细节很糙。
按钮层级乱、间距不舒服、移动端挤成一团、hover 状态没有、表单错误提示随缘。你说它错,也能跑。你说它对,又总觉得差口气。
web-design-guidelines 会按Web设计规范去审UI。覆盖可访问性、响应式、焦点状态、表单、动画、图片、性能、导航状态、暗黑模式、触摸交互,基本上你能想到的细节点它都管。
这个Skill适合放在前端开发的后半段用。页面已经写出来了,你想让它更像一个能上线的产品。这时候按checklist过一遍,比主观说一句帮我优化一下靠谱得多。
npx skills add --skill web-design-guidelines
GitHub:
4. planning-with-files
复杂任务最烦的是Claude做到一半,忘了自己在干嘛。
前面讨论过什么、为什么这么改、现在做到哪步、哪些坑已排除、下一步该干嘛,上下文一长,或者中途清空会话,它就像第二天刚入职的实习生,面带微笑但什么都不记得。
planning-with-files把计划、进度、发现、决策写进markdown文件。任务不再只活在聊天里,落到了项目文件上。
真实开发任务很少十分钟结束,经常拆成几轮做。只靠对话记忆,越做越散。有了planning-with-files,Claude可以从文件里继续接上,你也不用每次都从头解释。
claude plugin marketplace add OthmanAdi/planning-with-files
claude plugin install planning-with-files
@planning-with-files
GitHub:
5. skill-creator
用久了你会发现,别人的Skill再好,也不可能完全适配你的项目。
你们团队怎么写commit、怎么做code review、哪些目录不能乱动、哪些历史坑不能再踩、哪些代码风格是你一看就血压高的,每次都手动告诉 Claude,很烦。说实话,说多了它也未必记住。
skill-creator就是用来把经验沉淀成你自己的Skill。
它会引导你定义:什么时候触发、应该怎么做、输出什么格式、怎么测试效果。把一个可复用的工作流包装成真正的Skill。
Skills你一定会想要自己的。
claude plugin install skill-creator
GitHub:
6. MCP Builder
MCP这块我真建议别裸写。
你直接跟Claude说帮我写个MCP Server,它大概率能写出一个demo。demo能跑不代表能用。
真正麻烦的是边界,API怎么鉴权?token过期怎么办?rate limiting怎么处理?分页怎么设计?错误信息怎么返回?工具接口是按API endpoint 设计,还是按用户工作流设计?Claude裸写的时候很容易漏掉这些。
MCP Builder把构建过程拆成几个阶段:先理解API,再设计工具接口,再实现,再测试。
关键它会想这个MCP是给LLM用的,不是给人类调API用的。工具命名、参数schema、错误提示、测试方式,全要围绕LLM能不能稳定完成任务来设计。思路对了,后面才不容易返工。
想接公司内部API、第三方SaaS、数据库进Claude,MCP Builder必装。
claude plugin install mcp-builder
GitHub:
7. Webapp Testing
前端写完了,测试怎么办?
手动点来点去太慢,写Playwright脚本又太繁琐。最离谱的是,Claude 写完页面会很自信地说已完成。但你打开浏览器,按钮点不了,移动端错位,console还飘着红。
Webapp Testing把这个过程自动化了。
你告诉Claude要测什么场景,它自己用Playwright写脚本、启动浏览器、跑测试、截屏。有问题还会自己调试。除了写测试脚本,它还会处理本地服务启动、等待页面加载、检查 DOM、抓console log这些很碎但很烦的事情。
claude plugin install webapp-testing
GitHub:
8. code-review-and-quality
Claude写完代码后,最爱说一句已完成。
有没有引入新bug?结构变脏了没?性能有没有坑?安全边界破了没?测试真覆盖到了吗?它不一定主动看。
code-review-and-quality适合在每次改完代码后跑一下。从正确性、可读性、架构、安全、性能几个维度去 review。思路只看能不能跑还不够,要看这个diff配不配进主分支。
AI写代码很快。越快,越需要review。
尤其现在很多人让Claude一次性改十几个文件,没个质量关口,很容易功能好了,代码库成屎山。这个Skill能拦住一部分低级坑,也提醒Claude 别为了完成任务把结构搞烂。
npx skills add --skill code-review-and-quality
GitHub:
9. Claude Mem
Claude每次开新会话,都像新同事入职。
项目背景、技术选型、你讨厌的写法、之前踩过的坑、上次为什么这么设计,全要重新讲。讲一次还行,天天讲真的很崩溃。
Claude Mem解决的是长期记忆问题。
它会自动捕获Claude在开发过程里的操作、观察和技术决策,压缩成可检索的记忆,在后续会话里再注入回来。下次继续做项目时,Claude 不至于从零开始。它知道你修过什么、知道项目里的约定、也能查到过去的关键决策。
短平快demo可能感受不明显。一个项目做上几天,你就会发现,能记住上下文的 Claude 和每次失忆的 Claude,体验天差地别。
claude plugin marketplace add thedotmack/claude-mem
claude plugin install claude-mem
GitHub:
Docs:
10. Context7
Claude有一个毛病,一本正经地写旧 API。
框架都升级好几轮了,它还在用过时写法。尤其Next.js、Supabase、Prisma、Tailwind、Cloudflare Workers这种变化快的库,特别容易中招。代码写得很流畅,跑起来发现API变了。
Context7解决的是文档过期问题。
它把最新的、特定版本的官方文档和代码示例拉进上下文,让Claude不再只靠训练数据里的老记忆写代码。跟新框架配合效果尤其明显,写 Next.js middleware、Supabase Auth、Prisma查询、Tailwind新写法之前,先让Context7查一下当前文档,很多坑提前避开。
claude plugin marketplace add upstash/context7
claude plugin install context7-plugin
@context7-marketplace
Docs: Claude Plugin:
所以我现在的感受是Claude Code裸奔状态下它很强,也很野。
Skills的意义在于给它装上工程习惯:流程、审美、规划、测试、review、长期记忆、最新文档。这些东西组合起来,才像一个真正能进项目组干活的同事。
一个天才但失控的实习生和一套有约束、有规范的工作流,差别就在这些 Skills上。
兄弟们还有什么好用的 Skills?评论区分享一下,我去抄作业。