AI Website Cloner Template —— 用 AI 编程代理一条命令克隆任意网站为 Next.js 应用
这是一个面向 AI 编程代理的开源模板项目，内置 /clone-website 技能：给它一个网址，代理会依次完成侦察、基础样式还原、组件规格编写、并行构建与合并质检，最终生成一个干净的 Next.js 16 + React 19 + TypeScript + Tailwind CSS v4 + shadcn/ui 项目。适合把自有网站从 WordPress/Webflow/Squarespace 迁移到现代技术栈、找回丢失源码，或用于学习真实生产站点的布局与响应式实现。许可证为 MIT。
社区作者 · zZz
它解决什么问题
项目用途
AI Website Cloner Template 是一个开源模板，把「克隆网站」这件事做成 AI 编程代理可执行的标准流程。你只需给代理一个 URL，它就会把该网站重建为一个干净的 Next.js 应用。项目自述的定位是「Clone any website with one command」。
官方说明：Claude Code + Opus 5.5 效果最佳（来源原文如此），同时支持 Codex、Cursor 和 OpenCode。
技术栈
- Next.js 16 —— App Router、React 19、TypeScript strict
- shadcn/ui —— Radix primitives + Tailwind CSS v4
- Tailwind CSS v4 —— oklch 设计令牌
- Lucide React —— 默认图标（克隆过程中会被抽取出的 SVG 替换）
工作原理
/clone-website 技能运行一条多阶段流水线：
- 侦察（Reconnaissance）—— 截图、设计令牌抽取、交互扫描（滚动、点击、悬停、响应式）
- 打底（Foundation）—— 更新字体、颜色、全局样式，下载全部素材
- 组件规格（Component Specs）—— 在 docs/research/components/ 写入详细规格文件，包含精确的 computed CSS 值、状态、行为与内容
- 并行构建（Parallel Build）—— 在 git worktree 中分发 builder 代理，每个区块/组件一个
- 组装与质检（Assembly & QA）—— 合并 worktree、接通页面、对原站做视觉 diff
每个 builder 代理都会内联收到完整的组件规格——精确的 getComputedStyle() 取值、交互模型、多状态内容、响应式断点以及素材路径，不需要靠猜。
项目结构
- src/app/ —— Next.js 路由
- src/components/ —— React 组件；src/components/ui/ 为 shadcn/ui 原语；icons.tsx 为抽取出的 SVG 图标
- src/lib/utils.ts —— cn() 工具函数
- src/types/ —— TypeScript 接口；src/hooks/ —— 自定义 React hooks
- public/images/ —— 从目标站下载的图片；public/videos/ —— 下载的视频；public/seo/ —— favicon、OG 图
- docs/research/ —— 抽取输出与组件规格；docs/design-references/ —— 截图
- .agents/skills/clone-website/ —— 规范化的技能与 inspection 参考
- .claude/commands/clone-website.md —— 轻量 Claude Code 桥接命令
- AGENTS.md —— 代理指令（单一事实来源）；CLAUDE.md —— Claude Code 配置（导入 AGENTS.md）
Agent 支持方式
项目在 .agents/skills/clone-website/ 维护一份可移植的 Agent Skill，Codex、Cursor、OpenCode 直接读取它；Claude Code 通过 .claude/commands/clone-website.md 这个小型命令桥使用，使 /clone-website 及其参数继续可用，同时不会向其他代理暴露重复技能。
适用对象与限制
适用对象：需要把自有站点迁移到现代 Next.js 代码库的开发者、源码丢失只剩线上站点的团队、想通过真实代码学习生产站点布局/动画/响应式实现的学习者。
明确不适用：钓鱼或冒充等欺骗性、违法用途；把他人设计据为己有（logo、品牌素材与原创文案归其所有者）；违反某些站点明令禁止抓取或复制的服务条款（使用前需自行确认）。
文档中的配图
- 配图 1（Watch the demo）：docs/design-references/comparison.png —— 点击图片可在 YouTube 观看完整演示
- 配图 2（Star History Chart）：docs/assets/star-history.png —— 项目 Star 历史
许可证
MIT。
— 本文由 AI 根据公开来源辅助整理，命令、版本与许可证请在使用前到原始页面复核。
安装 / 开始使用
前置条件
- Node.js 24 及以上
- 一个 AI 编程代理（见下方支持平台）
- 克隆网站时，代理需开启浏览器访问能力（browser access enabled）
支持平台（来源原文）：Claude Code 为推荐项，标注 Opus 5.5；Codex CLI、OpenCode、Cursor 均为 Supported。
第一步：建立项目
方式 A（推荐）：让你的代理来搭
把下面这段提示词原样粘贴给 Codex、Claude Code 或你的编程代理：
Set up https://github.com/JCodesMore/ai-website-cloner-template
as a standalone project in a new folder on my computer.
Ask me where to put it. Clone the repository, remove its origin remote,
install dependencies, and run npm run check. Leave it ready for me
to clone a website.方式 B：自己建 GitHub 仓库
- 起一个仓库名，点击 Create repository
- 把新仓库链接交给你的代理，让它把仓库克隆到你电脑上、安装依赖，并运行 npm run check
第二步：克隆一个网站
在开启了浏览器访问的代理中打开该项目。在 Claude Code 或 Cursor 中运行：
/clone-website https://example.com把 URL 换成你想重建的网站。构建完成后，可以继续向代理提出你想要的任何修改。
常用命令
npm run dev # 启动开发服务器
npm run build # 生产构建
npm run lint # ESLint 检查
npm run typecheck # TypeScript 检查
npm run check # 依次运行 lint + typecheck + buildDocker 用法
docker compose up app --build # 构建并运行应用
docker compose up dev --build # 以开发模式在 3001 端口运行应用首次运行与常见问题
- 首次搭建的最后一步是运行 npm run check（lint + typecheck + build 全跑一遍），确认环境就绪后再去克隆网站。
- 克隆必须在「开启浏览器访问」的代理会话中进行，否则侦察阶段无法截图与抽取交互状态。
- 克隆完成后如要改动，直接向代理提需求即可，无需手改规格文件。
- 使用前请确认目标站点允许被复制/抓取：来源明确提示部分站点的服务条款禁止抓取或复制。
- 项目不得用于钓鱼、冒充或任何违法用途，也不应把他人 logo、品牌素材和原创文案据为己有。
