MCP 实战案例

Practical MCP Use Cases with Claude Code

理论知识固然重要，但真正的价值在于实践。本章通过四个完整的实战案例，展示如何将 MCP 服务器与 Claude Code 结合使用，解决真实的开发场景问题。每个案例都包含完整的配置步骤、提示词示例和预期输出。

案例一：Exa + Claude Code 深度研究

Case 1: Deep Research with Exa and Claude Code

场景描述

Scenario

你的团队正在评估是否将项目从 Webpack 迁移到 Vite，需要一份全面的技术调研报告，涵盖性能对比、迁移风险、社区案例等方面。

第一步：配置 Exa MCP

Step 1: Configure Exa MCP

bash

# 注册 Exa 账号并获取 API Key
# https://exa.ai → Dashboard → API Keys

# 添加 Exa MCP 服务器
claude mcp add -e EXA_API_KEY=your-exa-api-key exa -- npx -y exa-mcp-server

# 验证配置
claude mcp list

第二步：设计研究流程

Step 2: Design the Research Workflow

深度研究的典型流程如下：

搜索阶段          阅读阶段          分析阶段         输出阶段
┌──────┐       ┌──────┐       ┌──────┐       ┌──────┐
│ Exa  │──────>│ Exa  │──────>│Claude│──────>│ HTML │
│search│       │get   │       │分析  │       │报告  │
│      │       │contents      │整合  │       │      │
└──────┘       └──────┘       └──────┘       └──────┘
  多轮搜索       抓取正文        交叉对比        格式化输出
  关键词扩展     提取数据        提炼观点        可视化图表

第三步：执行研究（完整提示词）

Step 3: Execute Research (Full Prompt)

请帮我完成一份关于"Webpack 迁移到 Vite"的深度技术调研报告。

研究步骤：

1. **搜索阶段**：
   - 搜索 "webpack to vite migration guide 2025"
   - 搜索 "vite vs webpack performance benchmark"
   - 搜索 "webpack to vite migration issues problems"
   - 搜索 "large scale project vite migration case study"

2. **阅读阶段**：
   - 获取搜索结果中最相关的 8-10 篇文章的完整内容
   - 重点关注：性能数据、迁移步骤、常见问题、真实案例

3. **分析阶段**：
   - 对比 Webpack 和 Vite 在不同维度的表现
   - 整理迁移过程中的常见坑点和解决方案
   - 汇总真实项目的迁移经验

4. **输出阶段**：
   - 生成一份 HTML 格式的研究报告
   - 包含：执行摘要、详细分析、数据对比表格、风险评估、建议
   - 保存到 ./reports/webpack-to-vite-research.html

预期的交互过程

Expected Interaction Flow

Claude: 我将开始进行深度研究。首先搜索相关资料...

[调用 exa.search] query="webpack to vite migration guide 2025"
→ 返回 10 条结果

[调用 exa.search] query="vite vs webpack performance benchmark"
→ 返回 10 条结果

[调用 exa.search] query="webpack to vite migration issues"
→ 返回 10 条结果

[调用 exa.get_contents] urls=[前三次搜索中最相关的 8 个 URL]
→ 返回完整文章内容

Claude: 根据研究结果，我现在生成报告...

[生成 HTML 报告文件]

Claude: 报告已生成。以下是主要发现：
1. Vite 的冷启动速度比 Webpack 快 10-100 倍...
2. 大型项目迁移平均耗时 2-4 周...
3. 主要风险点包括...

报告结构示例

