ux-mcp-server

UX MCP 服务

Model Context Protocol (MCP) 服务，提供全面的 UX 最佳实践，涵盖完整的 UX 生态系统：无障碍指南（WCAG）、可用性启发式原则（Nielsen）、UI 模式、设计系统、性能优化、SEO、国际化、动画、框架模式（React/Vue/Angular）、电子商务、测试、PWA、道德设计、SaaS、分析、语音 UI、AR/VR、AI/ML 模式、医疗保健、金融、神经多样性和 Web 组件。

兼容任何 MCP 客户端，包括 Claude Desktop、Cursor IDE、Continue.dev、Cline 和自定义应用程序。

安装

npm（推荐）

npm install -g @elsahafy/ux-mcp-server

npx（无需安装）

npx @elsahafy/ux-mcp-server

从源码安装

git clone https://github.com/elsahafy/ux-mcp-server.git
cd ux-mcp-server
npm install
npm run build

功能

📚 资源（28 个知识库）

按类别访问全面的 UX 知识库：

基础与核心（12 个资源）

• ux://accessibility/wcag - WCAG 2.1 AA 指南及代码检查
• ux://usability/nielsen-heuristics - Nielsen 的 10 条可用性启发式原则
• ux://patterns/ui-patterns - 常见 UI 模式库
• ux://design-systems/principles - 设计系统原则与基础构件
• ux://responsive/design - 响应式设计与移动优先原则
• ux://themes/dark-mode - 深色模式实现指南
• ux://content/error-messages - 用户友好型错误消息库
• ux://performance/optimization - Core Web Vitals 与性能最佳实践
• ux://seo/guidelines - SEO 最佳实践、元标签与结构化数据
• ux://i18n/patterns - 国际化与本地化模式
• ux://animation/motion - 动效设计原则与无障碍设计
• ux://react/patterns - 高级 React 模式与状态管理

关键功能（8 个资源）

• ux://forms/patterns - 全面的表单设计、验证与无障碍设计
• ux://microcopy/guidelines - UX 文案、按钮标签、错误消息与语气
• ux://typography/systems - 字号比例、字体搭配、易读性与响应式排版
• ux://color/theory - 色彩和谐、WCAG 对比度、语义色彩与调色板
• ux://mobile/patterns - 触控目标、手势、拇指热区与移动优先设计
• ux://vue/patterns - Vue 3 Composition API、组合式函数、Pinia 与最佳实践
• ux://angular/patterns - Angular 独立组件、信号、RxJS 与依赖注入
• ux://data/visualization - 图表选择、无障碍设计、D3.js 与仪表盘设计

高级功能（8 个资源）

• ux://ecommerce/patterns - 产品页面、结账、转化与信任优化
• ux://information-architecture/patterns - IA 体系、导航、卡片分类与树测试
• ux://testing/validation - 可用性测试、A/B 测试、问卷调查与分析
• ux://pwa/patterns - Service Worker、离线优先、应用清单与渐进增强
• ux://ethical-design/patterns - 暗黑模式、隐私、GDPR/CCPA 与合乎伦理的替代方案
• ux://design-systems/advanced - 语义化令牌、主题、版本管理与治理
• ux://saas/patterns - 新手引导、定价 UX、激活指标与留存
• ux://analytics/metrics - UX 指标（HEART、AARRR）、SUS、NPS 与统计分析

新兴技术（8 个资源）

• ux://voice/interface - 语音 UI 设计、对话模式与 VUI 原则
• ux://ar-vr/interfaces - 空间 UI、舒适度、临场感、6DOF 与 AR 锚定
• ux://ai-ml/patterns - AI 透明度、置信度指示器、推荐与伦理
• ux://haptic/feedback - 触觉类型、时序模式与平台 API
• ux://healthcare/ux - HIPAA 合规、患者安全、医疗 UI 与远程医疗
• ux://finance/ux - PCI-DSS、双重身份验证、交易流程与金融科技模式
• ux://neurodiversity/design - 针对 ADHD、自闭症、阅读障碍的适配与认知无障碍设计
• ux://web-components/patterns - 自定义元素、Shadow DOM、Lit、Stencil 与封装

