UX MCP服务器

](https://www.npmjs.com/package/@elsahafy/ux-mcp-server) ![CI](https://github.com/elsahafy/ux-mcp-server/actions/workflows/ci.yml) ![License: MIT](LICENSE) ![PRs Welcome](CONTRIBUTING.md) ](https://github.com/elsahafy/ux-mcp-server/issues) ![AgentSeal MCP](https://agentseal.org/mcp/https-githubcom-elsahafy-ux-mcp-server)

模型上下文协议（MCP）服务器，提供涵盖完整用户体验生态系统的全面用户体验最佳实践：可访问性指南（WCAG）、可用性启发式（Nielsen）、UI模式、设计系统、性能优化、SEO、国际化、动画、框架模式（React/Vue/Angular）、电子商务、测试、PWA、道德设计、SaaS、分析、语音UI、AR/VR、AI/ML模式、医疗保健、金融、神经多样性和网络组件。

适用于任何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个知识库）

访问按类别组织的全面用户体验知识库：

基础和核心（12个资源）

ux://可访问性/wcag -WCAG 2.1 AA准则与代码检查
ux://可用性/nielsen启发式 -尼尔森的10个可用性启发
ux://patterns/ui模式 -通用UI模式库
ux：//设计系统/原理 -设计系统原理和原语
ux://响应式/设计 -响应式设计和移动优先原则
ux：//主题/暗模式 -暗模式实施指南
ux://content/错误消息 -用户友好的错误消息库
ux://性能/优化 -核心网络生命体征和性能最佳实践
ux://seo/指南 -SEO最佳实践、元标签、结构化数据
ux://i18n/模式 -国际化和本地化模式
ux://动画/运动 -运动设计原则和可达性
ux：//反应/模式 -高级React模式和状态管理

关键功能（8个资源）

ux://forms/patterns -全面的表单设计、验证和可访问性
ux://微拷贝/指南 -用户体验写作、按钮标签、错误消息和提示音
ux://排版/系统 -字体比例、字体搭配、可读性和响应式排版
ux：//颜色/理论 -色彩和谐、WCAG对比、语义色彩和调色板
ux：//移动设备/模式 -触摸目标、手势、拇指区和移动优先设计
ux：//vue/模式 -Vue 3成分API、可成分、Pinia和最佳实践
ux：//角度/图案 -Angular独立组件、信号、RxJS和DI
ux://数据/可视化 -图表选择、可访问性、D3.js和仪表板设计

高级功能（8个资源）

ux://电子商务/模式 -产品页面、结账、转换和信任优化
ux://信息架构/模式 -IA系统、导航、卡片分类和树木测试
ux://测试/验证 -可用性测试、A/B测试、调查和分析
ux://pwa/patterns -服务人员，线下优先，应用清单和渐进式增强
ux：//伦理设计/模式 -黑暗模式、隐私、GDPR/CCPA和道德替代方案
ux://设计系统/高级 -语义标记、主题化、版本控制和治理
ux://saas/模式 -入职培训、用户体验定价、激活指标和留存率
ux://分析/指标 -用户体验指标（HEART、AARRR）、SUS、NPS和统计分析

新兴技术（8资源）

ux://语音/接口 -语音UI设计、对话模式、VUI原则
ux://ar-vr/接口 -空间UI、舒适度、临场感、6DOF和AR锚定
ux://ai ml/模式 -人工智能透明度、信心指标、建议和道德
ux://触觉/反馈 -触觉类型、时间模式和平台API
ux://医疗保健/ux -HIPAA合规性、患者安全、医疗UI和远程医疗
ux：//金融/ux -PCI-DSS、2FA、交易流程和金融科技模式
ux：//神经多样性/设计 -ADHD、自闭症、阅读障碍适应和认知可及性
ux://web组件/模式 -自定义元素、Shadow DOM、Lit、模板和封装

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

用于用户体验分析和生成的强大工具：

核心分析（11个工具）

分析可访问性 -检查WCAG违规代码
审查可用性 -根据尼尔森的启发式方法进行评估
建议模式 -为用例找到合适的UI模式
generate_component_示例 -创建可访问的HTML/CSS示例
审计设计系统 -审查设计令牌结构
check_contrast -验证WCAG颜色对比度
检查响应 -分析移动优先和响应式设计
建议错误消息 -获取用户友好的错误消息
分析性能 -检查代码是否存在性能问题和核心Web重要信息
check_seo -分析HTML以获得SEO最佳实践
建议_动画 -为UI交互推荐动画

设计与内容（5个工具） 12\. generate_color_palette -从基础颜色创建可访问的调色板 13\. generate_typey_scale -使用模块化比率生成类型比例 14\. 建议显微镜检查 -获取UI元素的UX编写建议 15\. 推荐格式模式 -找到最佳的表单布局和验证模式 16\. suggest_data_可视化 -为数据类型选择合适的图表

测试与验证（5个工具） 17\. 生成可访问性报告 -全面的WCAG审计报告 18\. suggest_ab变体 -生成A/B测试变体建议 19\. 分析信息架构 -评估导航和IA结构 20\. detect_dark_patters -识别欺骗性的UI实践 21\. 计算ux度量 -计算SUS、NPS、CSAT、任务成功率

UI生成（2个工具） 22\. 生成线框 -为页面/组件创建ASCII线框 23\. suggest_微观相互作用 -建议使用定时/缓解的微交互

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

全面的审查工作流程：

可访问性_查看 -全面的WCAG可访问性审计
可用性审计 -完成尼尔森启发式评估
设计系统安装 -创建设计系统指南
完成_审核 -全面的多维用户体验审计（可访问性、可用性、性能、响应式设计、排版、颜色、形式、搜索引擎优化）

兼容性

此MCP服务器可与支持模型上下文协议的任何客户端配合使用：

客户端	状态	配置
克劳德桌面	✅ 完全支持	见下文
克劳德代码（CLI）	✅ 完全支持	见下文
光标IDE	✅ 完全支持	见下文
Continue.dev	✅ 完全支持	见下文
Cline（VS代码）	✅ 完全支持	见下文
Zed编辑	✅ 完全支持	见下文
自定义MCP客户端	✅ 完全支持	见下文

客户端配置

克劳德桌面

配置文件位置：

macOS： ~/Library/Application Support/Claude/claude_desktop_config.json
窗户： %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。

克劳德代码（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"]
    }
  }
}

