Інструменти захоплення

Надайте ШІ точний візуальний контекст. Скриншоти, вибір елементів та зображення.

Що точніший візуальний контекст ти надаєш ШІ, то кращими будуть його зміни. Proyecta пропонує кілька інструментів захоплення.

Вибір елемента (Visual Editor)

У режимі Visual Editor кожен елемент у preview стає клікабельним. Наведи курсор, щоб підсвітити, клікни, щоб вибрати. Вибраний елемент виділяється накладкою, а його редаговані властивості (текст, кольори, відступи, шрифти, рамки, ефекти) з’являються на бічній панелі.

Після вибору елемента ти можеш:

• Редагувати його безпосередньо — змінювати властивості прямо в інтерфейсі, не пишучи жодного промпту
• Запитати ШІ про нього — вибір передається як контекст, тож можна написати "make this button bigger" або "move this section above the hero", і ШІ точно знатиме, про що йдеться

Динамічні елементи (обчислювані className, умовний рендеринг, вирази) автоматично передаються до чату ШІ зі структурованим промптом.

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

Вставка або перетягування скриншотів у чат

Поле введення чату приймає зображення безпосередньо:

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

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

Скриншоти preview

ШІ може самостійно робити скриншоти твого preview в будь-який момент за допомогою вбудованого інструменту preview_screenshot. Результати скриншотів відображатимуться прямо в чаті. ШІ викликає його автоматично, коли потрібно перевірити внесені зміни або зрозуміти поточний стан застосунку.

Інструмент скриншотів може охоплювати конкретні маршрути (наприклад, /dashboard, /settings) і фіксує розміри, що допомагає ШІ аналізувати компонування та відступи.

Часті запитання

Як вказати ШІ на конкретну кнопку або текст?

Використай режим Visual Editor і клікни на елемент. Це передає ШІ точне структуроване посилання — набагато краще, ніж описувати елемент словами.

Незабаром

Наступні інструменти захоплення реалізовані внутрішньо, але ще не доступні в інтерфейсі:

• Annotate — захопи поточний preview і намалюй на ньому стрілки, прямокутники, кола, довільні лінії та текстові підписи перед відправкою ШІ.
• Screen Record — запиши багатокрокову взаємодію (кліки, навігацію, анімації) і прикріпи захоплені кадри до повідомлення в чаті. Ідеально підходить для багів, пов’язаних із часом, які неможливо передати одним скриншотом.