🛠️ 工具（23 个动态操作）

用于 UX 分析与生成的强大工具：

核心分析（11 个工具）

1. analyze_accessibility - 检查代码是否存在 WCAG 违规
2. review_usability - 根据 Nielsen 启发式原则进行评估
3. suggest_pattern - 为使用场景查找合适的 UI 模式
4. generate_component_example - 创建无障碍 HTML/CSS 示例
5. audit_design_system - 检查设计令牌结构
6. check_contrast - 验证 WCAG 颜色对比度
7. check_responsive - 分析移动优先和响应式设计
8. suggest_error_message - 获取对用户友好的错误消息
9. analyze_performance - 检查代码中的性能问题和 Core Web Vitals
10. check_seo - 分析 HTML 是否符合 SEO 最佳实践
11. suggest_animation - 为 UI 交互推荐动画

设计与内容（5 个工具） 12. generate_color_palette - 根据基础颜色创建无障碍配色方案 13. generate_typography_scale - 使用模块化比例生成字体比例尺 14. suggest_microcopy - 获取 UI 元素的 UX 文案建议 15. recommend_form_pattern - 查找最佳表单布局和验证模式 16. suggest_data_visualization - 为不同数据类型选择合适的图表

测试与验证（5 个工具） 17. generate_accessibility_report - 生成全面的 WCAG 审计报告 18. suggest_ab_variant - 生成 A/B 测试变体建议 19. analyze_information_architecture - 评估导航和信息架构（IA）结构 20. detect_dark_patterns - 识别具有欺骗性的 UI 做法 21. calculate_ux_metrics - 计算 SUS、NPS、CSAT 和任务成功率

UI 生成（2 个工具） 22. generate_wireframe - 为页面/组件创建 ASCII 线框图 23. suggest_microinteraction - 推荐微交互及其时长/缓动效果

💬 提示词（4 个预配置工作流）

全面的评审工作流：

1. accessibility_review - 全面的 WCAG 无障碍审计
2. usability_audit - 完整的 Nielsen 启发式评估
3. design_system_setup - 创建设计系统指南
4. complete_ux_audit - 全面的多维度 UX 审计（无障碍、可用性、性能、响应式设计、排版、颜色、表单、SEO）

兼容性

此 MCP 服务适用于任何支持 Model Context Protocol 的客户端：

客户端	状态	配置
Claude Desktop	✅ 完全支持	见下文
Claude Code (CLI)	✅ 完全支持	见下文
Cursor IDE	✅ 完全支持	见下文
Continue.dev	✅ 完全支持	见下文
Cline (VS Code)	✅ 完全支持	见下文
Zed Editor	✅ 完全支持	见下文
Custom MCP Clients	✅ 完全支持	见下文

客户端配置

Claude Desktop

配置文件位置：

• macOS：~/Library/Application Support/Claude/claude_desktop_config.json
• Windows：%APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "ux-best-practices": {
      "command": "ux-mcp-server"
    }
  }
}

从源代码安装：

{
  "mcpServers": {
    "ux-best-practices": {
      "command": "node",
      "args": ["/absolute/path/to/ux-mcp-server/dist/index.js"]
    }
  }
}

配置完成后，重启 Claude Desktop。

Claude Code (CLI)

通过 CLI 添加（推荐）：

claude mcp add ux -- npx -y @elsahafy/ux-mcp-server

或手动添加到 ~/.claude/settings.json：

{
  "mcpServers": {
    "ux": {
      "command": "npx",
      "args": ["-y", "@elsahafy/ux-mcp-server"]
    }
  }
}

Cursor IDE

添加到 Cursor 的 MCP 配置（~/.cursor/mcp.json）：

{
  "mcpServers": {
    "ux-best-practices": {
      "command": "ux-mcp-server"
    }
  }
}

或通过 Cursor Settings → MCP Servers → Add Server 进行配置。

Continue.dev

添加到 Continue 配置（~/.continue/config.json）：

