颠覆前端开发！丢一个 URL给AI Agent，整套可运行网站直接产出。Tailwind v4 + Next16

输入网址就能让 AI 自动把网页重建为规范 Next.js 项目，适配 Claude Code、Cursor、Codex 等工具。自动提取资源、还原交互与响应式，适合站点迁移、找回丢失源码、学习页面实现

01 序言

AI Website Cloner Template 是一套专门给 AI 编码 Agent 使用的网站复刻模板，核心就是给 AI 丢一个网址，它会自动分析页面结构、图片字体、交互动画、多端样式，输出一份干净、规范、可直接跑起来的 Next.js 工程。

底层基于 Next.js16 + Tailwind CSS v4 + shadcn/ui，输出的不是杂乱爬虫文本，而是带 TS 类型、组件化拆分的正经前端代码，对 Framer 动画站点、响应式页面有专门的识别逻辑。

它不是爬虫工具，是一套给 AI 的标准化工作流 Skill，自带一套四步复刻流程

核心功能

✅ 一键指令：/clone-website 网址，交给 AI 自动完成全站复刻·

✅ 多端采集：同时读取桌面 + 移动端页面，提取图片、字体、SVG 图标、媒体资源·

✅ 智能构建：拆分成独立组件，还原 hover、滚动动画、Framer 动效、粘性布局·

✅ 对比自检：自动对照原图修复样式偏差，完成类型、打包校验·

✅ 工程化输出：遵循 Next App Router 规范，代码分层清晰，方便后续二次修改·

✅ 多 AI 编码工具兼容：Claude Code（推荐 Opus5.5）、Codex CLI、Cursor、OpenCode·

✅ 全套校验脚本：lint、类型检查、打包一键预检，提前规避报错·

✅ Docker 支持，本地开发 / 部署两种方式

02 安装

环境准备：Node.js 24+，搭配支持浏览器访问能力的 AI 编码助手（Trae，workBuddy之类的），直接复制提示词丢给 AI，自动拉取仓库、移除原远程地址、装依赖、执行校验

Set up https://github.com/JCodesMore/ai-website-cloner-template
as a standalone project in a new folder on my computer.
Ask me where to put it. Clone the repository, remove its origin remote,
install dependencies, and run npm run check. Leave it ready for me
to clone a website.

03 克隆

项目准备完成后，在 AI 工具内执行指令：/clone-website https://目标网址2

AI 跑完复刻流程，你可以继续提需求调整样式、交互；也可以直接 npm run dev 预览3

常用命令

npm run dev        # 本地开发
npm run build      # 生产打包
npm run lint       # 代码规范检查
npm run typecheck  # TS类型校验
npm run check      # 全量校验（lint+类型+打包）

04 下载地址

GitHub：https://github.com/JCodesMore/ai-website-cloner-template