Screenshot to code con IA gratis: el conversor open source y la vía de DeepSeek Vision
Dos caminos para convertir una captura de diseño en código que funcione: instalar abi/screenshot-to-code con licencia MIT mediante Docker y una sola clave de modelo, o adjuntar la imagen a DeepSeek y que la reconstruya como un único archivo HTML. 15 pasos, cada afirmación cotejada con el repositorio y con api-docs.deepseek.com.
Resumen rápido
- El software es gratis, los tokens no. abi/screenshot-to-code está bajo MIT y autoalojarlo no cuesta nada, pero necesitas al menos una clave de modelo —OpenAI, Anthropic o Gemini— y pagas a ese proveedor por token.
- DeepSeek no está entre sus modelos. La lista por defecto del README trae Gemini 3 Flash / 3.1 Pro, GPT-5.5 / 5.4 Mini y Claude Opus 4.6 / 4.8, y la cadena "deepseek" no aparece en ningún archivo del repositorio.
- El modelo que ve en DeepSeek es deepseek-flash: en la tabla de precios oficial la fila Vision marca ✓ en flash y «Not supported» en deepseek-v4-pro. Las imágenes entran en base64, por URL pública o con un file_id de la Files API.
- Las dos rutas terminan igual: un archivo HTML que abres con doble clic. Con las tarifas Flash publicadas, una captura más unos miles de tokens de marcado cuestan muy por debajo de un centavo de dólar.
Install Screenshot-to-Code Locally — Convert Screenshot to Functional Code
Canal:Fahd Mirza9:38
DeepSeek R1 Coding — Testing Screenshot to Code Conversion
Canal:United Top Tech3:06
abi/screenshot-to-code README — supported stacks, required keys, Docker
Docs:github.com/abi/screenshot-to-codeDocs
DeepSeek API Docs — Vision (base64, external URL, Files API)
Docs:api-docs.deepseek.comDocs
DeepSeek API Docs — Models & Pricing (the Vision row)
Docs:api-docs.deepseek.comDocs
Las imágenes salen de dos grabaciones de pantalla limpias (sin cámara incrustada ni subtítulos quemados); las pilas admitidas, las claves necesarias, los comandos de Docker y los límites de imagen de DeepSeek están cotejados con el README de abi/screenshot-to-code, sus archivos fuente y api-docs.deepseek.com.
Las capturas acreditan a los canales que las grabaron y cada paso enlaza al timestamp exacto. Ambas grabaciones son anteriores a los nombres de modelo actuales de DeepSeek: cuando un fotograma muestra una etiqueta vieja, el texto sigue la documentación oficial.
Los 15 pasos, de una captura a una página que se abre
Empezar por una captura
- 1
Captura la parte de la interfaz que quieres reconstruir
Vale cualquier imagen fija: la demo del propio conversor usa una página de canal de YouTube, y la vía DeepSeek de abajo usa una maqueta de login de 68 KB guardada como log.PNG. Una captura gana a un brief escrito porque espaciados, color y jerarquía ya están decididos: el modelo los lee en vez de inventarlos. Recorta solo el componente que te interesa; una pantalla completa gasta tokens en marcos que luego borrarás.
El punto de partida: una tarjeta de login guardada en PNG, sin convertir nada todavía.Ver en 1:02 - 2
Abre el conversor y mira sus cuatro entradas
Tras la instalación local, http://localhost:5173 te da una caja de subida y tres atajos: Record Screen (grabar un sitio en vivo), Enter URL con Capture (el propio conversor captura una URL) e Import from Code (pegar HTML existente para seguir editándolo). El desplegable Generating elige la pila —HTML + Tailwind, HTML + CSS, React + Tailwind, Vue + Tailwind, Bootstrap o Ionic + Tailwind—. No hay cuentas de por medio; la app habla directo con tu proveedor de modelos.
El recibidor de la versión autoalojada: zona de arrastre, grabación de pantalla, captura por URL e importación de código.Ver en 4:00
Instalar el conversor open source gratuito
- 3
Revisa el equipo antes de instalar
La app es un frontend React/Vite con un backend FastAPI, y la ruta Docker necesita un Docker Engine funcionando. Fahd Mirza comprueba primero su máquina con cat /etc/*release —aquí Ubuntu 22.04.4 LTS— porque los comandos siguientes dan por hecho un shell POSIX y docker compose disponible. macOS y Windows sirven igual mientras Docker Desktop esté corriendo.
Una comprobación de dos segundos: Ubuntu 22.04.4 LTS con Docker Desktop detrás.Ver en 2:12 - 4
Clona el repo y mete una clave en backend/.env
Ejecuta git clone https://github.com/abi/screenshot-to-code, entra en el directorio y escribe la clave en el archivo .env que lee el stack de Compose —la línea del README es literalmente echo "OPENAI_API_KEY=sk-your-key" > .env—. Con una basta para arrancar; OpenAI, Anthropic y Gemini son las tres que acepta el README, y añadir más permite que la app elija una mezcla de modelos más potente en cada generación. DeepSeek no está en esa lista, y la pregunta 2 de las FAQ explica por qué el override de OpenAI Base URL no lo cambia.
La clave de ejemplo del README, escrita en el archivo que el backend carga al arrancar.Ver en 2:55 - 5
Compila y levanta los dos contenedores con un comando
Desde la raíz del repositorio, docker compose up -d --build baja las imágenes base, instala Poetry para el backend y los paquetes de yarn para el frontend, y deja ambos corriendo en segundo plano. Con la caché vacía espera unos minutos: el archivo Compose publica el backend en el puerto 7001 y el frontend en el 5173. El README avisa de que esta vía es para ejecutar, no para desarrollar: cambiar archivos no dispara una recompilación.
Toda la instalación es un comando; con -d queda en segundo plano y puedes cerrar la terminal.Ver en 3:25 - 6
Mira cómo se construyen las capas de backend y frontend
El log es lo útil cuando algo falla: backend 2/7 RUN pip install "poetry==1.4.1" y frontend 4/5 RUN yarn install son las capas que se rompen detrás de un proxy o en una red cerrada. Si se atasca ahí, casi siempre se arregla con el DNS de Docker o un mirror de npm, no con la app. Cuando termina la última capa, localhost:5173 empieza a responder.
A los 20 segundos de compilación, ambas imágenes ya pasaron sus capas de dependencias.Ver en 3:45
Convertir, guardar, afinar
- 7
Arrastra la captura dentro
Suelta el archivo sobre la caja de línea discontinua o haz clic para abrir el selector; la imagen queda en el rail izquierdo como ORIGINAL SCREENSHOT y se queda ahí como referencia para todas las versiones posteriores. Oscuro o claro es una preferencia bajo el icono de engranaje, no una diferencia funcional. Ese diálogo de ajustes es también donde puedes pegar las claves sin tocar el .env: el README indica que las claves fijadas ahí solo viven en tu navegador y sobreescriben la configuración del .env.
La misma app en tema oscuro, esperando el archivo —la zona de arrastre es casi toda la interfaz—.Ver en 4:45 - 8
Genera y compara las variantes
La app lanza varios modelos por prompt para que elijas un resultado en vez de aceptar el primero: Option 1 y Option 2 son pestañas sobre la misma captura, y cuántas salen depende de NUM_VARIANTS en backend/config.py —cuatro con entrada de imagen, dos con vídeo—. El código entra en la barra lateral a medida que se produce, con un botón Cancel si la dirección es equivocada. Cada ejecución queda en Versions, así que experimentar no hace perder nada.
Dos variantes de la misma captura a media generación, con el original fijado debajo.Ver en 5:00 - 9
Tres lecturas: Desktop, Mobile y Code
El panel de vista previa tiene tres interruptores —Desktop, Mobile y Code—, y para entregar lo que importa es Code, porque muestra el marcado bruto que puedes copiar. Reset descarta la ejecución, Download la exporta, y bajo las variantes están Update (enviar otra instrucción), Regenerate (repetir la misma) y Select and update (encuadrar la zona que quieres cambiar). Aquí el screenshot-to-code deja de ser demo y se vuelve un bucle de edición.
La página reconstruida junto a los controles para seguir trabajando sobre ella.Ver en 5:20 - 10
Guarda el marcado como un .html corriente
Copia el código de la pestaña Code a un archivo —aquí test.html dentro de mycode— y con eso termina todo el paso de compilación. La salida es HTML autocontenido con clases de Tailwind, así que no hay instalación de paquetes ni servidor de desarrollo entre tú y la página. Si lo quieres dentro de un árbol de componentes real, pégalo en un archivo React o Vue y readapta ahí los nombres de clase.
Un archivo, 3,1 kB, abierto en Firefox con clic derecho.Ver en 5:40 - 11
Ábrelo desde el disco y comprueba qué sobrevivió
Cargar el archivo directamente desde el sistema de ficheros demuestra que el resultado funciona sin servidor. Compáralo luego sin indulgencia con la miniatura ORIGINAL SCREENSHOT: layout, jerarquía tipográfica y espaciados suelen pasar bien, mientras que logos y fotos de terceros son lo que se aproxima —por eso el README recomienda con fuerza una clave de Gemini (hace la extracción de recursos, reutilizando las imágenes reales de la captura) y una de Replicate (generación de imágenes y recorte de fondo). Lo que falte es una instrucción más, no una reescritura.
La página convertida corriendo desde el disco local, con banner y cabecera reconstruidos.Ver en 6:12 - 12
Afina con un prompt de actualización, no regenerando
Escribe el cambio en la caja bajo las variantes —aquí «change the background color to deep blue»— y la app produce una versión nueva en lugar de una página nueva, así que Versions conserva las dos: Create v1 y la actualización como v2. Marcar «Include screenshot of current version?» envía también el render actual, que es lo que evita que un ajuste derive de vuelta a un layout genérico. Ese bucle es la razón por la que instalarla merece la pena.
Una instrucción después, el cambio queda guardado como v2 y v1 sigue a un clic.Ver en 6:45
Vía B: DeepSeek mira la imagen
- 13
Vía B: adjunta la captura a DeepSeek
Si prefieres no instalar nada, DeepSeek acepta la imagen directamente en su producto de chat: el clip añade log.PNG, el compositor lo muestra como adjunto de 68,14 KB, y la instrucción es una frase —«give me html and css code for this image in a single html file»—. La chip de esta grabación dice DeepThink (R1); las etiquetas del selector cambian más rápido que los tutoriales, así que confía en el mecanismo, no en el rótulo. Lo que vuelve es un archivo que pegas y abres.
La captura adjunta en el chat de DeepSeek, con debajo la exigencia de un solo archivo HTML.Ver en 1:22 - 14
Lee el plan antes que el código
El panel de razonamiento es donde se ve si el modelo miró de verdad: enumera el encabezado «Login», las etiquetas «User Name» y «Password», los campos de entrada y el botón Submit, y luego elige flexbox con justify-content y align-items centrados a 100vh de alto. Cuando una reconstrucción sale mal, ese es el punto que hay que revisar —un modelo que se saltó las etiquetas devuelve un formulario sin etiquetas—. Despliégalo, y si la descripción falla, recorta de nuevo la captura y reenvíala.
Diez segundos de razonamiento: el modelo nombra cada elemento que piensa reproducir.Ver en 1:45 - 15
Vista previa y a por el código
DeepSeek renderiza su propia respuesta en un modal de vista previa —la tarjeta de login reconstruida con etiquetas apiladas, dos campos y un Submit azul a ancho completo, bajo el rótulo «AI-generated, for reference only»—. Es una simplificación, no un clon: los halos de degradado y los iconos de campo de la maqueta desaparecieron. Copia el HTML, guárdalo como index.html y ábrelo, igual que en los pasos 10 y 11. Por decirlo claro: tanto el chat de DeepSeek como su API aceptan imágenes, pero los generadores de solo texto —incluido el generador de artefactos de este sitio— no; ahí describe la interfaz con palabras en vez de esperar que vea tu captura.
La tarjeta reconstruida dentro de la vista previa de DeepSeek: bastante cerca para seguir, bastante simplificada para revisar.Ver en 2:48