mcpField
U
UX Pilot

UX Pilot

远程服务
uxpilot.ai媒体与设计05 天前更新
代码仓库访问官网

关于 UX Pilot

UX Pilot MCP 将 AI 客户端连接到 UX Pilot 工作区，用于设计管理、评审和 React 原型制作。它支持管理工作区并导入外部 HTML 或网址，托管服务可通过登录或 API 密钥访问。

主要功能

  1. 01创建并整理页面和工作流
  2. 02将 HTML 和实时网址导入为设计
  3. 03执行 UX 与无障碍评审
  4. 04管理版本和评论
  5. 05生成并发布 React 原型

适用场景

  1. 01将 AI 生成的 HTML 导入设计工作区
  2. 02检查设计中的 UX 和无障碍问题
  3. 03跟踪设计变更与反馈
  4. 04创建并发布 React 原型

MCP 相关

托管 MCP 服务提供 77 个工具，用于管理 UX Pilot 工作区、设计、评审、版本、评论和原型。MCP 客户端通过 Streamable HTTP 连接，并使用 OAuth 登录或 Bearer API 密钥认证。

配置

远程服务无需本地安装。选择你使用的客户端，复制配置或使用一键安装。

服务地址https://mcp.uxpilot.net/mcp
一键复制安装命令
Claude CodeTerminal
Cursor.cursor/mcp.json
VS Code.vscode/mcp.json
Claude Desktopclaude_desktop_config.json
Windsurf~/.codeium/windsurf/mcp_config.json

命令在终端中运行；JSON 粘贴到对应客户端的 MCP 配置后重启。需要授权的服务会在首次连接时提示登录。

工具

详细介绍

UX Pilot MCP

直接通过 Claude、ChatGPT、Cursor、Codex 和其他 MCP 客户端在 UX Pilot 中工作。

将 AI 生成的内容导入 UX Pilot，整理、审阅并管理版本，构建原型，然后切回 UX Pilot AI，生成更深入、结合产品上下文的内容。

MCP Website

UX Pilot MCP 服务可将任何兼容 MCP 的 AI 客户端连接到你的 UX Pilot 工作区。你的助手可以在 UX Pilot 中创建工作流和页面、将 HTML 或在线 URL 导入为设计、执行 UX 和无障碍审查、管理版本和评论，以及生成 React 原型。

该服务由 UX Pilot 托管。本仓库介绍如何连接以及它提供的功能。这里没有需要构建或运行的服务端代码。

  • 服务 URL： https://mcp.uxpilot.net/mcp
  • 传输方式： Streamable HTTP（POST）
  • 协议： MCP 2025-11-25（JSON-RPC 2.0）
  • 身份验证： 原生 OAuth 登录（推荐），或使用 Authorization: Bearer API 密钥作为备用方式
  • 工具： 77

身份验证

原生登录（推荐）

如果你的 AI 工具显示 UX Pilot 登录或授权界面，请选择该流程。使用你的 UX Pilot 账户登录，查看所请求的访问权限，然后批准连接。无需复制或粘贴 API 密钥，访问权限也会与你的账户和套餐绑定。

API 密钥备用方式

对于仅支持静态标头的客户端，请在 UX Pilot 工作区的 API Keys 标签页中生成密钥，并将其作为 bearer token 发送：

Authorization: Bearer ep_your_api_key

企业工作区：MCP/API 密钥由管理员管理。请妥善保管密钥，并在访问权限发生变化时更换密钥。

设置

只要客户端支持，请优先使用原生登录。将 API 密钥配置用作备用方式。请将 ep_your_api_key 替换为你的实际密钥。

Claude

原生连接器（推荐）：

  1. 打开 Claude 设置，并添加自定义连接器 / 远程 MCP 服务。
  2. 粘贴服务 URL：https://mcp.uxpilot.net/mcp
  3. Claude 提示时，选择 UX Pilot 登录流程并批准访问。
  4. 在对话中让 Claude 列出 UX Pilot 工具。

