AI 网站克隆器模板
一条命令，使用 AI 编码代理将任何网站逆向工程为现代化的 Next.js 代码库。
- Star 数
- ★ 37k
- 最近更新
- 14 天前
- License
- MIT
- 主语言
- TypeScript
- FA 评分
- 37/100 · 缺口较多
30 秒速览
- 运行形态
- 可在哪里用
- 平台专用Claude Code
- 费用
- 软件免费，模型调用费用自付
- 上手难度
- 中 · 需要几步配置
- 开始前需要
- 典型场景
- 拥有 WordPress/Webflow/Squarespace 网站并希望移植到现代 Next.js 代码库的开发者。
- 不适合
- 想直接复制他人网站设计的用户，项目明确禁止冒充与侵权
- 不愿手动核查目标网站服务条款与版权风险的团队
这个 Agent 能做什么，适合哪些场景？
AI 网站克隆器模板是一个可复用的脚手架，用于借助 AI 编码代理将任何网站重构为干净、现代的 Next.js 代码库。它推荐使用 Claude Code 搭配 Opus 5 获得最佳效果，但也兼容多种其他代理。该模板内置了多阶段流水线：侦察阶段截屏并提取设计令牌；基础设置阶段更新字体、颜色并下载资源；组件规格阶段编写精确的 CSS 值规格；并行构建阶段使用 Git worktree 分派构建代理；最后在装配和 QA 阶段合并并对原始页面进行视觉对比。它基于 Next.js 16、shadcn/ui、Tailwind CSS v4、React 19、TypeScript 严格模式。项目包含可定制的 AGENTS.md 和 CLONE-WEBSITE 技能文件，并配有同步脚本用于跨平台支持。该工具适用于平台迁移、恢复丢失的源代码或学习目的，但明确禁止用于仿冒或欺骗性用途。
该仓库提供了一个模板，启动后，用户需创建自己的副本，安装依赖（npm install），运行 claude --chrome，然后执行 /clone-website <target-url> 技能。技能会启动一个多阶段流程：侦察阶段执行截图、设计令牌提取、交互扫描（滚动、点击、悬停、响应式）；基础设置阶段更新字体、颜色、全局样式并下载所有资源；组件规格阶段将精确的 getComputedStyle() 值、交互模型、多状态内容、响应式断点和资源路径写入 docs/research/components/；并行构建阶段在 Git worktree 中按组件分派构建代理；装配与 QA 阶段合并 worktree、装配页面并与原始页面进行视觉对比。模板还包含 AGENTS.md 单一事实来源文件，以及用于重新生成各平台指令和技能的脚本（scripts/sync-agent-rules.sh、scripts/sync-skills.mjs）。
- 拥有 WordPress/Webflow/Squarespace 网站并希望移植到现代 Next.js 代码库的开发者。
- 源代码丢失或离任开发者离开，希望以现代格式恢复线上网站的团队。
- 希望通过逆向工程真实生产网站来学习布局、动画和响应式行为的前端开发者。
- 需要快速搭建网站原型，可通过克隆现有设计作为起点的开发者。
如何安装或部署这个 Agent？
- 点击 GitHub 页面上的“Use this template”按钮，创建你自己的仓库副本（不要直接克隆此模板仓库）。2. 在本地打开或克隆新仓库并进入目录。3. 运行
npm install安装依赖。4. 确保已安装 Node.js 24+ 和兼容的 AI 编码代理（推荐 Claude Code）。
如何使用这个 Agent？
- 在项目目录中运行
claude --chrome启动 Claude Code。2. 执行技能：/clone-website <target-url1> [<target-url2> ...]。3. 等待流水线完成：侦察、基础设置、组件规格、并行构建、装配与 QA。4. 可选：根据需要对生成代码进行自定义。
如果你使用其他代理（如 Codex CLI、OpenCode、GitHub Copilot、Cursor、Windsurf 等），打开 AGENTS.md 获取项目指令，大多数代理会自动识别。
这个 Agent 有哪些优点和局限？
- 提供端到端的自动化流水线：从截图和设计令牌提取到并行构建、视觉差异 QA，全套完成。
- 支持广泛：明确列出 13 种 AI 编码代理，涵盖主流工具。
- 基于现代技术栈（Next.js 16、React 19、TypeScript 严格模式、shadcn/ui、Tailwind v4），生成的代码可直接使用。
- 推荐使用 Claude Code 搭配 Opus 5，其他代理可能体验或效果不佳，存在依赖特定提供商的风险。
- 需要 Node.js 24+ 环境，旧版本无法运行。
- 生成网站的安全与合规风险高，用户必须自行检查目标网站的条款和服务，避免侵权。
这个 Agent 与同类方案有什么区别？
该模板明确对比了多种 AI 编码代理（Claude Code、Codex CLI、OpenCode、GitHub Copilot、Cursor、Windsurf、Gemini CLI、Cline、Roo Code、Continue、Amazon Q、Augment Code、Aider），并通过同步脚本为它们生成特定平台的技能文件。用户可根据自身代理选择。
与相关度最高的同类 agent 并排比较关键指标。
| Agent | 源码审查 | 形态 / 费用 | Star | 最近更新 | 主语言 | 完整支持的平台 |
|---|---|---|---|---|---|---|
| AI 网站克隆器模板 当前 | 37 · 缺口较多 | Agent 插件 / 技能免费 + 模型费 | ★ 37k | 14 天前 | TypeScript | Claude Code |
| Agent UI - 智能体聊天界面 | 40 · 缺口较多 | 网页应用免费 + 模型费 | ★ 1.9k | 5 个月前 | TypeScript | — |
| Claude 眼中的老己 | 46 · 缺口较多 | 网页应用免费 | ★ 1.6k | 6 个月前 | — | — |
| Open Generative UI | 44 · 缺口较多 | 命令行工具免费 + 模型费 | ★ 3.5k | 5 天前 | TypeScript | Claude API |
FollowAgents 如何评估这个 Agent？
查看各维度的扣分理由
证据显示仓库未包含任何权限声明、用户确认流程、数据流说明或敏感数据处理策略。依赖安全性未提供审计或锁定信息。外部影响（如网络请求、文件写入）未明确说明。回滚机制未提及。来源归属仅通过作者字段和README中的声明，但未验证。因此所有信任标准得分为0。
自一致性：README、package.json和CI工作流在技术栈和命令上基本一致，但未提供测试或运行验证，故得2分。依赖可用性：依赖列表存在，但未提供锁定文件或完整性校验，得1分。失败消息：未提供错误处理或用户提示，得0分。
受众和场景：README明确列出了使用场景和不适用的场景，得2分。能力边界：明确说明了不适用于钓鱼或侵权，得2分。触发精度：提供了明确的命令和参数，得2分。环境适配：列出了多种支持的平台和Node版本要求，得2分。
信息架构：项目结构清晰，得2分。安装说明：提供了详细的安装步骤，得2分。命名稳定性：版本号存在但无变更日志，得1分。示例和FAQ：提供了演示视频和示例，但无FAQ，得2分。已知限制：明确列出了不适用场景，得2分。许可证：MIT许可证完整，得3分。版本和变更日志：有版本号但无变更日志，得1分。维护责任：作者信息存在但未验证，得1分。
输出可用性：生成的代码库结构清晰，得2分。边际价值：提供了自动化克隆功能，但未验证实际效果，得2分。成本效益：需要Node 24和AI代理，成本较高，但未提供性能数据，得1分。
声明可追溯性：README中的声明未提供具体证据，得1分。跨来源验证：仅依赖单一来源，得1分。事实与推断分离：未明确区分事实和推断，得1分。
- 源码中未见：最小权限约束只授予完成任务所需的权限：用专用账号或只读令牌，并限定可访问的目录和仓库。
- 源码中未见：执行前用户确认开启或自行加上执行前确认；先在沙箱或测试环境跑通，确认行为后再接入真实数据。
- 源码中未见：数据流向说明运行时观察它连接了哪些外部服务（代理或防火墙日志）；弄清数据去向之前不要输入敏感数据。
- 源码中未见：敏感信息处理使用专用、低权限、可随时吊销的 API 密钥，不要复用生产凭据，也不要让密钥出现在日志里。
- 源码中未见：依赖安全审查安装前固定版本并做一次依赖扫描（如 npm audit、pip-audit）；优先放在容器里运行。
- 源码中未见：外部影响披露先弄清它会写入、发送或修改哪些外部系统，用测试账号或测试仓库验证后再接入正式环境。
- 源码中未见：回滚或恢复路径运行前先备份，或在 git 分支、快照上操作，确保改动可以撤销。
- 源码中未见：来源归属可核验从官方仓库或包源安装，核对发布者和仓库地址，避免同名仿冒包。
- 仓库未提供任何安全审计或权限最小化措施，使用前需自行评估风险。
- 依赖未锁定版本，存在供应链风险，建议使用锁文件。
- 未提供回滚机制，克隆操作可能不可逆。
- 未提供测试或验证，实际效果未经验证。
最近版本
来自该项目 GitHub Releases 的最新发布记录，说明为上游原文摘录，未经本站改写或测试。
-
v0.6.1 v0.6.1 - Rule-based fidelity guidance
发布说明摘录
Sharper cloning guidance that catches more fidelity drift with fewer, more general directives. - Treat each observation as a sample of a rule: read declared values and vary viewport width (including wider than the design), height, input, and state. - Use the files the source actually loads, and build shared components and page-wide behavior, such as smooth scrolling, from every observed state. - Compare beyond the design width and judge scroll and pointer behavior with real input. Full changelog: https://github.com/JCodesMore/ai-website-cloner-template/compare/v0.6.0...v0.6.1在 GitHub 查看 ↗ -
v0.6.0 v0.6.0 - Improved cloning workflow
发布说明摘录
A simpler shared workflow for recreating websites, with improved guidance for responsive layouts, asset extraction, and interactive or animated pages. - Streamlined cloning instructions with focused inspection and motion references. - Updated project documentation and Claude command guidance to match the shared skill. Full changelog: https://github.com/JCodesMore/ai-website-cloner-template/compare/v0.5.1...v0.6.0在 GitHub 查看 ↗ -
v0.5.1 v0.5.1 - Security Patch & Opus 5.5
发布说明摘录
Security Patch & Opus 5.5 This release updates Next.js to 16.3.5 to fix known vulnerabilities. The README now recommends Claude Code with Opus 5.5. Update if you started from an earlier version of the template. Highlights - Patched dependencies: Next.js and eslint-config-next are pinned exactly to 16.3.5, and vulnerable transitive dependencies are refreshed. npm audit reports 0 known vulnerabilities. - Opus 5.5 recommendation: the README now recommends Claude Code with Opus 5.5. - Current Star History: the README chart now runs through September 2026. …在 GitHub 查看 ↗
常见问题
克隆网站是否有法律风险？
是否必须使用 Claude Code？
如果我不使用 Claude Code，如何开始？
AGENTS.md 文件，大多数代理会自动读取。也可以运行同步脚本为你的代理生成技能文件。