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.
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
Page officielle du produit
Éditeur:
POLPROG
Page officielle du produit
3
Dimensions d'analyse
5
Visualisations explorées
2
Modes (fichier / URL)
1
Backend Playwright
01 / PageDNA
À 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.
02 / Fonctionnalités clés
Fonctionnalités clés
Les fonctions essentielles expliquées de manière concrète.
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.
03 / Télécharger
Accès au produit
Un parcours clair de la source officielle à votre première utilisation réussie.
Choisir la bonne plateforme
Utilisez l'un des liens officiels disponibles pour votre appareil ou votre navigateur.
Installer ou ouvrir
Suivez les instructions de la boutique ou ouvrez l'application web. Aucun programme d'installation tiers.
Configurer et commencer
Consultez les options, choisissez vos préférences et commencez par le flux principal.
Options d'accès officielles
04 / Technologie
Technologies du produit
Une vue transparente des technologies principales utilisées pour créer et maintenir ce produit.
Next.js
React
TypeScript
Tailwind CSS
Docker
05 / Sécurité
Confidentialité et sécurité
Vos données restent sur votre appareil. Toujours.