AI Website Cloner Template

在 Web 开发领域，“参考”与“重构”往往是灵感来源，但手动复刻一个设计精美的网站需要耗费数小时甚至数天。

AI Website Cloner Template 是一个专为 AI 编程智能体（特别是 Claude Code）设计的可复用模板。只需提供一个 URL，AI 就能自动分析目标网站、提取设计令牌、抓取资源，并并行构建出一个功能完整、代码整洁、基于 Next.js 16 + Tailwind CSS v4 的现代化代码库。

核心亮点：从“截图”到“源码”的自动化飞跃

• 一键克隆：运行 /clone-website <URL>，AI 自动接管全流程。
• 深度理解：不仅仅是截图，AI 会滚动、点击、悬停，捕捉交互状态、响应式断点和动态内容。
• 并行构建：调度多个 AI 子智能体，同时构建不同的页面板块（Header, Hero, Features, Footer 等），极大缩短生成时间。
• 精准还原：提取真实的 getComputedStyle() 数值、字体、颜色（OKLCH）、间距和阴影，拒绝“大概差不多”。
• 现代技术栈：输出代码基于 Next.js 16 (App Router)、React 19、TypeScript 和 shadcn/ui，直接可用于生产环境。

工作原理：五步智能工作流

当你执行 /clone-website 指令时，后台会发生以下精密协作：

1. 信息采集 (Reconnaissance)
   • AI 驱动浏览器访问目标站点。
   • 全页截图，提取所有设计令牌（Colors, Typography, Spacing）。
   • 模拟用户交互（滚动、点击菜单、Hover 效果），记录动态行为。
2. 基础搭建 (Foundation)
   • 自动配置 tailwind.config.ts，注入提取的颜色和字体。
   • 下载所有图片、SVG 图标和本地资源。
   • 设置全局样式和重置规则。
3. 组件规范 (Specification)
   • 在 docs/research/components/ 目录下生成详细的构建蓝图。
   • 包含每个组件的精确 CSS 数值、状态逻辑、内容结构和响应式策略。
   • 这是关键一步：让后续的构建智能体“有的放矢”，无需猜测。
4. 并行构建 (Parallel Construction)
   • 主智能体调度多个子构建智能体。
   • 每个子智能体负责一个独立板块（如 Navbar, Hero Section, Testimonials）。
   • 它们依据“组件规范”编写代码，互不干扰，效率倍增。
5. 整合与质检 (Integration & QA)
   • 合并所有子智能体的代码到主分支。
   • 进行页面联调，确保路由和交互正常。
   • （可选）与原站进行视觉对比，微调差异。

快速开始指南

1. 前置准备

• Node.js: 版本 24+ (推荐最新 LTS)。
• AI 智能体: 推荐使用 Claude Code (Opus 4.6) 以获得最佳推理和视觉理解能力。

2. 安装与运行

# 1. 克隆模板
git clone https://github.com/JCodesMore/ai-website-cloner-template.git my-clone
cd my-clone

# 2. 安装依赖
npm install

# 3. 启动 AI 智能体 (以 Claude Code 为例)
claude --chrome

# 4. 执行克隆指令
/clone-website https://example.com

等待 AI 完成分析、规划和构建后，你将得到一个完整的 Next.js 项目。

3. 后续自定义

克隆完成后，项目即是一个标准的 Next.js 应用。你可以：

• 修改文案和图片。
• 添加新的功能模块。
• 连接后端 API 或数据库。
• 部署到 Vercel/Netlify。

支持的平台

虽然为 Claude Code 优化，但该模板具有广泛的兼容性：

查看项目中的 AGENTS.md 获取针对特定智能体的配置说明。

技术栈详解

生成的代码库采用 2026 年最前沿的技术组合：

• 框架: Next.js 16 (App Router, Server Components)
• 语言: TypeScript (严格模式)
• UI 库: shadcn/ui (基于 Radix UI 的无头组件)
• 样式: Tailwind CSS v4 (使用 OKLCH 色彩空间，更自然的颜色插值)
• 图标: Lucide React (自动替换为目标网站的 SVG)
• 字体: 自动检测并加载 Google Fonts 或本地字体

适用场景 vs 禁止用途

✅ 推荐场景

• 平台迁移：将老旧的 WordPress/Webflow 站点重构为高性能 Next.js 应用。
• 灾难恢复：源码丢失、开发者离职，仅存在线网站，需快速恢复代码库。
• 学习研究：拆解顶尖网站（如 Apple, Stripe）的布局、动画和响应式实现细节。
• 原型开发：快速基于竞品风格搭建 MVP，验证产品想法。

❌ 禁止用途

• 网络钓鱼/欺诈：严禁克隆银行、支付或政府网站用于非法目的。
• 侵犯版权：Logo、品牌资产、原创文案和图片归原作者所有。本工具仅用于生成结构代码，使用者需自行替换品牌素材。
• 违反 ToS：使用前请确认目标网站的服务条款，尊重 robots.txt 和版权协议。