Чат с ИИ
Нажмите ⌘J (Ctrl + J), чтобы открыть ИИ-ассистента. Опишите, что вам нужно — он создаёт фигуры, задаёт стили, управляет раскладкой, работает с компонентами и анализирует дизайн.
Настройка
- Откройте панель чата (⌘J)
- Нажмите на значок настроек
- Выберите провайдера и введите ключ API
- Выберите модель
Поддерживаемые провайдеры
| Провайдер | Модели | Настройка |
|---|---|---|
| OpenRouter | Claude, GPT-4, Gemini, DeepSeek и другие | Ключ API с openrouter.ai |
| Anthropic | Claude 3.5 Sonnet, Claude 3 Opus и др. | Ключ API с console.anthropic.com |
| OpenAI | GPT-4o, GPT-4 и др. | Ключ API с platform.openai.com |
| Google AI | Gemini 2.0, Gemini 1.5 и др. | Ключ API с 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 этого фрейма»
Советы
- Выделите узлы перед запросом — ассистент знает, что выделено.
- Указывайте точные цвета, размеры и позиции для точных результатов.
- Ассистент может изменять несколько узлов за одно сообщение.
- Используйте «отменить» в редакторе — операции ИИ поддерживают полную отмену.
- Раскладка автоматически пересчитывается после каждого выполнения инструмента.