Cloner un site web
Recréez les pages fournies dans l'application en cours. Faites correspondre la source avant d'ajouter une nouvelle direction de design. Livrez du code fonctionnel et éditable : les captures d'écran, les iframes et les bundles de production téléchargés sont des références, pas l'implémentation.
1. Cartographier le travail
Lisez les instructions du projet, le framework/scripts réel et les routes existantes. Ouvrez les URL source avec le navigateur disponible. Privilégiez le HTTP direct, les outils d'actifs ou les API pour l'extraction lorsque c'est pratique ; utilisez le navigateur pour établir l'apparence et le comportement.
Enregistrez une courte correspondance route source vers route locale et les fichiers que chaque page possède. Suivez les conventions de l'application ; dans ce modèle, utilisez src/app/, src/components/sites/<site>/, public/sites/<site>/ et docs/research/<site>/. Donnez des noms distincts aux origines, aux pages et aux téléchargements ; ajoutez un port ou un hash d'URL lorsque des noms lisibles entrent en collision.
- Un premier clone racine peut remplacer la page d'accueil du modèle non modifiée.
- Préservez les chemins source pour plusieurs pages d'une même origine. Les variations de requête/fragment représentent généralement des états de la même route ; reproduisez ces états.
- Préservez les routes/actifs existants créés. Mettez-les à jour si demandé ; résolvez les collisions de routes non demandées avant de remplacer quoi que ce soit.
- Lorsque vous ajoutez des pages à un clone existant, étendez sa mise en page et ses styles globaux sans remplacer les styles utilisés par les pages existantes.
- Utilisez des applications distinctes pour différentes origines, sauf si l'utilisateur souhaite une application combinée. Les sites combinés nécessitent des préfixes de route distincts et des polices, styles et mises en page limités.
- Échappez les segments d'URL littéraux qui entrent en conflit avec la syntaxe du framework (
_,@, crochets, parenthèses) en utilisant son mécanisme pris en charge, puis vérifiez l'URL réellement demandée.
Les clones existants sont des points de départ utiles : comparez-les avec la source actuelle et enregistrez ce qui a été réutilisé. Terminez lorsque chaque URL demandée a une destination et que la propriété des fichiers est claire.
2. Observer avant de construire
Inspectez toute la page aux largeurs de bureau et mobile. Faites défiler du haut en bas pour charger les médias paresseux et révéler les scènes collantes/épinglées. Ensuite, testez les menus, onglets, accordéons, carrousels, états de survol et liens principaux. Distinguez les changements provoqués par le défilement, le clic, le survol ou le temps ; une imitation par clic d'une section pilotée par défilement est un produit différent.
Considérez chaque observation comme un échantillon d'une règle. Lisez les valeurs déclarées (styles calculés, variables CSS, options en direct d'une bibliothèque) plutôt que de les déduire d'un seul rendu, et variez la largeur de la fenêtre d'affichage (y compris plus large que le design), la hauteur de la fenêtre, l'entrée et l'état jusqu'à ce que vous sachiez ce qui provoque chaque changement. Pilotez la page avec les entrées que les visiteurs utilisent (molette, toucher, clavier, pointeur) ; le défilement scripté contourne le comportement qui y est attaché, comme le défilement fluide.
Enregistrez des captures d'écran source étiquetées avec la fenêtre d'affichage, la position de défilement et l'état d'interaction. Capturez le contenu/actifs des états alternatifs. Conservez un bref résumé de page compact : ordre des sections, typographie, mesures de mise en page, mappage des actifs et interactions. N'ajoutez des briefs de section que lorsqu'ils aident les constructeurs indépendants.
Lisez la référence d'inspection pour l'extraction et la comparaison d'état. Pour les pages générées par Framer, les scènes collantes, les animations de révélation ou les médias animés, lisez Framer et le mouvement.
Utilisez le texte réel de la source et les fichiers qu'elle charge réellement : polices, images, SVG et vidéo. Un substitut portant le même nom provenant d'un autre fournisseur ou ensemble d'icônes a des métriques ou des formes différentes. Mesurez les géométries/styles calculés importants. Inspectez les images en couches et les éléments multimédia avant de reconstruire un visuel en HTML. Suivez la trace URL source → chemin d'actif local et vérifiez le type de contenu/dimensions : une URL .png peut renvoyer AVIF.
Terminez lorsque chaque section et état significatif a suffisamment de preuves pour construire, les détails indisponibles étant identifiés. Un vidage DOM volumineux ne remplace pas le visionnage de la page.
3. Construire un premier passage complet
Établissez d'abord les polices, la largeur de la page, les couleurs, les actifs, les routes, le comportement à l'échelle de la page et les composants partagés. Construisez chaque composant partagé avec tous les états observés (survol, focus, points de rupture) afin que les constructeurs le réutilisent tel quel. Réutilisez les composants appropriés. Privilégiez le CSS pour la mise en page/le mouvement simple et une bibliothèque d'animation lorsque le comportement source l'exige.
Construisez des sections cohérentes avec du contenu réel. Déléguez les pages/sections indépendantes après que les fichiers partagés ont un propriétaire. Donnez aux constructeurs des captures d'écran, des mesures/notes d'état pertinentes, des chemins d'actifs, des fichiers de destination et une ligne d'arrivée concrète. Un bref concis avec des références de fichiers précises suffit ; aucun nombre d'agents fixe ni de paperasse par composant n'est requis.
Recréez les interactions dans le périmètre. Préservez les destinations réelles sortantes. Réécrivez les liens vers les routes locales lorsque ces routes sont incluses ; laissez les destinations hors périmètre pointant vers la source et divulguez-les. Les contrôles visibles doivent effectuer le comportement qu'ils promettent.
Exécutez la vérification de projet appropriée après une tranche intégrée. Terminez ce passage lorsque chaque section/route demandée s'affiche avec des actifs réels et que les contrôles importants fonctionnent.
4. Comparer, réparer, répéter
Ouvrez les pages source/locales à la même fenêtre d'affichage, position de défilement et état. Laissez les polices, les médias et les animations de révélation se stabiliser. Examinez toute la page partout où l'étape 2 a trouvé une règle changeant, ainsi qu'une fenêtre d'affichage plus large que le design ; jugez le comportement de défilement et de pointeur avec une entrée réelle. Un montage côte à côte localise la dérive ; les sections en taille réelle établissent les détails.
Corrigez d'abord les plus grandes différences visibles : géométrie, sections/couches manquantes, typographie/enroulement, recadrage des actifs, puis espacement et mouvement. Revérifiez les vues affectées. Comparez les régions animées dans les états initial, actif et stable, y compris le défilement inversé lorsque cela est pertinent.
Exercez le vrai workflow local : navigation entre les routes clonées, menu mobile, états des onglets/accordéons, limites du carrousel, actions principales, contrôles multimédias et transitions liées au défilement observées. Vérifiez les erreurs d'exécution, les actifs manquants et le débordement horizontal. Lorsque vous ajoutez des pages, vérifiez que les routes existantes fonctionnent toujours. Utilisez quelques vérifications de navigateur à ces limites plutôt que des assertions sur les noms de classe.
Exécutez la vérification de production du projet. L'achèvement nécessite une build réussie et une comparaison rendue. Énoncez précisément les différences restantes au lieu de qualifier un résultat non vérifié de pixel-parfait.
Livrer
Retournez les instructions d'aperçu/exécution, la carte route source vers route locale, des comparaisons représentatives bureau/mobile, les vérifications réellement effectuées et les lacunes visuelles/fonctionnelles restantes. Conservez les clones de référence dans des applications distinctes lors de la maintenance du modèle réutilisable.