Caixas delimitadoras
Visão geral
As caixas delimitadoras são o modelo de interação central da Engenharia Reversa. Após enviar uma imagem, você desenha caixas retangulares ao redor de elementos individuais de UI para isolá-los. Cada caixa delimitadora se torna uma região selecionável que pode ter comportamentos atribuídos, ser convertida em código ou exportada como um componente de wireframe.
Fluxo de telas e grupos
O canvas de Fluxo de Telas permite que você organize seu trabalho de engenharia reversa em grupos. Cada grupo pode conter múltiplas imagens de tela e pode ser tipificado como Tela (páginas principais, seções ou visualizações) ou Modal (sobreposições, diálogos, popups, gavetas). Clique duas vezes em um grupo para abri-lo e trabalhar com suas imagens.
Demarcação manual
Selecionar a ferramenta de caixa
Escolha a ferramenta de desenho de caixa delimitadora na barra de ferramentas acima do canvas de imagem.
Desenhar uma caixa
Clique e arraste na imagem para desenhar uma caixa retangular ao redor de um elemento de UI — um botão, um cartão, uma barra de navegação, uma seção hero ou qualquer componente.
Redimensionar e ajustar
Arraste as bordas ou cantos de qualquer caixa para ajustar sua posição e tamanho. Certifique-se de que ela envolva firmemente o elemento alvo.
Atribuir comportamento
Selecione uma caixa e defina o que o elemento deve fazer — por exemplo, "abre um modal", "navega para /sobre" ou "alterna um menu dropdown".
Auto-boxing com IA
Em vez de desenhar cada caixa manualmente, use o auto-boxing com IA para que o Kaiju Hub AI detecte e contorne automaticamente elementos de UI na sua imagem. A IA analisa o layout visual e cria caixas delimitadoras ao redor de componentes detectados como cabeçalhos, botões, cartões, entradas, imagens e itens de navegação.
Detecção com um clique
Clique no botão de auto-boxing e a IA escaneia a imagem inteira, criando caixas delimitadoras ao redor de cada elemento de UI detectado.
Editar após detecção
As caixas detectadas automaticamente são totalmente editáveis. Mova, redimensione, exclua ou adicione novas caixas para refinar os resultados.
Re-detecção seletiva
Execute a detecção automática em uma região específica da imagem se você só precisar de caixas para parte do layout.
Direcionando comportamento
O poder das caixas delimitadoras está em direcionar o que cada elemento faz. Após demarcar um elemento, você pode atribuir comportamentos interativos que serão refletidos no código ou wireframe gerado:
Abre modal
Clicar no elemento abre um modal/diálogo. Especifique qual conteúdo o modal deve exibir.
Navega para seção
O elemento funciona como um link ou botão que navega para outra página ou seção do aplicativo.
Alterna conteúdo
O elemento mostra ou oculta conteúdo relacionado — dropdowns, acordeões, painéis expansíveis.
Envio de formulário
O elemento aciona a lógica de validação e envio de formulário.
Ação personalizada
Defina qualquer descrição de comportamento personalizado e a IA gerará os manipuladores de eventos e lógica apropriados.