65 lines
5.4 KiB
Markdown
65 lines
5.4 KiB
Markdown
---
|
||
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 этого фрейма»
|
||
|
||
## Советы
|
||
|
||
- Выделите узлы перед запросом — ассистент знает, что выделено.
|
||
- Указывайте точные цвета, размеры и позиции для точных результатов.
|
||
- Ассистент может изменять несколько узлов за одно сообщение.
|
||
- Используйте «отменить» в редакторе — операции ИИ поддерживают полную отмену.
|
||
- Раскладка автоматически пересчитывается после каждого выполнения инструмента.
|