redf0x1/ui-ux-pro-mcp

开发工具

本页由 AI 翻译，技术细节请以原文为准。查看原文

40 stars 12 forks 质量 77 趋势 12MIT

Repository Install

🎨 AI驱动的UI/UX设计智能——通过MCP策划的1519+设计资源 |React、Vue、Next.js、Flutter等

概览

—— 通过自然语言搜索即时访问1,920+精选设计资源。 - （110 种图案）— 颜色、排版、导航、手势、SwiftUI、Flutter、React Native 代码的无障碍功能 - （112 种图案）— 动态色彩、排版、组件、高程、运动，使用 Compose、Flutter、React Native 代码 - — 每个图案都包含构建原生感觉应用的 Flutter_Equiv 和RN_Equiv - 包含 iOS/Android 关键词的查询自动提升平台特定结果添加到你的MCP设置（settings.json或mcp.json）：添加到你的Claude桌面配置中： ~/库/应用支持/Claude/claude_desktop_config.json %APPDATA%\Claude\claude_desktop_config.json 该get_design_system工具采用针对AI模型消费者优化的智能查询处理：查询按左到右处理，采用多词短语优先级：

概述（AI 翻译）

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

✨ 特色

特色	详情
📚 1,920+ 文档	跨11个领域+2个平台的策划设计知识
🔧 6 工具为LLM性能优化的整合搜索工具
⚡ BM25排名	使用行业标准文本排名快速且相关的搜索结果
🔗 通用	支持VS Code、Claude桌面、光标及任何兼容MCP的客户端
🎯 12 个框架	针对 React、Vue、Next.js、Flutter、SwiftUI、Jetpack Compose 等的专用协议栈指南
📱 平台指南	iOS人机界面指南（110）+Android材料3（112）及跨平台对应版本

平台专用设计

iOS 人机界面指南（110 种图案）——颜色、排版、导航、手势、SwiftUI、Flutter、React Native 代码的无障碍性
Android Material 3 设计（112 个图案）——动态色彩、排版、组件、高程、运动，使用 Compose、Flutter、React Native 代码

本页由 AI 翻译，技术细节请以原文为准。

README

以下为原文 README 节选，完整内容请查看原文。

🎨 UI/UX Pro MCP Server

AI-powered UI/UX design intelligence — Instantly access 1,920+ curated design resources through natural language search.

✨ Features

Feature	Details
📚 1,920+ Documents	Curated design knowledge across 11 domains + 2 platforms
🔧 6 Tools	Consolidated search tools optimized for LLM performance
⚡ BM25 Ranking	Fast, relevant search results using industry-standard text ranking
🔗 Universal	Works with VS Code, Claude Desktop, Cursor, and any MCP-compatible client
🎯 12 Frameworks	Stack-specific guidelines for React, Vue, Next.js, Flutter, SwiftUI, Jetpack Compose, and more
📱 Platform Guidelines	iOS Human Interface Guidelines (110) + Android Material 3 (112) with cross-platform equivalents

Platform-Specific Design

iOS Human Interface Guidelines (110 patterns) — Colors, typography, navigation, gestures, accessibility with SwiftUI, Flutter, React Native code
Android Material 3 Design (112 patterns) — Dynamic color, typography, components, elevation, motion with Compose, Flutter, React Native code
Cross-platform code equivalents — Every pattern includes Flutter_Equiv and RN_Equiv for building native-feeling apps without native code
Auto-detection from keywords — Queries containing iOS/Android keywords automatically boost platform-specific results

🚀 Quick Start

Option 1: NPX (Recommended)

npx ui-ux-pro-mcp

Option 2: Global Install

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

Option 3: From Source

# 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 Configuration

VS Code / Cursor

Add to your MCP settings (settings.json or mcp.json):

Option A: Using NPX (Recommended - No Installation Required)

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

Option B: Using Global Install

{
  "mcpServers": {

在 GitHub 查看完整 README

安装

npx ui-ux-pro-mcp --stdio

新手？先看 mcpskill.org 教程 →

配置

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