把网页读成代码。

输入一个网址，拿回像素级对齐的 React + Tailwind 工程，并附上一份相似度报告。

开始捕获看它怎么工作

0.9997结构相似度 SSIM

0.03%像素差异

6.1s一轮捕获耗时

拖动滑块比较两边。两张图是同一视口下工具自己截的，不是设计稿。

这组数字来自工具在本地 fixture 上的真实运行：41 个资产可用、3 个失败被记下、1873 个 DOM 节点、0 个动态区域。

它做三件事。

捕获: 打开目标页，等它稳定，把 DOM、样式、字体和图片取下来。轮播、计时器、随机数会被冻结，会动的区域单独记进 dynamic.json。
收敛: 逐视口比对像素，按差异位置改代码，重复到低于阈值。改不掉的差异画成热力图交给你，而不是藏起来。
交付: 输出能跑的 React 工程：组件、样式、本地化资产，外加一份带截图与热力图的验证报告。

同一页面在 768px 视口下的捕获截图 — 第二个视口照样跑：768px 下的捕获结果。

不一样的地方，它会告诉你。

原站与还原页的像素差异热力图，红色为差异位置 — 红色是两边不一致的像素。这张图随工程一起交付。

结构相似度 SSIM0.9997
像素差异0.03%
资产可用 / 失败41 / 3
动态区域0
DOM 节点1873

我们不承诺 100% 一致。动态内容、第三方组件和跨域字体会被标出来，你会看到它在哪里没对齐，以及为什么。

拿到的是工程，不是截图。

/** @region 0/1 (section.hero > div.hero-bg, h1, button.cta) */
export function Hero() {
  return (
    <section className="hero">
      <div className="hero-bg" />
      <h1>Clone me if you can</h1>
      <button className="cta" type="button">
        Get Started
      </button>
    </section>
  )
}

上面是生成结果里的一个组件，原文件连同 region 注释一起给你。

src/components 下每个组件都带 @region 注释，指回原站对应的区域
样式与 tokens 跟着工程走，public/assets 里的图片已经本地化
npm install 之后 npm run dev 就能打开，不需要再连回原站

现在就能试。

开放注册：验证邮箱后就能提交捕获。免费额度每天 20 次捕获、10 个任务、500MB 产物。