studio-design-mcp 1.0.2
Designer Studio MCP Server - A Model Context Protocol server for mobile UI inspiration via Mobbin
Requires Python: <3.11,>=3.10

# Studio Design MCP

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

## Available Tools

| Tool | Description |
|------|-------------|
| 🎨 **`search_mobbin_flows`** | Search mobile app UI flows and screens from Mobbin's curated collection |
| 🎨 **`search_mobbin_screens`** | Get specific screens for apps and flows from Mobbin |
| 🎯 **`search_dribbble_shots`** | Search design shots and inspiration on Dribbble |
| 📌 **`search_pinterest_images`** | Search design references and visual inspiration on Pinterest |

## 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`](SETUP.md) for detailed installation instructions.

### Prerequisites
- **macOS**: `brew install uv` ([Install Homebrew](https://brew.sh) first if needed)
- **Windows**: [Download uv](https://docs.astral.sh/uv/getting-started/installation/#__tabbed_1_2) and ensure it's in your PATH

### Installation

1. **Clone the repository**:
   ```bash
   git clone https://github.com/gim-home/studio-8-design-agent.git
   cd studio-8-design-agent
   ```

2. **Install dependencies**:
   ```bash
   uv sync
   uv run playwright install chromium
   ```

3. **Configure MCP in VS Code**:
   
   Create `.vscode/mcp.json` in the project directory:
   ```json
   {
     "servers": {
       "studio-design-mcp": {
         "type": "stdio",
         "command": "uv",
         "args": ["--directory", ".", "run", "-m", "studio_design_mcp"],
         "env": {}
       }
     }
   }
   ```

4. **Open in VS Code**:
   ```bash
   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
```bash
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