使用说明

🎨 UI/UX Pro MCP服务器

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

✨ 特性

功能	详细信息
📚 1920+文件	跨11个领域+2个平台的精心设计知识
🔧 6工具	针对LLM性能优化的整合搜索工具
⚡ BM25排名	使用行业标准文本排名快速、相关的搜索结果
🔗 通用	适用于VS Code、Claude Desktop、Cursor和任何兼容MCP的客户端
🎯 12框架	React、Vue、Next.js、Flutter、SwiftUI、Jetpack Compose等的堆栈特定指南
📱 平台指南	iOS人机界面指南（110）+Android Material 3（112），具有跨平台等效功能

平台特定设计

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"
      ]
    }
  }
}

配置文件位置：

平台	路径
macOS	`~/Library/Application Support/Code/User/mcp.json`
窗户	`%APPDATA%\Code\User\mcp.json`
Linux	`~/.config/Code/User/mcp.json`

克劳德桌面版

添加到您的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"
      ]
    }
  }
}

🔧 可用工具

工具	文档	描述
`search_ui_styles`	85	UI设计风格（Glassmorphism、极简主义、粗野主义等），包括颜色、效果和用例
`search_colors`	121	带有十六进制代码的行业调色板（SaaS、医疗保健、金融科技）
`search_typography`	74	与谷歌字体导入和顺风配置的字体配对
`search_charts`	37	带有仪表板实施建议的图表类型
`search_ux_guidelines`	115	用户体验最佳实践、注意事项、可访问性（WCAG）
`search_icons`	176	带有导入代码和用例的精选Lucide图标
`search_landing`	49	着陆模式、Bento网格（配置和地图）、响应策略
`search_products`	114	每个行业的产品类型设计建议
`search_prompts`	39	带有CSS代码段和实现清单的AI提示模板
`search_stack`	696	框架特定指南（React、Vue、Next.js、Flutter等）
`search_all`	全部	跨所有设计域的统一搜索
`get_design_system`	--	在一次调用中生成包含颜色、排版、UI风格和布局的完整设计系统

AI优化查询处理

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

职位加权意图分类

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

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

示例：

查询	检测到的意图	原因
找到“SaaS登录页面仪表板”	登录	“登录页面”短语
“SaaS登陆仪表板”	仪表板	“仪表板”是第一个
“带有英雄部分的管理面板”	仪表板	“管理面板”短语击败了“英雄”
“金融科技初创公司网站”	登陆	“网站”映射到登陆

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"，工具：

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

代码就绪代码段

颜色包括可粘贴代码：

{
  "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	`ios`, `swiftui`, `cupertino`, `iphone`, `ipad`, `apple design`, `hig`, `sf symbols`
安卓	`android`, `material 3`, `material design`, `jetpack compose`, `kotlin ui`, `dynamic color`, `m3`

跨平台查询示例

🍎 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

📂 数据源

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

域	文件	计数	内容
样式	`styles.csv`	85	UI设计趋势、效果、动画
颜色	`colors.csv`	121	行业专用调色板
排版	`typography.csv`	74	字体配对和配置
图表	`charts.csv`	37	数据可视化建议
用户体验指南	`ux-guidelines.csv`	115	可用性和可访问性最佳实践
图标	`icons.csv`	176	Lucide图标推荐
着陆	`landing.csv`	49	模式、Bento布局图、响应策略
产品中心	`products.csv`	114	行业设计建议
提示	`prompts.csv`	39	AI提示模板
堆叠	`stacks/*.csv`	766	框架特定指南（12个堆栈）
iOS	`platforms/ios.csv`	110	iOS人机界面指南，具有跨平台等效功能
安卓	`platforms/android.csv`	112	Android Material 3设计，具有跨平台等效功能

可用框架堆栈： 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 参考

常用输入参数

所有搜索工具都接受：

参数	类型	默认值	说明
`query`	string	必填	自然语言搜索查询
`max_results`	number	3	返回的最大结果数（1-50）

`search_stack` 附加参数

参数	类型	说明
`stack_name`	string	框架名称： `react`, `vue`, `nextjs`, `flutter`, `swiftui`等等。

响应格式

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

{
  results: Array<{
    id: string;           // Document identifier
    score: number;        // BM25 relevance score
    type: string;         // Document type (style, color, etc.)
    data: object;         // Full document data
  }>;
  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

🌐 环境变量

变量	默认值	描述
`MCP_LOG_LEVEL`	`info`	日志级别（调试、信息、警告、错误）
`PORT`	`3000`	HTTP服务器端口（使用HTTP传输时）
`MCP_HTTP_HOST`	`localhost`	HTTP服务器主机

🔌 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桌面
检查终端是否有错误消息
验证服务器进程是否正在运行

常见查询

需要	最佳工具
调色板	`search_styles` 随着 `domain: "color"`
UI组件	`search_styles` 随着 `domain: "style"`
最佳做法	`search_patterns` 随着 `type: "ux"`
图标	`search_components` 随着 `type: "icon"`
框架提示	`search_stack`
一切	`search_all`

� 联系

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

�📄 许可证

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

🙏 致谢

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

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

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

使用说明

🎨 UI/UX Pro MCP服务器

✨ 特性

平台特定设计

🚀 快速开始

选项1:NPX（推荐）

选项2：全局安装

选项3：来源

⚙️ MCP配置

VS代码/光标

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

选项B：使用全局安装

选项C：来源

克劳德桌面版

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

选项B：使用全局安装

选项C：来源

🔧 可用工具

AI优化查询处理

职位加权意图分类

AI优化输出结构

暗模式颜色解析

代码就绪代码段

布局源指示器

💬 示例提示

平台关键字触发器

跨平台查询示例

📂 数据源

📖 API 参考

常用输入参数

search_stack 附加参数

响应格式

错误响应

🛠️ 发展

构建命令

测试

HTTP测试模式

项目结构

🌐 环境变量

🔌 HTTP传输模式

❓ 故障排除

MCP连接问题

常见查询

� 联系

�📄 许可证

🙏 致谢

相关 MCP

图标获取工具

自动化UI设计工具

AI游戏开发工具

UI设计生成工具

Figma设计自动化工具

问题跟踪工具

`search_stack` 附加参数