[Github] AI Website Cloner Template – 安装、启动与网站重构流程

AI Website Cloner Template 是一个让 AI coding agent 分析网页并重建为 Next.js 项目的开源模板。正确起点不是直接在上游仓库里改代码，而是先用 GitHub 的 Use this template 创建自己的副本，再安装依赖并运行 /clone-website。本文按当前 README 整理完整启动路径、常见失败和合法使用边界。

核验状态（2026-07-24）：官方仓库为 JCodesMore/ai-website-cloner-template，采用 MIT License，前置环境为 Node.js 24+。README 当前推荐 Claude Code + Opus 4.8，也列出 Codex CLI、Cursor、Cline、Continue 等兼容 Agent。版本和支持范围会变化，运行前应再次查看 README 与 Release。

开始前准备

• GitHub 账号，以及可以创建新仓库的权限。
• 本机已安装 Git、Node.js 24 或更高版本与 npm。
• 一个受支持的 AI coding agent，并已完成模型和账号配置。
• 只处理自己拥有、获授权或服务条款允许分析的网页。

模板使用 Next.js 16、React 19、TypeScript、Tailwind CSS v4 与 shadcn/ui。若本机 Node.js 版本过低，依赖安装或构建会在真正执行克隆前就失败。

创建自己的仓库

1. 打开官方仓库页面，点击 Use this template。
2. 选择 Create a new repository，填写自己的仓库名与可见范围。
3. 进入新仓库后，再复制自己的仓库地址到本机。

git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY.git
cd YOUR-REPOSITORY
npm install

这一步能把生成内容和上游模板隔离开。不要把为某个目标站生成的代码直接提交到模板项目，也不要把上游仓库当成自己的业务仓库长期修改。

运行克隆流程

以官方当前推荐的 Claude Code 为例，先在项目目录启动带浏览器能力的 Agent：

claude --chrome

进入 Agent 会话后执行：

/clone-website https://example.com

需要分析多个相关页面时，可以依次追加 URL。模板会先做页面侦察与设计 token 提取，再生成组件规范、并行构建各区块，最后组装页面并进行视觉差异检查。使用其他 Agent 时，应先阅读仓库根目录的 AGENTS.md，确认它能识别项目规则与 skill。

检查生成结果

npm run dev
npm run lint
npm run typecheck
npm run build

不要只看首页截图。至少检查桌面与移动断点、导航和按钮状态、字体与图片路径、动态内容、表单以及构建输出。生成项目通常还需要人工清理无效资源、修正可访问性、补充真实数据和重新核对 SEO 字段。

如果需要容器环境，仓库也提供 Compose 入口：

docker compose up dev --build
docker compose up app --build

常见启动问题

找不到命令

先确认当前目录就是由模板创建的仓库，并检查 Agent 是否读取了 AGENTS.md 和项目 skill。只在普通聊天窗口输入命令，而没有载入项目规则，通常不会启动完整流水线。

依赖安装失败

运行 node --version 检查是否达到 Node.js 24+，再删除不完整的依赖目录后重新安装。不要在未读错误信息时反复切换包管理器。

页面还原不完整

登录态、懒加载、复杂动画、跨域资源和反爬策略都会影响提取。先缩小到有权限的单个公开页面，并记录缺失状态；不要通过绕过访问控制来提高还原度。

构建无法通过

依次运行 lint、typecheck 和 build，把问题收窄到具体文件。视觉接近不等于代码可发布，类型错误、缺失环境变量和失效资源仍需逐项修复。

版权与安全边界

模板维护者明确说明，它不应用于钓鱼、冒充、窃取品牌资产或违反目标站服务条款。网站在线可访问不代表设计、Logo、图片和文案可以复制。合理用途包括迁移自己拥有的网站、找回自己丢失的源码，以及在获得许可后研究前端实现。

把生成结果部署到公网前，还应删除目标站身份标识、替换未经授权的素材、检查表单去向，并重新执行安全和隐私审查。

站内延伸

• 查看 Cursor 的产品入口与使用边界。
• 查看 Cline 的 Agent 工作方式。
• 查看 Continue 的开源与团队配置定位。

官方来源

• GitHub：JCodesMore/ai-website-cloner-template
• Release：github.com/JCodesMore/ai-website-cloner-template/releases