De captura de pantalla a código

Haz una captura de una página que veas en el navegador e IMG2HTML escribe el HTML y el Tailwind CSS que la reconstruyen: navegación, títulos, botones, listas y bloques de código como marcado real y editable. Abajo tienes una ejecución real sobre la página de inicio de upload-post.com, con el resultado tal cual llegó.

Convertir una captura Capturar desde Chrome

Una captura de una landing publicada

Captura de la página de inicio de Upload-Post: navegación con desplegables, el titular «Social Media API, One Call, Every Platform», filas de iconos de redes sociales, una ventana de terminal con un comando curl y un botón «Create your free account»
Entrada: Captura del navegador de upload-post.com (PNG, 1280 x 800)
El HTML generado abierto en un navegador: la misma navegación, el titular a dos colores, los iconos sociales, la terminal con el comando curl, la lista de funciones, el botón de llamada a la acción y las etiquetas de integraciones
Resultado: el HTML generado, abierto en Chrome a 1280px de ancho y sin retocar. 463 líneas de HTML con Tailwind CSS, devueltas en 27 segundos.

Lo que hizo bien

  • La navegación, con las flechas de los desplegables, el botón de modo oscuro, el selector de idioma y el botón «Try for free».
  • El titular a dos colores, la insignia verde con el contador, la lista de funciones con sus iconos pequeños y el botón «Create your free account».
  • La ventana de terminal con las ocho líneas del comando curl, como texto real que puedes editar, no como imagen.
  • Iconos de marca reconocibles de Font Awesome para TikTok, Instagram, LinkedIn, YouTube, Facebook, Pinterest, Reddit, Discord, Telegram, Slack, Mastodon, WordPress, DEV y Google.

Lo que hay que corregir a mano

  • Las marcas que no están en Font Awesome 5 se aproximaron: X muestra el antiguo pájaro de Twitter, Threads una @ y Bluesky una nube. Pon los SVG oficiales.
  • Los avatares de usuario y la bandera se quedaron como marcadores de placehold.co (U1, U2, U3).
  • Los iconos ocupan tres filas en lugar de dos y la cabecera queda un poco más baja que en el original, así que hay que repasar los espaciados.
upload-post-screenshot.html (primeras líneas del body)
 <body class="text-slate-900">
  <!-- Navigation -->
  <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 flex items-center justify-between">
   <div class="flex items-center gap-2">
    <div class="bg-indigo-600 p-1.5 rounded-lg">
     <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
      </path>
     </svg>
    </div>
    <span class="text-xl font-extrabold tracking-tight">
     Upload-Post
    </span>
   </div>
   <div class="hidden md:flex items-center space-x-8 text-sm font-medium text-slate-600">
    <a class="hover:text-indigo-600" href="#">
     Add to your SaaS
    </a>
    <div class="flex items-center gap-1 cursor-pointer hover:text-indigo-600">
     Platforms
     <i class="fas fa-chevron-down text-[10px]">
     </i>
    </div>
    <div class="flex items-center gap-1 cursor-pointer hover:text-indigo-600">
     Integrations
     <i class="fas fa-chevron-down text-[10px]">
Abrir la página generada completa (463 líneas)

¿Buscas screenshot-to-code?

abi/screenshot-to-code es un proyecto de código abierto muy popular: lo ejecutas tú con tu propia API key de OpenAI o Anthropic (su autor también vende una versión alojada). IMG2HTML hace lo mismo como servicio listo para usar: nada que instalar, sin API key, un editor para corregir el resultado con instrucciones y exportación a HTML con Tailwind, React, Vue o Angular. Monta el repositorio de código abierto en tu servidor si quieres control total; usa IMG2HTML si quieres el HTML en 30 segundos desde tu navegador o desde la extensión de Chrome.

Cómo hacer una captura que se convierta bien

