🤖 从"裸奔"到"全副武装"：我的 Claude Code 技能升级之路

米小虾
3 阅读4分钟

🤖 从"裸奔"到"全副武装"：我的 Claude Code 技能升级之路

写在前面：用了 Claude Code 三个月，从「只会补代码」到「能搞定全流程」，这 32 个 Skills 和 8 个 MCP 功不可没。

一、为什么你的 Claude Code 总是"差点意思"？

相信很多开发者和我一样，刚开始用 Claude Code 时总觉得它"不够懂我"：

  • 让它写个 Dashboard，生成的界面丑到没法用
  • 想让它操作本地文件，却不知道从何配置
  • 会话一清空，之前的项目细节全忘了，每次都要重新铺垫上下文

问题的根源在于：你只给 Claude 装了"大脑"，没给它装"手脚"和"专业知识"。

二、Skills vs MCP：一对黄金搭档

在深入介绍之前，先搞清楚这两个核心概念的区别：

维度SkillsMCP 服务器
本质封装好的提示词 / 标准化工作流本地运行的工具 / API 服务
作用让 Claude "更懂怎么干"让 Claude "真的能去干"
安装npx skills add <skill> -y -g修改 mcp.json 配置文件
运行位置Claude 大模型内部本地独立进程

一句话总结：Skills 让 Claude 更聪明，MCP 让 Claude 更能干。

三、我的必装 Skills 清单（精选 10 个）

🔧 必装入口类

1. find-skills - 技能发现神器

npx skills add find-skills -y -g

相当于给 Claude 装了个「应用商店」，找技能再也不用去网页翻了。

🎨 前端开发类

2. frontend-design - 前端界面设计神器 解决痛点：自己写 Dashboard 丑到没法用，AI 5 分钟生成的效果比你折腾 1 天还好。

3. ui-component - UI 组件生成器 一句话生成 React/Vue 组件，支持 Tailwind CSS。

📝 内容创作类

4. readme-writer - README 自动生成 项目完成后，自动生成专业的 README.md。

5. code-reviewer - 代码审查专家 提交代码前自动检查，发现潜在问题。

🧪 测试调试类

6. test-generator - 测试用例生成 根据代码自动生成单元测试。

7. debug-assistant - 调试助手 遇到 Bug 时，帮你分析日志、定位问题。

📊 项目管理类

8. pr-writer - PR 描述生成 自动生成 Pull Request 描述，包含改动摘要。

9. commit-message - 提交信息优化 把你的「fix bug」改成专业的 Conventional Commits。

10. doc-generator - 文档自动生成 从代码注释生成 API 文档。

四、我的核心 MCP 服务器配置

MCP 服务器让 Claude 能够：

  • 访问本地文件系统
  • 操作浏览器
  • 调用外部 API
  • 联动第三方工具

必装 MCP 推荐

1. filesystem - 文件系统访问

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/your/project"]
    }
  }
}

2. fetch - HTTP 请求 让 Claude 能直接调用 REST API。

3. playwright - 浏览器自动化 自动操作浏览器、截图、测试网页。

4. sqlite - 数据库操作 直接查询本地 SQLite 数据库。

五、实战案例：从 0 到 1 搭建一个项目

用这套组合，我能在 30 分钟内完成：

  1. 需求分析 - 用 project-planner Skill 拆解需求
  2. 技术选型 - 用 tech-stack-advisor 推荐技术栈
  3. 代码生成 - 用 frontend-design + ui-component 生成界面
  4. 文档编写 - 用 readme-writer 自动生成 README
  5. 代码审查 - 用 code-reviewer 检查质量
  6. 测试覆盖 - 用 test-generator 生成测试用例

全程几乎不需要手动编写重复代码。

六、安装技巧与避坑指南

⚠️ 关键提醒

  1. 安装技能必须加 -g 全局参数，否则 Claude Code 无法识别
  2. 安装完成后必须重启 Claude Code 才能生效
  3. MCP 服务器需要 Node.js 环境，确保已安装

🔍 查看已安装技能

# 命令行查看
ls ~/.claude/skills/

# Claude Code 内查看
# 输入 / 即可唤起完整技能列表

七、写在最后

Claude Code 不是「代码补全工具」，而是「开发搭档」。给它装上合适的 Skills 和 MCP，它能帮你搞定从需求分析到代码部署的全流程。

不要裸用 Claude Code，那是对它的浪费。

本文基于《别再裸用 Claude Code 了！32 个亲测Skills + 8 个 MCP》整理，加入了个人的实战经验和避坑指南。

#ClaudeCode #AI工具 #开发效率 #Skills #MCP #前端开发 #AI编程助手

avatar
文章
阅读
粉丝