Инструменты захвата

Дайте ИИ точный визуальный контекст. Скриншоты, выбор элементов и изображения.

Чем точнее визуальный контекст, который вы предоставляете ИИ, тем лучше он вносит правки. Proyecta включает несколько инструментов захвата.

Выбор элемента (Visual Editor)

В режиме Visual Editor каждый элемент превью становится кликабельным. Наведите курсор, чтобы подсветить элемент, кликните — чтобы выбрать. Выбранный элемент выделяется оверлеем, а в боковой панели появляются его редактируемые свойства (текст, цвета, отступы, шрифты, границы, эффекты).

После выбора элемента вы можете:

• Редактировать его напрямую — изменять свойства прямо в интерфейсе без написания промпта
• Спросить ИИ о нём — выбранный элемент передаётся как контекст, и вы можете написать "make this button bigger" или "move this section above the hero" — ИИ будет точно знать, о чём речь

Динамические элементы (вычисляемые classNames, условный рендеринг, выражения) автоматически обрабатываются через чат с ИИ с использованием структурированного промпта.

Полный список редактируемых свойств см. в разделе Visual Edit.

Вставка или перетаскивание скриншотов в чат

Чат принимает изображения напрямую:

1. Вставка — скопируйте скриншот с помощью системного шортката (Cmd+Shift+4 на Mac, Win+Shift+S на Windows) и вставьте в чат
2. Перетаскивание — перетащите любой файл изображения прямо на поле ввода чата

Поддерживаемые форматы: PNG, JPEG, WebP, GIF, AVIF. Максимальный размер: 10 МБ на изображение.

Скриншоты превью

ИИ может в любой момент самостоятельно делать скриншоты вашего превью с помощью встроенного инструмента preview_screenshot. Результаты скриншотов отображаются прямо в чате. ИИ вызывает его автоматически, когда нужно проверить внесённые изменения или понять текущее состояние вашего приложения.

Инструмент скриншотов может нацеливаться на конкретные роуты (например, /dashboard, /settings) и захватывает размеры, что помогает ИИ анализировать layout и отступы.

Часто задаваемые вопросы

Как указать ИИ на конкретную кнопку или текст?

Используйте режим Visual Editor и кликните на нужный элемент. Это передаёт ИИ точную структурированную ссылку — гораздо эффективнее, чем описывать элемент словами.

Скоро

Следующие инструменты захвата реализованы внутри, но пока не доступны в интерфейсе:

• Annotate — захватите текущее превью и нанесите на него стрелки, прямоугольники, окружности, свободные штрихи и текстовые метки перед отправкой ИИ.
• Screen Record — запишите многошаговое взаимодействие (клики, навигацию, анимации) и прикрепите захваченные кадры к сообщению в чате. Идеально подходит для отладки багов, чувствительных к тайминговым нюансам, которые не передать одним скриншотом.