**API 密钥备用方式（Claude Desktop，通过 mcp-remote）：**编辑 claude_desktop_config.json （macOS：~/Library/Application Support/Claude/claude_desktop_config.json， Windows：%APPDATA%\Claude\claude_desktop_config.json）

{
  "mcpServers": {
    "uxpilot": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://mcp.uxpilot.net/mcp",
        "--transport",
        "http-only",
        "--header",
        "Authorization:${AUTH_HEADER}"
      ],
      "env": {
        "AUTH_HEADER": "Bearer ep_your_api_key"
      }
    }
  }
}

需要 Node.js。mcp-remote 可将 stdio 转接到 Streamable HTTP。

ChatGPT

使用 ChatGPT 的自定义连接器 / MCP 支持（开发者模式，是否可用取决于你的套餐）：

  1. 打开 ChatGPT 设置，并添加自定义连接器 / MCP 服务。
  2. 粘贴服务 URL：https://mcp.uxpilot.net/mcp
  3. 根据提示完成 UX Pilot 登录。
  4. 在聊天中启用连接器，并让 ChatGPT 列出 UX Pilot 工具。
Cursor

添加到 ~/.cursor/mcp.json（全局）或 .cursor/mcp.json（项目）。如果支持原生登录，仅添加 URL 就会触发登录；标头是 API 密钥备用方式。

{
  "mcpServers": {
    "uxpilot": {
      "url": "https://mcp.uxpilot.net/mcp",
      "headers": {
        "Authorization": "Bearer ep_your_api_key"
      }
    }
  }
}
VS Code + Copilot

添加到 .vscode/mcp.json：

{
  "servers": {
    "uxpilot": {
      "type": "http",
      "url": "https://mcp.uxpilot.net/mcp",
      "headers": {
        "Authorization": "Bearer ep_your_api_key"
      }
    }
  }
}
Windsurf

添加到 ~/.codeium/windsurf/mcp_config.json：

{
  "mcpServers": {
    "uxpilot": {
      "serverUrl": "https://mcp.uxpilot.net/mcp",
      "headers": {
        "Authorization": "Bearer ep_your_api_key"
      }
    }
  }
}
Codex

添加到 ~/.codex/config.toml：

[mcp_servers.uxpilot]
url = "https://mcp.uxpilot.net/mcp"
bearer_token_env_var = "UXPILOT_API_KEY"

然后导出原始密钥（不带 Bearer 前缀；Codex 会自动添加）：

export UXPILOT_API_KEY="ep_your_api_key"
任何 MCP 客户端

不支持 Streamable HTTP 的客户端可以通过 mcp-remote 转接：

{
  "mcpServers": {
    "uxpilot": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://mcp.uxpilot.net/mcp",
        "--transport",
        "http-only",
        "--header",
        "Authorization:${AUTH_HEADER}"
      ],
      "env": {
        "AUTH_HEADER": "Bearer ep_your_api_key"
      }
    }
  }
}

工具

77 个工具，按功能分组。标记 · credits 的工具会消耗账户额度；消耗额度和具有破坏性的操作都需要明确确认。

