🎨 React+Material UI的UX/UI工具（MCP服务器）
](https://www.npmjs.com/package/@MarcusViniciusBarcelos/uiux-tools-react-mui) 
模型上下文协议（MCP）服务器 它提供了基于人工智能的工具，将UX/UI最佳实践应用于具有Material UI的React组件。
非常适合与 GitHub Copilot, Claude桌面版，以及支持MCP的其他AI助手。
______________________________________________________________________
✨ 特性
- �� 响应式设计 -具有MUI断点的移动优先模式
- 🎨 材料UI最佳实践 -主题间距、阿尔法透明度、sx道具
- 🍎 苹果设计模式 -自定义滚动条、流畅的动画、极简主义设计
- 🎯 尼尔森的10个启发 -完整的可用性指南
- 🧠 认知偏差 -Fitts定律、分组效应、邻近原则等
- ✅ 用户体验检查表 -即用型验证清单
______________________________________________________________________
📦 安装
选项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副本（VS代码）
添加到您的 ~/.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桌面版
增添 ~/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.tsx2. apply_material_ui_best_practices
应用Material UI最佳实践（theme.space、alpha、sx-prop）。
3. apply_apple_design
应用苹果的设计模式（自定义滚动条、动画、极简主义）。
4. apply_nielsen_heuristic
应用特定的尼尔森启发式（1-10）。
输入：
component：组件代码heuristic：启发式数（1-10）
例子：
Use tool apply_nielsen_heuristic with heuristic=1 on current component5. apply_cognitive_bias
应用认知偏见以获得更好的用户体验。
输入：
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.tsxUse tool get_ux_checklistUse tool apply_responsiveness on current file使用克劳德桌面
只需问：
“将完整的用户体验指南应用于此组件”
“给我看看用户体验清单”
______________________________________________________________________
📚 包含什么
尼尔森的10个可用性启发
- 系统状态可见性 -加载状态、进度指示器
- 系统与现实世界的匹配 -用户友好的语言
- 用户控制和自由 -取消按钮，撤消操作
- 一致性和标准 -统一的颜色、图标、图案
- 错误预防 -实时验证，输入限制
- 认可而非回忆 -可见选项、工具提示
- 灵活性和效率 -键盘快捷键，快速操作
- 美学与极简主义设计 -消除视觉噪音
- 帮助用户识别错误 -清晰的错误信息、建议
- 帮助和文档 -工具提示、辅助文本、占位符
认知偏差
- 费茨法则 -更大的触摸目标（≥44px），更近的动作
- 分组效果 -相关项目放在一起，视觉分离
- 邻近原则 -相关元素紧密相连
- 符号效果 -任务指标（徽章、进度）不完整
- 系列位置效应 -顶部/底部的重要操作
- 希克定律 -限制选择，逐步披露
材质UI图案
theme.spacing()保持间距一致alpha()为了提高透明度sx道具而不是样式化组件- 平滑过渡
theme.transitions - 自定义滚动条
- 触摸友好目标
______________________________________________________________________
🐳 码头工人
构建图像
docker build -t MarcusViniciusBarcelos/uiux-tools-react-mui .运行服务器
docker run -i MarcusViniciusBarcelos/uiux-tools-react-muiDocker 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检验员测试
npx @modelcontextprotocol/inspector node index.js______________________________________________________________________
📄 许可证
麻省 理工© Datacred 团队
______________________________________________________________________
🤝 贡献
欢迎投稿！请随时提交拉取请求。
- 分叉存储库
- 创建功能分支(
git checkout -b feature/AmazingFeature) - 提交您的更改(
git commit -m 'Add some AmazingFeature') - 推到分支(
git push origin feature/AmazingFeature) - 打开拉取请求
______________________________________________________________________
🔗 链接
______________________________________________________________________
📧 支持
______________________________________________________________________
由...制作❤️ 在React应用程序中实现更好的UX/UI