光标IDE

添加到Cursor的MCP配置(~/.cursor/mcp.json):

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

或通过光标设置进行配置→ MCP服务器→ 添加服务器。

Continue.dev

添加以继续配置(~/.continue/config.json):

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

Cline（VS代码）

在带有Cline扩展名的VS Code中，添加到MCP设置中：

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

Zed编辑

添加到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)

用户体验写作与表单

"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，辅助技术支持）

尼尔森的启发式方法

系统状态可见性
系统与现实世界的匹配
用户控制和自由
一致性与标准
错误预防
认可而非回忆
使用的灵活性和效率
美学与极简主义设计
帮助用户识别、诊断错误并从错误中恢复
帮助和文档

UI模式

导航：标题、面包屑、标签
表单：单列、多步向导、验证
反馈：吐司、模态、加载状态
数据显示：表格、卡片、空状态
输入组件：搜索、日期选择器、文件上传

设计系统原则

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

性能优化

核心网络生命体征（LCP、INP、CLS）
图像优化策略
CSS性能
JavaScript包优化
延迟加载和代码拆分
缓存策略
绩效预算

SEO最佳实践

元标签（标题、描述、关键字）
开放图形协议
推特卡
结构化数据（JSON-LD，Schema.org）
技术搜索引擎优化（robots.txt、网站地图、规范）
本地搜索引擎优化和丰富的片段

国际化（i18n）

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

动画与运动设计

迪士尼的12条动画原则
定时和缓解功能
运动设计原则
性能（GPU加速）
无障碍（更喜欢减少运动）
常见的UI动画模式

反应模式

复合组件
定制挂钩
国家管理战略
性能优化（记忆化、代码拆分）
错误边界
React中的可访问性模式
测试最佳实践

表格和缩微胶片

表单布局（单列、多步向导）
验证模式（内联、提交、混合）
可访问的表单字段和错误处理
用户体验写作原则（清晰度、语调、声音）
按钮标签和CTA
用户友好的错误消息

排版与色彩系统

带模比的类型标尺（1.2、1.333、1.618）
字体配对策略
可读性优化（线长、间距）
色彩和谐（互补、三重、类比）
WCAG对比度合规性（4.5:1、3:1、7:1）
语义颜色标记

移动和框架模式

触摸目标（最小44x44px）
手势和拇指区域
底部导航模式
视图3组成API和可组合
角度信号和独立组件
与框架无关的最佳实践

电子商务与转化

