# Mirrorframe 网页采集与 React 重建工具

> Mirrorframe 使用 Playwright 采集网页，并将观察到的布局和行为重建为独立的 React 应用。它记录计算样式、资源、动效和部分交互状态，再通过图像差异，将重建后的节点和重放状态与原网页比对。

- 类型：工具
- 目标：网站
- 类别：网站分析工具
- 关联：基础工具
- 来源复核于：2026-11-06
- 收录于：2026-11-06
- 原始资源：<https://github.com/byte271/mirrorframe>
- 一手来源：<https://github.com/byte271/mirrorframe/blob/16ffce02957bbc7f28f5ea1b38e40bea3ff4fd37/README.md>
- 目录页面：<https://awesomerea.org/zh/resources/mirrorframe/>
- 记录 JSON：<https://awesomerea.org/resources/mirrorframe/record.json>
- 英文版：[English](https://awesomerea.org/resources/mirrorframe/index.md)

## 使用条件与局限

- **前提条件：**需要 Node.js 18 或更新版本及 Playwright Chromium。
- **局限：**0.x 版本的命令参数、genome 结构和报告格式可能变化。
- **局限：**不重建实时 Canvas、WebGL 或 WebGPU 绘制程序；Canvas 输出为采集时的静态画面。
- **许可：**采用 MIT 许可证。

## 一手来源

1. <https://github.com/byte271/mirrorframe/blob/16ffce02957bbc7f28f5ea1b38e40bea3ff4fd37/README.md>
2. <https://github.com/byte271/mirrorframe/blob/16ffce02957bbc7f28f5ea1b38e40bea3ff4fd37/references/limitations.md>

## 同分区更多条目：网站

- [恐龙跑酷：恢复一条加速规则](https://awesomerea.org/zh/resources/rea-dinosaur-speed-case/index.md) · 案例
- [rauchg.com：根据捕获的 Flight 输出重建 RSC 博客](https://awesomerea.org/zh/resources/rauchg-rsc-reconstruction-case/index.md) · 案例
- [BaoCut Slides：交互式网页编辑器改编](https://awesomerea.org/zh/resources/baocut-slides-editor-case/index.md) · 案例
- [Claude Code 中的 REA：隔离配置下的静态分析 A/B 试验](https://awesomerea.org/zh/resources/rea-claude-code-isolated-ab-case/index.md) · 案例
- [恐龙跑酷：经 REA 检查、由 Codex 重建的速度规则](https://awesomerea.org/zh/resources/rea-dino-runner-community-case/index.md) · 案例
- [Terminal：参考 TradingView 图表研究的 Rust 终端](https://awesomerea.org/zh/resources/terminal-tradingview-rea-chart-case/index.md) · 案例

## 关于此条目

说明已依据一手来源复核。
原创说明采用 MIT 许可；外部项目、论文与素材保留各自的权利和许可。