Eine Webseite klonen
Erstelle die angegebenen Seiten in der aktuellen App nach. Gleiche die Quelle ab, bevor eine neue Designrichtung hinzugefügt wird. Liefere funktionierenden, bearbeitbaren Code: Screenshots, Iframes und heruntergeladene Produktions-Bundles sind Referenzen, nicht die Implementierung.
1. Die Arbeit planen
Lies die Projektanweisungen, das eigentliche Framework/die Skripte und vorhandene Routen. Öffne die Quell-URLs mit dem verfügbaren Browser. Bevorzuge direkte HTTP-, Asset-Tools oder APIs zur Extraktion, wenn praktikabel; verwende den Browser, um Aussehen und Verhalten festzustellen.
Erstelle eine kurze Quell-zu-lokale-Routenzuordnung und die Dateien, die jede Seite besitzt. Befolge die Konventionen der App; in dieser Vorlage verwende src/app/, src/components/sites/<site>/, public/sites/<site>/ und docs/research/<site>/. Gib Ursprüngen, Seiten und Downloads eindeutige Namen; füge einen Port oder URL-Hash hinzu, wenn lesbare Namen kollidieren.
- Ein erster Root-Klon kann die unberührte Vorlagen-Startseite ersetzen.
- Bewahre Quell-Pfadnamen für mehrere Seiten von einem Ursprung. Abfrage-/Fragment-Variationen repräsentieren normalerweise Zustände derselben Route; reproduziere diese Zustände.
- Bewahre vorhandene autorisierte Routen/Assets. Aktualisiere sie, wenn angefordert; löse nicht angeforderte Routenkollisionen, bevor du etwas ersetzt.
- Wenn du Seiten zu einem bestehenden Klon hinzufügst, erweitere dessen Layout und globale Stile, ohne die von bestehenden Seiten verwendeten Stile zu ersetzen.
- Verwende separate Apps für verschiedene Ursprünge, es sei denn, der Benutzer wünscht eine kombinierte App. Kombinierte Seiten benötigen eindeutige Routenpräfixe und bereichsgebundene Schriftarten, Stile und Layout.
- Entkomme literal-URL-Segmente, die mit der Framework-Syntax kollidieren (
_,@, Klammern, runde Klammern), indem du dessen unterstützten Mechanismus verwendest, und überprüfe dann die tatsächliche angeforderte URL.
Vorhandene Klone sind nützliche Ausgangspunkte: vergleiche sie mit der aktuellen Quelle und dokumentiere, was wiederverwendet wurde. Beende diesen Schritt, wenn jede angeforderte URL ein Ziel hat und die Dateibesitzer klar sind.
2. Beobachten vor dem Bauen
Überprüfe die gesamte Seite in Desktop- und Mobilbreiten. Scrolle von oben nach unten, um träge Medien zu laden und klebrige/pinnbare Szenen aufzudecken. Teste dann Menüs, Tabs, Akkordeons, Karussells, Hover-Zustände und primäre Links. Unterscheide Änderungen, die durch Scrollen, Klicken, Hover oder Zeit gesteuert werden; eine Klick-Imitierung eines scroll-getriebenen Abschnitts ist ein anderes Produkt.
Behandle jede Beobachtung als eine Stichprobe einer Regel. Lies deklarierte Werte (berechnete Stile, CSS-Variablen, die Live-Optionen einer Bibliothek), anstatt sie aus einer Darstellung abzuleiten, und variiere die Viewport-Breite (einschließlich breiter als das Design), die Viewport-Höhe, die Eingabe und den Zustand, bis du weißt, was jede Änderung antreibt. Steuere die Seite mit den Eingaben, die Besucher verwenden (Rad, Touch, Tastatur, Zeiger); skriptbasiertes Scrollen umgeht das daran gebundene Verhalten, wie z. B. weiches Scrollen.
Speichere Quell-Screenshots, die mit Viewport, Scroll-Position und Interaktionszustand beschriftet sind. Erfasse Assets und Inhalte von alternativen Zuständen. Halte eine kurze Seitenzusammenfassung: Abschnittsreihenfolge, Typografie, Layout-Maße, Asset-Zuordnung und Interaktionen. Füge Abschnitts-Kurzbeschreibungen nur hinzu, wenn sie unabhängigen Buildern helfen.
Lies die Inspektionsreferenz für Extraktion und Zustandsvergleich. Für Framer-generierte Seiten, klebrige Szenen, Enthüllungsanimationen oder animierte Medien, lies Framer und Bewegung.
Verwende den echten Text der Quelle und die Dateien, die sie tatsächlich lädt: Schriftarten, Bilder, SVGs und Videos. Ein gleichnamiger Ersatz von einem anderen Anbieter oder Icon-Set hat andere Metriken oder Formen. Messe wichtige Geometrie/berechnete Stile. Überprüfe geschichtete Bilder und Medien-Elemente, bevor du eine visuelle Darstellung als HTML nachbaust. Verfolge Quell-URL → lokaler Asset-Pfad und überprüfe Inhaltstyp/Abmessungen: eine .png-URL kann AVIF zurückgeben.
Beende diesen Schritt, wenn jeder Abschnitt und jeder bedeutende Zustand genügend Beweise zum Bauen hat, mit identifizierten, nicht verfügbaren Details. Ein großer DOM-Dump ersetzt nicht das Ansehen der Seite.
3. Einen vollständigen ersten Durchlauf bauen
Richte zuerst Schriftarten, Seitenbreite, Farben, Assets, Routen, seitenweites Verhalten und gemeinsam genutzte Komponenten ein. Baue jede gemeinsam genutzte Komponente mit jedem beobachteten Zustand (Hover, Fokus, Breakpoints), damit Builder sie unverändert wiederverwenden können. Verwende passende Komponenten wieder. Bevorzuge CSS für Layout/einfache Bewegung und eine Animationsbibliothek, wenn das Quellverhalten dies erfordert.
Baue zusammenhängende Abschnitte mit echten Inhalten. Delegiere unabhängige Seiten/Abschnitte, nachdem gemeinsame Dateien einen Besitzer haben. Gib Buildern Screenshots, relevante Messungen/Zustandsnotizen, Asset-Pfade, Zieldateien und eine konkrete Ziellinie. Eine kurze Zusammenfassung mit präzisen Dateiverweisen ist ausreichend; keine feste Agentenanzahl oder komponentenbezogene Dokumentation ist erforderlich.
Erstelle die Interaktionen im Umfang nach. Bewahre echte ausgehende Ziele. Schreibe Links auf lokale Routen um, wenn diese Routen enthalten sind; lasse Ziele außerhalb des Umfangs auf die Quelle verweisen und offenlege sie. Sichtbare Steuerelemente müssen das Verhalten ausführen, das sie versprechen.
Führe den entsprechenden Projekt-Check nach einem integrierten Teil durch. Beende diesen Durchlauf, wenn jeder angeforderte Abschnitt/jede angeforderte Route mit tatsächlichen Assets rendert und wichtige Steuerelemente funktionieren.
4. Vergleichen, reparieren, wiederholen
Öffne Quell-/Lokale Seiten bei gleichem Viewport, gleicher Scroll-Position und gleichem Zustand. Lasse Schriftarten, Medien und Enthüllungsanimationen sich setzen. Überprüfe die gesamte Seite überall dort, wo Schritt 2 eine sich ändernde Regel fand, plus einen Viewport breiter als das Design; beurteile Scroll- und Zeigerverhalten mit realen Eingaben. Eine Seite-an-Seite-Montage lokalisiert Abweichungen; vollformatige Abschnitte stellen Details fest.
Behebe zuerst die größten sichtbaren Unterschiede: Geometrie, fehlende Abschnitte/Schichten, Typografie/Zeilenumbruch, Asset-Beschnitt, dann Abstände und Bewegung. Überprüfe betroffene Ansichten erneut. Vergleiche animierte Bereiche in Anfangs-, Aktiv- und Beruhigungszuständen, einschließlich umgekehrtem Scrollen, wenn relevant.
Teste den echten lokalen Workflow: Navigation zwischen geklonten Routen, mobiles Menü, Tab-/Akkordeon-Zustände, Karussell-Grenzen, primäre Aktionen, Mediensteuerungen und beobachtete scroll-verknüpfte Übergänge. Überprüfe Laufzeitfehler, fehlende Assets und horizontalen Überlauf. Wenn du Seiten hinzufügst, überprüfe, ob bestehende Routen noch funktionieren. Führe ein paar Browser-Checks an diesen Grenzen durch, anstatt Behauptungen über Klassennamen aufzustellen.
Führe den Produktions-Check des Projekts durch. Der Abschluss erfordert einen erfolgreichen Build und einen gerenderten Vergleich. Gib verbleibende Unterschiede präzise an, anstatt ein ungeprüftes Ergebnis als pixelgenau zu bezeichnen.
Liefern
Gib Vorschau-/Ausführungsanweisungen zurück, die Quell-zu-lokale Routenzuordnung, repräsentative Desktop-/Mobil-Vergleiche, tatsächlich durchgeführte Checks und verbleibende visuelle/funktionale Lücken. Behalte Referenz-Klone in separaten Apps, wenn die wiederverwendbare Vorlage beibehalten wird.