如果你在用 Claude Code 但不装 Skills，那体验基本是打了个大折扣。
并非它不够聪明，而是它太像一个刚进项目组的天才实习生——脑子快，手也快。但如果你不告诉它流程、审美、如何查文档、怎么做测试、怎么保留记忆，它就很容易写出那种“乍一看很厉害，仔细一读让人想报警”的代码。
今天来分享 10 个真正能提升开发体验的 Claude Code Skills。
Superpowers：别让它一上来就写代码
Claude Code 最容易犯的毛病，就是需求还没问清楚、项目结构还没摸透，它就开始激情输出了。更可怕的是，它写得还挺像那么回事，等你 Review 的时候才发现，方向从第一步就偏了。
Superpowers 就是专门治这个的。
它会把 Claude 拉回正常的工程流程：先澄清需求，再拆设计，再写计划，再执行。过程中还会强调 TDD、系统性调试、代码审查、验证完成等习惯。
说白了，它不是让 Claude 变得更会写代码，而是让它别那么爱莽。
claude plugin install superpowers@claude-plugins-official
GitHub: https://github.com/obra/superpowers
ui-ux-pro-max：告别“AI生成感”拉满的页面
做前端的人应该都懂，AI 写页面最可怕的不是丑，是它觉得自己写得很好看。
紫色渐变、大圆角卡片、满屏玻璃拟态、所有按钮都像 SaaS 官网——三件套一上，味儿就来了。ui-ux-pro-max 解决的就是这个问题。
它会给 Claude 补一层 UI/UX 设计常识，比如配色、字体、布局、图表、交互、设计风格这些。你让它写页面的时候，它不会只会掏出那套默认的 AI 模板，而是更像一个见过真实产品的人。
这个 Skill 特别适合做后台、官网、工具类产品、数据看板。不是说装了它 Claude 就变设计师了，但至少不会每次都给你来一套生成痕迹过重的作品。
claude plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
claude plugin install ui-ux-pro-max@ui-ux-pro-max-skill
GitHub: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
web-design-guidelines：前端上线前的检查员
有时候页面不是不能用，而是细节很糙——按钮层级乱、间距不舒服、移动端挤成一团、Hover 状态缺失、表单错误提示也很随缘。你说它错吧，它也能跑；你说它对吧，又总觉得哪里不对劲。
web-design-guidelines 更像一个前端上线前的检查员。
它会按 Web 设计规范去审 UI，覆盖可访问性、响应式、焦点状态、表单、动画、图片、性能、导航状态、暗黑模式、触摸交互这些细节。
很多时候你让 Claude“帮我优化一下页面”，它会改得很主观。但你让它按 web-design-guidelines 审一遍，它就更像是在按 Checklist 查问题。这个 Skill 非常适合放在前端开发的后半段：页面已经写出来了，但你想让它更像一个能上线的产品。
npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines
GitHub: https://github.com/vercel-labs/agent-skills
planning-with-files：把计划和进度写进文件里
复杂任务最烦的地方，不是 Claude 做不出来，而是做到一半，它忘了自己在干嘛。前面讨论过什么，为什么这么改，现在做到哪一步，哪些坑已经排除了，下一步该干嘛。只要上下文一长，或者你中途清空会话，它就像第二天刚入职一样。
planning-with-files 解决的就是 Claude 的“短期记忆不靠谱”问题。
它会把计划、进度、发现、决策写进 Markdown 文件里。这样任务不再只活在聊天上下文里，而是落到了项目文件中。这点很关键。
因为真实开发任务经常不是 10 分钟结束，而是要拆成几轮做。只靠对话记忆，很容易越做越散。有了它，Claude 就可以从文件里继续接上，不至于每次都从头解释。
claude plugin marketplace add OthmanAdi/planning-with-files
claude plugin install planning-with-files@planning-with-files
GitHub: https://github.com/OthmanAdi/planning-with-files
skill-creator：把团队经验沉淀成你的专属技能
用 Claude Code 久了，你会发现一个问题：别人的 Skill 再好，也不可能完全适配你的项目。比如你们团队怎么写 Commit，怎么做 Code Review，哪些目录不能乱动，哪些历史坑不能再踩，哪些代码风格是你非常讨厌的。这些东西每次都手动告诉 Claude 很烦，而且你说多了，它也不一定每次都记住。
skill-creator 就是用来把这些经验沉淀成你自己的 Skill。
它会引导你定义这个 Skill 什么时候触发、应该怎么做、输出什么格式、怎么测试效果。不是简单写一段提示词，而是帮你把一个可复用的工作流包装成真正的 Skill。
刚开始你是装别人的 Skills，用久了之后，你一定会想要自己的 Skills。比如在云栈社区这样的开发者论坛上，经常能看到大家分享各自沉淀下来的实用工作流。
claude plugin install skill-creator
GitHub: https://github.com/anthropics/skills/tree/main/skills/skill-creator
MCP Builder：写 MCP Server 别裸写
MCP 这块真不建议裸写。你直接跟 Claude 说“帮我写个 MCP Server”，它大概率能写出一个 Demo。但 Demo 能跑，不代表能用。
真正麻烦的是那些边界：API 怎么鉴权？Token 过期怎么办？Rate Limiting 怎么处理？分页怎么设计？错误信息怎么返回？工具接口是按 API Endpoint 设计，还是按用户工作流设计？这些问题，Claude 裸写的时候很容易漏。
MCP Builder 把构建过程拆成几个阶段：先理解 API，再设计工具接口，再实现，再测试。
这个体验比直接让 Claude“写一个 MCP Server”好很多。因为它不会一上来就冲代码，而是会先想：这个 MCP 到底是给 LLM 用的，不是给人类调 API 用的。工具命名、参数 Schema、错误提示、测试方式，都要围绕“LLM 能不能稳定完成任务”来设计。
如果你想把公司内部 API、第三方 SaaS、数据库、业务系统接进 Claude，MCP Builder 是必装。
claude plugin install mcp-builder
GitHub: https://github.com/anthropics/skills/tree/main/skills/mcp-builder
Webapp Testing：自动化前端测试与调试
前端写完了，测试怎么办？手动点来点去太慢，写 Playwright 脚本又太繁琐。最离谱的是，有时候 Claude 写完页面后会很自信地说“已完成”，但你一打开浏览器，按钮点不了，移动端错位，Console 还飘着红。
Webapp Testing 把这个过程自动化了。
你告诉 Claude 要测什么场景，它自己用 Playwright 写脚本、启动浏览器、跑测试、截屏，有问题还会自己调试。它不只是“写测试脚本”这么简单，还会处理本地服务启动、等待页面加载、检查 DOM、抓 Console Log、截图验证这些很碎但很烦的事情。
这个 Skill 对前端项目特别有用，因为它把 AI 编程里最缺的一环补上了：不是写完就算完，而是真的打开浏览器跑一遍，是补充软件测试环节中自动化验证的重要手段。
claude plugin install webapp-testing
GitHub: https://github.com/anthropics/skills/tree/main/skills/webapp-testing
code-review-and-quality：代码写完了不等于写好了
Claude 写完代码后，最爱说一句：“已完成”。但有没有引入新 Bug？结构是不是变脏了？性能有没有坑？安全边界有没有破？测试是不是真的覆盖到了？它不一定主动看。
code-review-and-quality 适合在每次改完代码后跑一下。
它会从正确性、可读性、架构、安全、性能几个维度去 Review 代码。这个思路很像一个比较严格的工程师，不是只看能不能跑，而是看这个 Diff 能不能进主分支。
AI 写代码很快，但越快越需要 Review。尤其是现在很多人让 Claude 一次改十几个文件，如果没有一个质量关口，很容易出现“功能是好了，代码库脏了”的问题。这个 Skill 的价值就在于，它能帮你拦住一部分低级坑，也能提醒 Claude 别为了完成任务把结构搞烂。
npx skills add https://github.com/addyosmani/agent-skills --skill code-review-and-quality
GitHub: https://github.com/addyosmani/agent-skills/blob/main/skills/code-review-and-quality/SKILL.md
Claude Mem：给 Claude 装上长期记忆
Claude 还有一个很现实的问题：每次开新会话，都像新同事入职。项目背景、技术选型、你讨厌的写法、之前踩过的坑、上次为什么这么设计，全要重新讲。讲一次还行，天天讲就很崩溃。
Claude Mem 解决的是长期记忆问题。
它会自动捕获 Claude 在开发过程里的操作、观察和技术决策，然后压缩成可检索的记忆，在后续会话里再注入回来。这样下次你继续做项目时，Claude 不至于完全从零开始。它知道你之前修过什么，知道项目里有哪些约定，也能查到过去的关键决策。
这东西对长期项目很有用。短平快 Demo 可能感受不明显，但一个项目做上几天，你就会发现，能记住上下文的 Claude 和每次失忆的 Claude，完全是两种体验。
claude plugin marketplace add thedotmack/claude-mem
claude plugin install claude-mem
GitHub: https://github.com/thedotmack/claude-mem
Docs: https://docs.claude-mem.ai/
Context7：彻底告别过期的 API 写法
Claude 最烦人的一个毛病，是喜欢一本正经地写旧 API。框架都升级好几轮了，它还在用过时写法。尤其是 Next.js、Supabase、Prisma、Tailwind、Cloudflare Workers 这种变化快的库，特别容易中招。你让它写代码，它写得很流畅，但一跑，发现 API 早变了。
Context7 解决的是“文档过期”问题。
它会把最新的、特定版本的官方文档和代码示例拉进上下文，让 Claude 不再只靠训练数据里的老记忆写代码，帮你减少在查阅技术文档过程中因版本不一致而产生的各种坑。
这个 Skill 我觉得特别适合跟新框架一起用。比如你让 Claude 写 Next.js Middleware、Supabase Auth、Prisma 查询、Tailwind 新写法时，直接让它用 Context7 查一下当前文档，很多坑就能提前避开。AI 写代码最怕的不是不会写，而是它用过期知识写得特别自信。
claude plugin marketplace add upstash/context7
claude plugin install context7-plugin@context7-marketplace
Docs: https://context7.com/docs/clients/claude-code
Claude Plugin: https://claude.com/plugins/context7
结尾
所以我现在越来越觉得，Claude Code 真不是装上就完事了。
裸奔状态下，它很强，但也很野。Skills 的意义，不是让 Claude 突然变聪明，而是让它少一点失控，多一点工程习惯。流程、审美、规划、测试、Review、长期记忆、最新文档——这些东西单独看都不性感，但组合起来，才像一个真正能进项目组干活的同事。
你们还有什么好用的 Skills 推荐？欢迎去云栈社区一起分享，我也去抄抄作业。
发表于 1 小时前
|
查看: 3|
回复: 0