{
  "experimental": {
    "modelContextProtocolServers": [
      {
        "transport": {
          "type": "stdio",
          "command": "ux-mcp-server"
        }
      }
    ]
  }
}

Cline (VS Code)

在 VS Code 中使用 Cline 扩展，将配置添加到 MCP 设置：

{
  "mcpServers": {
    "ux-best-practices": {
      "command": "ux-mcp-server",
      "args": []
    }
  }
}

Zed Editor

添加到 Zed 的设置（~/.config/zed/settings.json）：

{
  "context_servers": {
    "ux-best-practices": {
      "command": {
        "path": "ux-mcp-server"
      }
    }
  }
}

自定义 MCP 客户端

对于使用 MCP SDK 的自定义应用程序：

import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";

const transport = new StdioClientTransport({
  command: "ux-mcp-server",
  args: []
});

const client = new Client({
  name: "my-app",
  version: "1.0.0"
}, {
  capabilities: {}
});

await client.connect(transport);

// List available resources
const resources = await client.listResources();

// Read a resource
const wcag = await client.readResource({ uri: "ux://accessibility/wcag" });

// Call a tool
const result = await client.callTool({
  name: "check_contrast",
  arguments: { foreground: "#333333", background: "#ffffff" }
});

Windows 说明

在 Windows 上，请使用带转义反斜杠的完整路径：

{
  "mcpServers": {
    "ux-best-practices": {
      "command": "node",
      "args": ["C:\\Users\\YourName\\ux-mcp-server\\dist\\index.js"]
    }
  }
}

示例用法

配置完成后，你可以让 AI 助手使用这些 UX 工具和资源。以下是一些提示词示例：

无障碍分析

"Analyze this button for accessibility issues"
→ Uses: analyze_accessibility tool

"Check if #3b82f6 on #ffffff meets WCAG AA contrast requirements"
→ Uses: check_contrast tool

"Generate an accessibility audit report for my login page"
→ Uses: generate_accessibility_report tool

UI 模式与设计

"I need to display a list of items with filtering - what UI pattern should I use?"
→ Uses: suggest_pattern tool

"Generate an accessible modal dialog example"
→ Uses: generate_component_example tool

"Create a color palette based on #3b82f6"
→ Uses: generate_color_palette tool

"Generate a wireframe for a dashboard page"
→ Uses: generate_wireframe tool

性能与 SEO

"Analyze this React component for performance issues"
→ Uses: analyze_performance tool (checks Core Web Vitals, bundle size, loading patterns)

"Review this HTML page for SEO best practices"
→ Uses: check_seo tool (validates meta tags, Open Graph, structured data)

UX 文案与表单

"Suggest better microcopy for this error message"
→ Uses: suggest_microcopy tool

"What form pattern should I use for a multi-step checkout?"
→ Uses: recommend_form_pattern tool

动画与交互

"What animation should I use for a button click?"
→ Uses: suggest_animation tool

"Suggest microinteractions for a toggle switch"
→ Uses: suggest_microinteraction tool

测试与指标

"Calculate the SUS score from these survey responses"
→ Uses: calculate_ux_metrics tool

"Suggest A/B test variants for my pricing page"
→ Uses: suggest_ab_variant tool

"Check this page for dark patterns"
→ Uses: detect_dark_patterns tool

访问知识资源

"What are Nielsen's usability heuristics?"
→ Reads: ux://usability/nielsen-heuristics

"Show me WCAG accessibility guidelines"
→ Reads: ux://accessibility/wcag

"What are best practices for e-commerce checkout?"
→ Reads: ux://ecommerce/patterns

"How do I design for neurodiversity?"
→ Reads: ux://neurodiversity/design

知识库内容

WCAG 指南

• 可感知（替代文本、对比度、语义化 HTML）
• 可操作（键盘访问、焦点管理）
• 可理解（错误处理、清晰的标签）
• 稳健（ARIA、辅助技术支持）

Nielsen 的启发式原则

