Ограничивающие рамки
Обзор
Ограничивающие рамки — основная модель взаимодействия обратной разработки. После загрузки изображения вы рисуете прямоугольные рамки вокруг отдельных элементов UI для их изоляции. Каждая ограничивающая рамка становится выбираемой областью, которой можно назначить поведение, преобразовать в код или экспортировать как компонент вайрфрейма.
Потоки экранов и группы
Холст Потока Экранов позволяет организовать работу по обратной разработке в группы. Каждая группа может содержать несколько изображений экранов и может быть типизирована как Экран (основные страницы, разделы или представления) или Модальное окно (наложения, диалоги, всплывающие окна, выдвижные панели). Дважды щёлкните по группе, чтобы открыть её и работать с изображениями.
Ручное обрамление
Выберите инструмент рамки
Выберите инструмент рисования ограничивающей рамки на панели инструментов над холстом изображения.
Нарисуйте рамку
Нажмите и перетащите на изображении, чтобы нарисовать прямоугольную рамку вокруг UI-элемента — кнопки, карточки, панели навигации, главного раздела или любого компонента.
Изменение размера и настройка
Перетаскивайте края или углы любой рамки для точной настройки позиции и размера. Убедитесь, что рамка плотно обрамляет целевой элемент.
Назначение поведения
Выберите рамку и определите, что элемент должен делать — например, «открывает модальное окно», «переходит на /about» или «переключает выпадающее меню».
Автоматическое обрамление ИИ
Вместо рисования каждой рамки вручную используйте автоматическое обрамление ИИ, чтобы Kaiju Hub AI автоматически обнаруживал и обводил элементы UI на изображении. ИИ анализирует визуальный макет и создаёт ограничивающие рамки вокруг обнаруженных компонентов — заголовков, кнопок, карточек, полей ввода, изображений и навигационных элементов.
One-Click Detection
Click the auto-box button и AI scans the entire image, creating ограничивающие рамки вокруг каждый обнаруженный UI элемент.
Edit After Detection
Автоматически обнаруженные рамки полностью редактируемы. Перемещайте, изменяйте размер, удаляйте или добавляйте новые рамки для уточнения результатов.
Selective Re-Detection
Запустите автоопределение для конкретной области изображения, если рамки нужны только для части макета.
Направление поведения
Сила ограничивающих рамок — в направлении того, что делает каждый элемент. После обрамления элемента вы можете назначить ему интерактивные поведения, которые будут отражены в сгенерированном коде или вайрфрейме:
Opens Modal
Нажатие на элемент открывает модальное окно/диалог. Укажите, какой контент должно отображать модальное окно.
Navigates to Section
Элемент действует как ссылка или кнопка, которая переходит на другую страницу или раздел приложения.
Toggles Content
элемент показатьs или скрытьs related content — отпуститьdowns, accordions, развернутьable панели.
Form Submission
элемент запуститьs form validation и submission logic.
Custom Action
Define любой custom behavior description и AI will генерировать the appropriate event handlers и logic.