Cuadros delimitadores
Resumen
Los cuadros delimitadores son el modelo de interacción principal de la ingeniería inversa. Después de subir una imagen, dibujas cajas rectangulares alrededor de elementos individuales de la interfaz para aislarlos. Cada cuadro delimitador se convierte en una región seleccionable a la que se pueden asignar comportamientos, convertir a código o exportar como componente de wireframe.
Flujo de pantalla y grupos
El lienzo de Flujo de Pantallas te permite organizar tu trabajo de ingeniería inversa en grupos. Cada grupo puede contener múltiples imágenes de pantalla y puede tipificarse como Pantalla (páginas principales, secciones o vistas) o Modal (superposiciones, diálogos, popups, cajones). Haz doble clic en un grupo para abrirlo y trabajar con sus imágenes.
Enmarcado manual
Seleccionar la herramienta de cuadro
Elige la herramienta de dibujo de cuadro delimitador de la barra de herramientas sobre el lienzo de imagen.
Dibujar un cuadro
Haz clic y arrastra sobre la imagen para dibujar un cuadro rectangular alrededor de un elemento de la interfaz — un botón, una tarjeta, una barra de navegación, una sección hero o cualquier componente.
Redimensionar y ajustar
Arrastra los bordes o esquinas de cualquier cuadro para ajustar su posición y tamaño. Asegúrate de que envuelva ajustadamente el elemento objetivo.
Asignar comportamiento
Selecciona un cuadro y define lo que el elemento debe hacer — por ejemplo, "abre un modal", "navega a /acerca", o "alterna un menú desplegable".
Auto-detección con IA
En lugar de dibujar cada cuadro manualmente, usa la auto-detección con IA para que Kaiju Hub AI detecte y delinee automáticamente los elementos de la interfaz en tu imagen. La IA analiza el diseño visual y crea cuadros delimitadores alrededor de los componentes detectados como encabezados, botones, tarjetas, campos de entrada, imágenes y elementos de navegación.
Detección con un clic
Haz clic en el botón de auto-detección y la IA escanea toda la imagen, creando cuadros delimitadores alrededor de cada elemento de interfaz detectado.
Editar después de la detección
Los cuadros auto-detectados son completamente editables. Mueve, redimensiona, elimina o agrega nuevos cuadros para refinar los resultados.
Re-detección selectiva
Ejecuta la auto-detección en una región específica de la imagen si solo necesitas cuadros para parte del diseño.
Dirigir comportamiento
El poder de los cuadros delimitadores está en dirigir lo que cada elemento hace. Después de enmarcar un elemento, puedes asignarle comportamientos interactivos que se reflejarán en el código o wireframe generado:
Abre modal
Al hacer clic, el elemento abre un modal/diálogo. Especifica qué contenido debe mostrar el modal.
Navega a sección
El elemento actúa como un enlace o botón que navega a otra página o sección de la aplicación.
Alterna contenido
El elemento muestra u oculta contenido relacionado: menús desplegables, acordeones, paneles expandibles.
Envío de formulario
El elemento activa la validación y lógica de envío del formulario.
Acción personalizada
Define cualquier descripción de comportamiento personalizado y la IA generará los manejadores de eventos y la lógica apropiados.