适合 Claude Code 和 Cursor 的最佳设计 MCP 服务器

设计 MCP 服务器允许编程 Agent 通过模型上下文协议（Model Context Protocol） 读取设计稿、搜索 UI 参考图或生成界面。对于现有的 Figma 设计稿，首选 Figma；若要搜索参考图，可以使用 Mobbin；如果需要在可编辑的项目中生成新的移动应用界面，Sleek 则是专门针对这项任务设计的选择。

本对比梳理了八家厂商为 Claude Code 和 Cursor 提供的官方文档记载的功能与配置方式，信息核对日期为 2026 年 9 月 28 日。Sleek 是我们开发的产品。以下建议基于各项集成的具体功能定位，而非实操生成质量的排名。

什么是设计 MCP 服务器？

设计 MCP 服务器会将设计产品的工具暴露给 AI 客户端。Agent 可以调用这些工具并获取数据或图像，无需让你手动将每个细节复制粘贴到对话框中。协议负责建立连接，而服务器则决定了 Agent 是能读取文件、搜索目录，还是修改设计。

托管型服务器通过 URL 进行连接，本地集成则连接至你电脑上的软件。这两个标签本身都不能说明它是否具备生成界面的能力。在选择服务器之前，请先核对支持的操作类型。

各款设计 MCP 服务器有什么区别？

当设计稿本身位于 Figma 中时，Figma 最为实用。Mobbin 能提供来自真实产品的参考图。Stitch 和 Sleek 提供了托管式的界面生成工作流，而 Pencil 和 Paper 则将 Agent 连接至本地画布。部分功能存在重叠，因此请根据你需要的成果和工作流来选择，而不是只看工具数量。

以下所有访问与权限细节更新截至 2026 年 9 月。具体的厂商来源和客户端配置说明位于表格下方。

表格将界面生成与参考图检索区分开来。搜索结果可以帮助 Agent 理解某种结账流程设计模式，但它并不是为你应用生成的新结账界面。

Figma MCP 服务器能做什么？

Figma MCP 为开发实现提供设计上下文，包括布局、变量和组件。远程服务器还允许受支持的客户端创建和编辑原生 Figma 内容。当你计划基于 Figma 设计稿进行开发或向其中写入内容时，可以使用它。桌面服务器依然可用于读取本地设计上下文。

Figma 帮助中心 说明远程访问面向所有套餐与席位开放，桌面端访问面向付费 Dev 或 Full 席位开放，且 Beta 阶段画布写入免费。访问并非毫无限制：Figma 的速率限制页面 显示 Starter 套餐每月最多可进行 20 次读取工具调用，付费 Dev 和 Full 席位则享有更高的额度。

命令核验日期为 2026-09-28。

远程安装指南 推荐使用以下 Claude Code 插件：

claude plugin install figma@claude-plugins-official

或者仅添加服务器：

claude mcp add --transport http figma https://mcp.figma.com/mcp

在 Claude Code 中打开 /mcp 并完成身份验证。对于 Cursor，同一份指南记录了在 Agent 聊天框中使用以下命令：

/add-plugin figma

若选择桌面端路径，请在 Figma 的 Dev Mode 检查面板中启用 MCP 服务器。桌面端指南 提供了以下 Claude Code 命令：

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

Cursor 的桌面端配置如下：

