Reverse Engineering
O que é Engenharia Reversa?
A Engenharia Reversa é a ferramenta do Kaiju Hub AI de imagem para código e imagem para wireframe direcionada por caixas delimitadoras. Envie qualquer imagem — uma captura de tela, um mockup de design ou uma foto de uma interface — e use caixas delimitadoras para identificar e direcionar o que cada elemento na imagem deve fazer. Converta o resultado em código funcional ou um layout de wireframe.
Criando um projeto de engenharia reversa
Clique no botão + Novo Projeto de Engenharia Reversa para criar um novo projeto. Dê um nome e uma descrição para manter seu trabalho de engenharia reversa organizado.
Como funciona
Enviar uma imagem
Envie uma captura de tela, mockup de design ou qualquer imagem de uma interface para a ferramenta de Engenharia Reversa.
Desenhar ou detectar automaticamente caixas delimitadoras
Desenhe manualmente caixas delimitadoras ao redor de elementos de UI, ou use o auto-boxing com IA para detectar elementos automaticamente. Cada caixa destaca um componente distinto na imagem.
Direcionar comportamento do elemento
Para cada caixa delimitadora, defina o que deve acontecer — por exemplo, clicar em um botão abre um modal, um link de navegação vai para outra seção, ou um cartão exibe conteúdo específico.
Gerar código ou wireframe
Converta a imagem anotada em código de componente funcional no seu framework alvo, ou exporte-a como um layout de wireframe para edição posterior na ferramenta de Wireframe.
Recursos principais
Upload de imagem
Arraste e solte ou navegue para enviar qualquer imagem — capturas de tela, mockups, fotos de esboços desenhados à mão ou interfaces de aplicativos existentes.
Bounding Box Annotation
Desenhe caixas delimitadoras precisas ao redor de elementos individuais de UI para isolá-los para geração de código ou atribuição de comportamento.
Auto-boxing com IA
Deixe a IA detectar e demarcar automaticamente elementos de UI na sua imagem, economizando tempo em layouts complexos com muitos componentes.
Direcionamento de comportamento
Atribua comportamentos aos elementos demarcados — defina o que clicar, passar o mouse ou interagir com cada elemento deve fazer no código gerado.
Dual Output
Gere código funcional (no seu framework alvo) ou um layout de wireframe que pode ser refinado na ferramenta de Wireframe.