El modelo reconstruye todo lo que hay en la imagen, así que cuanto más limpia sea la captura, menos tendrás que borrar después. La captura de Upload-Post de arriba se hizo a 1280 x 800 después de cerrar el aviso de cookies; con el aviso abierto, también se habría reconstruido.

  • Chrome o Edge: abre las DevTools (F12), pulsa Ctrl+Shift+P (Cmd+Shift+P en Mac) y ejecuta Capture screenshot para la zona visible, o Capture node screenshot después de seleccionar una sección en el panel Elementos (con las DevTools en español, busca el comando equivalente de captura de pantalla). Sin barras del navegador ni escalado.
  • macOS: Cmd+Shift+4 y arrastra sobre la parte que quieras, o pulsa Espacio para capturar una ventana.
  • Windows: Win+Shift+S abre la barra de Recortes; la captura va al portapapeles y se puede guardar desde la notificación.

Deja el navegador al 100% de zoom y con un ancho de escritorio normal (de 1280 a 1440 píxeles). Cierra antes los avisos de cookies, las burbujas de chat y las ventanas emergentes. Si la página es larga, captura la cabecera, la cuadrícula de funciones y el pie como imágenes separadas.

De la captura a una página que funciona

  1. Sube la captura. En este ejemplo la conversión tardó 27 segundos.
  2. Compara la vista previa con el original. En esta ejecución la maquetación, los textos y el comando curl estaban bien; los iconos de X, Threads y Bluesky había que cambiarlos.
  3. Pide correcciones al editor con tus palabras o edita el código. Después cambia los marcadores de posición (aquí, los avatares y la bandera) por tus archivos.
  4. Exporta como HTML con Tailwind, o cambia a React o Vue si la página va dentro de una app.

Capturas de apps y de diseños

Una captura no tiene por qué ser de una web. Las pantallas de apps de escritorio, los paneles de administración y las plantillas de correo se convierten igual. Para pantallas de móvil y mockups, mira imagen a código; para marcos exportados desde una herramienta de diseño, mira Figma a HTML. Los cuatro ejemplos reales, uno al lado del otro, están en la página del conversor de imagen a HTML.

Si ya tienes el HTML de una página y solo quieres verlo, el visor HTML gratis lo muestra con ancho de móvil, tablet y escritorio.

IMG2HTML y otras herramientas de imagen a código

Las herramientas que más se comparan para pasar una imagen o una captura a código, y en qué se diferencian. Los datos de las demás herramientas son los que publican en sus propias webs; consúltalas para ver sus planes actuales.

HerramientaQué esResultadoPrecio
IMG2HTMLConversor alojado: app web, extensión de Chrome y APIHTML + Tailwind CSS; CSS en línea, React, Vue o Angular desde el editorDesde $1.99 al mes por 3 conversiones
screenshot-to-code (abi)Proyecto de código abierto que ejecutas con tu propia API key de OpenAI, Anthropic o Gemini; también existe una versión alojada de pagoHTML + Tailwind, React, Vue y otros stacksCódigo gratis; pagas la API del modelo
v0 de VercelCreador de apps con IA que parte de un prompt o de una imagenReact y Next.js con Tailwind y shadcn/uiPlan gratuito y planes de pago
FrontyServicio de imagen a HTML/CSS con editor visualHTML y CSSVer fronty.com
AnimaPlugin de Figma que pasa diseños a códigoReact, HTML y VueVer animaapp.com

Preguntas sobre captura a código

¿En qué código se convierte una captura?

En un único archivo HTML que usa clases de utilidad de Tailwind CSS, iconos de Font Awesome y una Google Font parecida a la de la imagen (los cuatro ejemplos de esta web salieron con Inter). Desde el editor puedes pasarlo a CSS en línea, React, Vue o Angular.

¿Copia las imágenes y el comportamiento de la página?

No. Las fotos, los avatares y los logos se convierten en marcadores de posición con una descripción, y los menús, desplegables y pestañas se reconstruyen como marcado estático. Ninguno de los cuatro resultados de ejemplo tenía más JavaScript que el script CDN de Tailwind.

¿Conviene usar una captura de página completa?

Divide las páginas largas en secciones de una o dos pantallas y conviértelas de una en una. Todos los ejemplos de esta web son capturas de una sola pantalla, y las secciones cortas también se revisan antes frente al original.

¿Puedo convertir cualquier web así?

Úsalo con páginas y diseños que sean tuyos o que tengas permiso para reproducir. El resultado es una reconstrucción de lo que muestra la captura, no el código fuente de la web original.