Ui/ux Tools React + Material Ui

🎨 React + Material-UI 的 UX/UI 工具（MCP 服务）

Model Context Protocol（MCP）服务，提供 AI 驱动的工具，帮助将 UX/UI 最佳实践应用于使用 Material-UI 的 React 组件。

非常适合搭配 GitHub Copilot、Claude Desktop 以及其他支持 MCP 的 AI 助手使用。

---

✨ 功能

• �� 响应式设计 - 采用移动优先模式和 MUI 断点
• 🎨 Material-UI 最佳实践 - 主题间距、alpha 透明度、sx 属性
• 🍎 Apple 设计模式 - 自定义滚动条、流畅动画、极简设计
• 🎯 Nielsen 的 10 项启发式原则 - 完整的可用性指南
• 🧠 认知偏差 - Fitts 定律、分组效应、邻近原则等
• ✅ UX 检查清单 - 可直接使用的验证清单

---

📦 安装

选项 1：通过 npx（推荐）

无需安装！直接通过 npx 使用：

npx @marcusbarcelos/uiux-tools-react-mui

选项 2：全局安装

npm install -g @marcusbarcelos/uiux-tools-react-mui

选项 3：Docker

docker run -i marcusbarcelos/uiux-tools-react-mui

---

⚙️ 配置

GitHub Copilot（VS Code）

将配置添加到 ~/.config/Code/User/mcp.json（Linux/Mac）或 %APPDATA%\Code\User\mcp.json（Windows）：

{
  "servers": {
    "uiux-tools": {
      "command": "npx",
      "args": ["-y", "@marcusbarcelos/uiux-tools-react-mui"]
    }
  }
}

Claude Desktop

将配置添加到 ~/Library/Application Support/Claude/claude_desktop_config.json（Mac）或 %APPDATA%\Claude\claude_desktop_config.json（Windows）：

{
  "mcpServers": {
    "uiux-tools": {
      "command": "npx",
      "args": ["-y", "@marcusbarcelos/uiux-tools-react-mui"]
    }
  }
}

Docker 配置

{
  "servers": {
    "uiux-tools": {
      "command": "docker",
      "args": ["run", "-i", "marcusbarcelos/uiux-tools-react-mui"]
    }
  }
}

---

🚀 可用工具

1. apply_responsiveness

应用移动优先的响应式设计模式。

输入：

• component：组件代码或文件名

示例：

Use tool apply_responsiveness on src/components/MyComponent.tsx

2. apply_material_ui_best_practices

应用 Material-UI 最佳实践（theme.spacing、alpha、sx 属性）。

3. apply_apple_design

应用 Apple 设计模式（自定义滚动条、动画、极简主义）。

4. apply_nielsen_heuristic

应用指定的 Nielsen 启发式原则（1-10）。

输入：

• component：组件代码
• heuristic：启发式原则编号（1-10）

示例：

Use tool apply_nielsen_heuristic with heuristic=1 on current component

5. apply_cognitive_bias

应用认知偏差以改善 UX。

输入：

• component：组件代码
• bias：可选值：fitts、grouping、proximity、zeigarnik、serial-position、hicks

6. apply_complete_ux

一次性应用所有 UX/UI 指南。

7. get_ux_checklist

获取用于 UX/UI 审查的验证清单。

---

💡 使用示例

配合 GitHub Copilot 使用

Use tool apply_complete_ux on src/components/Notification.tsx

Use tool get_ux_checklist

Use tool apply_responsiveness on current file

配合 Claude Desktop 使用

只需提出请求：

“将完整的 UX 指南应用于此组件”

“向我展示 UX 检查清单”

---

📚 包含内容

Nielsen 的 10 项可用性启发式原则

1. 系统状态的可见性 - 加载状态、进度指示器
2. 系统与现实世界的匹配 - 用户友好的语言
3. 用户控制与自由 - 取消按钮、撤销操作
4. 一致性与标准 - 统一的颜色、图标和模式
5. 错误预防 - 实时验证、输入限制
6. 识别而非回忆 - 可见选项、工具提示
7. 灵活性与效率 - 键盘快捷键、快速操作
8. 美观且简约的设计 - 去除视觉干扰
9. 帮助用户识别错误 - 清晰的错误消息、建议
10. 帮助与文档 - 工具提示、辅助文本、占位符

认知偏差

• Fitts 定律 - 更大的触控目标（≥44px）、更近的操作
• 分组效应 - 将相关项目放在一起，并进行视觉区分
• 邻近原则 - 将相关元素放得更近
• Zeigarnik 效应 - 未完成任务指示器（徽标、进度）
• 序列位置效应 - 将重要操作放在顶部或底部
• Hick 定律 - 限制选项，渐进式展示

Material-UI 模式

• 使用 theme.spacing() 实现一致的间距
• 使用 alpha() 设置透明度
• 使用 sx 属性，而不是 styled 组件
• 使用 theme.transitions 实现平滑过渡
• 自定义滚动条
• 适合触屏操作的目标区域

---

🐳 Docker

构建镜像

docker build -t MarcusViniciusBarcelos/uiux-tools-react-mui .

运行服务端

docker run -i MarcusViniciusBarcelos/uiux-tools-react-mui

Docker Hub

docker pull MarcusViniciusBarcelos/uiux-tools-react-mui

---

🛠️ 开发

克隆仓库

git clone https://github.com/MarcusViniciusBarcelos/uiux-tools-react-mui.git
cd uiux-tools-react-mui
npm install

本地运行

npm start

使用 Inspector 测试

npx @modelcontextprotocol/inspector node index.js

---

📄 许可证

MIT © Datacred 团队

---

🤝 参与贡献

欢迎贡献！请随时提交 Pull Request。

1. Fork 仓库
2. 创建功能分支（git checkout -b feature/AmazingFeature）
3. 提交更改（git commit -m 'Add some AmazingFeature'）
4. 推送到分支（git push origin feature/AmazingFeature）
5. 发起 Pull Request

---

🔗 链接

• Model Context Protocol 文档
• Material-UI 文档
• Nielsen Norman Group - 10 项可用性启发式原则
• UX 设计法则

---

📧 支持

• 🐛 报告问题
• 💬 讨论

---

为改善 React 应用的 UX/UI 而倾心打造 ❤️