Stitch

Stitch подключает ИИ-агентов к вашим UI-дизайнам, обеспечивая мгновенную генерацию на основе текстовых запросов. Наслаждайтесь настройкой без конфигурации, универсальной совместимостью и единым стилем благодаря извлечению контекста дизайна. Управляйте проектами и экранами с лёгкостью.

Инструменты разработчика Продуктивность и workflow Дизайн ★ 45 GitHub (45 ★)

Stitch — это универсальный MCP-сервер, предназначенный для бесшовной интеграции AI-агентов с вашим рабочим процессом UI/UX-дизайна через Google Stitch. Он обеспечивает мгновенную генерацию дизайна с помощью ИИ, работая с популярными редакторами, совместимыми с MCP, такими как Cursor и Claude. Сервер не требует настройки, не зависит от платформы и использует бесплатный API Google Stitch для предоставления мощного набора инструментов для извлечения дизайна, получения кода и изображений, а также интеллектуальной генерации экранов, что ускоряет и делает более согласованной разработку UI/UX.

Ключевые особенности

01Настройка без конфигурации для быстрой интеграции

02Универсальная кроссплатформенная совместимость (Windows, Mac, Linux)

03Генерация UI/UX-дизайна с помощью ИИ по текстовым запросам

04Извлечение контекста дизайна (шрифты, цвета, макеты) для единообразного стиля

0545 звезд на GitHub

06Полный набор инструментов для управления проектами и экранами Stitch (список, получение, создание, загрузка)

Примеры использования

01Автоматизация получения исходного HTML/фронтенд-кода или скриншотов высокого разрешения для существующих экранов

02Быстрая генерация новых экранов интерфейса на основе текстовых описаний и контекста дизайна

03Поддержание единообразия дизайна в новых элементах интерфейса путем извлечения существующего стилевого ДНК

Stitch MCP

Universal MCP Server for Google Stitch

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.
`list_screens`	📱 Lists all screens within a specific project.
`get_project`	🔍 Retrieves details of a specific project.
`get_screen`	ℹ️ Gets metadata for a specific screen.

💡 Pro Tip: The "Designer Flow"

To generate consistent UI, use this 2-step flow:

Extract: "Get design context from the Home Screen..."
Generate: "Using that context, generate a Chat Screen..."

This ensures your new screen matches your existing design system perfectly.

📄 License

Apache 2.0 - Open source and free to use.

Star History

Built with ❤️ by Aakash Kargathara

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

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

Автор: Aakash Kargathara.

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

Stitch MCP подключает Google Stitch (бесплатный API) к вашему AI-редактору. Вы даёте команду на естественном языке — сервер генерирует или изменяет экраны, извлекает стили, скачивает код.

Почему это удобно

Zero Config — один раз залогинились, работает везде.
Кроссплатформенность — Windows, Mac, Linux.
Бесплатно — Google Stitch API не требует оплаты.

Быстрая настройка (2 минуты)

1. Подготовка Google Cloud

У вас должен быть проект в Google Cloud с включённым Stitch API.

gcloud auth login
gcloud config set project YOUR_PROJECT_ID
gcloud auth application-default set-quota-project YOUR_PROJECT_ID
gcloud beta services mcp enable stitch.googleapis.com

2. Установка учётных данных

gcloud auth application-default login

3. Добавление в AI-редактор

Скопируйте конфигурацию в файл MCP вашего редактора.

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

Для Cursor: Settings > MCP > Add New Server

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

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

Инструмент	Описание
`extract_design_context`	Сканирует экран и извлекает «дизайн-ДНК»: шрифты, цвета, расположение элементов. Помогает сохранять единый стиль.
`fetch_screen_code`	Скачивает HTML/фронтенд-код экрана.
`fetch_screen_image`	Скачивает скриншот экрана в высоком разрешении.
`generate_screen_from_text`	Генерирует новый экран по текстовому описанию (с учётом контекста).
`create_project`	Создаёт новую рабочую область/проект.
`list_projects`	Показывает список доступных проектов Stitch.
`list_screens`	Показывает список экранов внутри проекта.
`get_project`	Возвращает детали проекта.
`get_screen`	Возвращает метаданные экрана.

Совет: «Дизайнерский поток»

Для создания согласованного интерфейса используйте двухшаговый подход:

Извлечение: «Получи дизайн-контекст с главного экрана...»
Генерация: «Используя этот контекст, создай экран чата...»

Так новый экран автоматически унаследует стилистику существующего дизайна.

Лицензия

Apache 2.0 — открытый исходный код, бесплатно для использования.

История звёзд на GitHub

Создано с ❤️ Aakash Kargathara.

Источник: https://mcpmarket.com/server/stitch