不同编程场景,该用哪些 Claude Code Skills?(附安装指南)

为什么需要场景化选择 Skills？

最近 Claude Code 的 Skills 功能火了。

打开社区一看，2300+ 个 Skills 目录，600+ 精选合集，看得人眼花缭乱。

很多人的第一反应是：全装上！反正不占地方。

结果装了一堆，真正用到的没几个。每次 AI 自动触发 Skill 的时候，还不知道它到底在用哪个。

其实，Skills 不是越多越好。关键是要选对。

就像工具箱，木工不需要扳手，电工不需要锯子。编程也一样，不同场景需要不同的 Skills。

今天就来聊聊：5 个常见编程场景，该用哪些 Skills？怎么装？怎么用？

场景1：从零开始做前端项目

适合谁？

• • 要做新网站、落地页、组件库
• • 想让 AI 生成的界面不那么"AI 味"
• • 用 GPT、GLM、M2 等审美一般的模型

推荐 Skills

frontend-design + web-artifacts-builder

这两个是黄金组合。

frontend-design 负责提升审美能力。它会告诉 AI：

• • 别用 Inter 字体（太烂大街）
• • 别搞紫色渐变（太 AI）
• • 要有动效、质感、情感化设计
• • 要大胆、有个性

web-artifacts-builder 负责快速搭建。它支持：

• • React + Tailwind CSS
• • shadcn/ui 组件
• • 状态管理和路由
• • 多组件协同

效果对比

不用 Skill：布局平庸，没动效，右边还有个奇怪的圆圈（不工作）。

用了 Skill：字体好看了，动画也有了，整体质感和排版完全不一样。

这不是我吹的，是真实对比。我之前专门测试过，用 GPT-5.2-Codex 重新设计首页，效果差距肉眼可见。

安装方法

Claude Code：

npx skills-installer install @anthropics/claude-code/frontend-design --client claude-codenpx skills-installer install @anthropics/claude-code/web-artifacts-builder --client claude-code

Codex：

npx skills-installer install @anthropics/claude-code/frontend-design --client codexnpx skills-installer install @anthropics/claude-code/web-artifacts-builder --client codex

Cursor：

npx skills-installer install @anthropics/claude-code/frontend-design --local --client cursornpx skills-installer install @anthropics/claude-code/web-artifacts-builder --local --client cursor

使用技巧

• • 新项目不加约束，Skill 会快速生成纯 HTML（不装依赖）
• • 老项目或指定技术栈，它会按你要求来
• • 可以在 frontend-design 基础上，加入你的品牌色、字体、圆角等，定制成自己的 Skill

场景2：复杂项目重构

适合谁？

• • 要重构大型项目
• • 任务步骤多，周期长
• • 担心 AI 聊着聊着就跑偏了

推荐 Skill

planning-with-files

这个 Skill 来头不小。它的灵感来自 Manus（被 Meta 20 亿美元收购的那个）。

简单说，就是用 Markdown 文件当"工作记忆"。

它解决什么问题？

AI 的记忆有限。聊到 50 次对话之后，它就开始忘最初的目标了。

你说"帮我重构这个模块"，它开始很认真。聊了半天，突然开始重构另一个模块。你说"不对啊"，它说"哦对不起"，然后又跑偏。

planning-with-files 会自动创建：

• • task_plan.md：跟踪进度
• • notes.md：存储研究结果
• • 每个阶段更新进度
• • 记录错误和决策

这样，50 次对话之后，目标不漂移，错误不重复，上下文不溢出。

安装方法

# 手动安装（这个 Skill 在社区，不在官方仓库）cd ~/.claude/skillsgit clone https://github.com/OthmanAdi/planning-with-files.git

使用技巧

• • 任务开始时，明确告诉 AI："用 planning-with-files skill 管理这个项目"
• • 定期看看 task_plan.md，检查进度
• • AI 跑偏了？直接指向 task_plan.md 里的目标

场景3：自动化测试

适合谁？

• • 要测试 Web 应用
• • 要验证 UI 功能
• • 要做浏览器自动化

推荐 Skills

webapp-testing + playwright-skill

这两个都是测试利器。

webapp-testing 是官方提供的，专门用来测试本地 Web 应用。它可以：

