MMCPMarkets
KS

kargatharaakash/stitch-mcp

Developer tools

Эта страница переведена автоматически. Технические детали смотрите в оригинале. Открыть оригинал

121 stars 27 forks Качество 67 Тренд 16Apache-2.0
Repository Install

kargatharaakash/stitch-mcp — это кандидат на сервер MCP, импортированный из https://github.com/kargatharaakash/stitch-mcp.

Обзор

kargatharaakash/stitch-mcp — это кандидат на сервер MCP, импортированный из https://github.com/kargatharaakash/stitch-mcp.

Обзор (машинный перевод)

Универсальный MCP сервер для Google Stitch

Создайте потрясающие UI/UX-дизайны мгновенно с помощью ИИ. Работает безупречно с Cursor, Claude, Antigravity и любым совместимым с MCP редактором.

Создано Аакашом Каргатарой.

🚀 Как это работает

✨ Почему это круто

  • Zero Config: Просто войдите один раз, и всё работает везде.
  • Universal: работает на Windows, Mac и Linux.
  • Бесплатно: Google Stitch API бесплатен для использования.

️ Быстрая подготовка (2 минуты)

1. Предварительное условие: Google Cloud

Вам нужен проект Google Cloud с включённым Stitch API.

2. Установите учетные данные

Это даёт stitch-mcp разрешение связаться с Google от вашего имени.

3. Добавить в ваш AI-редактор

Скопируйте и вставьте это в ваш конфигурационный файл MCP:

Для Claude Desktop: ~/Library/Application Support/Claude/claude_desktop_config.json

Для курсора: Настройки > MCP > добавление нового сервера

🛠️ Доступные инструменты

Название инструмента Что он делает
extract_design_context 🧠 Сканирует экран, чтобы извлечь «Design DNA» (шрифты, цвета, макеты). Используйте это для поддержания последовательности стиля.
fetch_screen_code* 💾 Скачивает сырой HTML/фронтенд-код экрана.

Эта страница переведена автоматически. Технические детали смотрите в оригинале.

README

Показан фрагмент оригинального README. Открыть оригинал.

Stitch MCP

Build amazing UI/UX designs instantly with AI. Works seamlessly with Cursor, Claude, Antigravity, and any MCP-compatible editor.

Created by Aakash Kargathara.

🚀 How It Works

✨ Why this is cool

  • Zero Config: Just login once and it works everywhere.
  • Universal: Works on Windows, Mac, and Linux.
  • Free: Google Stitch API is free to use.

�️ Quick Setup (2 Minutes)

1. Prerequisite: Google Cloud

You need a Google Cloud project with the Stitch API enabled.

# Login to your Google Cloud
gcloud auth login

# Set your project (replace with your actual project ID)
gcloud config set project YOUR_PROJECT_ID
gcloud auth application-default set-quota-project YOUR_PROJECT_ID

# Enable the magic
gcloud beta services mcp enable stitch.googleapis.com

2. Install the Credentials

This gives stitch-mcp permission to talk to Google on your behalf.

gcloud auth application-default login

3. Add to Your AI Editor

Copy and paste this into your MCP config file:

For Claude Desktop: ~/Library/Application Support/Claude/claude_desktop_config.json

For Cursor: Settings > MCP > Add New Server

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["-y", "stitch-mcp"],
      "env": {
         "GOOGLE_CLOUD_PROJECT": "YOUR_PROJECT_ID"
      }
    }
  }
}

🛠️ Available Tools

Tool Name What it does
extract_design_context 🧠 Scans a screen to extract “Design DNA” (Fonts, Colors, Layouts). Use this to keep style consistent.
fetch_screen_code 💾 Downloads the raw HTML/Frontend code of a screen.
fetch_screen_image 🖼️ Downloads the high-res screenshot of a screen.
generate_screen_from_text ✨ Generates a NEW screen based on your prompt (and context).
create_project 📁 Creates a new workspace/project folder.
list_projects 📋 Lists all your available Stitch projects.
Открыть полный README на GitHub

Установка

npx -y stitch-mcp
Новичок в MCP? Начните с руководства на mcpskill.org →

Конфигурация

{ "mcpServers": { "stitch": { "command": "npx", "args": ["-y", "stitch-mcp"], "env": { "GOOGLE_CLOUD_PROJECT": "YOUR_PROJECT_ID" } } } }