PageDNA
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
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.
Características principales
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.
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.
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.
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.
Privacidad y seguridad
Tus datos permanecen en tu dispositivo. Siempre.