探索和检查（12）
工具说明
list_workstreams列出你的工作流/文件夹及页面摘要
list_pages列出你的页面及其 URL、数量和缩略图
get_page_context获取页面的分组、设计、画布和评论
get_design获取单个设计的详情、预览 URL 和可选的 HTML
get_design_preview获取设计的预览/页面 URL 和状态（无 HTML）
get_design_versions获取设计的版本/父级系列
list_design_collections列出你的自定义设计系统集合
get_design_collection获取集合中的资源、样式和文档
list_themes列出可用的品牌/样式主题
get_theme获取主题的完整 JSON，用于生成符合品牌风格的内容
list_symbols列出可重复使用的编辑器组件/符号
get_symbol获取符号的 HTML/CSS 内容
整理工作区（19）
工具说明
create_workstream创建工作流/文件夹
update_workstream重命名工作流或更新其描述
delete_workstream删除工作流并解除其与页面的关联
create_page创建空白页面
create_page_from_template根据模板创建页面/分组
update_page更新页面名称、提示词或 AI 上下文
delete_page删除页面
move_page_to_workstream将页面移入或移出文件夹
toggle_page_bookmark收藏或取消收藏页面
create_group在页面上创建设计分组
update_group更新分组名称、字体或设计
delete_group删除分组及其设计
move_group_to_page将分组及其设计移至其他页面
set_group_saved将分组保存到资料库或从资料库中移除
duplicate_design将设计复制到页面/分组
move_design_to_page将设计移至其他页面/分组
archive_design归档设计并解除关联
update_design_metadata更新设计的标题、提示词、位置和大小
set_design_saved将设计保存到资料库或从资料库中移除
使用 UX Pilot AI 生成（5）
工具说明
generate_design根据提示词生成一个屏幕 · credits
plan_design_flow规划多屏幕流程以供审核（不消耗额度）
confirm_design_flow生成已确认的多屏幕流程 · credits
get_generation_status轮询生成、导入和构建状态
retrieve_designs轮询设计的状态/URL/HTML（旧版）
导入外部 AI 输出（15）
工具说明
import_html_design将外部 HTML 导入为可预览的设计 · credits
import_live_url将公开 URL 捕获为设计 · credits
add_canvas_assets向页面添加由 URL 提供的图片/参考资源
upload_canvas_asset将 base64/数据 URL 图片上传到页面
update_canvas_assets更新现有画布资源及关联项目
delete_canvas_assets删除画布资源
add_canvas_items添加便笺、注释和流程节点
update_canvas_items移动画布项目，或更改其标签和样式
delete_canvas_items删除画布项目
generate_flowchart根据提示词生成流程图
edit_flowchart根据指令编辑现有流程图
list_diagrams列出页面上已保存的图表
create_diagram创建已保存的网站地图/旅程/流程图
update_diagram更新图表的元数据、节点或边
delete_diagram删除图表
评审、审计与无障碍（8）
工具描述
run_ux_review运行 UX 评审，并将发现保存为评论 · credits
get_review_status轮询异步 UX 评审任务
apply_ux_review_fixes将评审发现应用为子版本 · credits
run_persona_audit运行基于用户画像的审计，并保存发现
apply_persona_audit_fixes将用户画像审计发现应用为子版本 · credits
save_accessibility_report保存外部 axe 风格的无障碍报告
apply_accessibility_fixes将无障碍违规项应用为子版本 · credits
compare_review_scores比较评审前后的分数（只读）
版本与评论（12）
工具描述
create_design_version创建版本并保留父级历史记录
compare_design_versions比较两个设计/版本（元数据 + HTML 差异）
create_version_from_comments根据修复后的 HTML 和评论创建子版本
create_comment在页面上评论，或将评论锚定到设计/形状
update_comment编辑你的评论文本、提及对象或位置
delete_comment删除评论及其回复
reply_to_comment回复评论讨论串
update_comment_reply编辑你的回复
delete_comment_reply删除回复
resolve_comment解决或重新打开评论
resolve_comments_with_version_summary使用版本摘要回复并解决评论
summarize_comments列出并总结页面评论
原型与发布（5）
工具描述
generate_react_prototype根据设计生成 React 应用 · credits
edit_react_prototype编辑现有原型
build_react_prototype为原型排队执行构建/发布刷新
publish_prototype将原型发布为托管 URL
publish_design_preview将设计的 HTML 发布为托管预览 · credits

另有 request_action_confirmation，这是一项安全工具，可为高风险操作生成确认令牌。

快速开始

  1. 选择要与 UX Pilot 搭配使用的 AI 客户端。
  2. 使用上述原生登录步骤和服务 URL。
  3. 如果客户端需要静态标头，请生成 API 密钥，并在备用配置中替换 ep_your_api_key。
  4. 向助手提出请求：“创建一个 UX Pilot 页面，将此 HTML 导入为设计，然后运行 UX 评审。”

支持

评论

支持 Markdown

第一次接触 MCP？

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

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