Imagen a código

Dale a IMG2HTML una imagen de una interfaz (una pantalla de app, un mockup, un componente que viste por ahí) y escribe su código: primero HTML con Tailwind CSS, y después React, Vue o Angular desde el editor si necesitas un componente.

El ejemplo de esta página es la pantalla de una app móvil de seguimiento de hábitos. Muestra el resultado típico con interfaces de apps: la estructura y los estados son correctos, y las correcciones son pocas y concretas.

Convertir una imagen a código Ver el ejemplo
Mockup de la pantalla principal de una app de hábitos: «Good morning, Ana», un anillo de progreso con 3 de 5 hábitos hechos, cinco filas de hábitos con casillas y una barra de pestañas inferior con «Today», «Stats», «Habits» y «Profile»
El mockup
El HTML generado abierto a 390 píxeles de ancho: saludo, anillo de progreso, filas de hábitos con casillas marcadas y sin marcar y una barra de pestañas fija abajo
La página generada

Un mockup de app móvil

Mockup de la pantalla principal de una app de hábitos: «Good morning, Ana», un anillo de progreso con 3 de 5 hábitos hechos, cinco filas de hábitos con casillas y una barra de pestañas inferior con «Today», «Stats», «Habits» y «Profile»
Entrada: Mockup de una pantalla de app móvil (PNG, 864 x 1536)
El HTML generado abierto a 390 píxeles de ancho: saludo, anillo de progreso, filas de hábitos con casillas marcadas y sin marcar y una barra de pestañas fija abajo
Resultado: el HTML generado, abierto en Chrome a 390px de ancho y sin retocar. 191 líneas de HTML con Tailwind CSS, devueltas en 19 segundos.

Lo que hizo bien

  • El saludo con el nombre en el color de acento verde azulado, la fecha y la tarjeta de resumen con esquinas redondeadas.
  • El anillo de progreso, dibujado en SVG y relleno según 3 de 5, con el mensaje «Keep going!» al lado.
  • Cinco filas de hábitos con los estados marcado y sin marcar correctos, y una barra de pestañas inferior con iconos de Font Awesome y la pestaña activa subrayada.

Lo que hay que corregir a mano

  • Los iconos emoji de cada hábito se escribieron como imágenes de placehold.co con el emoji como texto y salen como cuadrados vacíos. Usa el emoji directamente o tus propios iconos.
  • La barra de pestañas está fija abajo sin padding en la lista, así que tapa el último hábito. Añade un padding inferior de la altura de la barra.
habit-app-mockup.html (primeras líneas del body)
 <body class="text-[#0a2533] min-h-screen flex flex-col">
  <div class="max-w-md mx-auto w-full px-6 pt-12 pb-24 flex-grow">
   <!-- Header -->
   <header class="mb-8">
    <h1 class="text-4xl font-bold leading-tight">
     Good morning,
     <br/>
     <span class="text-[#006d6d]">
      Ana
     </span>
    </h1>
    <p class="text-[#708090] mt-2 text-lg">
     Tuesday, 23 September
    </p>
   </header>
   <!-- Progress Card -->
   <div class="bg-[#eef7f6] rounded-3xl p-6 mb-8 flex items-center">
    <div class="relative flex items-center justify-center w-32 h-32 mr-6">
     <svg class="w-full h-full">
      <circle class="text-[#d1e5e3]" cx="64" cy="64" fill="transparent" r="48" stroke="currentColor" stroke-width="10">
      </circle>
      <circle class="text-[#006d6d] progress-ring__circle" cx="64" cy="64" fill="transparent" r="48" stroke="currentColor" stroke-dasharray="301.59" stroke-dashoffset="120.63" stroke-linecap="round" stroke-width="10">
      </circle>
     </svg>
     <div class="absolute inset-0 flex flex-col items-center justify-center text-center">
      <span class="text-3xl font-bold text-[#006d6d]">
Abrir la página generada completa (191 líneas)

Cómo leer el código generado

El archivo de 191 líneas sigue la imagen de arriba abajo: un bloque de cabecera con el saludo, la tarjeta de resumen con un SVG en línea para el anillo de progreso, un div por hábito y un nav fijo abajo para las pestañas. Los colores salen de la imagen (el verde azulado se aplica con valores arbitrarios de Tailwind), y las casillas marcadas son divs con estilo y un check de Font Awesome, no inputs de formulario. Si necesitas que se puedan marcar, conviértelas en checkboxes o botones y añade el estado en tu framework.

Cómo obtener código listo para meter en una app

  1. Convierte la imagen y revisa la vista previa con el ancho del dispositivo de destino.
  2. Corrige lo que el modelo no podía saber: el set de iconos que usas, los datos que deben ser dinámicos y el espacio bajo las barras fijas (aquí, la barra de pestañas tapaba el último hábito).
  3. Cambia la salida a React, Vue o Angular en el editor. El marcado pasa a ser un componente que puedes dividir en otros más pequeños, como un HabitRow repetido cinco veces.

Qué imágenes funcionan mejor

  • Exportaciones de herramientas de diseño a 1x o 2x, con el texto nítido.
  • Una pantalla por imagen, para que cada conversión corresponda a una página o a un componente.
  • Textos reales en lugar de lorem ipsum, porque el texto se transcribe tal cual y te lo quedas.

Para páginas web que ves en el navegador, la página de captura a código tiene un ejemplo de escritorio. Para diseños en marcos, la guía de Figma a HTML explica cómo exportarlos. Para sacar los colores exactos de un mockup antes de empezar, usa la herramienta gratis para extraer colores de una imagen.

Preguntas sobre imagen a código

¿Qué lenguajes de programación admite imagen a código?

La conversión genera HTML con Tailwind CSS. Desde el editor puedes convertirlo en HTML con CSS en línea, en un componente de ReactJS, VueJS o AngularJS, o escribir el nombre de otro framework. Esta página solo muestra el resultado por defecto en HTML con Tailwind.

¿Funciona con diseños de apps móviles?

Sí, como página web. La app de hábitos de arriba se convirtió en una página de 390 píxeles de ancho con una barra de pestañas fija abajo. Es una buena base para una web app o un prototipo; para una app nativa, úsala como referencia de la maquetación y los textos.

¿Qué pasa con los iconos?

Los iconos de interfaz habituales (inicio, gráfico, check, usuario, ajustes) se traducen a Font Awesome 5. Los emoji, los logos de marca y los iconos personalizados no siempre están ahí y pueden volver como marcadores de posición o aproximaciones, como en este ejemplo.

¿Puede leer imágenes dibujadas a mano o de mala calidad?

Lee lo que podría leer una persona. Una foto nítida con el móvil de un wireframe en papel funciona (hay un ejemplo en la página de imagen a HTML); el texto borroso, las etiquetas diminutas y los artefactos fuertes de JPEG hacen que se inventen palabras, así que revisa los textos.