mcpField
U
UIMax MCP

UIMax MCP

本地服务
github.com/prembobby39-gif开发工具1030 周前更新
代码仓库

关于 UIMax MCP

UIMax MCP 是面向 Claude Code 的前端审查与修复服务。它结合浏览器截图、无障碍、Lighthouse、性能、SEO 和代码检查，并可应用修复及记录审查历史。

主要功能

  1. 01自动审查并修复 UI
  2. 02截图及多视口捕获
  3. 03无障碍、Lighthouse 和 SEO 审计
  4. 04Core Web Vitals 与资源分析
  5. 05基于 AST 的代码检查
  6. 06审查历史、基线和结果比较

适用场景

  1. 01审计本地或可访问的网站
  2. 02发现无障碍、性能和 SEO 问题
  3. 03比较 UI 截图或审查结果
  4. 04应用修复并验证变更

MCP 相关

UIMax MCP 通过 MCP 向 Claude Code 提供审查、浏览器交互、审计和报告工具。它可检查可访问的网址与源代码，审查流程也能实施修复。

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置
{
  "mcpServers": {
    "uimax": {
      "command": "npx",
      "args": [
        "-y",
        "uimax-mcp"
      ]
    }
  }
}
启动命令npx -y uimax-mcp

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包
npmuimax-mcp0.7.0

工具

34

收录的工具列表 · 更新于 3 周前

参数类型必填说明
urlstring是正在运行的应用程序 URL（例如，http://localhost:3000）
widthnumber否视口宽度（像素）
heightnumber否视口高度（像素）
codeDirectorystring是前端源代码目录的绝对路径（例如，/Users/me/project/src）

详细介绍

UIMax MCP

让 Claude Code 化身前端专家，自动检查并修复你的 UI。

npm 版本 npm 下载量 许可证 37 个工具 463 项测试通过 Pro 计划免费使用

只需一句话——“检查我的 UI 在 localhost:3000 上的情况”——它就会：

  1. 查看你的应用 — 通过 Puppeteer 截取实际屏幕截图
  2. 审查无障碍性 — 运行 axe-core 检查 WCAG 2.1 违规项
  3. 运行 Lighthouse — 获取真实的 Google Lighthouse 评分（性能、无障碍性、最佳实践、SEO）
  4. 测量性能 — 获取核心网页指标（FCP、LCP、CLS、TBT）
  5. 审查 SEO — 进行 18 项检查：元标签、Open Graph、Twitter 卡片、结构化数据、标题层级、规范 URL
  6. 扫描代码 — 基于 AST 分析无障碍性、设计和代码质量方面的 25 种以上反模式
  7. 为所有内容评分 — 生成分项报告卡，为无障碍性、性能、最佳实践、SEO 和代码质量评定字母等级（A+ 至 F）
  8. 生成专家评审 — Claude 将以内置评审方法论，以资深前端工程师的身份进行评审
  9. 落实修复 — 直接编辑你的代码文件，从严重问题开始逐项修复
  10. 跟踪所有内容 — 自动保存评审历史，方便你查看进展

适用于任何 URL — 本地、预发布、生产环境均可。只要你的机器能够访问该网站即可。

所有 Claude Code 用户均可免费使用（Pro 计划及以上）。无需 API 密钥。没有额外费用。安装即可开始使用。

claude mcp add uimax -- npx -y uimax-mcp

快速开始

安装为 MCP 服务（适用于 Claude Code）
# Add to Claude Code — that's it, no API keys needed
claude mcp add uimax -- npx -y uimax-mcp

就这么简单。现在，在任何 Claude Code 对话中：

You: Review the UI at http://localhost:3000, source code is in ./src

Claude Code calls review_ui ->
  1. Captures screenshot of your running app
  2. Runs axe-core accessibility audit
  3. Runs Google Lighthouse (Performance, A11y, Best Practices, SEO)
  4. Measures Core Web Vitals
  5. Runs dedicated SEO audit (18 checks)
  6. Scans source code with AST-based analysis
  7. Generates per-section Report Card (A+ through F letter grades)
  8. Returns screenshot + all data + expert review methodology
  9. Claude Code generates expert review (using YOUR Pro plan -- $0 extra)
  10. Claude Code implements every fix automatically
  11. Review saved to .uimax-reviews.json for tracking