产品发现（大菜单、分面过滤器）
产品详情页面和变体选择
购物车模式（抽屉与页面）
结账优化（多步骤进行）
信任信号和废弃购物车回收

测试与分析

可用性测试（有节制/无节制/游击式）
A/B检验方法和统计显著性
用户体验指标（SUS、NPS、CSAT、CES）
HEART框架和AARRR盗版指标
可访问性测试（自动和手动）

PWA与道德设计

服务工作者和缓存策略
离线优先模式
Web应用程序清单并添加到主屏幕
暗模式检测和伦理替代方案
GDPR/CCPA合规性
隐私优先设计

SaaS和高级设计系统

入职流程和激活指标
用户体验定价（免费增值、试用、基于使用）
语义设计标记（三层架构）
多品牌主题化
组件版本控制和治理

新兴技术

语音UI对话设计和VUI原则
AR/VR空间界面和舒适度优化
AI/ML透明度和信心指标
触觉反馈时间和平台API
医疗用户体验（HIPAA，患者安全）
金融用户体验（PCI-DSS、2FA、交易流）
神经多样性包容性设计（多动症、自闭症、阅读障碍）
Web组件（自定义元素、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属性
普及标准
通用用户体验原则

适用于React、Vue、Svelte、Angular或vanilla JavaScript。

v5.0.0的新增功能

安全加固

解决了所有AgentSeal安全问题（命令注入、SSRF、凭证暴露）
添加 maxLength 标记接受参数的约束
明确的MCP能力声明

Bug修复

固定的 console.error 中断Windows上MCP客户端连接的启动消息

CI/CD

GitHub Actions管道：构建矩阵（节点18/20/22）、TypeScript严格检查、安全审计
具有所需状态检查的分支保护

重大变更

参数重命名以符合安全要求——请参阅更改日志.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`

查看完整更新日志对于以前的版本。

贡献

我们欢迎捐款！请查看我们的贡献指南有关以下内容的详细信息：

开发设置
添加新的资源、工具或提示
编码标准
拉取请求流程

快速入门：

分叉存储库
创建要素分支
进行更改
提交拉取请求

安全

有关安全漏洞，请参阅我们的安全策略.

更新日志

看更改日志.md 查看详细的变化历史。

许可证

此项目根据MIT许可证获得许可-请参阅许可证文件以获取详细信息。

支持这个项目

如果此项目有助于您构建更好的用户体验，请考虑支持其开发：

![Ko-fi](https://ko-fi.com/elsahafy)

您的支持有助于：

维护和更新用户体验知识库
添加新工具和资源
保持文档更新
响应问题和功能请求

企业用户：对于优先支持、自定义集成或咨询，联系我们.

学分

W3C的WCAG 2.1指南
Jakob Nielsen的Nielsen可用性启发式
来自既定设计系统和最佳实践的UI模式
来自设计系统社区的设计令牌概念
来自Google Web.dev的核心网络生命
谷歌搜索中心的SEO最佳实践
迪士尼动画原则与材料设计
框架社区的React、Vue、Angular模式
Unicode CLDR和W3C的i18n标准
Baymard研究所的电子商务模式研究
Rosenfeld&Morville的信息架构
W3C和谷歌的PWA标准
来自darkpatterns.org的伦理设计原则
HEART框架（谷歌）和行业标准的用户体验指标
亚马逊Alexa的语音UI设计，谷歌助手指南
来自Oculus、Meta和Apple Vision Pro的AR/VR最佳实践
来自AI和行业实践伙伴关系的AI/ML伦理
HHS.gov的HIPAA合规性
PCI安全标准委员会的PCI-DSS标准
ADHD基金会、国家自闭症协会、英国诵读困难症协会的神经多样性指南
W3C和Web.dev的Web组件标准

链接

npm包: https://www.npmjs.com/package/@elsahafy/ux mcp服务器
GitHub存储库: https://github.com/elsahafy/ux-mcp-server
问题与反馈: https://github.com/elsahafy/ux-mcp-server/issues
更新日志: 更改日志.md
贡献: 贡献.md
安全策略: 安全.md

______________________________________________________________________

为人工智能辅助开发而构建，具有完整的用户体验生态系统覆盖：可访问性、可用性、性能、搜索引擎优化、设计系统、电子商务、测试、道德设计、新兴技术（语音/AR/VR/AI）、医疗保健、金融、神经多样性等，所有这些都是一流公民。

Ux MCP Server

快速接入

详细介绍