PageDNA
PageDNA - Transformez n'importe quel site web en ADN visuel
Visualisation générative de la structure, du style et du comportement d'un site web.
Application web En ligne
À propos
PageDNA transforme n'importe quel site web en ADN visuel. Il analyse la page selon trois axes - structure (DOM), style (CSS, mise en page, typographie, couleur) et comportement (interactivité, animation, réseau) - et rend le résultat sous forme de visualisation générative plutôt que de tableau de bord.
Le frontend s'exécute entièrement dans le navigateur, de sorte qu'une page chargée par l'utilisateur peut être analysée sans rien téléverser. Le mode URL est propulsé par un petit backend Node.js + Playwright, qui charge la page cible dans un vrai navigateur, capture sa structure, son style et son comportement, puis renvoie les données au moteur visuel.
Les visualisations possibles explorées par le projet comprennent DOM City (la structure sous forme de bâtiments), CSS Portrait (le style sous forme de palette et de texture), Layout DNA (la forme compositionnelle), Interaction Map (la topologie des événements) et Code Galaxy (la structure des fichiers et des modules). Chacune n'est exposée qu'une fois réellement implémentée.
Fonctionnalités clés
Analyse de structure (DOM)
Parcourt l'arbre du DOM, compte et classe les éléments, et transforme la structure du document en quelque chose de visuel plutôt qu'en un plan brut.
Analyse de style (CSS, mise en page, couleur, typographie)
Extrait la palette, l'échelle typographique et le langage de mise en page d'une page pour que les décisions de design deviennent lisibles d'un coup d'œil.
Analyse du comportement / de l'interactivité
Capture les interactions, les animations et les appels réseau pour que le comportement de la page apparaisse à côté de sa structure statique.
Frontend dans le navigateur
Le moteur de visualisation s'exécute entièrement dans le navigateur de l'utilisateur - aucun téléversement requis pour les pages chargées localement.
Mode URL propulsé par Playwright
Le mode URL utilise un petit backend Node.js + Playwright qui charge la page cible dans un vrai navigateur et renvoie les données au moteur de visualisation.
Visualisations génératives
DOM City, CSS Portrait, Layout DNA, Interaction Map et Code Galaxy transforment l'analyse en œuvres d'art plutôt qu'en tableaux de bord.
Réutilisable pour le design et l'audit
Utile pour comprendre le site d'un concurrent, profiler le vôtre, ou produire un portrait visuel d'une page existante.
Analyse de structure (DOM)
Parcourt l'arbre du DOM, compte et classe les éléments, et transforme la structure du document en quelque chose de visuel plutôt qu'en un plan brut.
Analyse de style (CSS, mise en page, couleur, typographie)
Extrait la palette, l'échelle typographique et le langage de mise en page d'une page pour que les décisions de design deviennent lisibles d'un coup d'œil.
Analyse du comportement / de l'interactivité
Capture les interactions, les animations et les appels réseau pour que le comportement de la page apparaisse à côté de sa structure statique.
Frontend dans le navigateur
Le moteur de visualisation s'exécute entièrement dans le navigateur de l'utilisateur - aucun téléversement requis pour les pages chargées localement.
Mode URL propulsé par Playwright
Le mode URL utilise un petit backend Node.js + Playwright qui charge la page cible dans un vrai navigateur et renvoie les données au moteur de visualisation.
Visualisations génératives
DOM City, CSS Portrait, Layout DNA, Interaction Map et Code Galaxy transforment l'analyse en œuvres d'art plutôt qu'en tableaux de bord.
Réutilisable pour le design et l'audit
Utile pour comprendre le site d'un concurrent, profiler le vôtre, ou produire un portrait visuel d'une page existante.
Confidentialité et sécurité
Vos données restent sur votre appareil. Toujours.