全局安装
npm install -g uimax-mcp

工具（37）

评审工作流
工具描述
review_ui主要工具。 全自动工作流：屏幕截图 + Lighthouse + axe-core + 性能 + SEO + 代码分析 + 报告卡（A+ 至 F 字母等级）+ 专家评审方法论。自动保存到评审历史。
verify_fixesv0.9.0 新增。 应用修复后重新运行完整审查。与上一次评审结果进行比较，并显示修复前后的报告卡及等级变化、已解决问题数量和结论（改善／退步／混合）。完成评审—修复—验证闭环。
compare_sitesv0.9.0 新增。 竞争基准测试 — 并排审查两个 URL。返回两个网站的屏幕截图，以及包含无障碍性、性能、SEO 等级和加权总体评分的对比报告卡。
quick_review快速设计专项评审。包含屏幕截图和针对性设计方法论。不进行代码分析或性能审查。
export_report生成包含所有内嵌内容的独立 HTML 报告。现已包含报告卡评分卡片和 SEO 部分。采用深色主题，无依赖项。可与团队共享。
屏幕截图与视觉
工具描述
screenshot为任意 URL 截取高分辨率 PNG 屏幕截图。
responsive_screenshots分别在移动设备（375px）、平板（768px）和桌面设备（1440px）视口下截取屏幕截图。
check_dark_mode对比浅色模式与深色模式（模拟）。返回两种模式的屏幕截图和差异百分比。
compare_screenshots使用 pixelmatch 进行像素级差异比较。返回两张屏幕截图、以红色突出显示的差异图像，以及精确的像素差异百分比。
semantic_compareAI 驱动的视觉比较。 截取更改前后的屏幕截图并生成像素差异图，返回结构化方法论，供 Claude 评估更改是否符合预期设计要求。
Lighthouse、性能与 SEO
工具描述
lighthouse_audit完整的 Google Lighthouse 审计——性能、无障碍、最佳实践、SEO 评分及未通过的审计项。
seo_auditv0.8.0 新增。 专门的 SEO 审计，检查 18 项信号：元标题/描述、标题层级、Open Graph、Twitter 卡片、结构化数据（JSON-LD）、规范 URL、图像替代文本、viewport 元标签、lang 属性等。根据影响进行加权评分。
pwa_auditPWA 就绪情况：是否可安装、服务工作线程、HTTPS、清单、离线能力。
security_audit安全分析：HTTPS、CSP、混合内容、有漏洞的 JS 库、未使用 noopener 的外部链接。
unused_code查找未使用的 JavaScript 和 CSS，并精确计算每项资源可节省的字节数。
lcp_optimization深入分析 LCP：元素内容、资源加载时间、渲染延迟、TTFB、优化建议。
resource_analysis按类型全面细分资源，包括传输大小、请求数、最大的 10 项资源以及阻塞渲染的资源。
performance_audit通过 Performance API 检查核心 Web 指标：FCP、LCP、CLS、TBT、DOM 节点数、JS 堆大小。
accessibility_auditaxe-core WCAG 2.1 A 级和 AA 级审计。按严重程度对违规项分组，并提供修复说明。
代码分析
工具描述
analyze_code基于 AST（TypeScript 编译器 API）的分析，包含 25 项以上规则。对字符串字面量零误报。非 JS 文件会回退到正则表达式分析。可通过 .uimaxrc.json 配置。
浏览器交互
工具描述
navigate导航到 URL，并等待网络空闲。返回页面信息和屏幕截图。
click根据 CSS 选择器点击元素。点击后返回屏幕截图。
type_text在输入字段中键入文本。选项：clearFirst、pressEnter。完成后返回屏幕截图。
select_option根据值选择下拉选项。完成后返回屏幕截图。
scroll按像素量滚动，或滚动到指定元素。完成后返回屏幕截图。
wait_for等待元素出现在 DOM 中。返回标签名称和文本内容。
get_element获取元素详情：属性、边界框、计算样式、可见性。
调试
工具描述
capture_console捕获页面加载期间的所有控制台消息（log、warn、error、info、debug）和未捕获的异常。
capture_network捕获所有网络请求的状态、大小、计时和资源类型。按类型分组汇总。
capture_errors捕获 JS 异常、未处理的拒绝和加载失败的资源。
多页面
工具描述
crawl_and_review从 URL 发现内部链接，并审计最多 10 个页面——分别获取屏幕截图、运行 axe-core 审计和性能审计。
基准与预算
工具描述
save_baseline将当前审计状态保存到 .uimax-history.json。跟踪评分随时间的变化。
compare_to_baseline将当前状态与先前的基准进行比较。显示改进和退步情况，以及字母等级变化（例如，“D -> B+ (+22)”）。
check_budgets根据 .uimaxrc.json 强制执行性能预算。检查 Lighthouse 评分、Web 指标和违规项数量是否通过。
评审历史
工具描述
get_review_history查看此项目过去的 UIMax 评审。可按 URL 筛选并限制数量。现在还会显示等级，与分数并列。
get_review_stats汇总统计信息：评审总数、分数趋势、最常见的问题、问题最多的文件。包含代码质量等级。
review_diff比较两次指定的评审 — 新增问题、已解决问题、分数变化及等级变化。

