移動端 DOM 保真度
在撰寫合成內容之前使用此技能。真理來源是真實網站於移動端視口中的狀態，而非靜態截圖。
工作流程
- 在瀏覽器中以移動端視口開啟該 URL。
- 定義一個參考斷點，通常為
390x844、393x852、414x896或相近尺寸。 - 檢查影片中會出現的 DOM 區塊。
- 提取文字、
href、src、alt、主要 class、角色及互動狀態。 - 僅在確認元件可見後，才映射點擊座標。
- 列出相關狀態：點擊前、點擊後、滾動後、購物車、結帳或確認。
MCP DevTools / 主控台
當 MCP DevTools 可用時，透過主控台查詢真實 DOM。可提取的資料範例：
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,
})),
});
驗證點擊：
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 });
使用這些值來定義合成內容中的游標時序與位置。
需要擷取的內容
- 確切的產品名稱。
- 優點，需與實際顯示完全一致。
- 價格與條件。
- 按鈕與行動呼籲（CTA）。
- 主要圖片。
- 輪播卡片。
- 可用於驗證點擊的穩定選擇器。
規則
- 若 DOM 已提供文字，請勿自行編造文案。
- 請勿在時間軸上元件出現前點擊該元件。
- 請勿僅以截圖作為結構的唯一來源。
- 請勿發布快照、Cookie、日誌或檢查檔案。
- 若網站使用懶加載，請先等待圖片載入完成再提取
src。
預期交接產出
產出一個簡短的映射：
場景：產品輪播
選擇器：.rf-cards-scroller-platter
可見時間：2.0s
動作：水平滾動
點擊目標：卡片連結，卡片回到中央後的中心 x/y
所需文字：...
所需圖片：...
使用此映射來引導 HyperFrames 合成。
保真度標準
僅在符合下列條件時，該區塊才算忠實：
- 文字與原始 DOM 相符；
- 圖片相同或使用允許的替代品；
- 間距遵循移動端層級結構；
- 卡片、按鈕與標籤使用相同的視覺順序；
- 點擊位於真實元件的邊界框內；
- 元件在游標動作之前已渲染完畢。