Generación de código y wireframe
Resumen
Una vez que hayas anotado tu imagen con cuadros delimitadores y asignado comportamientos, puedes generar código de componente funcional o un diseño de wireframe. La IA usa las posiciones de los cuadros delimitadores, los tipos de elementos y las direcciones de comportamiento para producir una salida precisa.
Barra lateral del asistente de IA
El panel del asistente de IA es la barra lateral del lado derecho que se usa para configurar y activar la generación de código o wireframe. Contiene los siguientes controles:
Selector de modelo de visión
Elige qué modelo de visión de IA usar para analizar tus imágenes y generar la salida. Diferentes modelos pueden producir diferentes niveles de detalle y precisión.
Selector de framework
Elige el framework objetivo para la generación de código (p. ej., React, Vue, Svelte). El código generado usará la sintaxis y los patrones del framework seleccionado.
Pestañas Componentes / Wireframes
Alterna entre generar código de componentes (pestaña Componentes) o diseños de wireframe (pestaña Wireframes) a partir de tus imágenes anotadas.
Grupos de imágenes
Lista todos tus grupos de imágenes para el proyecto de ingeniería inversa actual. Selecciona un grupo para previsualizar sus imágenes y configurar la generación. Cada grupo muestra su conteo de imágenes.
Generar bloques
Haz clic para iniciar el proceso de generación con IA. La IA analiza las imágenes del grupo seleccionado junto con las anotaciones de cuadros delimitadores y comportamientos para producir la salida.
Modos de salida
Generar código
Convierte la imagen anotada en código de componente funcional para tu framework objetivo (React, Vue, Svelte, etc.). El código generado incluye el diseño, los estilos y cualquier comportamiento que hayas definido en los cuadros delimitadores.
Generar wireframe
Exporta la imagen anotada como un diseño de wireframe que se abre en la herramienta de Wireframe. Cada cuadro delimitador se convierte en un elemento de wireframe que puedes refinar, reorganizar y conectar a otras pantallas.
Características de generación de código
Selección de framework
Elige tu framework objetivo antes de generar. Los frameworks compatibles incluyen React, Vue, Svelte, SolidJS, Angular y más.
Mapeo de comportamientos
Los comportamientos asignados a los cuadros delimitadores se traducen en manejadores de eventos, lógica de navegación, modales y otro código interactivo en la salida.
Precisión del diseño
La IA usa las posiciones y tamaños de los cuadros delimitadores de la imagen para producir un diseño que se asemeje estrechamente al diseño visual original.
Guardar en bloques
Los componentes generados se pueden guardar directamente en tu biblioteca de bloques para reutilización en otros proyectos.
Agregar al proyecto
Inserta el código generado directamente en tu proyecto actual como nuevos archivos de componentes.
Consejos
Para mejores resultados, usa imágenes de alta resolución con elementos de interfaz claros. Dibuja cuadros delimitadores ajustados alrededor de cada elemento para una generación de código más precisa. Asigna comportamientos específicos en lugar de descripciones vagas — "abre modal de registro" funciona mejor que "hace algo". La IA funciona mejor con diseños web estándar y patrones de interfaz comunes.