你看到一个国外 SaaS 产品的 landing page，设计特别棒，配色舒服，动效流畅。想照着这个风格给自己的产品也搞一个，但一想到要从头写 CSS、调响应式、抠像素，头都大了。

还有一种情况你可能也见过：接手一个项目，线上跑得好好的，但源代码找不到了。之前的开发者离职了，本地没备份，Git 仓库也丢了。网站还在，代码没了。

这些事情的共同点是什么？你已经有了"视觉上的答案"，但没有对应的代码。

传统做法是打开 DevTools，手动查看每个元素的 CSS，截图、测量、然后一行一行写代码。一个页面搞下来，少说半天。

但如果把网址扔给 AI，它自己去看、去分析、去提取，然后自动用 Next.js 把整个页面重写出来呢？

这就是AI Website Cloner Template在做的事。

Github:

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

一句话说清楚它是什么

一个 GitHub 模板仓库。你用它的模板创建自己的项目，配合 AI 编程助手（推荐 Claude Code），输入 /clone-website ，AI 就会接手干活： - 1. 打开目标网站，截图，提取设计风格和颜色 - 2. 下载所有图片和资源 - 3. 分析每个组件的结构和交互方式 - 4. 同时派好几个"AI 工人"并行重建每个区块 - 5. 最后把所有代码合并，生成一个可直接运行的 Next.js 项目

整个过程像一支 AI 施工队：有人勘察测绘，有人拆解结构，有人搬运材料，有人砌墙组装。

不是截图复制粘贴

很多人可能会想："这不就是截图让 AI 照着写代码吗？"

还真不是。这个项目的核心叫 逆向工程。它不只盯着"这个按钮长什么样"，而是搞清楚"这个按钮用什么结构写的、交互逻辑是什么、不同屏幕尺寸下怎么变"。

整个流程分成五步：

侦察

AI 打开目标网站，截全页截图（桌面版和手机版都截），提取设计语言——用了什么字体，主色是什么，间距规律。然后做"交互扫描"：从顶部滚到底部，观察导航栏会不会变色，元素会不会随滚动出现动画，有没有悬浮效果。再点击所有按钮，记录每个点击的结果。最后在不同屏幕宽度下测试布局变化。

它会生成一份详细的"行为档案"，记录每个动态细节。

打地基

AI 开始在项目里搭基础框架：配置字体、颜色、全局样式，创建 TypeScript 类型定义，提取 SVG 图标存成组件，下载页面上所有图片到本地。

这一步得一步步来。打完地基确认项目能正常编译，才继续下一步。

写施工图纸

页面上的每个独立区块（导航栏、英雄区、功能卡片、页脚），AI 都会写一份详细的规格文档。文档内容包括这个区块由哪些元素组成，每个元素精确的 CSS 值（不是"大概 16px"，而是用 getComputedStyle() 取到的精确值），交互状态（默认什么样、悬浮什么样、点击什么样），响应式行为（桌面怎么排、手机怎么堆），以及对应的图片路径。

AI 不靠脑子记这些信息，全部写到文件里。这份文件就是"施工图纸"，交给其他 AI 工人用。

并行施工

这是整个流程最有意思的地方。

AI 同时启动多个"工人"子进程，每个工人负责一个区块。用的是 git worktree 技术，每个工人在独立的 Git 工作目录里干活，互不干扰。

导航栏一个工人，英雄区一个工人，功能展示区三个工人（三种不同卡片），页脚一个工人，全部同时开工。每个工人收到的指令包含它需要的一切：精确 CSS 值、交互行为描述、图片路径。不用猜，照着施工图纸干。

组装和质检

所有工人干完活，AI 把大家的成果合并到一起：各独立工作目录的内容合并回主项目，所有区块拼装成完整页面。最后跑一次视觉对比，检查最终效果和原网站的差距。然后 npm run build，确保能正常编译。

为什么它能支持这么多 AI 平台？

这个项目支持 13 种 AI 编程助手。从 Claude Code 到 Cursor，从 GitHub Copilot 到 Windsurf，从 Gemini CLI 到 Amazon Q，市面上主流的都覆盖了。

实现方式挺巧妙。项目里有个 AGENTS.md 文件，是所有平台配置的单一信源。要更新项目规则，改这一个文件就行，然后跑一个脚本，所有平台配置自动同步。

每个平台的配置文件放在各自的目录里： - • .claude/skills/clone-website/ —— Claude Code 的技能定义 - • .codex/skills/clone-website/ —— Codex CLI 的技能定义 - • .cursor/ —— Cursor 的配置 - • .windsurf/、.gemini/、.amazonq/ - • 以及 .clinerules、.aider.conf.yml 等

不管你用的哪个 AI 助手，都能用。 项目已经把"翻译"工作做好了。

技术栈

如果你关心底层技术，这个项目用了： - • Next.js 16 —— React 全栈框架，最新 App Router - • shadcn/ui —— 基于 Radix 的 UI 组件库 - • Tailwind CSS v4 —— 原子化 CSS，支持 oklch 色彩空间 - • TypeScript strict —— 严格模式类型检查 - • Lucide React —— 默认图标库（克隆过程中会被提取的 SVG 替换）

环境要求：Node.js 24+ 加任意一个支持的 AI 编程助手。

什么时候用

平台迁移。 你有一个 WordPress、Webflow 或 Squarespace 建的网站，想迁到 Next.js。用模板把现有网站克隆下来，拿到一个干净的代码库，再继续开发。

源代码丢失。 网站还在跑但代码丢了。开发者走了，Git 仓库没了，历史遗留项目找不到原始文件。用这个工具把线上版本"反编译"成代码。

学习研究。 看到一个网站的布局、动画、响应式设计做得特别好，想知道它怎么实现的。克隆下来看看 AI 重写的代码，比自己猜快得多。

什么时候别用

项目 README 里也写了：

钓鱼或冒充他人——克隆别人的网站去骗人，违法。

把别人的设计据为己有——Logo、品牌资产、原创文案，所有权归原主。

违反网站服务条款——有些网站明确禁止抓取或复制，用之前确认一下。

工具本身是中性的，用对地方是生产力，用偏了就是麻烦。

快速上手

实际操作很简单：

去 GitHub 点 "Use this template" 创建你的仓库

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

npm install

claude --chrome

/clone-website https://目标网站.com然后等着就行。AI 从侦察到组装全程自动完成。

总结

AI Website Cloner Template 解决的问题很实际：把"看得见的设计"变成"可运行的代码"。

它不是简单的"截图生成代码"，而是一套逆向工程流水线。每一步都有明确的设计。

项目地址：https://github.com/JCodesMore/ai-website-cloner-template

Demo 视频：https://youtu.be/O669pVZ_qr0

许可证：MIT