每次评审都会自动保存。 运行 review_ui 时，结果会自动保存到 .uimax-reviews.json。无需手动保存 — 随时只需询问“显示我的评审历史”即可。

评分卡（A+ 到 F）

现在每次运行 review_ui 都会生成包含各部分等级的分项评分卡，采用 13 级评分标准：

┌─────────────────────────────────────────────────────┐
│                    REPORT CARD                       │
├──────────────────┬──────────┬───────┬───────────────┤
│ Section          │ Score    │ Grade │ Rating        │
├──────────────────┼──────────┼───────┼───────────────┤
│ Accessibility    │ 95       │ A     │ Excellent     │
│ Performance      │ 72       │ C-    │ Below Average │
│ Best Practices   │ 88       │ B+    │ Very Good     │
│ SEO              │ 61       │ D-    │ Very Weak     │
│ Code Quality     │ 83       │ B     │ Good          │
└──────────────────┴──────────┴───────┴───────────────┘

等级显示位置：

  • review_ui 输出 — 每次评审顶部的评分卡表格
  • export_report HTML — 采用颜色编码的等级卡片（绿色 A -> 红色 F）
  • compare_to_baseline — 显示等级变化以体现改进（例如，D -> B+ (+22)）
  • get_review_history / get_review_stats / review_diff — 等级与数值分数并列，便于快速查看

评分标准：A+（97+）> A（93+）> A-（90+）> B+（87+）> B（83+）> B-（80+）> C+（77+）> C（73+）> C-（70+）> D+（67+）> D（63+）> D-（60+）> F（<60）

基于 AST 的代码分析

analyze_code 工具使用 TypeScript 编译器 API 分析 .ts/.tsx/.js/.jsx 文件，可发现正则表达式会漏掉的错误，且不会产生误报。

规则AST 能发现而正则表达式会漏掉的问题
react-hooks-conditional嵌套在 if/for/while/三元表达式中的 Hook — 正确遍历作用域
missing-key-prop返回 JSX 且缺少 key 的 .map() 回调 — 支持箭头函数体和代码块函数体
empty-catch空的 catch 代码块 — 不会被注释干扰
any-type仅检查类型位置中的 any — 忽略字符串和注释中的 “any”
direct-dom-accessdocument.querySelector 等 — 正确匹配调用表达式
console-logconsole.log/warn/error — 不会被包含 “console” 的变量名干扰
inline-styleJSX style={} 属性 — 正确检测属性

对于无法使用 AST 解析的文件类型，以及没有 AST 实现的规则（硬编码颜色、z-index、字号等），会回退到正则表达式。

配置

在项目根目录创建 .uimaxrc.json，以自定义代码分析和性能预算：