1. 系统状态的可见性
2. 系统与现实世界的匹配
3. 用户控制权与自主权
4. 一致性与标准
5. 错误预防
6. 识别而非回忆
7. 使用的灵活性与效率
8. 美观且简约的设计
9. 帮助用户识别、诊断并从错误中恢复
10. 帮助与文档

UI 模式

• 导航：页眉、面包屑、标签页
• 表单：单栏、多步向导、验证
• 反馈：提示消息、模态框、加载状态
• 数据显示：表格、卡片、空状态
• 输入组件：搜索、日期选择器、文件上传

设计系统原则

• 原子设计方法
• 设计令牌结构（基础 → 语义 → 组件）
• 字体排版比例
• 间距系统
• 色彩理论
• 组件 API 设计

性能优化

• Core Web Vitals（LCP、INP、CLS）
• 图像优化策略
• CSS 性能
• JavaScript 包优化
• 懒加载与代码拆分
• 缓存策略
• 性能预算

SEO 最佳实践

• Meta 标签（标题、描述、关键词）
• Open Graph 协议
• Twitter Cards
• 结构化数据（JSON-LD、Schema.org）
• 技术 SEO（robots.txt、sitemap、canonical）
• 本地 SEO 与富媒体摘要

国际化（i18n）

• 文本方向（支持 LTR/RTL）
• 区域设置感知的格式化（日期、数字、货币）
• 翻译模式
• 文化因素
• 字体与字符集处理
• 多语言网站的 URL 结构

动画与动态设计

• Disney 的 12 条动画原则
• 时序与缓动函数
• 动态设计原则
• 性能（GPU 加速）
• 无障碍（prefers-reduced-motion）
• 常见 UI 动画模式

React 模式

• 复合组件
• 自定义 hooks
• 状态管理策略
• 性能优化（记忆化、代码拆分）
• 错误边界
• React 中的无障碍模式
• 测试最佳实践

表单与微文案

• 表单布局（单栏、多步向导）
• 验证模式（内联、提交时、混合）
• 无障碍表单字段与错误处理
• UX 写作原则（清晰度、语气、风格）
• 按钮标签与 CTA
• 用户友好的错误消息

字体排版与色彩系统

• 使用模块化比例的字体比例（1.2、1.333、1.618）
• 字体搭配策略
• 可读性优化（行长、间距）
• 色彩和谐（互补、三角色、类似色）
• 符合 WCAG 对比度要求（4.5:1、3:1、7:1）
• 语义化色彩令牌

移动端与框架模式

• 触控目标（最小 44x44px）
• 手势与拇指操作区
• 底部导航模式
• Vue 3 Composition API 与组合式函数
• Angular signals 与独立组件
• 与框架无关的最佳实践

电子商务与转化

• 产品发现（大型菜单、分面筛选）
• 产品详情页与变体选择
• 购物车模式（抽屉式与页面式）
• 结账优化（带进度指示的多步流程）
• 信任信号与弃购挽回

测试与分析

• 可用性测试（主持式/非主持式/游击式）
• A/B 测试方法与统计显著性
• UX 指标（SUS、NPS、CSAT、CES）
• HEART 框架与 AARRR 海盗指标
• 无障碍测试（自动化与手动）

PWA 与伦理设计

• Service worker 与缓存策略
• 离线优先模式
• Web 应用清单与添加到主屏幕
• 暗黑模式识别与伦理替代方案
• GDPR/CCPA 合规
• 隐私优先设计

SaaS 与高级设计系统

• 引导流程与激活指标
• 定价 UX（免费增值、试用、按用量计费）
• 语义化设计令牌（三级架构）
• 多品牌主题
• 组件版本管理与治理

新兴技术

• 语音 UI 对话设计与 VUI 原则
• AR/VR 空间界面与舒适度优化
• AI/ML 透明度与置信度指标
• 触觉反馈时序与平台 API
• 医疗健康 UX（HIPAA、患者安全）
• 金融 UX（PCI-DSS、双重身份验证、交易流程）
• 包容神经多样性的设计（ADHD、自闭症、阅读障碍）
• Web Components（Custom Elements、Shadow DOM、Lit）

开发

# Watch mode during development
npm run watch

