AI 网站克隆器模板
一条命令,使用 AI 编码代理将任何网站逆向工程为现代化的 Next.js 代码库。
证据显示仓库未包含任何权限声明、用户确认流程、数据流说明或敏感数据处理策略。依赖安全性未提供审计或锁定信息。外部影响(如网络请求、文件写入)未明确说明。回滚机制未提及。来源归属仅通过作者字段和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分。
- 仓库未提供任何安全审计或权限最小化措施,使用前需自行评估风险。
- 依赖未锁定版本,存在供应链风险,建议使用锁文件。
- 未提供回滚机制,克隆操作可能不可逆。
- 未提供测试或验证,实际效果未经验证。
这个 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 有哪些优点和局限?
- 提供端到端的自动化流水线:从截图和设计令牌提取到并行构建、视觉差异 QA,全套完成。
- 支持广泛:明确列出 13 种 AI 编码代理,涵盖主流工具。
- 基于现代技术栈(Next.js 16、React 19、TypeScript 严格模式、shadcn/ui、Tailwind v4),生成的代码可直接使用。
- 推荐使用 Claude Code 搭配 Opus 5,其他代理可能体验或效果不佳,存在依赖特定提供商的风险。
- 需要 Node.js 24+ 环境,旧版本无法运行。
- 生成网站的安全与合规风险高,用户必须自行检查目标网站的条款和服务,避免侵权。
如何安装或部署这个 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 与同类方案有什么区别?
该模板明确对比了多种 AI 编码代理(Claude Code、Codex CLI、OpenCode、GitHub Copilot、Cursor、Windsurf、Gemini CLI、Cline、Roo Code、Continue、Amazon Q、Augment Code、Aider),并通过同步脚本为它们生成特定平台的技能文件。用户可根据自身代理选择。
常见问题
克隆网站是否有法律风险?
是否必须使用 Claude Code?
如果我不使用 Claude Code,如何开始?
AGENTS.md 文件,大多数代理会自动读取。也可以运行同步脚本为你的代理生成技能文件。