Análisis de estructura (DOM)
Recorre el árbol del DOM, cuenta y clasifica los elementos, y convierte la estructura del documento en algo visual en lugar de un esquema en bruto.
PageDNA
Convierte cualquier sitio web en ADN visual
Visualización generativa de la estructura, el estilo y el comportamiento de un sitio web.
Aplicación web
En linea
Página oficial del producto
Editor:
POLPROG
Página oficial del producto
3
Dimensiones de análisis
5
Visualizaciones exploradas
2
Modos (archivo / URL)
1
Backend de Playwright
01 / PageDNA
Acerca de
PageDNA convierte cualquier sitio web en ADN visual. Analiza la página a través de tres ejes - estructura (DOM), estilo (CSS, layout, tipografía, color) y comportamiento (interactividad, animación, red) - y renderiza el resultado como una visualización generativa en lugar de un panel.
El frontend se ejecuta enteramente en el navegador, por lo que una página cargada por el usuario puede analizarse sin subir nada. El modo URL está impulsado por un pequeño backend de Node.js + Playwright, que carga la página objetivo en un navegador real, captura su estructura, estilo y comportamiento, y envía los datos de vuelta al motor visual.
Entre las posibles visualizaciones que explora el proyecto se incluyen DOM City (estructura como edificios), CSS Portrait (estilo como paleta y textura), Layout DNA (forma compositiva), Interaction Map (topología de eventos) y Code Galaxy (estructura de archivos y módulos). Cada una se muestra solo una vez que está realmente implementada.
02 / Características principales
Características principales
Las capacidades más importantes explicadas de forma práctica.
Análisis de estilo (CSS, layout, color, tipografía)
Extrae la paleta, la escala tipográfica y el lenguaje de layout de una página para que las decisiones de diseño se vuelvan legibles de un vistazo.
Análisis de comportamiento / interactividad
Captura interacciones, animaciones y llamadas de red para que el comportamiento de la página aparezca junto a su estructura estática.
Frontend en el navegador
El motor de visualización se ejecuta enteramente en el navegador del usuario - sin necesidad de subir nada para las páginas cargadas localmente.
Modo URL impulsado por Playwright
El modo URL utiliza un pequeño backend de Node.js + Playwright que carga la página objetivo en un navegador real y devuelve los datos al motor de visualización.
Visualizaciones generativas
DOM City, CSS Portrait, Layout DNA, Interaction Map y Code Galaxy convierten el análisis en obras de arte en lugar de paneles.
Reutilizable para diseño y auditoría
Útil para entender el sitio de un competidor, perfilar el tuyo o producir un retrato visual de una página existente.
03 / Descargar
Acceso al producto
Un camino claro desde la fuente oficial hasta tu primer flujo completado.
Elige la plataforma adecuada
Utiliza uno de los enlaces oficiales disponibles para tu dispositivo o navegador.
Instala o abre
Sigue las instrucciones de la tienda o abre la aplicación web. Sin instaladores de terceros.
Configura y empieza
Revisa las opciones, elige tus preferencias y comienza con el flujo principal.
Opciones oficiales de acceso
04 / Tecnología
Tecnología del producto
Una visión transparente de las tecnologías principales utilizadas para crear y mantener este producto.
Next.js
React
TypeScript
Tailwind CSS
Docker
05 / Seguridad
Privacidad y seguridad
Tus datos permanecen en tu dispositivo. Siempre.