拾光存档记录微光 · 存入时间
N 31° 13′ 46.98″
PAGE.2607.1961 拾光集 TOOD.WIN / PAGE
AI

一句话克隆网站：AI Agent 像素级复刻工具

想快速复刻一个网站的页面设计，又不想从零手写 React 组件和 CSS？

AI Website Cloner Template 提供了一套基于 AI Agent 的网站逆向工程流程：输入目标网址并运行 /clone-website，AI 会分析页面、提取设计规范、下载素材，并生成结构清晰的 Next.js 项目。

它并不是简单的“截图转 HTML”，而是把网站拆解为可维护的 React 组件、Tailwind CSS 样式、TypeScript 类型和本地素材文件，适合网站迁移、旧站重建、源码找回和前端学习。

一句话克隆网站：AI Agent 像素级复刻工具

这个工具能做什么？

它主要解决的是“从现有网站视觉效果到可编辑前端代码”的问题。

  • 自动截取桌面端和移动端页面
  • 提取颜色、字体、间距、圆角、阴影等设计 Token
  • 分析滚动、悬停、点击、弹窗和轮播等交互
  • 下载图片、视频、字体、SVG 和网站图标
  • 按页面区块生成 React 组件规格
  • 并行生成 Next.js 组件
  • 对比原站与复刻页面，进行视觉 QA
  • 输出可继续修改和部署的前端项目

核心工作流程

1. 页面侦察

AI Agent 通过浏览器自动化工具打开目标网站，滚动并检查完整页面，同时记录桌面端、移动端和不同交互状态。

2. 提取设计规范

工具会读取页面的实际样式，包括：

  • 字体名称、字号和字重
  • 颜色和渐变
  • 内外边距
  • 圆角、边框和阴影
  • 响应式断点
  • 动画时间和缓动方式

这些数据会被整理为 Tailwind CSS 和全局样式中的设计 Token，减少凭感觉猜测样式的问题。

3. 下载真实素材

页面中的图片、视频、字体、SVG、favicon 和 Open Graph 图片会被保存到本地项目中。

这意味着生成结果使用的是目标页面的真实素材，而不是由 AI 临时生成的占位内容。

4. 生成组件规格

AI 会按照导航栏、首屏、功能区、案例区、价格区和页脚等页面区块，生成详细的组件规格文档。

规格中会记录：

  • 组件结构
  • 文本内容
  • 精确样式值
  • 素材路径
  • 交互状态
  • 响应式表现

5. 并行生成代码

不同区块可以交给多个 AI Agent 并行处理，最终合并为完整页面。

生成项目主要使用：

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • shadcn/ui

6. 视觉 QA

页面生成后，AI 会再次运行网站并截图，与原页面进行视觉对比，检查布局、字体、颜色、间距和素材是否存在明显偏差。

生成后的项目结构 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

src/
├─ app/                 # Next.js 路由与页面
├─ components/          # 页面 React 组件
│  ├─ ui/               # shadcn/ui 基础组件
│  └─ icons.tsx         # 提取的 SVG 图标
├─ hooks/               # 自定义 React Hooks
├─ lib/                 # 公共工具
└─ types/               # TypeScript 类型

public/
├─ images/              # 下载的图片
├─ videos/              # 下载的视频
└─ seo/                 # favicon、OG 图片等

docs/
├─ research/            # 页面分析与组件规格
└─ design-references/   # 原网站截图

如何使用？

准备条件

使用前需要准备：

  • Node.js 24 或更高版本
  • 一个支持该项目的 AI 编程工具
  • 可用的浏览器自动化能力，例如 Chrome MCP、Playwright MCP 或 Puppeteer MCP

项目推荐使用 Claude Code，同时也支持 Codex CLI、Cursor、Gemini CLI、GitHub Copilot、Windsurf、Cline、Roo Code 等工具。

第一步：创建自己的项目

打开 GitHub 项目页面，点击 Use this template，再选择 Create a new repository。

不要直接把官方模板仓库当成自己的网站项目提交修改。

第二步：克隆自己的仓库 

1
2
3

git clone https://github.com/你的用户名/你的仓库名.git
cd 你的仓库名
npm install

第三步：启动 AI Agent

以 Claude Code 为例：

1

claude --chrome

第四步：运行网站克隆命令 

1

/clone-website https://example.com

也可以一次提供多个网址：

1

/clone-website https://example.com https://example.com/pricing

第五步：运行项目 

1

npm run dev

完成后访问本地开发地址，检查页面并继续修改内容、品牌信息和业务逻辑。

它适合哪些场景？

适合

  • 将自己的网站迁移到 Next.js
  • 旧网站只有线上页面，但源码已经丢失
  • 将 WordPress、Webflow 或 Squarespace 页面重建为现代前端项目
  • 学习优秀网站的布局、动效和响应式设计
  • 快速搭建内部原型或页面改版基础
  • 在获得授权后重建客户网站

不适合

  • 自动还原原网站的后端数据库
  • 复制登录、支付、会员和实时业务系统
  • 自动修复原网站不合理的业务逻辑
  • 把别人的品牌、文案和设计冒充为自己的作品
  • 制作钓鱼网站或仿冒登录页面
  • 绕过目标网站的服务条款、版权或访问限制

使用前必须知道的限制

“像素级复刻”是一项目标，而不是任何网站都能百分之百实现的保证。

以下内容通常仍需要人工调整：

  • 复杂的 WebGL、Canvas 或 3D 动画
  • 登录后才能访问的页面
  • 依赖后端接口的动态数据
  • 个性化推荐和实时内容
  • 支付、账号、权限和数据库逻辑
  • 受跨域、反爬虫或访问权限保护的素材
  • 原网站未公开的源代码与内部实现

生成完成后，开发者仍然需要进行代码 Review、性能优化、无障碍检查、SEO 配置和业务改造。

一句话总结

AI Website Cloner Template 更像一个“网站视觉逆向工程助手”，而不是自动重构完整业务系统的万能工具。

它可以显著缩短页面搭建时间，并把目标网站的视觉结构转换为可继续开发的 Next.js 代码；但后端功能、版权合规、性能优化和真实业务逻辑，仍然需要开发者自己完成。

GitHub 项目

请只复刻自己拥有、已经获得授权，或明确允许研究和重建的网站。不要将该工具用于仿冒、钓鱼、侵权或其他违法用途。