JCodesMore/ai-website-cloner-template

Clone any website with one command using AI coding agents

What it solves

本项目提供了一个可重复使用的模板，允许用户将现有网站逆向工程化为干净、现代的 Next.js 代码库。它旨在帮助进行平台迁移 (例如，从 WordPress 或 Webflow 迁移到 Next.js)，从在线网站中找回丢失的源代码，并学习生产环境网站的结构与样式。

How it works

该模板利用 AI 编程代理 (例如 Claude Code, Cursor, 或 Aider) 通过 /clone-website 命令执行多阶段流水线：

  1. Reconnaissance: 代理会进行截图并提取设计令牌 (design tokens)、资产与交互行为。

  2. Foundation: 它会更新全局样式、字体与颜色，并下载必要的资产。

  3. Component Specs: 代理会为每个组件编写详细的规格说明，包括精确的计算后的 CSS 值与行为。

  4. ** Parallel Build**: 发送多个构建代理来并行重建单个章节或组件。

  5. Assembly & QA: 最后将组件合并，并针对在线网站进行视觉差异对比 (visual diff)，以确保准确性。

Who it’s for

想要将旧有网站迁移到现代技术栈的开发者，需要找回网站前端代码的开发者，或者正在寻找研究生产级布局与动画的开发者。

Highlights

  • Modern Tech Stack: 使用 Next.js 16, React 19, Tailwind CSS v4, 和 shadcn/ui 构建。

  • Agent Agnostic: 支持广泛的 AI 编程代理，包括 Claude Code, GitHub Copilot, Cursor, 和 Windsurf。

  • ‘Automated Pipeline’: 自动化设计令牌的提取与组件规格说明书的创建，从而消除构建过程中的 guesswork

  • Parallel Construction: 使用 git worktrees 来允许构建代理同时工作在网站的不同部分。