从此模板创建你自己的仓库

在本项目的 GitHub 页面上，点击 Use this template，然后点击 Create a new repository。

为新仓库命名，选择公开或私有，然后点击 Create repository。如果 GitHub 显示 Include all branches 选项，可以保持关闭。

这样你就有了独立的项目工作空间，网站相关改动会保留在你的账户中，而不会回流到主模板。
在本地打开你的新仓库

GitHub 创建副本后，打开该新仓库。点击 Code，用你偏好的编码工具打开或克隆新仓库。

若使用终端，命令大致如下：
```
git clone https://github.com/YOUR-USERNAME/YOUR-NEW-REPOSITORY.git
cd YOUR-NEW-REPOSITORY
```
安装依赖
```
npm install
```
启动你的 AI 智能体 — 推荐 Claude Code：
```
claude --chrome
```

运行 skill：

/clone-website <target-url1> [<target-url2> ...]

自定义（可选）— 基础克隆构建完成后，按需修改

使用其他智能体？打开 AGENTS.md 查看项目说明 — 大多数智能体会自动读取。

支持的平台

智能体	状态
Claude Code	推荐 — Opus 4.8
Codex CLI	支持
OpenCode	支持
GitHub Copilot	支持
Cursor	支持
Windsurf	支持
Gemini CLI	支持
Cline	支持
Roo Code	支持
Continue	支持
Amazon Q	支持
Augment Code	支持
Aider	支持

前置条件

Node.js 24+
一个 AI 编程智能体（见支持的平台）

技术栈

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 skill 会运行一个多阶段流水线：

侦察（Reconnaissance） — 截图、设计令牌提取、交互扫描（滚动、点击、悬停、响应式）
基础（Foundation） — 更新字体、颜色、全局样式，下载全部资源
组件规格（Component Specs） — 编写详细规格文件（docs/research/components/），包含精确的计算后 CSS 值、状态、行为与内容
并行构建（Parallel Build） — 在 git worktree 中调度构建智能体，每个区块/组件一个
组装与质量保证（Assembly & QA） — 合并 worktree、接线页面，并相对原站运行视觉 diff

每个构建智能体都会内联收到完整的组件规格 — 精确的 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

为其他平台更新

两份权威源文件支撑所有平台支持。编辑源文件，然后运行同步脚本：

内容	权威源（Source of truth）	同步命令
项目说明	`AGENTS.md`	`bash scripts/sync-agent-rules.sh`
`/clone-website` skill	`.claude/skills/clone-website/SKILL.md`	`node scripts/sync-skills.mjs`

每个脚本会自动重新生成各平台专用副本。能原生读取源文件的智能体无需重新生成。

Star 历史

许可证

MIT

README.md Unescape Escape

AI 网站克隆模板

演示

快速开始

支持的平台

前置条件

技术栈

工作原理

适用场景

不适用于

项目结构

命令

若使用 docker

为其他平台更新

Star 历史

许可证

README.md