Mobile-DOM-Fidelity

Mobile DOM Fidelity

Nutze diese Fähigkeit, bevor du die Komposition schreibst. Die Quelle der Wahrheit ist die echte Website in einem mobilen Viewport, nicht ein statischer Screenshot.

Arbeitsablauf

1. Öffne die URL in einem Browser mit einem mobilen Viewport.
2. Definiere einen Referenz-Viewport, üblicherweise 390x844, 393x852, 414x896 oder ähnlich.
3. Untersuche die DOM-Abschnitte, die im Video erscheinen werden.
4. Extrahiere Text, href, src, alt, Hauptklassen, Rollen und interaktive Zustände.
5. Ordne Klickkoordinaten erst zu, nachdem bestätigt wurde, dass die Komponente sichtbar ist.
6. Liste relevante Zustände auf: vor Klick, nach Klick, nach Scrollen, Warenkorb, Kasse oder Bestätigung.

MCP DevTools / Konsole

Wenn MCP DevTools verfügbar ist, nutze es, um das echte DOM über die Konsole abzufragen. Beispiele für zu extrahierende Daten:

const el = document.querySelector("SECTION_SELECTOR");
const rect = el.getBoundingClientRect();
({
  text: el.innerText,
  rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
  classes: el.className,
  images: [...el.querySelectorAll("img")].map((img) => ({
    src: img.currentSrc || img.src,
    alt: img.alt,
    width: img.naturalWidth,
    height: img.naturalHeight,
  })),
  links: [...el.querySelectorAll("a")].map((a) => ({
    text: a.innerText,
    href: a.href,
    classes: a.className,
  })),
});

Um einen Klick zu validieren:

const target = document.querySelector("TARGET_SELECTOR");
const r = target.getBoundingClientRect();
({ centerX: r.x + r.width / 2, centerY: r.y + r.height / 2, visible: r.width > 0 && r.height > 0 });

Verwende diese Werte, um Cursor-Timing und -Position in der Komposition zu definieren.

Was zu erfassen ist

• Exakte Produktnamen.
• Vorteile genau wie dargestellt.
• Preise und Bedingungen.
• Buttons und CTAs.
• Hauptbilder.
• Karussell-Karten.
• Stabile Selektoren für die Klick-Validierung.

Regeln

• Erfinde keinen Text, wenn das DOM den Text bereitstellt.
• Klicke keine Komponenten, bevor sie in der Zeitleiste erscheinen.
• Verwende Screenshots nicht als einzige Quelle der Struktur.
• Veröffentliche keine Schnappschüsse, Cookies, Logs oder Inspektionsdateien.
• Wenn die Website Lazy Loading verwendet, warte, bis die Bilder geladen sind, bevor du src extrahierst.

Erwartete Übergabe

Erstelle eine kurze Kartenansicht:

Szene: Produktkarussell
Selektor: .rf-cards-scroller-platter
Sichtbar bei: 2.0s
Aktion: horizontaler Scroll
Klickziel: Kartenlink, Mitte x/y nachdem die Karte wieder in der Mitte ist
Erforderlicher Text: ...
Erforderliche Bilder: ...

Nutze diese Kartenansicht, um die HyperFrames-Komposition zu steuern.

Wiedergabetreuekriterien

Betrachte den Abschnitt nur dann als originalgetreu, wenn:

• Text mit dem ursprünglichen DOM übereinstimmt;
• Bilder dieselben oder zulässige Äquivalente sind;
• Abstände der mobilen Hierarchie folgen;
• Karten, Buttons und Labels die gleiche visuelle Reihenfolge verwenden;
• Klick innerhalb des tatsächlichen Komponenten-Begrenzungsrahmens erfolgt;
• Komponente vor der Cursor-Aktion gerendert wird.