Report Structure Example

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Webpack 迁移到 Vite 技术调研报告</title>
    <style>
        body { font-family: -apple-system, sans-serif; max-width: 900px; margin: 0 auto; }
        .summary { background: #f0f9ff; padding: 20px; border-radius: 8px; }
        table { border-collapse: collapse; width: 100%; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        .risk-high { color: #dc2626; }
        .risk-low { color: #16a34a; }
    </style>
</head>
<body>
    <h1>Webpack → Vite 迁移调研报告</h1>
    <div class="summary">
        <h2>执行摘要</h2>
        <p>基于对 X 篇文章和 Y 个真实案例的分析...</p>
    </div>
    <h2>性能对比</h2>
    <table>
        <tr><th>指标</th><th>Webpack 5</th><th>Vite 6</th><th>提升幅度</th></tr>
        <tr><td>冷启动</td><td>30-60s</td><td>0.3-1s</td><td>30-100x</td></tr>
        <tr><td>HMR</td><td>1-5s</td><td>~50ms</td><td>20-100x</td></tr>
        <tr><td>生产构建</td><td>基准</td><td>相当或略快</td><td>1-2x</td></tr>
    </table>
    <!-- 更多内容... -->
</body>
</html>

案例二：Figma 设计稿转代码

Case 2: Figma Design to Code

场景描述

Scenario

设计师在 Figma 中完成了一个新的用户仪表盘页面设计，你需要将其快速转化为 React + Tailwind CSS 组件代码。

第一步：配置 Figma MCP

Step 1: Configure Figma MCP

bash

# 获取 Figma API Key
# Figma → 头像 → Settings → Personal access tokens → Create new token

# 添加 Framelink Figma MCP
claude mcp add -e FIGMA_API_KEY=figd_xxxxx figma -- \
  npx -y @anthropic/framelink-figma-mcp

# 验证
claude mcp list

第二步：准备工作

Step 2: Preparation

在开始之前，确保：

你有 Figma 文件的访问权限
设计稿使用了清晰的组件命名和层级结构
项目已配置好 React + Tailwind CSS

第三步：执行转换（完整提示词）

Step 3: Execute Conversion (Full Prompt)

我需要将 Figma 设计稿转换为 React 组件。

Figma 链接：https://www.figma.com/design/ABC123/Dashboard-Design

请按以下步骤操作：

1. 使用 Figma MCP 获取设计稿信息
2. 分析页面的组件结构和布局
3. 生成以下文件：
   - src/components/Dashboard/DashboardHeader.tsx
   - src/components/Dashboard/StatCard.tsx
   - src/components/Dashboard/ActivityChart.tsx
   - src/components/Dashboard/RecentOrders.tsx
   - src/components/Dashboard/index.tsx（页面组装）

技术要求：
- 使用 React + TypeScript
- 使用 Tailwind CSS（不使用自定义 CSS）
- 响应式设计（移动端适配）
- 组件接收 props，具有良好的类型定义

预期的生成代码

Expected Generated Code

tsx

// src/components/Dashboard/StatCard.tsx
interface StatCardProps {
  title: string;
  value: string | number;
  change: number;
  icon: React.ReactNode;
}

export function StatCard({ title, value, change, icon }: StatCardProps) {
  const isPositive = change >= 0;

  return (
    <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
      <div className="flex items-center justify-between mb-4">
        <span className="text-sm font-medium text-gray-500">{title}</span>
        <div className="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center">
          {icon}
        </div>
      </div>
      <div className="flex items-end gap-2">
        <span className="text-2xl font-bold text-gray-900">{value}</span>
        <span
          className={`text-sm font-medium ${
            isPositive ? "text-green-600" : "text-red-600"
          }`}
        >
          {isPositive ? "+" : ""}{change}%
        </span>
      </div>
    </div>
  );
}

tsx

// src/components/Dashboard/index.tsx
import { DashboardHeader } from "./DashboardHeader";
import { StatCard } from "./StatCard";
import { ActivityChart } from "./ActivityChart";
import { RecentOrders } from "./RecentOrders";
import {
  CurrencyDollarIcon,
  UsersIcon,
  ShoppingCartIcon,
  ChartBarIcon,
} from "@heroicons/react/24/outline";

export function Dashboard() {
  return (
    <div className="min-h-screen bg-gray-50 p-6">
      <DashboardHeader />

      {/* 统计卡片区域 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <StatCard
          title="总收入"
          value="¥128,430"
          change={12.5}
          icon={<CurrencyDollarIcon className="w-5 h-5 text-blue-600" />}
        />
        <StatCard
          title="活跃用户"
          value="2,847"
          change={8.2}
          icon={<UsersIcon className="w-5 h-5 text-blue-600" />}
        />
        <StatCard
          title="订单数"
          value="1,234"
          change={-3.1}
          icon={<ShoppingCartIcon className="w-5 h-5 text-blue-600" />}
        />
        <StatCard
          title="转化率"
          value="3.24%"
          change={1.8}
          icon={<ChartBarIcon className="w-5 h-5 text-blue-600" />}
        />
      </div>

      {/* 图表和订单区域 */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2">
          <ActivityChart />
        </div>
        <div>
          <RecentOrders />
        </div>
      </div>
    </div>
  );
}

设计转代码的最佳实践

Best Practices for Design-to-Code

实践	说明
组件拆分	按功能模块拆分，不超过 200 行/文件
命名一致	组件命名与 Figma 图层名称保持一致
响应式	始终考虑移动端适配
类型安全	为所有 props 定义 TypeScript 接口
设计令牌	颜色、间距等使用 Tailwind 的标准值

案例三：数据库查询助手

Case 3: Database Query Assistant

场景描述

Scenario

你需要对一个电商数据库进行多维度分析，包括销售趋势、用户行为、库存状况等。通过 PostgreSQL MCP，你可以用自然语言与数据库对话。

第一步：配置 PostgreSQL MCP

Step 1: Configure PostgreSQL MCP

bash

# 推荐使用只读账号连接
claude mcp add postgres -- \
  npx -y @anthropic/mcp-server-postgres \
  "postgresql://analyst:readonly_pass@localhost:5432/ecommerce"

# 验证连接
claude mcp list

第二步：了解数据库结构

Step 2: Understand Database Schema

请先查看数据库中有哪些表，
然后查看每个表的结构（字段、类型、注释），
最后画出主要表之间的关系图。

Claude 会自动调用 MCP 工具获取 schema 信息：

sql

-- Claude 自动生成的查询
SELECT table_name, column_name, data_type, column_default, is_nullable
FROM information_schema.columns
WHERE table_schema = 'public'
ORDER BY table_name, ordinal_position;

预期输出的表关系图：

┌──────────┐     ┌──────────────┐     ┌──────────┐
│  users   │────<│   orders     │>────│ products │
│          │     │              │     │          │
│ id       │     │ id           │     │ id       │
│ name     │     │ user_id (FK) │     │ name     │
│ email    │     │ total_amount │     │ price    │
│ region   │     │ status       │     │ stock    │
│ created  │     │ created_at   │     │ category │
└──────────┘     └──────────────┘     └──────────┘
                        │
                        │
                 ┌──────────────┐
                 │ order_items  │
                 │              │
                 │ order_id(FK) │
                 │ product_id   │
                 │ quantity     │
                 │ unit_price   │
                 └──────────────┘

第三步：自然语言数据分析

Step 3: Natural Language Data Analysis

以下是一系列自然语言查询和 Claude 自动生成的 SQL：

查询 1：月度销售趋势

请查询最近 12 个月的月度销售额趋势，
包含订单数、总金额、平均客单价。

sql

-- Claude 自动生成
SELECT
    DATE_TRUNC('month', created_at) AS month,
    COUNT(*) AS order_count,
    SUM(total_amount) AS total_revenue,
    ROUND(AVG(total_amount), 2) AS avg_order_value
FROM orders
WHERE created_at >= CURRENT_DATE - INTERVAL '12 months'
    AND status != 'cancelled'
GROUP BY DATE_TRUNC('month', created_at)
ORDER BY month;

查询 2：用户留存分析

分析用户的月度留存率——
即每个月新注册的用户中，有多少比例在次月仍有下单。

sql

-- Claude 自动生成
WITH cohort AS (
    SELECT
        u.id AS user_id,
        DATE_TRUNC('month', u.created_at) AS cohort_month
    FROM users u
),
activity AS (
    SELECT
        o.user_id,
        DATE_TRUNC('month', o.created_at) AS activity_month
    FROM orders o
    WHERE o.status != 'cancelled'
)
SELECT
    c.cohort_month,
    COUNT(DISTINCT c.user_id) AS cohort_size,
    COUNT(DISTINCT CASE
        WHEN a.activity_month = c.cohort_month + INTERVAL '1 month'
        THEN c.user_id
    END) AS retained_users,
    ROUND(
        COUNT(DISTINCT CASE
            WHEN a.activity_month = c.cohort_month + INTERVAL '1 month'
            THEN c.user_id
        END)::NUMERIC / COUNT(DISTINCT c.user_id) * 100, 1
    ) AS retention_rate_pct
FROM cohort c
LEFT JOIN activity a ON c.user_id = a.user_id
GROUP BY c.cohort_month
ORDER BY c.cohort_month;

查询 3：库存预警

找出库存量低于 30 天平均日销量的商品，
按照紧急程度排序，生成补货建议。

sql

-- Claude 自动生成
WITH daily_sales AS (
    SELECT
        oi.product_id,
        SUM(oi.quantity)::NUMERIC / 30 AS avg_daily_sales
    FROM order_items oi
    JOIN orders o ON oi.order_id = o.id
    WHERE o.created_at >= CURRENT_DATE - INTERVAL '30 days'
        AND o.status != 'cancelled'
    GROUP BY oi.product_id
)
SELECT
    p.id,
    p.name,
    p.category,
    p.stock AS current_stock,
    ROUND(ds.avg_daily_sales, 1) AS avg_daily_sales,
    CASE
        WHEN ds.avg_daily_sales > 0
        THEN ROUND(p.stock / ds.avg_daily_sales, 0)
        ELSE NULL
    END AS days_until_stockout,
    CASE
        WHEN p.stock / NULLIF(ds.avg_daily_sales, 0) < 7 THEN '紧急'
        WHEN p.stock / NULLIF(ds.avg_daily_sales, 0) < 14 THEN '警告'
        WHEN p.stock / NULLIF(ds.avg_daily_sales, 0) < 30 THEN '关注'
    END AS urgency
FROM products p
JOIN daily_sales ds ON p.id = ds.product_id
WHERE p.stock < ds.avg_daily_sales * 30
ORDER BY days_until_stockout ASC NULLS LAST;

安全注意事项

Security Considerations

风险	对策
SQL 注入	MCP 服务器使用参数化查询
数据泄露	使用只读数据库账号
性能影响	设置查询超时限制
敏感数据	生产库使用脱敏视图

案例四：GitHub 自动化

Case 4: GitHub Automation

场景描述

Scenario

作为项目维护者，你需要定期处理大量 Issue，生成 PR 描述，以及自动化一些日常的代码管理任务。

第一步：配置 GitHub MCP

Step 1: Configure GitHub MCP

bash

# 创建 Fine-grained Personal Access Token
# GitHub → Settings → Developer settings → Personal access tokens → Fine-grained tokens
# 权限：Issues (Read/Write), Pull requests (Read/Write), Contents (Read)

claude mcp add -e GITHUB_TOKEN=github_pat_xxxxx github -- \
  npx -y @anthropic/github-mcp-server

第二步：批量处理 Issue

Step 2: Batch Process Issues

请帮我处理 my-org/my-project 仓库的 Issue：

1. 获取所有标记为 "needs-triage" 的 Issue
2. 阅读每个 Issue 的标题和描述
3. 根据内容自动分类：
   - "bug"：明确描述了错误行为
   - "feature"：功能请求
   - "question"：使用问题
   - "documentation"：文档相关
4. 为每个 Issue 添加合适的标签
5. 为 bug 类 Issue 添加一条评论，包含：
   - 需要的复现信息清单
   - 建议的调试步骤
6. 生成一份分类报告

预期的处理结果

Expected Processing Results

Issue 分类报告 — my-org/my-project
=====================================

处理时间: 2025-03-15 14:30
总计处理: 23 个 Issue

分类统计:
┌────────────────┬──────┬─────────┐
│ 类别           │ 数量 │ 占比     │
├────────────────┼──────┼─────────┤
│ Bug            │ 12   │ 52.2%   │
│ Feature        │ 6    │ 26.1%   │
│ Question       │ 3    │ 13.0%   │
│ Documentation  │ 2    │ 8.7%    │
└────────────────┴──────┴─────────┘

已添加标签: 23 个
已添加评论: 12 个（Bug 类）

详细列表:
- #142 [Bug] 登录页面 500 错误 → 已标记 bug, priority:high
- #143 [Feature] 支持暗色主题 → 已标记 enhancement
- #144 [Question] 如何配置 SSO → 已标记 question
  ...

第三步：自动生成 PR 描述

Step 3: Auto-Generate PR Descriptions

我刚推送了一个分支 feature/user-dashboard 到 my-org/my-project。

请帮我：
1. 查看该分支相对于 main 的所有 commit
2. 查看变更的文件列表和 diff
3. 生成一个详细的 PR 描述，包含：
   - 变更摘要（一句话）
   - 详细改动说明
   - 变更文件列表及说明
   - 测试建议
   - 截图/录屏建议（如涉及 UI）
   - 相关 Issue 引用
4. 创建 Pull Request

预期生成的 PR 描述

Expected PR Description

markdown

## 变更摘要

实现用户仪表盘页面，包含数据统计卡片、活动图表和最近订单列表。

## 详细说明

### 新增功能
- 仪表盘页面主体框架（`Dashboard/index.tsx`）
- 统计卡片组件，支持自定义图标和变化趋势显示
- 活动图表组件，基于 recharts 实现折线图
- 最近订单列表，支持状态筛选和分页

### 技术实现
- 使用 React Query 管理数据获取和缓存
- Tailwind CSS 实现响应式布局（支持移动端）
- 抽取可复用的 `StatCard` 组件

## 变更文件

| 文件 | 变更 | 说明 |
|------|------|------|
| `src/components/Dashboard/index.tsx` | 新增 | 仪表盘页面组装 |
| `src/components/Dashboard/StatCard.tsx` | 新增 | 统计卡片组件 |
| `src/components/Dashboard/ActivityChart.tsx` | 新增 | 活动趋势图 |
| `src/components/Dashboard/RecentOrders.tsx` | 新增 | 最近订单表格 |
| `src/hooks/useDashboardData.ts` | 新增 | 数据获取 Hook |
| `src/routes/index.tsx` | 修改 | 添加仪表盘路由 |

## 测试建议

- [ ] 检查移动端（375px）布局是否正常
- [ ] 检查无数据状态下的空状态展示
- [ ] 检查 API 请求失败时的错误处理
- [ ] 验证统计数据的计算准确性

## 相关 Issue

Closes #89, Closes #95

第四步：定期维护自动化

Step 4: Periodic Maintenance Automation

请帮我执行仓库的定期维护任务：

1. 找出超过 30 天没有活动的 Issue，添加 "stale" 标签
2. 找出超过 60 天没有活动的 Issue，添加关闭提醒评论
3. 统计每个贡献者最近一个月的贡献：
   - PR 数量
   - 代码审查数量
   - Issue 评论数量
4. 生成维护报告

GitHub 自动化最佳实践

GitHub Automation Best Practices

实践	说明
Token 最小权限	只授予必要的仓库和操作权限
批量操作确认	批量修改前先预览变更清单
幂等操作	确保重复运行不会产生重复标签/评论
操作日志	记录所有自动化操作以便审计
速率限制	注意 GitHub API 速率限制（5000 次/小时）

综合案例：多 MCP 协同工作

Bonus: Multiple MCP Servers Working Together

场景：从 Bug 报告到修复上线

Scenario: From Bug Report to Fix Deployment

这个综合案例展示了如何串联多个 MCP 服务器完成一个完整的 Bug 修复流程。

配置所需的 MCP 服务器

bash

# Sentry — 获取错误详情
claude mcp add -e SENTRY_AUTH_TOKEN=your-token sentry -- \
  npx -y @anthropic/mcp-server-sentry

# GitHub — 管理 Issue 和 PR
claude mcp add -e GITHUB_TOKEN=your-token github -- \
  npx -y @anthropic/github-mcp-server

# PostgreSQL — 查询相关数据
claude mcp add postgres -- \
  npx -y @anthropic/mcp-server-postgres \
  "postgresql://readonly:pass@localhost:5432/production_replica"

# Slack — 通知团队
claude mcp add -e SLACK_BOT_TOKEN=xoxb-your-token slack -- \
  npx -y @anthropic/mcp-server-slack

完整工作流程

请帮我完成以下 Bug 修复流程：

1. 【Sentry】查看项目中优先级最高的未解决错误
2. 【Sentry】获取该错误的详细堆栈信息和影响范围
3. 【PostgreSQL】查询受影响的用户数据特征
4. 【分析】根据以上信息定位 Bug 根因
5. 【代码修复】编写修复代码
6. 【GitHub】创建 Issue 记录 Bug 信息
7. 【GitHub】创建 PR 提交修复
8. 【Slack】在 #incidents 频道通知团队

工作流可视化

Sentry                GitHub               PostgreSQL           Slack
  │                     │                     │                   │
  │─ list_issues ──>    │                     │                   │
  │<─ 返回错误列表 ──   │                     │                   │
  │                     │                     │                   │
  │─ get_details ──>    │                     │                   │
  │<─ 堆栈信息 ────     │                     │                   │
  │                     │                     │                   │
  │                     │                     │─ query ──────>    │
  │                     │                     │<─ 用户数据 ────   │
  │                     │                     │                   │
  │         [Claude 分析根因 + 编写修复代码]                      │
  │                     │                     │                   │
  │                     │─ create_issue ──>   │                   │
  │                     │<─ Issue #200 ────   │                   │
  │                     │                     │                   │
  │                     │─ create_pr ──────>  │                   │
  │                     │<─ PR #201 ────────  │                   │
  │                     │                     │                   │
  │                     │                     │                   │
  │─ resolve ──────>    │                     │─ send_msg ───>    │
  │                     │                     │                   │

提示词技巧

Prompt Engineering Tips for MCP

在与 MCP 工具配合使用 Claude Code 时，以下提示词技巧可以提升效果：

1. 明确指定工具

# 推荐：明确告知使用哪个 MCP 工具
"使用 Exa 搜索关于 React 19 的最新文章"

# 不推荐：模糊表达
"帮我搜索一下 React 19"

2. 分步描述流程

# 推荐：明确步骤
"第一步：使用 Exa 搜索。第二步：分析内容。第三步：生成报告。"

# 不推荐：一句话概括
"帮我研究一下这个话题然后出个报告"

3. 指定输出格式

# 推荐：明确输出要求
"生成 HTML 报告，包含表格对比和数据可视化"

# 不推荐：不指定格式
"生成报告"

4. 设置约束条件

# 推荐：设置明确约束
"只搜索最近 6 个月的文章，最多获取 10 篇"

# 不推荐：不设限制
"搜索所有相关文章"

小结

Summary

通过以上四个实战案例，我们展示了 MCP 在不同开发场景中的强大能力。从深度研究到设计转代码，从数据库分析到 GitHub 自动化，MCP 让 Claude Code 成为一个真正的全能开发助手。

关键要点：

Exa + Claude Code 是深度技术研究的最佳组合
Figma MCP 大幅缩短了从设计到代码的转化时间
数据库 MCP 让非 SQL 专家也能进行复杂数据分析
GitHub MCP 自动化了大量重复性的项目管理工作
多 MCP 协同 可以覆盖从发现问题到修复上线的完整流程

返回目录：MCP 概述 | MCP 配置 | 热门 MCP 服务

MCP 实战案例 ​

案例一：Exa + Claude Code 深度研究 ​

场景描述 ​

第一步：配置 Exa MCP ​

第二步：设计研究流程 ​

第三步：执行研究（完整提示词） ​

预期的交互过程 ​

报告结构示例 ​

案例二：Figma 设计稿转代码 ​

场景描述 ​

第一步：配置 Figma MCP ​

第二步：准备工作 ​

第三步：执行转换（完整提示词） ​

预期的生成代码 ​

设计转代码的最佳实践 ​

案例三：数据库查询助手 ​

场景描述 ​

第一步：配置 PostgreSQL MCP ​

第二步：了解数据库结构 ​

第三步：自然语言数据分析 ​

安全注意事项 ​

案例四：GitHub 自动化 ​

场景描述 ​

第一步：配置 GitHub MCP ​

第二步：批量处理 Issue ​

预期的处理结果 ​

第三步：自动生成 PR 描述 ​

预期生成的 PR 描述 ​

第四步：定期维护自动化 ​

GitHub 自动化最佳实践 ​

综合案例：多 MCP 协同工作 ​

场景：从 Bug 报告到修复上线 ​

配置所需的 MCP 服务器 ​

完整工作流程 ​

工作流可视化 ​

提示词技巧 ​

1. 明确指定工具 ​

2. 分步描述流程 ​

3. 指定输出格式 ​

4. 设置约束条件 ​

小结 ​

MCP 实战案例

案例一：Exa + Claude Code 深度研究

场景描述

第一步：配置 Exa MCP

第二步：设计研究流程

第三步：执行研究（完整提示词）

预期的交互过程

报告结构示例

案例二：Figma 设计稿转代码

场景描述

第一步：配置 Figma MCP

第二步：准备工作

第三步：执行转换（完整提示词）

预期的生成代码

设计转代码的最佳实践

案例三：数据库查询助手

场景描述

第一步：配置 PostgreSQL MCP

第二步：了解数据库结构

第三步：自然语言数据分析

安全注意事项

案例四：GitHub 自动化

场景描述

第一步：配置 GitHub MCP

第二步：批量处理 Issue

预期的处理结果

第三步：自动生成 PR 描述

预期生成的 PR 描述

第四步：定期维护自动化

GitHub 自动化最佳实践

综合案例：多 MCP 协同工作

场景：从 Bug 报告到修复上线

配置所需的 MCP 服务器

完整工作流程

工作流可视化

提示词技巧

1. 明确指定工具

2. 分步描述流程

3. 指定输出格式

4. 设置约束条件

小结