Ui Ux Pro MCP

🎨 UI/UX Pro MCP服务器

](https://www.npmjs.com/package/ui-ux-pro-mcp) ](https://www.npmjs.com/package/ui-ux-pro-mcp)    ](https://github.com/redf0x1/ui-ux-pro-mcp/stargazers)

AI驱动的UI/UX设计智能 --通过自然语言搜索立即访问1920多个精心策划的设计资源。

______________________________________________________________________

✨ 特性

平台特定设计

• iOS 人机界面指南 （110种模式）——颜色、排版、导航、手势、SwiftUI的可访问性、Flutter、React Native代码
• 安卓材料3设计 （112种模式）——动态颜色、排版、组件、立面、动作，使用Compose、Flutter、React Native代码
• 跨平台代码等效物 --每个模式都包含Flutter_Equiv和RN_Equiv，用于构建没有本机代码的本机感觉应用程序
• 从关键字中自动检测 --包含iOS/Android关键字的查询会自动提升特定平台的结果

______________________________________________________________________

🚀 快速开始

选项1:NPX（推荐）

npx ui-ux-pro-mcp

选项2：全局安装

npm install -g ui-ux-pro-mcp
ui-ux-pro-mcp

选项3：来源

# Clone the repository
git clone https://github.com/redf0x1/ui-ux-pro-mcp.git
cd ui-ux-pro-mcp

# Install dependencies
npm install

# Build the project
npm run build

# Run the server
npm start

______________________________________________________________________

⚙️ MCP配置

VS代码/光标

添加到MCP设置(settings.json 或 mcp.json):

选项A：使用NPX（推荐-无需安装）

{
  "mcpServers": {
    "ui-ux-pro": {
      "command": "npx",
      "args": ["ui-ux-pro-mcp", "--stdio"]
    }
  }
}

选项B：使用全局安装

{
  "mcpServers": {
    "ui-ux-pro": {
      "command": "ui-ux-pro-mcp",
      "args": ["--stdio"]
    }
  }
}

选项C：来源

{
  "mcpServers": {
    "ui-ux-pro": {
      "command": "node",
      "args": [
        "/path/to/ui-ux-pro-mcp/dist/index.js",
        "--stdio"
      ]
    }
  }
}

配置文件位置：

克劳德桌面版

添加到您的Claude Desktop配置中：

macOS： ~/Library/Application Support/Claude/claude_desktop_config.json

窗户： %APPDATA%\Claude\claude_desktop_config.json

选项A：使用NPX（推荐-无需安装）

{
  "mcpServers": {
    "ui-ux-pro": {
      "command": "npx",
      "args": ["ui-ux-pro-mcp", "--stdio"]
    }
  }
}

选项B：使用全局安装

{
  "mcpServers": {
    "ui-ux-pro": {
      "command": "ui-ux-pro-mcp",
      "args": ["--stdio"]
    }
  }
}

选项C：来源

{
  "mcpServers": {
    "ui-ux-pro": {
      "command": "node",
      "args": [
        "/path/to/ui-ux-pro-mcp/dist/index.js",
        "--stdio"
      ]
    }
  }
}

______________________________________________________________________

🔧 可用工具

AI优化查询处理

这 get_design_system 该工具使用针对AI模型消费者优化的智能查询处理：

职位加权意图分类

查询从左到右按多词短语优先级处理：

1. 多词短语优先：“登录页面”、“管理面板”、“英雄部分”具有更高的优先级
2. 然后是单个单词：“仪表板”、“着陆”、“分析”
3. 职位问题：较早的关键字获得更高的置信度（每个单词位置5%的惩罚）

示例：

AI优化输出结构

这 _meta 字段为AI模型提供透明度：

{
  "_meta": {
    "query_interpretation": "SaaS landing page with glassmorphism (dark mode)",
    "detected_intent": "landing",
    "intent_confidence": 0.85,
    "matched_keyword": "landing page",
    "keyword_position": 1,
    "warnings": []
  }
}

暗模式颜色解析

当 mode: "dark"，工具：

1. 搜索与暗模式兼容的调色板
2. 解析 Dark_Mode_Colors 数据库中的JSON
3. 将调色板颜色替换为暗模式等效颜色
4. 响应时包括亮模式和暗模式选项板

代码就绪代码段

颜色包括可粘贴代码：

{
  "colors": {
    "css_variables": "--primary: #0066FF; --background: #0A0E14; --text: #E5E5E5;",
    "tailwind_config": "colors: { primary: '#0066FF', ... }"
  }
}

布局源指示器

这 layout.source field告诉人工智能模型布局建议的来源：

• "landing" -来自登录页面模式数据库
• "dashboard" -来自产品的仪表板风格推荐

______________________________________________________________________

💬 示例提示

将这些与Claude、Cursor或任何与MCP兼容的AI一起使用：

🎨 Design Systems
"What UI style works best for a fintech dashboard?"
"Give me a color palette for a healthcare app"
"Find modern font pairings for a SaaS landing page"

📊 Data Visualization
"What chart type should I use for time-series data?"
"How do I make charts accessible?"

🖥️ Landing Pages
"Show me landing page patterns for SaaS conversion"
"What sections should a pricing page have?"

📱 UX Guidelines
"What are mobile touch target best practices?"
"Show me accessibility guidelines for forms"

⚛️ Framework-Specific
"React hooks best practices"
"Vue 3 composition API patterns"
"Next.js App Router guidelines"
"Flutter state management recommendations"

📱 Platform Guidelines (NEW)
"iOS navigation patterns"
"Android Material 3 color system"
"SwiftUI style without Swift" → Flutter/RN equivalents
"iOS typography guidelines with Flutter equivalent"
"Android dynamic color implementation"

平台关键字触发器

搜索引擎会自动从这些关键字中检测平台意图：

跨平台查询示例

🍎 iOS Design Without Swift
Query: "SwiftUI style flutter e-commerce"
Returns: iOS HIG patterns with Flutter_Equiv code (CupertinoWidgets)

🤖 Android Material 3
Query: "material design android dashboard"
Returns: Material 3 patterns with Compose, Flutter, RN equivalents

🔄 Cross-Platform Patterns
Query: "iOS navigation patterns react native"
Returns: iOS navigation guidelines with RN_Equiv implementations

______________________________________________________________________

📂 数据源

此服务器聚合了来自多个域的精心策划的设计智能：

可用框架堆栈： flutter · html-tailwind · jetpack-compose · nextjs · nuxt-ui · nuxtjs · react-native · react · shadcn · svelte · swiftui · vue

平台特定指南： ios （110条）· android （112条）

平台数据包括：

• Flutter_Equiv：Cupertino小部件/材料小部件等效物
• RN_Equiv：React Native实现模式
• 分类：颜色、排版、间距、组件、导航、手势/形状、动画/运动、图标、布局、可访问性

______________________________________________________________________

📖 API 参考

常用输入参数

所有搜索工具都接受：

search_stack 附加参数

响应格式

所有工具都以这种结构返回结果：

{
  results: Array;
  total: number;          // Total results returned
  query: string;          // Original search query
}

错误响应

{
  error: string;          // Error description
}

______________________________________________________________________

🛠️ 发展

构建命令

# Build TypeScript to JavaScript
npm run build

# Development mode with hot reload
npm run dev

# Start production server (stdio mode)
npm start

# Start HTTP server for testing
npm run start:http

测试

# Run test suite
npm test

HTTP测试模式

服务器可以在没有MCP客户端的情况下以HTTP模式运行进行测试：

# Start HTTP server on port 3456
PORT=3456 npm run start:http

然后用curl进行测试：

curl -X POST http://localhost:3456/mcp \
  -H "Content-Type: application/json" \
  -d '{"jsonrpc":"2.0","method":"tools/call","params":{"name":"search_colors","arguments":{"query":"fintech"}},"id":1}'

项目结构

ui-ux-pro-mcp/
├── src/
│   ├── index.ts          # MCP server entry point
│   ├── data/
│   │   └── loader.ts     # CSV data loading utilities
│   ├── search/
│   │   └── bm25.ts       # BM25 search implementation
│   └── tools/
│       ├── index.ts      # Tool exports
│       └── handlers.ts   # Search handlers
├── data/
│   ├── *.csv             # Design domain data files
│   ├── stacks/           # Framework-specific guidelines (12 stacks)
│   └── platforms/        # Platform guidelines (iOS HIG, Android M3)
└── dist/                 # Compiled JavaScript output

______________________________________________________________________

🌐 环境变量

______________________________________________________________________

🔌 HTTP传输模式

对于开发和测试，您可以在HTTP模式下运行服务器：

# Start HTTP server
npm run start:http

# Server runs at http://localhost:3000
# SSE endpoint: GET /sse
# Message endpoint: POST /message

卷曲测试：

curl -X POST http://localhost:3000/message \
  -H "Content-Type: application/json" \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"search_colors","arguments":{"query":"fintech"}}}'

______________________________________________________________________

❓ 故障排除

MCP连接问题

“找不到MCP服务器”

• 确保 npm run build 成功完成
• 检查MCP配置指向的路径 dist/index.js
• 验证Node.js是否在您的PATH中

“未返回任何结果”

• 尝试更广泛的搜索词
• 使用 search_all 用于跨域查询
• 检查域是否与您的查询类型匹配

“服务器没有响应”

• 重新启动VS代码/Claude桌面
• 检查终端是否有错误消息
• 验证服务器进程是否正在运行

常见查询

______________________________________________________________________

� 联系

• 电报: @红色0x1
• GitHub: @红色0x1

______________________________________________________________________

�📄 许可证

MIT许可证——见 许可证 了解详情。

______________________________________________________________________

🙏 致谢

• 原始数据： 基于 nextlevelbuilder/ui-ux-pro-max技能
• MCP-SDK： 建于 @模型上下文协议/sdk
• 搜索： BM25相关性评分排名算法

______________________________________________________________________

⭐ 标记此回购 如果你觉得它有用的话！

由...制作❤️ 通过 红色0x1