# Captura de interfaz a JSON Convierte una captura en un árbol visual editable, componentes y documentación para programar. > Página canónica: https://elysiatools.com/es/tools/ui-screenshot-to-structured-json - **Categoría:** AI Tools - **Palabras clave:** Captura de interfaz a JSON, JSON, UI ## Descripción general Sube una captura estática y acepta el procesamiento externo. Solo deepseek/deepseek-v4.1-flash-1017 por OpenRouter, sin sustituciones ni reintentos. Rápido: una solicitud. Preciso: hasta dos revisiones de recortes. Las coordenadas vuelven al original; las correcciones inválidas se descartan y se marca resultado parcial. Corrige texto, tipos, padres, límites e instrucciones de cambio. JSON y Markdown incluyen correcciones locales, uso y estado, no la imagen. El árbol y los estilos son aproximaciones, no DOM/CSS originales. Confianza no significa precisión. Las máscaras reemplazan píxeles antes del envío. Ejemplo sintético sin IA. Rigen las políticas de retención del proveedor. Límites: 10 MB, 16 MP, 8192 px por lado y 240 nodos. Revisa detalles pequeños o recortados. Proveedor oficial DeepSeek fijado. El modo preciso puede alinear cuadros con Tesseract inglés local: solo coincidencias exactas cercanas de alta confianza. Los cuadros ambiguos siguen estimados; sin OCR el análisis continúa. Sin llamadas IA ni descargas adicionales. ## Entradas - **Captura** (file) - **Modo de análisis** (select) - **Acepto enviar la captura censurada y el contexto al proveedor de IA.** (checkbox) - **Contexto (opcional, 2000 caracteres)** (textarea) - **Idioma de descripción** (select) ## Cuándo usarlo - Al preparar la documentación técnica y el desglose de componentes antes de iniciar el desarrollo frontend. - Para auditar la jerarquía visual, textos y límites de cajas a partir de maquetas o capturas de aplicaciones existentes. - Cuando se necesita exportar un esquema JSON estructurado sin escribir manualmente las coordenadas ni la jerarquía de nodos. ## Cómo funciona - Carga una imagen en formato PNG, JPEG o WebP y define el contexto opcional junto al modo de análisis deseado. - El modelo DeepSeek v4.1 Flash procesa la captura e identifica la jerarquía de nodos, cajas delimitadoras (bounding boxes), tipos de elemento y textos visuales. - El modo preciso optimiza las coordenadas de elementos de texto mediante validación regional y alineación asistida por OCR local. - Revisa o ajusta localmente etiquetas, jerarquías de padres y límites antes de exportar el esquema resultante en JSON o Markdown. ## Casos de uso - Desglose rápido de pantallas de diseño a estructuras de datos para crear componentes en React, Vue o Tailwind. - Extracción automatizada de textos, botones y elementos de navegación presentes en capturas de software heredado. - Revisión y auditoría de alineación de cajas delimitadoras en interfaces complejas antes de la entrega técnica. ## Preguntas frecuentes ### ¿El JSON devuelto representa el DOM o código CSS real? No, genera una aproximación visual estructurada con coordenadas, tipos y jerarquías estimadas, no el código fuente original. ### ¿Cuáles son los límites de archivo admitidos para el análisis? Admite archivos de hasta 10 MB, un máximo de 16 megapíxeles, 8192 px por lado y un límite de hasta 240 nodos por captura. ### ¿Cómo protege la herramienta la información sensible de la captura? Las herramientas de máscara censuran los píxeles antes de la transmisión externa hacia el proveedor del modelo DeepSeek. ### ¿Se puede probar la herramienta sin enviar datos a la IA externa? Sí, seleccionando el modo de demostración puede explorar un resultado sintético completo sin realizar llamadas de red externas. ### ¿Qué modelo de inteligencia artificial realiza la extracción? Se utiliza exclusivamente deepseek/deepseek-v4.1-flash-1017 mediante OpenRouter, sin sustitución de modelos ni reintentos ocultos. ## Herramientas relacionadas - [Reconocimiento OCR de Facturas y Recibos](https://elysiatools.com/es/tools/ai-image-to-receipt-json): Extraer información clave de imágenes de facturas/recibos y convertir a formato JSON personalizado usando modelos de visión IA - [Reconocimiento OCR de Tarjeta de Identidad AI](https://elysiatools.com/es/tools/ai-ocr-id-card-to-json): Extraer información clave de imágenes de tarjetas de identidad y convertir a formato JSON usando modelos de visión AI - [Generador de Data URI](https://elysiatools.com/es/tools/data-uri-generator): Convierte archivos en Data URIs (Base64 o porcentaje-codificado) para incrustar imágenes, fuentes y recursos directamente en HTML, CSS o Markdown - [Visualizador musical de partículas de imagen](https://elysiatools.com/es/tools/image-particle-music-visualizer): Convierte una imagen en partículas reactivas al audio. Previsualiza localmente y exporta un MP4 a 30 fps, una portada PNG y ajustes JSON. - [De paleta de imagen a design tokens](https://elysiatools.com/es/tools/image-to-design-tokens): Extrae los colores dominantes de una imagen con k-means y expórtalos como variables CSS / SCSS / configuración Tailwind / tokens JSON, con nombres y escala de tonos - [Generador de Facturas PDF](https://elysiatools.com/es/tools/pdf-invoice-generator): Genera una factura PDF con marca desde partidas estructuradas - [AI Imagen a Markdown](https://elysiatools.com/es/tools/ai-image-to-markdown): Extraer texto de imágenes y convertir a formato markdown usando modelos de visión AI - [Retoque de Fotos con IA](https://elysiatools.com/es/tools/ai-image-style-sharp-optimizer): Usa un modelo visual de IA para reconocer la imagen y retocarla automaticamente ## Ejemplos - [Ejemplos de Procesamiento de Imágenes Web Python](https://elysiatools.com/es/samples/web-image-processing-python): Ejemplos de procesamiento de imágenes Web Python usando PIL/Pillow incluyendo lectura, guardado, redimensionamiento y conversión de formato - [Ejemplos de Procesamiento de Imágenes Android Java](https://elysiatools.com/es/samples/android-image-processing-java): Ejemplos de procesamiento de imágenes Android Java incluyendo lectura/escritura, escalado y conversión de formato - [Ejemplos de Procesamiento de Imágenes Android Kotlin](https://elysiatools.com/es/samples/android-image-processing-kotlin): Ejemplos de procesamiento de imágenes Android Kotlin incluyendo lectura/escritura, escalado y conversión de formato - [Ejemplos de Procesamiento de Imágenes Web Rust](https://elysiatools.com/es/samples/web-image-processing-rust): Ejemplos de procesamiento de imágenes Web Rust incluyendo lectura/escritura, escalado y conversión de formato ## Contenido relacionado - [Estructurar una captura de interfaz, revisarla y entregarla a desarrollo](https://elysiatools.com/es/hubs/ui-screenshot-structure-review-and-development-handoff): Convierte una captura autorizada en un árbol de componentes revisado, JSON validado y notas de desarrollo, conservando coordenadas, incertidumbres y evidencias de cada corrección.