# Extractor de estilos de diseño web Captura una página pública y exporta los colores, la tipografía, los espacios y los componentes observados junto con una imagen. > Página canónica: https://elysiatools.com/es/tools/website-design-style-extractor - **Categoría:** Design - **Palabras clave:** estilo web, tokens de diseño, CSS, tipografía, paleta de colores, captura de pantalla ## Descripción general Renderiza una página pública en Chromium sin IA. Elige escritorio (1440 × 1000) o móvil (390 × 844), preferencia clara u oscura y una espera adicional de 0–3000 ms. El ZIP incluye design.md, screenshot.png, tokens.json y tokens.css; Markdown incorpora el PNG y es autónomo. La captura cubre solo la ventana fija. Se examinan hasta 2000 elementos DOM y se muestrean hasta 1000 elementos renderizados visibles, incluidos los situados bajo el primer pliegue, sin desplazamiento automático. Los colores, las familias CSS, los espacios, los bordes, los radios, las sombras, los componentes y las propiedades personalizadas legibles son observaciones, no el sistema de diseño original. Las familias CSS no prueban qué fuente se utilizó. Las frecuencias cuentan declaraciones CSS muestreadas, no superficie pintada, funciones de marca ni conformidad de accesibilidad. Solo se admiten direcciones públicas HTTP en el puerto 80 y HTTPS en el 443, sin credenciales. Cada captura tiene límites de 40 segundos, 30 MiB de tráfico y 200 solicitudes, con un máximo de 8 MiB por documento HTML; los recursos bloqueados y el muestreo pueden reducir la cobertura. El entorno aislado desactiva las ventanas emergentes, el envío de formularios, las descargas, las conexiones WebSocket y los trabajadores en segundo plano; el contenido que depende de estas funciones puede diferir del de un navegador normal. No inicia sesión, acepta cookies, resuelve CAPTCHA, hace clic ni inspecciona marcos de otro origen. La demostración integrada ejecuta la extracción real en Chromium sin conexión, bloqueando toda la red. ## Entradas - **Origen** (select) - **URL del sitio** (text) - **Ventana** (select) - **Esquema de color** (select) - **Formato de salida** (select) - **Espera adicional (ms)** (number) ## Cuándo usarlo - Auditar la coherencia de estilos CSS y variables personalizadas en una página web publicada. - Exportar tokens de diseño (JSON y CSS) a partir de una interfaz web existente para recrear maquetas o temas. - Generar un resumen visual y documental en Markdown con la captura y reglas de estilo para especificaciones de interfaz. ## Cómo funciona - Introduce una URL pública (HTTP/HTTPS) o selecciona la demostración integrada sin conexión a la red. - Elige el tamaño del viewport (escritorio a 1440 × 1000 o móvil a 390 × 844), el esquema de color (claro u oscuro) y el tiempo de espera adicional (0 a 3000 ms). - Chromium carga la página, captura el viewport fijo y analiza hasta 2000 elementos del DOM para muestrear hasta 1000 nodos visibles. - Descarga el resultado seleccionado: un archivo Markdown autónomo con imagen incrustada o un paquete ZIP que incluye `design.md`, `screenshot.png`, `tokens.json` y `tokens.css`. ## Casos de uso - Inspección rápida de tokens visuales (radios de borde, márgenes y sombras) para acelerar la maquetación en frontend. - Documentación técnica de la versión móvil de una landing page pública en modo oscuro. - Análisis de frecuencia de colores y fuentes CSS declaradas en portales corporativos para tareas de rediseño. ## Preguntas frecuentes ### ¿El extractor identifica con precisión las fuentes tipográficas reales instaladas? No. Registra las pilas de familias declaradas en CSS (font stacks), lo que no garantiza qué fuente local o web alternativa representó el navegador en pantalla. ### ¿La herramienta puede iniciar sesión o superar avisos de cookies y CAPTCHA? No. El entorno aislado no realiza clics automáticos, no resuelve CAPTCHAs, no acepta banners de cookies ni admite páginas que requieran credenciales. ### ¿La captura de pantalla abarca toda la altura de la página web? No. El archivo gráfico cubre únicamente el viewport fijo seleccionado (1440 × 1000 o 390 × 844), aunque la muestra de estilos CSS sí analiza elementos visibles situados bajo el pliegue sin hacer desplazamiento. ### ¿Qué restricciones de red y tamaño aplican a cada extracción? Cada proceso admite únicamente puertos 80 y 443, con un límite de 40 segundos, 30 MiB de tráfico total, 200 solicitudes HTTP y un máximo de 8 MiB para el documento HTML base. ### ¿Qué archivos contiene el paquete de descarga en formato ZIP? El archivo ZIP contiene `design.md` con el informe estructurado, `screenshot.png` con la imagen del viewport, `tokens.json` con los datos analizados y `tokens.css` con las variables. ## Herramientas relacionadas - [Conversor de color CMYK](https://elysiatools.com/es/tools/cmyk-converter): Convierte colores entre HEX, RGB, HSL y CMYK. - [Convertidor de espacios de color](https://elysiatools.com/es/tools/color-space-converter): Convierte colores entre HEX, RGB, HSL, CIELAB y Display-P3 con salida CSS y control de gama. - [Visualizador de Easing y Animación CSS](https://elysiatools.com/es/tools/css-easing-visualizer): Visualiza una curva de easing cubic-bezier de CSS, previsualízala en posición/opacidad/escala, elige presets y exporta CSS listo para copiar - [Conversor de Color OKLCH](https://elysiatools.com/es/tools/oklch-color-converter): Convierte entre HEX, RGB, HSL, OKLCH y Display-P3 con la matemática de CSS Color 4, con lectura de luminosidad/croma/tono, comprobación de gamut sRGB y Display-P3, y sugerencia de recorte fuera de gamut - [Comprobador de contraste de paleta accesible](https://elysiatools.com/es/tools/accessible-color-palette-contrast-checker): Audita combinaciones de color segun WCAG 2.1 AA y AAA y propone ajustes - [Convertidor Adobe RGB a HEX](https://elysiatools.com/es/tools/adobe-rgb-to-hex-converter): Convertir valores de color Adobe RGB a formato HEX para diseño web - [Colores Análogos](https://elysiatools.com/es/tools/color-analogous): Generar esquemas de colores análogos armoniosos con colores adyacentes en la rueda de color, creando combinaciones unificadas y pacíficas - [Complemento de Color](https://elysiatools.com/es/tools/color-complement): Encontrar colores complementarios y crear esquemas armoniosos con relaciones triádicas, tetraédricas y análogas ## Ejemplos - [Ejemplos de Ant Design](https://elysiatools.com/es/samples/ant-design): Ejemplos de componentes Ant Design - Lenguaje de diseño UI de nivel empresarial y biblioteca UI React con conjunto rico de componentes de alta calidad - [Muestras de Extractor de Registro de Cambios](https://elysiatools.com/es/samples/changelog-extractor): Varios formatos de registro de cambios para probar herramientas de análisis y extracción - [Ejemplos de Extractor de Enlaces Markdown](https://elysiatools.com/es/samples/markdown-with-links): Documentos Markdown de muestra con varios tipos de enlaces para probar la herramienta de extracción de enlaces Markdown - [Ejemplos de Extractor de Números de Teléfono](https://elysiatools.com/es/samples/phone-number-extractor): Colección de texto mixto que contiene números de teléfono de varios países para pruebas de extracción