• • 验证前端功能
• • 调试 UI 行为
• • 捕获浏览器截图
• • 查看浏览器日志

playwright-skill 更强大，支持完整的浏览器自动化。它可以：

• • 自动检测开发服务器
• • 写测试脚本（保存到 /tmp）
• • 测试页面、填表单、截图
• • 检查响应式设计、验证 UX
• • 测试登录流程、检查链接

什么时候用？

• • 你做了个新功能，想快速测一遍
• • 要测不同浏览器的兼容性
• • 做回归测试，确保改动没破坏旧功能

安装方法

# webapp-testing（官方）npx skills-installer install @anthropics/claude-code/webapp-testing --client claude-code# playwright-skill（社区）npx skills-installer install playwright-skill --client claude-code

使用技巧

• • 明确告诉 AI 要测什么功能
• • 让 AI 生成测试脚本，可以复用
• • 测试失败时，让 AI 分析截图和日志

场景4：文档和报表处理

适合谁？

• • 要批量处理 PDF 表单
• • 要生成 Word 文档
• • 要分析 Excel 数据

推荐 Skills

pdf + docx + xlsx

这三个是办公三件套。

pdf 可以：

• • 提取文本和表格
• • 创建新 PDF
• • 合并/拆分文档
• • 填写 PDF 表单

docx 可以：

• • 创建新文档
• • 修改内容
• • 处理跟踪修改
• • 添加评论

xlsx 可以：

• • 创建电子表格
• • 读取和分析数据
• • 处理公式和格式
• • 数据可视化

什么时候用？

• • 有 100 个 PDF 表单要填
• • 要生成周报、月报
• • 要分析一堆 Excel 数据

安装方法

# 官方 Skillsnpx skills-installer install @anthropics/claude-code/pdf --client claude-codenpx skills-installer install @anthropics/claude-code/docx --client claude-codenpx skills-installer install @anthropics/claude-code/xlsx --client claude-code

使用技巧

• • 批量处理时，先让 AI 处理一个样本，确认没问题再批量
• • 复杂格式的文档，先给 AI 看个模板
• • 数据分析时，明确说你要什么结果（图表、统计、趋势等）

场景5：创建自定义 Skill

适合谁？

• • 团队协作，想统一工作流
• • 有特定的编码规范
• • 想把自己的经验固化成 Skill

推荐 Skill

skill-creator

这是官方提供的 Skill 创建指南。它会教你：

• • 如何定义 Skill 的目标
• • 如何编写清晰的指令
• • 如何测试和迭代
• • 如何分享到社区

为什么要自定义？

官方和社区的 Skills 挺好，但不一定完全适合你。

比如：

• • 团队有特定的代码风格
• • 项目有特定的架构模式
• • 有一套独特的工作流程

这时候，自己写一个更合适。

创建步骤

1. 1. 明确目标：解决什么问题？适用什么场景？
2. 2. 编写指令：用结构化格式（标题、列表、表格）
3. 3. 测试迭代：在实际项目中测试，根据效果调整
4. 4. 分享社区：发布到 GitHub，提交到 Skill 目录

安装方法

npx skills-installer install @anthropics/claude-code/skill-creator --client claude-code

使用技巧

• • 从简单的 Skill 开始，不要一上来就搞复杂的
• • 多看看官方 Skills 的写法，学习最佳实践
• • 利用 Claude Code 2.1 的热重载功能，快速迭代

如何选择和组合 Skills？

最后，几个建议：

1. 按需装，别贪多

Skills 不是越多越好。装太多，AI 可能搞混，不知道该用哪个。

先装最常用的，用熟了再装别的。

2. 可以组合用

Skills 不互斥，可以组合。

比如做前端项目，frontend-design + web-artifacts-builder + webapp-testing 一起上。

3. 记得更新

Skills 会更新，尤其官方的。

隔段时间看看，有没有新功能。

4. 自己动手

现有的不够用？自己写一个。

Claude Code 2.1 支持热重载，改完立即生效，体验很好。

Skills 是工具，不是装饰品。选对了，效率翻倍；选错了，反而添乱。

按场景选，按需装，用熟了再扩展。

去试试吧！

参考资料：

• • Claude Code 官方文档：https://code.claude.com/docs/en/overview
• • Skills 目录：https://github.com/anthropics/claude-code