---
title: Чат с ИИ
description: Встроенный ИИ-ассистент с более чем 90 инструментами для создания и редактирования дизайнов.
---

# Чат с ИИ

Нажмите <kbd>⌘</kbd><kbd>J</kbd> (<kbd>Ctrl</kbd> + <kbd>J</kbd>), чтобы открыть ИИ-ассистента. Опишите, что вам нужно — он создаёт фигуры, задаёт стили, управляет раскладкой, работает с компонентами и анализирует дизайн.

## Настройка

1. Откройте панель чата (<kbd>⌘</kbd><kbd>J</kbd>)
2. Нажмите на значок настроек
3. Выберите провайдера и введите ключ API
4. Выберите модель

### Поддерживаемые провайдеры

| Провайдер | Модели | Настройка |
|-----------|--------|-----------|
| **OpenRouter** | Claude, GPT-4, Gemini, DeepSeek и другие | Ключ API с [openrouter.ai](https://openrouter.ai) |
| **Anthropic** | Claude 3.5 Sonnet, Claude 3 Opus и др. | Ключ API с [console.anthropic.com](https://console.anthropic.com) |
| **OpenAI** | GPT-4o, GPT-4 и др. | Ключ API с [platform.openai.com](https://platform.openai.com) |
| **Google AI** | Gemini 2.0, Gemini 1.5 и др. | Ключ API с [aistudio.google.dev](https://aistudio.google.dev) |
| **Совместимый с OpenAI** | Любой эндпоинт с форматом API OpenAI | Собственный базовый URL + ключ. Поддержка переключения между API Completions и Responses. |
| **Совместимый с Anthropic** | Любой эндпоинт с форматом API Anthropic | Собственный базовый URL + ключ |

Без сервера, без подписки — ключ обращается напрямую к провайдеру.

## Возможности

Ассистент имеет более 90 инструментов в этих категориях:

- **Создание** — фреймы, фигуры, текст, компоненты, страницы. Рендеринг JSX для сложных раскладок.
- **Стили** — заливки, обводки, эффекты, непрозрачность, скругление углов, режимы наложения.
- **Раскладка** — авто-раскладка, сетка, выравнивание, отступы, размеры.
- **Компоненты** — создание компонентов, экземпляров, наборов компонентов. Управление переопределениями.
- **Переменные** — создание и редактирование переменных, коллекций, режимов. Привязка к заливкам.
- **Запросы** — поиск узлов, XPath-селекторы, чтение свойств, список страниц, шрифтов, выделения.
- **Инспекция** — `get_jsx` для просмотра JSX, `diff_jsx` для структурных сравнений, `describe` для определения семантической роли и проблем дизайна.
- **Анализ** — цветовая палитра, аудит типографики, согласованность отступов, обнаружение повторяющихся паттернов.
- **Экспорт** — PNG, SVG, JSX с классами Tailwind. Визуальная проверка через `export_image`.
- **Вектор** — булевы операции, работа с контурами.

## Визуальная проверка

Ассистент может визуально проверять результат своей работы. После создания или изменения дизайна он использует `export_image` для захвата изображения и сравнения результата с исходным запросом.

## Примеры запросов

- «Создай карточку с заголовком, описанием и синей кнопкой»
- «Установи одинаковое скругление углов для всех кнопок на этой странице»
- «Какие шрифты используются в этом файле?»
- «Измени фон выбранного фрейма на градиент от синего к фиолетовому»
- «Экспортируй выбранный фрейм в SVG»
- «Покажи JSX этого фрейма»

## Советы

- Выделите узлы перед запросом — ассистент знает, что выделено.
- Указывайте точные цвета, размеры и позиции для точных результатов.
- Ассистент может изменять несколько узлов за одно сообщение.
- Используйте «отменить» в редакторе — операции ИИ поддерживают полную отмену.
- Раскладка автоматически пересчитывается после каждого выполнения инструмента.