Google Antigravity

Использование Google Search и Drive для поиска референсов и генерации дизайна в Figma через MCP

Google Antigravity MCP позволяет AI-ассистентам (Claude, Cursor) искать информацию в Google, читать документы с Диска и анализировать контент. В связке с html.to.design это превращает IDE в мощный инструмент для ресерча и прототипирования.

Шаг 1. Настройка Google Antigravity MCP

Прежде чем начать, нужно подключить сервер Antigravity к вашему AI-инструменту.

1. Получите API Keys

Создайте проект в Google Cloud Console
Включите API: Custom Search API, Drive API, Gmail API
Создайте API Key в разделе Credentials
Получите Search Engine ID (CX) в Programmable Search Engine (создайте поисковик, выберите “Search the entire web”)

2. Подключите к Claude Desktop

Добавьте в конфиг (Settings → Developer → Edit Config):

{
  "mcpServers": {
    "google-antigravity": {
      "command": "npx",
      "args": [
        "-y",
        "google-antigravity-mcp",
        "--google-api-key=ВАШ_API_KEY",
        "--google-cse-id=ВАШ_SEARCH_ENGINE_ID"
      ]
    }
  }
}

Для Cursor добавьте аналогичную запись в .cursor/mcp.json.

Шаг 2. Подготовка проекта

Создайте пустую папку для проекта (например, finance-landing) и откройте её в Claude Desktop или Cursor.

Шаг 3. Ресерч и генерация

Главное преимущество Antigravity — возможность искать актуальные референсы прямо в чате.

Пример промпта для Claude:

1. Найди в Google "best modern fintech landing page design trends 2024".
2. Проанализируй найденные тренды (цвета, шрифты, структура).
3. На основе анализа создай одностраничный сайт для финансового приложения.
   - Стек: HTML + Tailwind CSS (через CDN).
   - Стиль: тёмная тема, стекломорфизм, крупные заголовки.
   - Секции: Hero, Features, Testimonials, FAQ, Footer.

AI выполнит поиск, прочитает статьи и сгенерирует код, основанный на реальных трендах.

Шаг 4. Просмотр результата

Откройте созданный index.html в браузере. Если нужно что-то поменять — попросите AI, опираясь на найденные данные (например: “Добавь раздел с тарифными планами, как у конкурентов, которых ты нашел”).

Шаг 5. Импорт в Figma

Теперь перенесем результат в Figma с помощью плагина html.to.design.

Откройте Figma и запустите плагин html.to.design.
Включите MCP endpoint на вкладке MCP.
Убедитесь, что connector html.to.design настроен в Claude (см. инструкцию в уроке Claude Desktop).

Промпт для экспорта:

Перенеси этот сайт в Figma.
Также создай отдельный фрейм Styleguide, где вынеси все цвета и шрифты,
которые ты использовал в дизайне.

Итог

Вы получили дизайн в Figma, который не просто “придуман” AI, а основан на актуальном анализе рынка и трендов через Google Search.

Полезные команды Antigravity

Поиск картинок: “Найди референсы для дашборда аналитики и опиши их структуру”
Анализ конкурентов: “Найди сайты топ-3 банковских приложений и сравни их главные страницы”
Работа с документами: “Прочитай бриф из моего файла ‘Brief.docx’ на Google Диске и сделай дизайн по нему”