JCodesMore/ai-website-cloner-template
GitHub: JCodesMore/ai-website-cloner-template
一个利用 AI 编程智能体将任意网站逆向工程为整洁的 Next.js 代码库的可复用模板，支持多阶段自动化提取与并行构建。
Stars: 14334 | Forks: 2177
# AI 网站克隆模板
一个可复用的模板，利用 AI 编程智能体将任何网站逆向工程为整洁、现代的 Next.js 代码库。
**推荐：使用搭配 Opus 4.7 的 [Claude Code](https://docs.anthropic.com/en/docs/claude-code) 以获得最佳效果** —— 同时也支持多种 AI 编程智能体。
将其指向一个 URL，运行 `/clone-website`，你的 AI 智能体将检查该网站，提取设计 token 和资源，编写组件规格，并分派并行构建器来重建每个版块。
## 演示
[](https://youtu.be/O669pVZ_qr0)
## 快速开始
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 [ ...]
5. **自定义**（可选） —— 基础克隆构建完成后，根据需要进行修改
## 支持的平台
| 智能体 | 状态 |
| ------------------------------------------------------------- | -------------------------- |
| [Claude Code](https://docs.anthropic.com/en/docs/claude-code) | **推荐** — Opus 4.7 |
| [Codex CLI](https://github.com/openai/codex) | 已支持 |
| [OpenCode](https://opencode.ai/) | 已支持 |
| [GitHub Copilot](https://github.com/features/copilot) | 已支持 |
| [Cursor](https://cursor.com/) | 已支持 |
| [Windsurf](https://codeium.com/windsurf) | 已支持 |
| [Gemini CLI](https://github.com/google-gemini/gemini-cli) | 已支持 |
| [Cline](https://github.com/cline/cline) | 已支持 |
| [Roo Code](https://github.com/RooCodeInc/Roo-Code) | 已支持 |
| [Continue](https://continue.dev/) | 已支持 |
| [Amazon Q](https://aws.amazon.com/q/developer/) | 已支持 |
| [Augment Code](https://www.augmentcode.com/) | 已支持 |
| [Aider](https://aider.chat/) | 已支持 |
## 前置条件
- [Node.js](https://nodejs.org/) 24+
- 一个 AI 编程智能体（参见[支持的平台](#supported-platforms)）
## 技术栈
- **Next.js 16** — App Router, React 19, TypeScript strict
- **shadcn/ui** — Radix 基础组件 + Tailwind CSS v4
- **Tailwind CSS v4** — oklch 设计 token
- **Lucide React** — 默认图标（在克隆过程中会被提取的 SVG 替换）
## 工作原理
`/clone-website` 技能运行一个多阶段 pipeline：
1. **侦察** — 截图，设计 token 提取，交互扫描（滚动，点击，悬停，响应式）
2. **基础** — 更新字体，颜色，全局样式，下载所有资源
3. **组件规格** — 编写详细的规格文件（`docs/research/components/`），包含精确计算的 CSS 值、状态、行为和内容
4. **并行构建** — 在 git worktree 中分派构建器智能体，每个版块/组件一个
5. **组装与 QA** — 合并 worktree，连接页面，与原始网站进行视觉对比
每个构建器智能体都会收到完整的内联组件规格 —— 精确的 `getComputedStyle()` 值、交互模型、多状态内容、响应式断点和资源路径。无需猜测。
## 使用场景
- **平台迁移** — 将你拥有的网站从 WordPress/Webflow/Squarespace 重建为现代的 Next.js 代码库
- **丢失源代码** — 你的网站仍在运行但代码库已丢失，或者开发人员离职，亦或技术栈过于陈旧。以现代格式找回代码
- **学习** — 通过操作真实代码，解构生产级网站如何实现特定的布局、动画和响应式行为
## 不适用场景
- **钓鱼或冒充** — 本项目不得用于欺骗目的、冒充或任何违法行为。
- **将他人的设计据为己有** — 徽标、品牌资产和原创文案归其原始所有者所有。
- **违反服务条款** — 某些网站明确禁止抓取或复制。请事先检查。
## 项目结构
```
src/
app/ # Next.js routes
components/ # React components
ui/ # shadcn/ui primitives
icons.tsx # Extracted SVG icons
lib/utils.ts # cn() utility
types/ # TypeScript interfaces
hooks/ # Custom React hooks
public/
images/ # Downloaded images from target
videos/ # Downloaded videos from target
seo/ # Favicons, OG images
docs/
research/ # Extraction output & component specs
design-references/ # Screenshots
scripts/
sync-agent-rules.sh # Regenerate agent instruction files
sync-skills.mjs # Regenerate /clone-website for all platforms
AGENTS.md # Agent instructions (single source of truth)
CLAUDE.md # Claude Code config (imports AGENTS.md)
GEMINI.md # Gemini CLI config (imports AGENTS.md)
```
## 命令
```
npm run dev # Start dev server
npm run build # Production build
npm run lint # ESLint check
npm run typecheck # TypeScript check
npm run check # Run lint + typecheck + build
```
### 如果使用 Docker
```
docker compose up app --build # build and run the app
docker compose up dev --build # run the app in dev mode on port 3001
```
## 为其他平台进行更新
两个事实来源文件为所有平台提供支持。编辑源文件，然后运行同步脚本：
| 内容 | 事实来源 | 同步命令 |
| ---------------------- | --------------------------------------- | ---------------------------------- |
| 项目说明 | `AGENTS.md` | `bash scripts/sync-agent-rules.sh` |
| `/clone-website` 技能 | `.claude/skills/clone-website/SKILL.md` | `node scripts/sync-skills.mjs` |
每个脚本会自动重新生成特定于平台的副本。原生读取源文件的智能体无需重新生成。
## Star 历史
[](https://star-history.com/#JCodesMore/ai-website-cloner-template&Date)
## 许可证
MIT
一个可复用的模板，利用 AI 编程智能体将任何网站逆向工程为整洁、现代的 Next.js 代码库。
**推荐：使用搭配 Opus 4.7 的 [Claude Code](https://docs.anthropic.com/en/docs/claude-code) 以获得最佳效果** —— 同时也支持多种 AI 编程智能体。
将其指向一个 URL，运行 `/clone-website`，你的 AI 智能体将检查该网站，提取设计 token 和资源，编写组件规格，并分派并行构建器来重建每个版块。
## 演示
[](https://youtu.be/O669pVZ_qr0)
## 快速开始
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 标签：AI编程助手, AI网站克隆, Claude Code, Codex CLI, MITM代理, OpenCode, UI复刻, 云资产清单, 代码生成, 前端工程化, 前端自动化, 开源模板, 渗透测试工具, 网站抓取, 网站重构, 网页提取, 自动化攻击, 设计Token提取, 请求拦截, 逆向工程