开发与工程 website-cloningnextjstailwindcssshadcn-uitypescriptreverse-engineering

AI 网站克隆器模板

一条命令,使用 AI 编码代理将任何网站逆向工程为现代化的 Next.js 代码库。

FollowAgents 评估 · FARS-2.1
不推荐
37/ 100 五分制 1.9 / 5
1 2 3 4 5 6
1信任安全0 / 29 · 0.0/5

证据显示仓库未包含任何权限声明、用户确认流程、数据流说明或敏感数据处理策略。依赖安全性未提供审计或锁定信息。外部影响(如网络请求、文件写入)未明确说明。回滚机制未提及。来源归属仅通过作者字段和README中的声明,但未验证。因此所有信任标准得分为0。

2可靠稳定5 / 14 · 1.8/5

自一致性:README、package.json和CI工作流在技术栈和命令上基本一致,但未提供测试或运行验证,故得2分。依赖可用性:依赖列表存在,但未提供锁定文件或完整性校验,得1分。失败消息:未提供错误处理或用户提示,得0分。

3适用触发12 / 18 · 3.3/5

受众和场景:README明确列出了使用场景和不适用的场景,得2分。能力边界:明确说明了不适用于钓鱼或侵权,得2分。触发精度:提供了明确的命令和参数,得2分。环境适配:列出了多种支持的平台和Node版本要求,得2分。

4规范维护10 / 18 · 2.8/5

信息架构:项目结构清晰,得2分。安装说明:提供了详细的安装步骤,得2分。命名稳定性:版本号存在但无变更日志,得1分。示例和FAQ:提供了演示视频和示例,但无FAQ,得2分。已知限制:明确列出了不适用场景,得2分。许可证:MIT许可证完整,得3分。版本和变更日志:有版本号但无变更日志,得1分。维护责任:作者信息存在但未验证,得1分。

5有效结果7 / 13 · 2.7/5

输出可用性:生成的代码库结构清晰,得2分。边际价值:提供了自动化克隆功能,但未验证实际效果,得2分。成本效益:需要Node 24和AI代理,成本较高,但未提供性能数据,得1分。

6证据核验3 / 8 · 1.9/5

声明可追溯性:README中的声明未提供具体证据,得1分。跨来源验证:仅依赖单一来源,得1分。事实与推断分离:未明确区分事实和推断,得1分。

证据充分度: 评估于 2026年8月9日 审查版本 751e327f3a68
上游仓库在本次评估后已有新提交;当前评分仍对应所示审查版本,可能尚未覆盖最新改动。
源码中未见的安全控制:最小权限约束、执行前用户确认、数据流向说明、敏感信息处理、依赖安全审查、外部影响披露、回滚或恢复路径、来源归属可核验
使用前请注意
  • 仓库未提供任何安全审计或权限最小化措施,使用前需自行评估风险。
  • 依赖未锁定版本,存在供应链风险,建议使用锁文件。
  • 未提供回滚机制,克隆操作可能不可逆。
  • 未提供测试或验证,实际效果未经验证。
评估证据 [1][2][3][4]
查看完整评分方法 →

这个 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.shscripts/sync-skills.mjs)。

  1. 拥有 WordPress/Webflow/Squarespace 网站并希望移植到现代 Next.js 代码库的开发者。
  2. 源代码丢失或离任开发者离开,希望以现代格式恢复线上网站的团队。
  3. 希望通过逆向工程真实生产网站来学习布局、动画和响应式行为的前端开发者。
  4. 需要快速搭建网站原型,可通过克隆现有设计作为起点的开发者。

这个 Agent 有哪些优点和局限?

优点
  • 提供端到端的自动化流水线:从截图和设计令牌提取到并行构建、视觉差异 QA,全套完成。
  • 支持广泛:明确列出 13 种 AI 编码代理,涵盖主流工具。
  • 基于现代技术栈(Next.js 16、React 19、TypeScript 严格模式、shadcn/ui、Tailwind v4),生成的代码可直接使用。
局限
  • 推荐使用 Claude Code 搭配 Opus 5,其他代理可能体验或效果不佳,存在依赖特定提供商的风险。
  • 需要 Node.js 24+ 环境,旧版本无法运行。
  • 生成网站的安全与合规风险高,用户必须自行检查目标网站的条款和服务,避免侵权。

如何安装或部署这个 Agent?

  1. 点击 GitHub 页面上的“Use this template”按钮,创建你自己的仓库副本(不要直接克隆此模板仓库)。2. 在本地打开或克隆新仓库并进入目录。3. 运行 npm install 安装依赖。4. 确保已安装 Node.js 24+ 和兼容的 AI 编码代理(推荐 Claude Code)。

如何使用这个 Agent?

  1. 在项目目录中运行 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),并通过同步脚本为它们生成特定平台的技能文件。用户可根据自身代理选择。

常见问题

克隆网站是否有法律风险?
README 强调此项目不应用于仿冒或欺骗目的,并警告用户注意目标网站的条款和服务。用户必须自行确保合规。
是否必须使用 Claude Code?
不必须,但 README 明确推荐 Claude Code 搭配 Opus 5 以获得最佳结果。该模板支持多种其他代理。
如果我不使用 Claude Code,如何开始?
打开 AGENTS.md 文件,大多数代理会自动读取。也可以运行同步脚本为你的代理生成技能文件。
生成后我可以直接部署吗?
模板生成的是 Next.js 项目,可自行部署,但 README 未提供具体的部署步骤,需要你自行配置托管或 Vercel 等平台。

对比同类 Agent

用同一套 FARS 评审,横向比较这个 Agent 所属的短名单。

相关 Agents