丢个网址,反手给你完整网站代码,效果惊艳

看到一个网站的界面设计特别漂亮，心想"要是我也能做出这种效果就好了"。

然后打开编辑器，新建项目，搭脚手架，写组件，调样式——

干了两天，发现还不如直接抄一个现成的模板。

有个开源工具，你只需要把网址丢给 AI，它反手给你一个完整的网站代码。

aiwebsite-cloner-template，支持 Claude Code、Cursor、Codex CLI、Gemini CLI 等 14 种 AI 编程工具。

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

01 它能干什么？

一句话：把一个网站的 URL，变成一个干净的 Next.js 代码库。

不是复制 HTML，不是扒皮网页——是用 AI 重新构建。

具体流程是这样的：

1. 1. 侦察：AI 用浏览器截图，提取页面的颜色、字体、布局、交互行为（滚动、点击、悬停、响应式）
2. 2. 基础：自动更新字体、颜色、全局样式，下载所有资源图片
3. 3. 组件规格：AI 写一份详细的组件规格文档——每个组件的精确 CSS 值、状态、行为、内容
4. 4. 并行构建：AI 启动多个 builder agent，每个负责一个页面区块，在独立的 git worktree 里并行开发
5. 5. 组装与 QA：合并所有 worktree，拼装页面，跑视觉比对，确认和原站一致

整个过程不需要你写一行代码。你只需要输入一个 URL，敲一个命令。

02 为什么这个思路能火？

因为扒网页这件事，历来都很痛苦。

以前怎么做？

• • 手动右键"查看源代码"，把 HTML 扒下来
• • 用 HTTrack 之类的工具整站下载
• • 手动整理结构，拆分成组件
• • 手动替换样式，调整交互

费时费力，而且扒出来的代码通常是一坨屎山。

这个项目的思路完全不同：它不扒代码，它"看"页面，然后用现代框架重新写。

AI 看到的是页面长什么样——颜色、字体、间距、布局——

然后，根据这些信息生成干净的 Next.js + TypeScript + Tailwind CSS 代码。

不是复制粘贴，是理解和重建。

03 核心能力

3.1 多阶段流水线

整个克隆过程分 5 个阶段，每个阶段都有明确的目标和输出：

每个 builder agent 收到的不是模糊描述，而是精确的 getComputedStyle() 值——颜色用的是什么色值、间距是多少 px、hover 状态怎么变化。

3.2 支持 14 种 AI 编程工具

这不是只给 Claude Code 用的——它支持市面上几乎所有主流 AI 编程工具：

核心原理是一样的： 每个工具都能加载 /clone-website 这个 skill，按照同样的流水线执行。

3.3 技术栈

生成的代码不是随便什么框架——是现代前端标准栈：

• • Next.js 16（App Router）
• • React 19
• • TypeScript（严格模式）
• • shadcn/ui（Radix 组件 + Tailwind CSS v4）
• • Tailwind CSS v4（oklch 设计 token）
• • Lucide React（图标库，克隆时会替换为原站的 SVG）

生成的代码是真正能跑、能改、能部署的现代前端项目。 不是那种跑不了的玩具。

04 三个典型使用场景

场景 1：平台迁移

你的网站还在 WordPress、Webflow 或 Squarespace 上跑着，想迁移到 Next.js 但又不想从头写？

丢个 URL，AI 帮你重建。 生成的代码是干净的 TypeScript + Next.js，后续维护方便得多。

场景 2：找回丢失的源码

你的网站还在跑，但代码丢了——开发者离职了，或者当年的技术栈早就过时了。

用 AI 克隆一遍，重新拿回现代代码。 比翻找旧仓库快得多。

场景 3：学习设计

看到别人的网站设计漂亮，想学怎么做的？

克隆下来，看 AI 怎么拆组件、怎么写样式。 比自己对着 DevTools 一点一点看效率高多了。

05 怎么用？

第一步：创建模板仓库

在 GitHub 上点 "Use this template" → 创建新仓库。不要直接 clone 这个模板仓库。

第二步：克隆到本地

git clone https://github.com/YOUR-USERNAME/YOUR-NEW-REPOSITORY.gitcd YOUR-NEW-REPOSITORYnpm install

第三步：启动 AI 工具

推荐 Claude Code：

claude --chrome

然后输入：

/clone-website <目标网站URL>

AI 就开始干活了。

第四步：定制

克隆完成后，生成的代码就是一个完整的 Next.js 项目，你可以随意修改。

06 优缺点

优点

• • 速度极快：一个命令，几分钟到一个小时生成完整代码
• • 代码质量高：生成的不是屎山，是干净的现代前端代码
• • 工具链丰富：14 种 AI 工具都支持
• • 学习价值高：看 AI 怎么拆解和重建网站，是很好的学习方式

缺点

• • 不是 100% 还原：AI 的理解和原站可能有偏差，复杂交互（动画、登录态、动态数据）需要手动补
• • 依赖 AI 工具：需要 Claude Code 或 Cursor 等 AI 编程工具，且有 API 费用
• • 生成的代码需要修改：克隆只是起点，后续定制是必须的
• • 版权风险：克隆别人的网站可能涉及版权问题，只适合克隆自己的站或学习用途

写在最后

AI 正在从"写代码"进化到"看页面然后重建"。

丢个网址，拿回代码。这感觉就像给 AI 看了张施工图，它给你盖了一座房子。

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