移动端DOM保真度 是做什么的？
在编写合成之前使用此技能。唯一的真理来源是移动视口中的真实网站，而非静态截图。
工作流程
- 在移动视口的浏览器中打开URL。
- 定义参考断点，通常为
390x844、393x852、414x896或相近尺寸。 - 检查视频中将会出现的DOM区域。
- 提取文本、
href、src、alt、主要类名、角色和交互状态。 - 确认组件可见后，再映射点击坐标。
- 列出相关状态：点击前、点击后、滚动后、购物车、结账或确认。
MCP DevTools / 控制台
当MCP DevTools可用时，通过控制台查询真实的DOM。需要提取的数据示例：
const el = document.querySelector("区域选择器");
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,
})),
});
验证点击：
const target = document.querySelector("目标选择器");
const r = target.getBoundingClientRect();
({ centerX: r.x + r.width / 2, centerY: r.y + r.height / 2, visible: r.width > 0 && r.height > 0 });
使用这些值来定义光标在合成中的时间点和位置。
需要捕获的内容
- 准确的产品名称。
- 与原始显示完全一致的卖点。
- 价格和条件。
- 按钮和行动号召(CTA)。
- 主图。
- 轮播卡片。
- 可用于点击验证的稳定选择器。
规则
- 如果DOM提供了文本，不要臆造文案。
- 不要在时间线上的指定时间之前点击组件。
- 不要将截图作为结构的唯一来源。
- 不要发布快照、cookie、日志或检查文件。
- 如果网站使用了懒加载，在提取
src之前等待图片加载完成。
预期交付物
生成一份简短的地图：
场景：产品轮播
选择器：.rf-cards-scroller-platter
可见时间：2.0s
动作：水平滚动
点击目标：卡片链接，卡片返回中心后的中心x/y坐标
所需文本：...
所需图片：...
使用此地图来指导HyperFrames合成。
保真度标准
仅当满足以下条件时，视为区域是保真的：
- 文本与原始DOM匹配；
- 图片是相同的，或是允许的等价物；
- 间距遵循移动端的层级结构；
- 卡片、按钮和标签使用相同的视觉顺序；
- 点击发生在真实组件的边界框内；
- 组件在光标操作前已经渲染。