{
  "rules": {
    "console-log": "off",
    "magic-number": "off",
    "hardcoded-color": "warn",
    "inline-style": "error"
  },
  "severity": {
    "todo-fixme": "high"
  },
  "ignore": [
    "node_modules",
    "dist",
    "*.test.*",
    "*.spec.*"
  ],
  "budgets": {
    "lighthouse": {
      "performance": 90,
      "accessibility": 95,
      "bestPractices": 90,
      "seo": 90
    },
    "webVitals": {
      "fcp": 1800,
      "lcp": 2500,
      "cls": 0.1,
      "tbt": 300
    },
    "maxAccessibilityViolations": 0,
    "maxCodeIssues": 10
  }
}
  • rules — 将任意规则设为 "off"、"warn" 或 "error"
  • severity — 覆盖严重程度："low"、"medium"、"high"、"critical"
  • ignore — 添加要从分析中排除的 glob 模式
  • budgets — 设置由 check_budgets 工具强制执行的性能阈值

UIMax 会在目标目录及最多 3 层父目录中查找 .uimaxrc.json，因此也适用于 monorepo。

提示词

用于指导 Claude 分析的专家评审提示词：

提示词用途
ui-review全面评审（设计 + UX + a11y + 性能 + 代码）
responsive-review跨视口的响应式设计评审
quick-design-review仅根据截图快速提供视觉/UX 反馈
semantic-compare由 AI 驱动的前后视觉对比

示例工作流

全面评审（主要工作流）
You: Review the UI at http://localhost:3000
     Source code is in ./src

Claude: [Calls review_ui]
        [Captures screenshot, runs Lighthouse + axe + perf + code scan]
        [Generates 20+ findings with specific fixes]
        [Implements every fix automatically]
        [Auto-saves review to .uimax-reviews.json]
评审任意公开网站
You: Review the UI at https://stripe.com

Claude: [Calls review_ui]
        [Full audit of the live production site]
        [Returns findings + recommendations]
长期跟踪进展
You: Show me my review history

Claude: [Calls get_review_history]
        [Shows table of past reviews: dates, scores, issue counts]

You: Compare my last two reviews

Claude: [Calls review_diff]
        [Shows what improved ✅, what regressed ❌, new issues, resolved issues]

You: What are my most common issues?

Claude: [Calls get_review_stats]
        [Shows trends, most common issues, most problematic files]
与你的应用交互
You: Navigate to localhost:3000, click the login button,
     type "[email protected]" in the email field

Claude: [Calls navigate → click → type_text]
        [Returns a screenshot after each action]
        [Verifies each step visually]
深入分析性能
You: Find unused code on https://myapp.com

Claude: [Calls unused_code]
        [Lists every unused JS/CSS file with byte savings]
        [Suggests what to tree-shake]

You: Why is my LCP slow?

Claude: [Calls lcp_optimization]
        [Identifies the LCP element, breakdown of load time]
        [Specific optimization suggestions]
验证修复（完成闭环）
You: Review and fix my UI at localhost:3000

Claude: [Calls review_ui → finds 14 issues → implements fixes]

You: Now verify the fixes worked

Claude: [Calls verify_fixes]
        [Re-runs full audit → compares to previous review]

  Fix Verification — Before vs After
  | Metric                   | Before | After | Change  |
  | Accessibility violations | 5      | 0     | ✅ -5   |
  | Code findings            | 9      | 2     | ✅ -7   |
  | Total issues             | 14     | 2     | ✅ -12  |

  Verdict: ✅ IMPROVED
竞争性基准测试
You: Compare my site vs stripe.com

Claude: [Calls compare_sites]
        [Audits both URLs concurrently]
        [Returns screenshots of both sites + comparison table]

  | Category      | myapp.com | stripe.com | Winner       |
  | Accessibility | C+ (78)   | A  (94)    | ✅ stripe.com |
  | Performance   | B- (81)   | A+ (98)    | ✅ stripe.com |
  | SEO           | D  (63)   | A  (93)    | ✅ stripe.com |
  | Overall       | C  (74)   | A  (95)    | ✅ stripe.com |
SEO 审计
You: Run an SEO audit on https://myapp.com

Claude: [Calls seo_audit]
        [Checks 18 SEO signals: meta tags, Open Graph, structured data, etc.]
        [Returns score, passing checks, and failed checks with fix recommendations]
        [Weighted by impact: critical > high > medium > low]
调试页面加载问题
You: What console errors does localhost:3000 produce?

Claude: [Calls capture_console]
        [Returns all console messages + uncaught exceptions]

