GitHub 开源项目：一行命令 AI 克隆任意网站

GitHub 上一个名为 ai-website-cloner-template 的开源项目近期获得约 2 万 Star，核心能力是借助 AI 编程助手，将任意目标网站一键逆向解析为一套可本地运行的完整 Next.js 工程。项目以 GitHub 模板仓库形式发布，支持 Claude Code、Cursor、Copilot、Codex CLI、Gemini CLI、Windsurf 等多款主流 AI 编码工具。作者特别推荐使用 Claude Code + Opus 4.7 组合以获得最佳效果。

使用方式

用户只需在 GitHub 上点击「Use this template」生成自己的仓库，拉取到本地安装依赖后，在 Claude Code 中带 --chrome 参数启动以获得浏览器操控能力，再执行 /clone-website https://目标网址 即可触发全流程。该命令也支持一次性传入多个 URL，多个站点会并行处理且相互隔离。

项目通过仓库根目录的 AGENTS.md 文件充当所有 AI 工具的「单一事实来源」，各平台的配置文件均由该文件自动同步生成，因此不同 AI 编程工具中的使用体验保持一致。如需增加新平台支持，只需修改 AGENTS.md 并运行 bash scripts/sync-agent-rules.sh。

五阶段工作流

整个 AI 复刻流程分为五个阶段：

• 全域采集：自动滚动页面、模拟悬浮与点击、在不同视口宽度下检查响应式表现，并使用 getComputedStyle() 获取字体、色值、间距、圆角、阴影等设计 Token 的真实计算值。
• 基础搭建：将全局样式（字体文件、CSS 变量、Tailwind 配置等）一次性写入项目，并把原站静态资源（图片、视频、favicon、OG 图等）按目录归档下载。
• 组件规格书：将页面拆分为导航栏、Hero 区、功能卡片、定价表、页脚等独立区块，并为每个区块生成详细规格文件，记录精确的 CSS 计算值、状态过渡参数、响应式断点布局及完整文案。
• 并行构建：为每个组件创建独立的 git worktree，调度多个 builder 智能体同时施工，互不干扰。
• 组装质检：合并各 worktree 代码回主分支，接好路由与布局，自动执行 ESLint、TypeScript 类型检查与生产构建，全部通过后方可交付。

最终产物为基于 Next.js 16+、shadcn/ui、Tailwind CSS v4 与 TypeScript 严格模式的完整前端工程，可直接修改与部署。

适用场景与限制

作者给出三类正当用途：

• 平台迁移：将 WordPress、Webflow、Squarespace 等站点迁移到 Next.js 技术栈。
• 源码恢复：在线站点仍在运行但代码仓库遗失或技术栈老旧时，逆向生成现代化代码。
• 学习拆解：研究特定布局、滚动动画或响应式方案的实现细节。

项目也存在明确限制：站点私有业务逻辑 JS、登录态受限的动态内容以及第三方嵌入组件无法完整捕获还原。作者同时强调，该工具不可用于钓鱼等恶意行为，使用前需重视版权与目标网站的服务条款。