Fidelidad del DOM en Móvil

¿Qué hace Fidelidad del DOM en Móvil?

Usa esta habilidad antes de escribir la composición. La fuente de verdad es el sitio real en un viewport móvil, no una captura de pantalla estática.

Flujo de trabajo

1. Abre la URL en un navegador con un viewport móvil.
2. Define un breakpoint de referencia, usualmente 390x844, 393x852, 414x896 o cercanos.
3. Inspecciona las secciones del DOM que aparecerán en el video.
4. Extrae texto, href, src, alt, clases principales, roles y estados interactivos.
5. Mapea las coordenadas de los clics solo después de confirmar que el componente es visible.
6. Enumera los estados relevantes: antes del clic, después del clic, después del desplazamiento, carrito, pago o confirmación.

MCP DevTools / consola

Cuando MCP DevTools esté disponible, úsalo para consultar el DOM real a través de la consola. Ejemplos de datos a extraer:

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,
  })),
});

Para validar un clic:

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 });

Usa estos valores para definir la sincronización y posición del cursor en la composición.

Qué capturar

• Nombres exactos de productos.
• Beneficios exactamente como aparecen.
• Precios y condiciones.
• Botones y CTAs.
• Imágenes principales.
• Tarjetas de carrusel.
• Selectores estables para la validación de clics.

Reglas

• No inventes texto si el DOM proporciona el contenido.
• No hagas clic en componentes antes de que aparezcan en la línea de tiempo.
• No uses capturas de pantalla como única fuente de estructura.
• No publiques instantáneas, cookies, registros ni archivos de inspección.
• Si el sitio usa carga diferida (lazy loading), espera a que las imágenes se carguen antes de extraer src.

Entrega esperada

Produce un mapa corto:

Escena: Carrusel de productos
Selector: .rf-cards-scroller-platter
Visible en: 2.0s
Acción: desplazamiento horizontal
Destino del clic: enlace de tarjeta, centro x/y después de que la tarjeta regrese al centro
Texto requerido: ...
Imágenes requeridas: ...

Usa este mapa para guiar la composición de HyperFrames.

Criterios de fidelidad

Considera que la sección es fiel solo cuando:

• el texto coincide con el DOM original;
• las imágenes son las mismas o equivalentes permitidos;
• el espaciado sigue la jerarquía móvil;
• las tarjetas, botones y etiquetas usan el mismo orden visual;
• el clic ocurre dentro de la caja delimitadora real del componente;
• el componente se renderiza antes de la acción del cursor.