Studio Design MCP

A Model Context Protocol (MCP) server for design inspiration - search UI patterns, designs, and references across multiple platforms.

Available Tools

Features

• Multi-Platform Search: Access design inspiration from Mobbin, Dribbble, and Pinterest
• Mobile UI Patterns: Explore real-world mobile app screenshots and flows
• Design References: Find visual inspiration for UI/UX projects
• No Authentication Required: Works out of the box without credentials

Quick Start

See SETUP.md for detailed installation instructions.

Prerequisites

• macOS: brew install uv (Install Homebrew first if needed)
• Windows: Download uv and ensure it's in your PATH

Installation

1. Clone the repository:

   git clone https://github.com/gim-home/studio-8-design-agent.git
   cd studio-8-design-agent
   

2. Install dependencies:

   uv sync
   uv run playwright install chromium
   

3. Configure MCP in VS Code:

   Create .vscode/mcp.json in the project directory:

   {
     "servers": {
       "studio-design-mcp": {
         "type": "stdio",
         "command": "uv",
         "args": ["--directory", ".", "run", "-m", "studio_design_mcp"],
         "env": {}
       }
     }
   }
   

4. Open in VS Code:

   code .
   

5. Verify setup:

   • Press Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux)
   • Type: MCP: List Servers
   • Verify "studio-design-mcp" is running

Usage Examples

Once the MCP server is running, use these commands in GitHub Copilot Chat:

Mobbin - Mobile UI Flows

Search Mobbin flows for Instagram app

Get onboarding screens from Twitter app in Mobbin

Dribbble - Design Inspiration

Search Dribbble for "dashboard design"

Find "mobile app login" designs on Dribbble

Pinterest - Visual References

Search Pinterest for "modern UI design"

Find "minimalist website" examples on Pinterest

Development

Running Locally

uv run -m studio_design_mcp

Architecture

• MCP Framework: Built on FastMCP for easy tool registration
• Mobbin Search: Local catalog search for mobile app UI flows and screens
• Dribbble Integration: Headless browser automation using Playwright
• Pinterest Integration: Headless browser automation using Playwright

Recent Updates

• ✅ Added Dribbble shot search integration
• ✅ Added Pinterest image search integration
• ✅ Mobbin local catalog with flows and screens data
• ✅ Simplified setup - no authentication required

Contributing

This project is focused on design inspiration across multiple platforms. When adding new features, please ensure they align with this mission.

License

MIT License