tentenco/ai-website-clone

# Tenten 网站克隆引擎

证据输入，高保真输出。
这是一个专为 Agent 准备的系统，用于通过可测量的视觉、响应式、交互、资源和动态证据，对生产级网站进行重建、验证和适配。

 本仓库既是一个现代的 Next.js 脚手架，也是一个为 AI 编程 Agent 量身打造的严谨操作系统。它用可重复的检查、明确的证据边界、动态取证、冻结的实现契约、隔离的 Agent 工作树以及确定性的 QA，取代了一次性的截图模仿。 ## 为什么会有这个项目 大多数网站克隆工作流都会以可预见的方式失败： - 它们只复制了首屏并忽略了响应式状态； - 它们在没有记录证据的情况下推断间距、资源或断点； - 它们将视频视为底层动画机制的证明； - 它们忽略了 hover、键盘、加载、错误、触摸和 reduced-motion 状态； - 它们在建立忠实的基准线之前就混合了参考来源； - 它们将构建成功视为视觉高保真的证明。 Tenten 网站克隆引擎让这些差距变得可见。每一个实质性的声明都会被分类，每一次检查都可以从持久化的工件中恢复，并且每一次交付都以证据支持的验收门槛结束。 ## 三种明确模式 | 模式 | 目的 | 边界 | | --- | --- | --- | | `clone` | 按照契约要求尽可能忠实地重建一个源站点。 | 不得有未经批准的审美创造。 | | `adapt` | 将客户的品牌、内容和产品需求应用到已批准的基准线上。 | 必须先通过基准线 QA。 | | `blend` | 将来自多个已审计参考源的指定系统进行组合。 | 每个借用的系统都需要有出处。 | 除非明确选择了 `blend`，否则多个 URL 将保持为相互隔离的目标。 ## 引擎工作原理  1. **契约** — 定义目的、路由、权限、视口、所需状态和验收门槛。 2. **检查** — 捕获简短且可恢复的浏览器场景，包含 DOM、计算样式、资源、断点、状态和环境证据。 3. **审计动态** — 将确定性录制与滚动、媒体、canvas、WebGL、动画和网络遥测数据配对。 4. **冻结规范** — 解决未知问题，并锁定共享 token、资源、类型、动态原语和组件契约。 5. **构建与验证** — 在有边界的工作树中实现，重放源站点和克隆场景，并输出机器可读的保真度报告。 完整的操作模型位于 [docs/CLONE_WORKFLOW_V2.md](docs/CLONE_WORKFLOW_V2.md)。 ## 动态感知重建  复杂的动态效果无法可靠地从静态截图中还原。动态工作流涵盖了： - 视频元数据、源哈希、联系表和时间线视图； - 滚动联动变换、视差、固定和钉住的部分； - 逐帧拖拽的视频和时间驱动的组件状态； - Lottie、Rive、canvas、WebGL、Three.js 和着色器表面； - 动画时间、几何形状、运动轨迹和检查点容差； - 响应式和 `prefers-reduced-motion` 行为。 渲染出的视频证明了什么在何时移动。它并不能证明源站点使用的是 CSS、GSAP、原生滚动时间线、canvas 还是其他引擎。在遥测数据提供支持之前，实现选择始终只是一种带有标签的解读。 [`video-use`](https://github.com/browser-use/video-use) 可作为可选的时间线视图适配器使用。对于无声的 UI 动效，不需要进行语音转录。 ## 快速开始 ### 前置要求 - Node.js 24 或更高版本 - 支持工作树的 Git - 具备浏览器自动化能力的 AI 编程 Agent - 用于视频或复杂动态的 `ffmpeg` 和 `ffprobe` ``` git clone https://github.com/tentenco/ai-website-clone.git cd ai-website-clone npm ci npm run preflight npm run init:clone -- example --url https://example.com ``` 然后启动编排器： ``` /clone-website [ ...] ``` 或者运行特定阶段的任务： ``` /inspect-site /audit-motion /clone-qa /blend-references ``` 命令语法因 Agent 平台而略有不同。`AGENTS.md` 及其生成的各平台适配器包含相同的规则。 ## 内置 Agent 技能 `.claude/skills/` 是规范的源目录： | 技能 | 职责 | | --- | --- | | `clone-website` | 根编排、模式选择、契约、门槛、工作树和完成审计。 | | `inspect-site` | 可恢复的浏览器场景、DOM/样式/状态/资源证据以及断点发现。 | | `audit-motion` | 视频、滚动、视差、逐帧拖拽媒体、canvas、WebGL 和动态分析。 | | `clone-qa` | 静态、响应式、交互、动态、可访问性、构建和运行时验证。 | | `blend-references` | 受控的基准线后适配和多参考源来源追踪。 | 在更改规范技能后，请运行 `npm run sync:skills`。生成器将更新支持的 Agent 平台、捆绑的脚本、引用、测试和命令适配器。 ## 证据契约 每一项实质性的发现都会使用以下标签之一： | 标签 | 含义 | | --- | --- | | `measured` | 数值化的运行时、媒体元数据或确定性比较结果。 | | `observed` | 在捕获、DOM、网络响应或交互中直接可见的内容。 | | `inferred` | 有支持但尚未证实的实现解读。 | | `invented` | 契约明确允许的新设计或后备方案。 | 证据不充分的内容将标记为 `unknown`。验证器会拒绝在 clone 模式下不受支持的顶级字段和未经批准的创造，而不是悄悄地填补空白。 请参阅[证据模型](docs/research/EVIDENCE_MODEL.md)。 ## 目标产物布局 ``` docs/ research// CLONE_CONTRACT.md REFERENCE_LEDGER.md PAGE_TOPOLOGY.md BEHAVIORS.md capture-scenarios.json site-inspection.json motion-manifest.json MOTION_AUDIT.md components/ qa/ fidelity-report.json FIDELITY_REPORT.md design-references// ``` 产物按目标相互隔离，因此并行研究不会意外地混合不同的来源。 ## Agent 运行边界 当并行执行具备合理性时： 1. 根编排器冻结并提交共享基础； 2. 每个执行者获得一个独立的分支、工作树和互不重叠的归属权； 3. 执行者接收有边界的契约，并且不能衍生出后代； 4. 每个执行者提交经过验证的交接结果； 5. 根编排器每次合并一个分支，并在每次合并后进行验证； 6. 执行者的完成状态永远不会取代最终的验收门槛。 简单或高度耦合的工作仍保留给根 Agent 处理。 ## 质量门槛 最终的保真度报告可以涵盖： - 像素和遮罩区域比较； - 排版、颜色、资源、几何形状和分层检查点； - 视口边界和响应式布局； - hover、focus、pressed、selected、open、loading、empty 和 error 状态； - 滚动进度、动态时间、运动轨迹和 reduced-motion 后备方案； - 键盘、触摸和可访问性检查； - lint、严格的 TypeScript、生产构建、运行时路由和资源解码。 结果是明确的：`pass`、`fail` 或 `blocked`。缺失的源站点运行记录不能被转换为通过。 ## 技术栈 - Next.js 16 App Router - React 19 和严格的 TypeScript - Tailwind CSS v4 - shadcn/ui 和 Base UI - Lucide React，辅以测量到的源站点 SVG - 依赖极少的 Node.js 自动化脚本 - 支持 Vercel 部署和独立的 Docker 支持 在修改应用程序代码之前，请阅读 `node_modules/next/dist/docs/` 下的相关已安装文档。本项目遵循已安装的 Next.js 版本，而不是基于旧版本的假设。 ## 命令 ``` npm run dev # Start the development server npm run build # Create a production build npm run lint # Run ESLint npm run typecheck # Run strict TypeScript checks npm run preflight # Verify Git, Node, skills, browser, and motion tools npm run init:clone -- [--mode clone|adapt|blend] [--url ] npm run sync:skills # Regenerate platform skill trees npm run check:skills # Detect generated-skill drift npm run test:skills # Run deterministic skill tests npm run check # Run every repository quality gate ``` ## 项目治理 错误报告和功能提案使用结构化的 issue 表单。Pull request 会运行完整的质量测试套件，依赖项更新是自动化的，安全报告可以私下提交。 ## 负责任的使用 请将本引擎用于您拥有、被授权重建或在适用条款和法律允许范围内进行研究的网站。请勿用于网络钓鱼、冒充、欺骗性发布、禁止的抓取、重新分发未经授权的资源，或将他人的设计和内容冒充为原创作品。 请在每个克隆契约中记录源站点权限、隐私限制和资源使用限制。 ## 许可证 由 Tenten 在 [MIT 许可证](LICENSE)下发布。本仓库中保留的第三方代码所需的通知列在 [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md) 中。

标签：AI编程代理, MITM代理, UI还原, 网站克隆, 自动化QA, 自定义脚本, 请求拦截