用途:DOM Clone 用于重建网页的 DOM/CSS 层,把页面还原为干净组件,所有数值均来自测量而非估算。它只处理 DOM/CSS,不处理 WebGL/WebGPU/2D 像素的 <canvas> 表面,后者属于 shader-extract 轨道,遇到时应留占位挂载点而非用 HTML 重建。
主要能力:提取设计令牌(调色板、字号、间距、圆角、阴影、:root 自定义属性)、动效参数(GSAP/ScrollTrigger/Lenis/WAAPI 值)、字体、全局资源与全局行为;逐区块抓取计算样式、真实内容、图片与背景图、各交互状态及过渡;按区块编写 spec 契约文件;构建组件;用 Playwright 像素对比验证。
使用方式:由 clone-site 驱动时,输入为含 surface-map.json 和 ROUTING.md 的输出目录,只构建路由到 DOM 轨道的区块;独立使用时输入 URL,先做截图与交互扫描侦察。需要浏览器 MCP(Chrome/Playwright/Puppeteer)。流程为 extract → spec → build → verify:先做基础(运行 ../clone-site/scripts/tokens-probe.js 的 tokensProbe() 于 1440/768/390,取 motion.json,识别字体,解析全局资源,检测全局行为),再逐区块提取,写 <output>/specs/<section>.spec.md,然后构建,最后在三个断点做像素 diff。
适用场景:需要高保真还原网页 DOM/CSS 的克隆任务,尤其是对间距、字阶、颜色要求精确的项目。
限制:不处理 GPU 表面;资源解析按 REAL → RECONSTRUCT → GENERATE → PLACEHOLDER 阶梯并标注层级;不要从截图克隆,不要用 HTML 重建 canvas 着色器,不要近似可测量的计算值,不要把视频或动画 SVG 冻结为静态图,不要在滚动驱动 UI 上误建点击式 UI。其余细节暂未提供。