Which integrations are available for this server?

Generates Android launcher icons, adaptive icons, and Android 12+ splash screens; searches Android apps via Google Play and validates touch targets against Material Design guidelines. Generates Flutter ThemeData and production-ready Flutter widgets such as bottom navigation, app bars, primary buttons, and cards from design images or extracted color palettes. Searches Google Play apps and retrieves app metadata like descriptions, ratings, icons, and HD screenshots. Searches iOS apps via the iTunes Search API, generates iOS AppIcon.appiconset assets, and validates touch targets against iOS HIG. Provides app discovery through the iTunes Search API, returning metadata, ratings, screenshot URLs, and icons for iOS apps. Applies Material Design guidelines for audits, including 48dp touch targets and contrast recommendations for Android apps. Generates React Native design tokens and production-ready React Native components from design images or extracted palettes.

How do I use mobile-design-mcp?

1. Click on "Deploy Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@mobile-design-mcp Generate app icons from logo.png for both platforms" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

Mobile Design Intelligence MCP

Full-package MCP for Flutter & React Native mobile UI/UX design.

Three modules, 12 tools — covering the full design workflow: research → audit → assets.

🎨 Features

Module 1 : Design Research

Search real apps, extract their design DNA.

Tool	What it does
`mdesign_search_apps_ios`	Search real iOS apps via iTunes Search API (free, no key). Returns metadata, ratings, screenshot URLs, icon.
`mdesign_search_apps_android`	Search Google Play apps via anti-bot browser scraping. Returns package ids, names, icons.
`mdesign_get_app_android`	Full Google Play page: description, rating, icon, HD screenshots.
`mdesign_extract_palette`	Extract dominant colors from any image URL. Returns hex + semantic roles (primary/accent/background) + WCAG luminance.

Module 2 : Design Audit

WCAG compliance, touch targets, tech stack detection.

Tool	What it does
`mdesign_audit_contrast`	Check WCAG AA/AAA contrast ratios between hex colors. Flags failing pairs.
`mdesign_audit_touch_targets`	Validate touch targets against iOS HIG 44pt / Material Design 48dp minimums.
`mdesign_detect_stack_from_files`	Detect Flutter vs React Native vs native from file names in an APK/IPA.
`mdesign_full_audit_report`	Full audit: contrast + touch targets + actionable fix recommendations.

Module 3 : Asset Factory

Generate production-ready assets from a single source image.

Tool	What it does
`mdesign_generate_app_icons`	One source → iOS AppIcon.appiconset (17 sizes + Contents.json) + Android launcher icons (5 densities, round + square) + adaptive icon layers with auto-extracted background color.
`mdesign_generate_splash`	Android 12+ splash icon sets (all densities) with themed background.
`mdesign_generate_theme`	Extract palette from image URL → emit Flutter ThemeData (`app_theme.dart`) or RN design tokens (`theme.ts`).
`mdesign_research_to_theme`	One-shot pipeline: search app → grab icon → extract palette → generate theme code. Perfect for "design like X" requests.

Module 4 : Component Generator

Generate production-ready Flutter & React Native components from a design image.

Tool	What it does
`mdesign_generate_component`	Extract palette from image → generate theme + component code. Supports: `bottom_navigation`, `app_bar`, `primary_button`, `card`.

Module 5 : A/B App Comparison

Side-by-side design metrics comparison between two apps.

Tool	What it does
`mdesign_compare_apps`	Compare two apps on palette, WCAG contrast pass rate, ratings. Returns verdict + recommendation.

Related MCP server: MCP Mobile Server

🚀 Quick Start

Windows

cd mobile-design-mcp
python -m venv .venv
.\.venv\Scripts\activate
pip install -r requirements.txt
patchright install chromium

Linux / macOS

cd mobile-design-mcp
chmod +x install.sh
./install.sh

🔌 Integration (Claude Desktop / OpenCode)