You: Show me all network requests on page load

Claude: [Calls capture_network]
        [Returns every request: URL, status, size, timing]
        [Summary grouped by resource type]
前后对比
You: Compare localhost:3000 with localhost:3001

Claude: [Calls compare_screenshots]
        [Pixel-level diff with red-highlighted changes]
        [Reports exact pixel difference %]
语义视觉评审
You: I changed the header to be sticky. Compare before and after.

Claude: [Calls semantic_compare with change description]
        [Captures both states + pixel diff]
        [Evaluates whether changes match the intent]
        [Checks for visual regressions]
强制执行性能预算
You: Check if my site meets our performance budgets

Claude: [Calls check_budgets]
        [Reads thresholds from .uimaxrc.json]
        [Returns ✅ pass or ❌ fail for each metric]
生成可分享的报告
You: Export a full report of localhost:3000 to ./report.html

Claude: [Calls export_report]
        [Generates standalone dark-themed HTML report]
        [Open in any browser, share with team]
多页面审计
You: Crawl localhost:3000 and audit all pages

Claude: [Calls crawl_and_review]
        [Discovers internal links, audits up to 10 pages]
        [Per-page: screenshot + accessibility + performance]

Claude 的评审内容

使用完整的 review_ui 工作流时，Claude 会评估：

类别检查内容
视觉设计布局、排版、颜色对比、留白、阴影、图标一致性
用户体验导航、交互状态、加载／错误／空状态、边缘情况
无障碍性WCAG 2.1 AA、键盘导航、屏幕阅读器兼容性、焦点管理
性能Lighthouse 评分、Core Web Vitals、渲染阻塞资源、打包体积
SEOMeta 标签、Open Graph、Twitter 卡片、结构化数据、标题层级、规范 URL、图片替代文本
代码质量组件架构、CSS 组织、错误边界、TypeScript 安全性
安全性HTTPS、CSP、有漏洞的库、混合内容
评分卡为无障碍性、性能、最佳实践、SEO、代码质量等各部分评定字母等级（A+ 至 F）
创意现代 UI 模式（Linear、Vercel、Raycast）、微交互、动画

代码分析规则

analyze_code 工具会检查多个类别中的 25+ 条规则：

规则严重性类别
img-no-alt高无障碍性
click-no-keyboard高无障碍性
no-form-label高无障碍性
missing-viewport-meta高无障碍性
no-lang-attr中无障碍性
no-focus-visible中无障碍性
empty-catch高代码质量
react-hooks-conditional高代码质量
missing-key-prop高Bug
console-log低代码质量
todo-fixme低代码质量
inline-style中代码质量
any-type中代码质量
magic-number低代码质量
direct-dom-access中代码质量
event-handler-inline低代码质量
important-css中设计
hardcoded-color低设计
z-index-high中设计
font-too-small中设计
no-lazy-image中性能
large-bundle-import中性能
no-error-boundary中用户体验
missing-meta-description中用户体验
large-file中／高代码质量
deep-nesting中／高代码质量

所有规则均可通过 .uimaxrc.json 切换。

支持的框架

自动从 package.json 检测：

  • React / Next.js
  • Vue / Nuxt
  • Svelte / SvelteKit
  • Angular
  • Plain HTML/CSS/JS

要求

  • Node.js >= 18.0.0
  • Chrome/Chromium（使用系统上的 Chrome，无需额外下载）
  • Claude Code（用于 MCP 集成）
  • 无需 API 密钥 — 使用现有的 Pro 方案，完全在 Claude Code 中运行

工作原理