{
  "mcpServers": {
    "figma-desktop": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

粘贴画框链接并要求 Agent 进行代码实现。当界面布局已经确定时，这是最清晰的起点。当你需要直接在 Figma 中创建内容时，远程服务器的写入工具也使其成为备选方案之一。

Google Stitch MCP 服务器能做什么？

Google Stitch 提供了托管型 MCP 连接，用于操作 Stitch 项目并通过文本生成界面。生成的设计保存在 Stitch 项目中。它适合希望在编程 Agent 中使用 Google 设计生成器并在同一工作流中获取界面数据的开发者。

Stitch MCP 配置指南 记录了 API 密钥和 OAuth 两种身份验证方式。其 API 密钥路径使用来自 Stitch 设置项中的密钥。官方 Stitch SDK 也说明了远程端点、界面生成以及 HTML 与图像检索的相关功能。

在 Claude Code 中使用配置指南中的 API 密钥配置：

claude mcp add stitch --transport http https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: YOUR-API-KEY" -s user

在 Cursor 中，修改 .cursor/mcp.json：

{
  "mcpServers": {
    "stitch": {
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "YOUR-API-KEY"
      }
    }
  }
}

请将占位符替换为你的 API 密钥，并确保不要将该文件提交至版本控制。在规划批量生成前，请先检查 Stitch 账户中的当前限制。设置页面是连接指南。

Mobbin MCP 服务器能做什么？

Mobbin MCP 允许 Agent 搜索真实的产品界面并获取屏幕图像。在设计某个流程或实现尚未确定的模式之前，它非常实用。其文档中说明的工具仅用于搜索现有素材，不会生成新的应用设计。其输出结果是为下一步决策提供参考资料。

Mobbin 介绍文档 确认其支持 OAuth，并在 Pro、Team 和 Enterprise 套餐中开放访问。其工具列表 涵盖了界面、流程和网站模块。高分辨率图像 URL 会在 30 天后过期。

Mobbin 的 Claude Code 指南 推荐先在 Claude Desktop 或网页端配置已验证的连接器。此外，它也记录了如下纯 CLI 的替代方案：

claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp

随后打开 /mcp，选择 Mobbin 并进行身份验证。

对于 Cursor，厂商配置步骤 使用的是 Marketplace 插件，而非 JSON 配置片段：

1. 在 Cursor Marketplace 中打开 Mobbin 插件，点击“Add to Cursor”。
2. 选择“Add Plugin”。
3. 在 Cursor 中，依次打开 Customize -> Installed -> Mobbin。
4. 选择“Authenticate”并登录。

你可以请求具体的参考图，例如银行应用的引导流程界面。在要求生成器或编程 Agent 实现你自己的流程前，先筛选出有价值的设计模式。

Sleek MCP 服务器能做什么？

Sleek MCP 允许 Agent 在 Sleek 项目中生成可编辑的 iOS 和 Android 应用界面。Agent 可以获取界面的 HTML、渲染图像，并返回用于审查的项目链接。当移动应用设计成为需求说明与期望 Agent 编写的代码之间缺失的一环时，便可以使用它。

Sleek MCP README 说明了托管服务器、OAuth 登录以及 Figma 和代码导出功能。请在一条消息中将完整的应用需求说明发送给 Agent，以便 Sleek 能够统一规划整套界面。界面生成会消耗工作区积分，而读取和渲染则不会。

Claude Code：

claude mcp add --transport http sleek https://sleek.design/api/mcp

打开 /mcp，选择 Sleek，并在浏览器中完成身份验证。对于 Cursor，若针对单个项目，请添加以下内容至 .cursor/mcp.json；若针对所有项目，请添加至 ~/.cursor/mcp.json：

{
  "mcpServers": {
    "sleek": {
      "url": "https://sleek.design/api/mcp"
    }
  }
}

启用服务器并登录。README 推荐使用 OAuth；API 密钥是针对无法支持 OAuth 的客户端的备选方案。

免费账户可通过 60 个一次性积分试用 API。在公开订阅套餐中，持续使用 API 及 Agent 访问需要 Pro 或 Team 套餐，Starter 不支持。截至 2026 年 9 月，Pro 套餐价格为每月 $69 或每年 $360，包含每月 20,000 个积分。所有套餐均包含 Figma 和代码导出，免费版的导出仅限于解锁的界面。

MCP README 预计每生成一个新界面消耗约 30 个积分，每次编辑消耗 5 到 30 个积分。每个项目同时只能有一个运行中的设计任务。design 调用最多等待 270 秒，必要时会返回运行中状态；Agent 应当轮询 get_design_run，而非重新提交需求说明。

Sleek 可以生成设计稿和可导出的 UI 代码。你的编程 Agent 仍然需要连接应用的数据与行为逻辑；如果你使用的是 React Native 或 SwiftUI，还需要适配界面代码。如果你更倾向于 REST API 工作流，Claude Code UI 设计 Skill 指南 讲解了 Sleek 独立 Skill 的安装方法。

ScreensDesign MCP 服务器能做什么？

ScreensDesign MCP 将 iOS 应用调研与界面生成结合在一起。截至 2026 年 9 月，其 MCP 页面列出了包含 2,715 款以上高营收应用的案例库、完整的 UX 流程、营收信号，以及根据这些参考案例生成界面的工具。如果你需要从研究现有移动端模式切入，可以考虑使用它。

使用 MCP 需要订阅 ScreensDesign Pro。其托管服务器支持 OAuth 或限定作用域的 API 密钥。对于 Claude Code，添加该 HTTP 端点并通过 /mcp 完成身份验证：

claude mcp add --transport http screensdesign https://api.screensdesign.com/v1/mcp

对于 Cursor，将以下内容添加到 .cursor/mcp.json，然后连接服务器：

{
  "mcpServers": {
    "screensdesign": {
      "url": "https://api.screensdesign.com/v1/mcp"
    }
  }
}

有关特定账户的配置，请参阅官方 设置指南。营收信号仅描述了参考应用的数据，并不意味着直接照搬某个界面就能提升你应用的转化率。

AIDesigner MCP 服务器能做什么？

AIDesigner MCP 可以针对移动端或桌面端视口生成并优化基于 Tailwind 的 HTML/CSS 设计稿。它能够读取代码库上下文并将结果共享至其画布。如果你希望生成符合现有项目的界面代码，可以考虑使用它。将输出用于实现前，先检查代码。

官方设置指南 提供了一个用于配置服务器和 Agent 指令的 CLI 工具。在项目根目录下为 Claude Code 运行以下命令：

npx -y @aidesigner/agent-skills init

对于 Cursor，请显式指定宿主：

npx -y @aidesigner/agent-skills init cursor

两者都会连接到 https://api.aidesigner.ai/api/v1/mcp。请在客户端的 MCP 面板中完成 OAuth 登录。生成界面会消耗账户积分；在多次生成变体前请先确认剩余积分。文档中说明的输出产物是界面 HTML，而非完整的原生移动应用。

Pencil MCP 服务器能做什么？

Pencil（现 pen.dev）能将 Agent 连接至在其桌面应用或 IDE 扩展中打开的 .pen 文档。当你在同一个文件中工作时，Agent 可以检查并修改该画布。这适合那些希望将设计文档与代码仓库放在一起、并需要交互式本地编辑工作流的开发者。

AI 集成文档 描述了与应用建立本地 stdio 连接的方式。安装指南 提供了以下 Claude Code 步骤，而非可在不同设备上使用的 URL：

1. 在 pen.dev 中打开一个 .pen 文档。
2. 打开 Settings，再进入 MCP，启用 Claude Code CLI。
3. 启动或重启 Claude Code。
4. 运行 /mcp 并确认 pencil 已连接。

对于 Cursor，请使用官方文档记录的 IDE 扩展路径：

1. 打开 Extensions（扩展）面板并搜索 pen.dev。
2. 安装该扩展。
3. 创建或打开一个 .pen 文件。

截至 2026 年 9 月，价格页面 显示 pen.dev 目前免费。但这并不包含你单独订阅编程 Agent 的费用。使用此 MCP 工作流时需保持文档处于打开状态；切勿尝试用猜测的托管端点或从他人电脑上复制的二进制文件路径来替换。

Paper MCP 服务器能做什么？

Paper MCP 允许 Agent 读取和编辑由 HTML 及 CSS 构建的 Paper 设计文档。它支持共享画布工作流：Agent 修改设计，你审查结果，随后 Agent 可以在代码实现阶段利用这一产出。进行这些文档操作时，必须运行 Paper Desktop 并且打开相关文件。

Paper MCP 指南 说明了以下插件安装方式。首先安装并打开 Paper Desktop。对于 Claude Code，运行：

claude plugin marketplace add paper-design/agent-plugins && claude plugin install paper-desktop@paper

随后打开 Claude Code 并检查 /mcp。对于 Cursor，在 Agent 面板中运行：

/add-plugin paper-desktop

如果服务器未显示，请重新加载 Cursor。Paper 较早的 localhost HTTP 配置依然有效，但当前的插件使用的是 Paper CLI。即使 Desktop 处于关闭状态，CLI 也能暴露工具；不过文档的读取和写入依然需要该应用运行。

截至 2026 年 9 月，Paper 的价格页面 显示 Free 版每周包含 100 次 MCP 调用，Pro 版每周 100 万次。Pro 版按月付费为每位编辑每月 $20，按年付费为每位编辑每月 $16。工具调用额度并不等同于界面数量：单个设计任务可能会涉及多次调用。

你应该使用哪款设计 MCP 服务器？

如需基于现有的 Figma 设计稿编写代码，请选择 Figma；如需查找参考图，请选择 Mobbin；若要在可审查与导出的项目中生成移动应用界面，请选择 Sleek。Stitch 是另一种托管式生成的选择。当希望 Agent 与本地画布在同一个设计文档上协同工作时，可以选择 Pencil 或 Paper。

请从当下的具体任务入手。如果队友已经为你提供了 Figma 画框，引入第二个生成器只会增加可能并不需要的设计决策。如果你缺乏布局方案，参考图可以帮助你在生成界面之前确定页面应包含的内容。针对新的移动应用需求说明，可以将你的 Agent 连接至 Sleek，并在动手编写代码前先审查生成的界面。免费试用额度大约可支持一次设计生成；Pro 套餐则支持持续使用。

请在需求说明中向 Agent 提供现有的品牌规范。DESIGN.md 库 提供了可与这些工具配合使用的书面设计指南；它是独立于 MCP 连接之外的输入内容。

如需了解 Agent 集成之外的更多选择，请参阅 AI 移动应用设计工具排名 以及 Claude Design 替代方案。

常见问题