superduck-ai/superduck-webcloner
GitHub: superduck-ai/superduck-webcloner
该工具利用浏览器自动化与 AI agent，将任意网站逆向工程为整洁的 Next.js 或 TanStack Start 代码库。
Stars: 1 | Forks: 1
# Superduck WebCloner
将任何网站逆向工程为整洁的 Next.js 或 TanStack Start 代码库 —— 由 [SuperDuck](https://github.com/superduck-ai/superduck) 浏览器自动化提供支持。
[](LICENSE) [](https://nodejs.org/) [](https://nextjs.org/) [](https://tanstack.com/start) [](https://github.com/superduck-ai/superduck)
指定一个 URL，运行 `/clone-website-superduck`，你的 AI agent 就会检查该网站，提取设计 token 和资源，编写组件规范，并调度并行 builder 来重建每一个区块 —— 这一切都通过控制你真实浏览器的 SuperDuck 来完成。
浏览器自动化由 **SuperDuck** 提供支持 —— 这是一个开源的 Chrome/Edge 扩展，通过 `superduck` CLI 驱动用户的真实浏览器。它是本项目支持的**唯一**浏览器后端；没有它，克隆流水线将无法运行。
## 为什么选择 SuperDuck？
SuperDuck 赋予 agent 对你真实 Chrome 的完全 CDP 控制权 —— 相同的 cookie，相同的登录状态，无需 headless 浏览器。它可以与**任何模型**（DeepSeek、Qwen、Kimi、Gemini、GPT 或任何 OpenAI 兼容的 API）配合使用，适用于世界上的**任何地方**，并使用你自己的 API 预算。没有订阅费，没有地区限制，也不需要使用 headless 浏览器来对抗验证码。
## 功能
- **像素级完美的克隆** —— 通过 `getComputedStyle()` 提取，获得精确的颜色、间距、排版和动画
- **真实的内容与资源** —— 从目标网站下载真实的图片、视频、字体和 SVG
- **并行构建** —— 每个区块在 git worktree 中都有自己专属的 builder agent
- **可审计的规范** —— 每个组件都有一个 `*.spec.md` 文件，包含精确的 CSS 值和交互模型
- **多模型支持** —— 通过 SuperDuck 的模型路由，可与任何 AI agent + 任何 LLM 配合使用
- **全面的行为捕获** —— 滚动驱动、点击驱动、hover 状态、多状态内容
- **响应式** —— 在提取过程中以 1440px / 768px / 390px 分辨率进行测试
## 快速开始
1. **从此模板创建你自己的代码库**
在本项目的 GitHub 页面上，点击 **Use this template**，然后选择 **Create a new repository**。为其命名，选择公开/私有，然后点击 **Create repository**。保持“Include all branches”为关闭状态。
2. **克隆你的新代码库**
git clone https://github.com/YOUR-USERNAME/YOUR-REPO.git
cd YOUR-REPO
3. **安装 SuperDuck**（唯一的浏览器后端 —— 硬性前提）
npm install -g superduck-cli
superduck setup # 安装原生 host 及权限
superduck doctor # 验证一切是否准备就绪
然后在 Chrome/Edge 中加载 SuperDuck 扩展（参见 [SuperDuck README](https://github.com/superduck-ai/superduck)）。
4. **安装 ImageMagick**（用于整页截图拼接）
brew install imagemagick # macOS
# apt install imagemagick # Debian/Ubuntu
5. **安装依赖项**
npm install
6. **启动你的 AI agent 并运行该 skill**
claude # Claude Code —— 推荐
然后在 agent 中运行：
/clone-website-superduck https://example.com # Next.js (默认)
/clone-website-superduck https://example.com --framework tanstack # TanStack Start
不需要 `--chrome` 标志。SuperDuck 会接管浏览器。
7. **自定义**（可选） —— 在基础克隆构建完成后，根据需要进行修改。
## 工作原理
```
Target URL ──▶ superduck navigate ──▶ Phase 1: Reconnaissance
├─ full-page screenshots (desktop + mobile)
├─ design tokens (fonts, colors, favicons)
└─ interaction sweep (scroll / click / hover / responsive)
│
▼
Phase 2: Foundation (fonts, global CSS, types, icons, assets)
│
▼
Phase 3: per section ─▶ extract (superduck exec)
─▶ write *.spec.md
─▶ dispatch builder agent (worktree) ─▶ merge
│
▼
Phase 4: Page Assembly (home route, page-level behaviors)
│
▼
Phase 5: Visual QA Diff (side-by-side in 2 superduck tabs)
```
`/clone-website-superduck` skill 运行一个包含 5 个阶段的流水线：
1. **侦察 (Reconnaissance)** —— SuperDuck 导航至目标地址，截取全屏截图（桌面端 + 移动端，通过滚动并拼接实现），提取设计 token，并通过 `superduck exec` 运行交互扫描（滚动、点击、hover、响应式）
2. **基础构建 (Foundation)** —— 更新字体、颜色、全局样式，并下载所有资源
3. **组件规范 (Component Specs)** —— 编写详细的规范文件（位于 `docs/research/components/`），包含精确的 `getComputedStyle()` 值、状态、行为和内容 —— 全部通过 `superduck exec` 提取
4. **并行构建 (Parallel Build)** —— 在 git worktree 中调度 builder agent，每个区块/组件一个
5. **组装与 QA (Assembly & QA)** —— 合并 worktree，组装页面，并与目标网站运行视觉对比（在两个 SuperDuck 标签页中并排显示）
每个 builder agent 都会直接收到完整的组件规范 —— 精确的计算后的 CSS 值、交互模型、多状态内容、响应式断点以及资源路径。无需任何猜测。
## 支持的平台
| Agent | 状态 | 如何运行该 skill |
| --- | --- | --- |
| [Claude Code](https://docs.anthropic.com/en/docs/claude-code) | **推荐** | `/clone-website-superduck
` |
| [Codex CLI](https://github.com/openai/codex) | 受支持 | `/clone-website-superduck ` |
| [OpenCode](https://opencode.ai/) | 受支持 | `/clone-website-superduck ` |
| [GitHub Copilot](https://github.com/features/copilot) | 受支持 | `/clone-website-superduck ` |
| [Cursor](https://cursor.com/) | 受支持 | `clone-website-superduck` 命令 |
| [Windsurf](https://codeium.com/windsurf) | 受支持 | `clone-website-superduck` workflow |
| [Gemini CLI](https://github.com/google-gemini/gemini-cli) | 受支持 | `/clone-website-superduck ` |
| [Cline](https://github.com/cline/cline) | 受支持 | 读取 `.clinerules` + skill 文件 |
| [Roo Code](https://github.com/RooCodeInc/Roo-Code) | 受支持 | 读取 `.clinerules` |
| [Continue](https://continue.dev/) | 受支持 | `clone-website-superduck` 命令 |
| [Amazon Q](https://aws.amazon.com/q/developer/) | 受支持 | `clone-website-superduck` agent |
| [Augment Code](https://www.augmentcode.com/) | 受支持 | `clone-website-superduck` 命令 |
| [Aider](https://aider.chat/) | 受支持 | 读取 `AGENTS.md` |
## 前置条件
以下四项均为**硬性前提** —— 在每一项得到满足之前，skill 将在预检阶段中止运行。
- [Node.js](https://nodejs.org/) 24+
- [SuperDuck](https://github.com/superduck-ai/superduck) 已安装且 `superduck doctor` 通过 —— 唯一的浏览器后端；没有备选方案
- [ImageMagick](https://imagemagick.org/) (`convert`) 用于整页截图拼接
- 一个 AI 编码 agent（推荐使用 Claude Code；由于 SuperDuck 是一个 CLI，任何能够运行 Bash 的 agent 均可工作）
## 技术栈
两个可互换的框架模板，共享组件层：
- **Next.js 16** (`templates/nextjs/`) —— App Router、React 19、`next/font`、TypeScript 严格模式
- **TanStack Start RC** (`templates/tanstack-start/`) —— TanStack Router、Vite、`@fontsource-variable`、`createServerFn`
- **shadcn/ui** —— Base UI 基础组件 + Tailwind CSS v4（两者共享）
- **Tailwind CSS v4** —— oklch 设计 token
- **Lucide React** —— 默认图标（在克隆过程中会被提取的 SVG 替换）
- **SuperDuck** —— 通过 CLI 实现浏览器自动化（拥有对用户真实 Chrome 的完全 CDP 访问权限）
- **部署** —— Vercel
## 命令
该代码库是一个包含两个模板的 npm workspace。使用 `-w` 指定目标：
```
npm -w nextjs run dev # Next.js dev server
npm -w tanstack-start run dev # TanStack Start dev server
npm -w nextjs run build # Production build (Next.js)
npm -w tanstack-start run build # Production build (TanStack Start)
npm -w nextjs run check # lint + typecheck + build (Next.js)
npm -w tanstack-start run check # lint + typecheck + build (TanStack Start)
npm run check # check both templates
```
## 针对其他平台进行更新
两个作为单一事实来源的文件支持所有平台的兼容。编辑源文件，然后运行同步脚本：
| 对象 | 事实来源 | 同步命令 |
| --- | --- | --- |
| 项目说明 | `AGENTS.md` | `bash scripts/sync-agent-rules.sh` |
| `/clone-website-superduck` skill | `.claude/skills/clone-website-superduck/SKILL.md` | `node scripts/sync-skills.mjs` |
每个脚本都会自动重新生成各平台特定的副本。原生读取源文件的 agent（Codex CLI、OpenCode、Cursor、Windsurf、Copilot Coding Agent、Roo Code、Aider、Augment Code）无需重新生成。
## 项目结构
```
templates/
nextjs/ # Next.js 16 template (App Router)
src/
app/ # layout.tsx, page.tsx, globals.css
components/ui/ # shadcn/ui primitives
lib/utils.ts # cn() utility
types/ hooks/ # TypeScript interfaces, custom hooks
public/ # images/, videos/, seo/ (downloaded from target)
tanstack-start/ # TanStack Start RC template (TanStack Router + Vite)
src/
routes/ # __root.tsx, index.tsx (createFileRoute)
styles/app.css # global CSS (tokens, @fontsource-variable fonts)
components/ui/ # same shadcn/ui layer
lib/utils.ts
types/ hooks/
public/
docs/
research/ # Extraction output & component specs
design-references/ # Screenshots
scripts/
fullpage-screenshot.sh # SuperDuck scroll-and-stitch full-page capture
sync-agent-rules.sh # Regenerate agent instruction files from AGENTS.md
sync-skills.mjs # Regenerate /clone-website-superduck 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)
```
## 使用场景
- **平台迁移** —— 将你拥有的网站从 WordPress/Webflow/Squarespace 重建为现代的 Next.js 或 TanStack Start 代码库
- **丢失源代码** —— 你的网站还在运行，但代码库丢失了，开发者离职了，或者技术栈过于陈旧。以现代格式找回代码
- **学习** —— 通过研究真实的代码，解构生产级网站是如何实现特定布局、动画和响应式行为的
## 不适用场景
- **网络钓鱼或冒充** —— 本项目不得用于欺骗目的、冒充他人或任何违反法律的活动。
- **将他人的设计据为己有** —— 徽标、品牌资产和原创文案归其所有者所有。
- **违反服务条款** —— 某些网站明确禁止抓取或复制。请事先检查。
## 致谢
本项目基于 [JCodesMore](https://github.com/JCodesMore) 的 [ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template) 构建。感谢其提供的出色的 Next.js + shadcn/ui 脚手架以及让本项目成为可能的检查指南。
## 许可证
MIT标签：AI代理, MITM代理, 云资产清单, 代码生成, 浏览器自动化, 渗透测试工具, 自动化攻击, 逆向工程