{
  "mcpServers": {
    "mobile-design": {
      "command": "/path/to/mobile-design-mcp/.venv/Scripts/python.exe",
      "args": ["/path/to/mobile-design-mcp/server.py"],
      "cwd": "/path/to/mobile-design-mcp"
    }
  }
}

📱 Example Prompts

"Search for top ride-hailing apps and generate a Flutter theme based on the most popular one" → mdesign_research_to_theme("ride hailing", framework="flutter") → app_theme.dart ready to paste

"Audit the contrast of my app's palette: #FC5404, #FFFFFF, #1C1B1F, #8CDCC4" → mdesign_full_audit_report(colors=[...], elements=[...]) → verdict + fixes

"Generate all the icons I need for iOS and Android from this 1024x1024 logo" → mdesign_generate_app_icons("~/logo.png") → 42 files in output/icons/

"Is this APK built with Flutter or React Native?" → mdesign_detect_stack_from_files(["lib/armeabi-v7a/libflutter.so", ...]) → "flutter"

🌍 Portability

	Windows	Linux	macOS
iTunes Search API	✅	✅	✅
Play Store scraping	✅	✅	✅
Image processing	✅	✅	✅
Asset generation	✅	✅	✅
Chrome auto-detect	✅	✅	✅

🔒 Privacy

This MCP is 100% local. No API keys required (iTunes Search API is free and anonymous). Your design files never leave your machine.

This server cannot be deployed

One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

Maintenance

ActivityMaintained

ResponsivenessNo issues

Resources

GitHub Repository

Need Help?

Related Servers

Related MCP Connectors

miromiroOAuth
app.miromiro
Turn any live website into brand colors, fonts, design tokens, SVGs, Lottie and paste-ready code.
Design Tools Developer Tools
2
ScreensDesignOAuth
com.screensdesign
Research mobile apps, onboarding, paywalls, and competitors with real screens, flows, and reviews.
Product Management Research & Data Design Tools
12
AppGoblin - App Store ASO & App Intel
info.appgoblin
Research iOS and Android apps, use keyword marketing tools, see app installs, revenue and sdks.
Marketing Search Research & Data
2
app-data C
io.github.DataLeadsPRO
App intelligence across Google Play and the App Store: details, reviews, and search in one API.
Search Open Data
51

Related MCP Servers

UX/UI Tools for React +
Developer Tools App Automation Content Management Systems
MarcusViniciusBarcelos
A
license
C
quality
D
maintenance
Provides AI-powered tools to apply UX/UI best practices, Nielsen's heuristics, cognitive biases, and Material-UI patterns to React components. Enables automated application of responsive design, Apple design patterns, and complete UX guidelines through natural language commands.
Updated a year ago (2025-10-20 03:18 UTC)
7
11 npm
4
MIT
MCP Mobile Server
Developer Tools CI/CD & DevOps Testing & QA Tools
cristianoaredes
A
license
B
quality
D
maintenance
Transforms AI assistants into mobile development powerhouses with 36 tools for Flutter, Android, and iOS development, including intelligent device management, automated builds, testing, and deployment workflows.
Updated 6 months ago (2026-04-06 15:16 UTC)
31
29 npm
7
MIT
Screenshot Analyzer MCP
Image & Video Processing Testing & QA Tools App Automation
Sasuke-inu
A
license
Not graded
quality
D
maintenance
Analyzes app screenshots to identify UI/UX issues, compare designs with implementations, and provide actionable fixes using GPT-4o/GPT-5.2 vision capabilities. Supports single/batch analysis, design comparison, and automated report generation for iOS, Android, web, and desktop platforms.
Updated 9 months ago (2026-01-11 00:51 UTC)
MIT
the-designer
Design Tools Documentation Access
1999AZZAR
A
license
A
quality
C
maintenance
Enables generating UI design rules, fetching color palettes, and retrieving brand design references from over 328 brands.
Updated 13 days ago (2026-09-15 22:00 UTC)
29
14
MIT