Skip to content

Чат с ИИ

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

Настройка

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

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

ПровайдерМоделиНастройка
OpenRouterClaude, GPT-4, Gemini, DeepSeek и другиеКлюч API с openrouter.ai
AnthropicClaude 3.5 Sonnet, Claude 3 Opus и др.Ключ API с console.anthropic.com
OpenAIGPT-4o, GPT-4 и др.Ключ API с platform.openai.com
Google AIGemini 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 этого фрейма»

Советы

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

Released under the MIT License.