+----------------------------------------------------------------------+
|                    Claude Code (your Pro plan)                         |
|                                                                       |
|  User: "Review my UI at localhost:3000 and fix everything"            |
|           |                                                           |
|           v                                                           |
|  +----------------------------------------------------------------+  |
|  |                UIMax MCP (37 tools)                             |  |
|  |                                                                 |  |
|  |  Screenshot -------> Puppeteer ----------> PNG Image            |  |
|  |  Accessibility ----> axe-core ------------> WCAG Violations     |  |
|  |  Lighthouse -------> Google LH ----------> Scores + Audits     |  |
|  |  Deep LH ----------> PWA/Security/LCP --> Granular Analysis    |  |
|  |  SEO Audit --------> 18 checks ----------> SEO Score           |  |
|  |  Performance ------> Perf API ----------> Web Vitals           |  |
|  |  Code Scan --------> TypeScript AST -----> Anti-patterns       |  |
|  |  Report Card ------> Grading Engine -----> A+ to F Grades      |  |
|  |  Browser ----------> Click/Type/Scroll --> Interaction          |  |
|  |  Debugging --------> Console/Network ----> Runtime Data        |  |
|  |  History ----------> .uimax-reviews.json > Progress Tracking   |  |
|  |  Expert Prompt ----> Baked-in methodology                      |  |
|  +----------------------------+-----------------------------------+  |
|                               |                                      |
|                               v                                      |
|  Claude Code receives: screenshot + data + expert methodology        |
|                               |                                      |
|                               v                                      |
|  Claude acts as world-class frontend expert (FREE -- Pro plan)       |
|     Generates comprehensive review with exact fixes                  |
|                               |                                      |
|                               v                                      |
|  Claude implements every fix in the codebase automatically           |
|                                                                       |
+----------------------------------------------------------------------+

CI / GitHub Action

UIMax 附带可复用的 GitHub Action，可在每个 PR 上运行审计并发布评分卡评论。

快速设置

将示例工作流复制到项目中：

# .github/workflows/uimax-ci.yml
name: UIMax Review
on:
  pull_request:
    branches: [main]

jobs:
  uimax-review:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: "20"

      # Build and start your app
      - run: npm ci && npm run build
      - run: npm start &
      - run: npx wait-on http://localhost:3000

      # Run UIMax
      - uses: prembobby39-gif/uimax-mcp/.github/actions/uimax-review@main
        with:
          url: http://localhost:3000
          budget-accessibility: 90
          budget-performance: 80
          budget-seo: 80
          max-violations: 0
Action 输入
输入描述必填默认值
url要审计的 URL是—
github-token用于 PR 评论的令牌否GITHUB_TOKEN
budget-performance最低性能评分（0-100）否—
budget-accessibility最低无障碍性评分（0-100）否—
budget-seo最低 SEO 评分（0-100）否—
max-violations允许的无障碍违规数量上限否—
fail-on-regression等级下降时失败否false
操作输出
输出描述
accessibility-grade字母等级（A+ 至 F）
performance-grade字母等级
seo-grade字母等级
total-violations无障碍违规数量
passed是否所有预算均已通过（true/false）
report完整的 Markdown 报告

重新推送时，此操作会更新现有的 UIMax 评论（不会重复添加评论）。

完整的可运行示例请参阅 examples/uimax-ci.yml。

开发

# Clone
git clone https://github.com/prembobby39-gif/uimax-mcp.git
cd uimax-mcp

# Install
npm install

# Build
npm run build

# Run tests
npm test

# Run tests with coverage
npm run test:coverage

# Test locally with Claude Code
claude mcp add uimax-dev -- node /path/to/uimax-mcp/dist/index.js

参与贡献

欢迎贡献！以下是一些想法：

  • CSS 优先级分析器
  • 设计令牌提取
  • 特定框架的检查（Vue 组合式 API、Svelte stores）
  • 像素级差异的视觉回归
  • 性能预算（分数低于阈值时失败）
  • 浏览器交互（点击、输入、滚动、导航）
  • 控制台和网络捕获
  • 深度 Lighthouse 分析（PWA、安全性、未使用代码、LCP、资源）
  • AI 驱动的语义视觉比较
  • 带自动保存的评审历史跟踪
  • 专用 SEO 审计（18 项检查，加权评分）
  • 各分区字母等级（A+ 至 F 评分卡）
  • 验证修复（修复前后比较及等级变化）
  • 竞争对标（并排比较网站）
  • CI/CD 集成（用于在 PR 上自动评审的 GitHub Action）
  • 自定义规则插件（用户定义的正则表达式规则）
  • Figma 设计比较（截图与 Figma 原型比较）
  • 跨浏览器测试（通过 Playwright 测试 Firefox、WebKit）

许可证

MIT

评论

支持 Markdown

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。