24
// 项目简介
该项目提供了一个可复用的模板，用于利用 AI coding agents 将网站逆向工程为现代 Next.js 代码库。它通过提取设计 tokens、资源和组件规范来自动化处理流程，从而并行重构各个部分。该模板支持多种 AI 平台，并内置了用于组装和视觉质量保证的工具。
// 技术分析
AI Website Cloner Template 是一个专门的框架，旨在利用 AI 编码代理将现有网站逆向工程为现代、可维护的 Next.js 代码库。通过采用多阶段流水线（涵盖侦察、设计令牌提取到并行组件构建），它解决了迁移旧网站或恢复丢失源代码的问题。该项目通过基于计算出的 CSS 值生成详细的组件规范来优先保证精度，确保生成的代码准确反映原始网站的设计和行为。
// 核心亮点
01
使用 React 19 和 Tailwind CSS v4 自动化将网站重构为现代 Next.js 16 技术栈。
02
利用多阶段流水线执行网站侦察、资产提取和组件规范生成，以最大限度地减少 AI 的猜测。
03
通过调度构建器代理同时构建各个网站部分，支持并行开发。
04
通过提取精确的计算 CSS 值、交互模型和响应式断点，确保对原始设计的高度保真。
05
提供与各种 AI 编码代理的广泛兼容性，包括 Claude Code、Cursor、GitHub Copilot 和 Windsurf。
06
包含内置的 QA 流程，针对原始网站执行视觉差异对比，以确保克隆的输出符合质量标准。
// 典型使用场景
01
将 WordPress 或 Webflow 等平台的旧版网站迁移至现代 Next.js 技术栈
02
为原始存储库已丢失的在线网站恢复源代码
03
解构生产环境的网站布局和响应式行为，以学习先进的 Web 开发技术
// 快速开始
首先，克隆存储库并使用 npm 安装必要的依赖项。设置完成后，启动您首选的 AI 编码代理（例如 Claude Code），并执行 /clone-website 命令，后跟目标 URL。随后，代理将根据项目预定义的规则自动处理侦察和重构过程。