# Build for production
npm run build

# Test the server
npm run dev

框架无关

所有示例和指南均与框架无关，重点关注：

• 语义化 HTML
• CSS 最佳实践
• ARIA 属性
• 无障碍标准
• 通用 UX 原则

适用于 React、Vue、Svelte、Angular 或原生 JavaScript。

v5.0.0 新增内容

安全加固

• 修复了所有 AgentSeal 安全问题（命令注入、SSRF、凭据泄露）
• 为接受标记的参数添加了 maxLength 限制
• 显式声明 MCP 功能

错误修复

• 修复了导致 MCP 客户端在 Windows 上连接失败的 console.error 启动消息

CI/CD

• GitHub Actions 流水线：构建矩阵（Node 18/20/22）、TypeScript 严格检查、安全审计
• 启用分支保护并要求通过状态检查

重大变更

为符合安全要求而重命名参数——完整迁移指南请参阅 CHANGELOG.md。

工具	旧参数	新参数
analyze_accessibility	code	content
review_usability	code	content
check_responsive	code	content
analyze_performance	code	content
check_seo	url	page_url
generate_accessibility_report	url	page_identifier
detect_dark_patterns	screenshot_url	screenshot_reference

如需了解之前版本的完整信息，请参阅变更日志。

参与贡献

欢迎贡献！请参阅我们的贡献指南，了解以下内容：

• 开发环境设置
• 添加新资源、工具或提示词
• 编码规范
• 拉取请求流程

快速开始：

1. Fork 此仓库
2. 创建功能分支
3. 进行修改
4. 提交拉取请求

安全

如需报告安全漏洞，请参阅我们的安全政策。

变更日志

请参阅 CHANGELOG.md，了解详细的变更历史。

许可证

本项目采用 MIT 许可证，详情请参阅 LICENSE 文件。

支持本项目

如果本项目帮助你打造更出色的用户体验，欢迎支持项目开发：

你的支持有助于：

• 维护和更新 UX 知识库
• 添加新工具和资源
• 保持文档及时更新
• 响应问题和功能请求

企业用户：如需优先支持、定制集成或咨询服务，请联系我们。

致谢

• W3C 的 WCAG 2.1 指南
• Jakob Nielsen 的 Nielsen 可用性启发式
• 成熟设计系统和最佳实践中的 UI 模式
• 设计系统社区中的设计令牌概念
• Google Web.dev 的 Core Web Vitals
• Google Search Central 的 SEO 最佳实践
• Disney 和 Material Design 的动画原则
• 框架社区中的 React、Vue、Angular 模式
• Unicode CLDR 和 W3C 的 i18n 标准
• Baymard Institute 研究中的电子商务模式
• Rosenfeld 和 Morville 的信息架构
• W3C 和 Google 的 PWA 标准
• darkpatterns.org 的道德设计原则
• HEART Framework（Google）和行业标准中的 UX 指标
• Amazon Alexa、Google Assistant 指南中的语音 UI 设计
• Oculus、Meta 和 Apple Vision Pro 的 AR/VR 最佳实践
• Partnership on AI 和行业实践中的 AI/ML 伦理
• HHS.gov 的 HIPAA 合规要求
• PCI Security Standards Council 的 PCI-DSS 标准
• ADHD Foundation、National Autistic Society、British Dyslexia Association 的神经多样性指南
• W3C 和 web.dev 的 Web Components 标准

链接

• npm 软件包：https://www.npmjs.com/package/@elsahafy/ux-mcp-server
• GitHub 仓库：https://github.com/elsahafy/ux-mcp-server
• 问题与反馈：https://github.com/elsahafy/ux-mcp-server/issues
• 更新日志：CHANGELOG.md
• 贡献指南：CONTRIBUTING.md
• 安全政策：SECURITY.md

---

专为 AI 辅助开发打造，全面覆盖 UX 生态：无障碍、可用性、性能、SEO、设计系统、电子商务、测试、道德设计、新兴技术（语音/AR/VR/AI）、医疗保健、金融、神经多样性等，所有领域均为一等公民。