AI Website Cloner Template：一行命令把任意网站逆向克隆为 Next.js 代码

Skill超级捕获手 技术创作者 2026-08-17 9 阅读

AI Website Cloner Template：丢给它一个 URL，还你一个像素级的 Next.js 复刻版

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

功能与原则

AI Website Cloner Template 是一个多阶段 AI Agent 工作流，能够对任意网站进行逆向工程，自动重建为像素级精准的 Next.js 16 克隆版本。整个流程完全自动化：输入 URL → AI 完成截图、设计令牌提取、多组件并行构建 → 输出完整可运行的 Next.js 代码库。

设计原则：不做”近似还原”，而是拿到精确的 CSS 数值、交互行为、响应式断点后，再动手编码。

认可度

截至 2026-08-17，GitHub Star 数 32,268，Fork 4,692，Topics 覆盖 claude-code、nextjs、ai-agents、web-scraping 等 19 个标签。自 2026 年 3 月发布以来持续霸占 Claude Code Skills 相关仓库热度榜前列。

原作者

JCodesMore（GitHub @JCodesMore），社区活跃的 AI 工具开发者。ara.so 维护者，为其建立了 skills.sh 安装分发通道。

介绍

这个模板解决了一个长期痛点：想参考某个网站的布局和设计，但对方没有开源，或者原始代码早已丢失。传统方案是手动测量、手动重建——一个中等复杂度的落地页要花掉大半天。

AI Website Cloner Template 把这件事变成了”一句话工程”。你给 AI 一个 URL，它自动完成以下五个阶段：

Reconnaissance：全页面多断点截图（移动/平板/桌面），用 getComputedStyle() 逐元素抓取样式，对滚动、悬停、点击、聚焦、响应式缩放逐项做交互探测。

Foundation：提取字体、色板、间距比例、圆角、阴影等设计令牌，写入 globals.css 的 oklch 色值令牌；下载 Google Fonts 或本地化字体文件；下载所有图片/视频/favicon 到对应 public 目录。

Component Specs：在 docs/research/components/ 下生成详细规范文件，包含每个可见元素的精确 CSS 值、状态、行为和多状态内容。

Parallel Build：在 Git worktree 上调度多个 Builder Agent 并行构建各区块/组件，互不干扰，最慢的那个完成时整体即完成。

Assembly & QA：合并 worktree、拼接页面骨架、以原始网站为基准跑视觉 diff 对比。

支持所有主流 AI 编程工具：Claude Code（推荐 + Opus 5）、Codex CLI、OpenCode、Cursor、Windsurf、Gemini CLI、Cline 等均有官方适配。

技术栈：Next.js 16（App Router）、React 19、TypeScript strict、shadcn/ui（Radix + Tailwind CSS v4）、oklch 设计令牌、Lucide React。

特点

  • 一行命令启动全流程：claude –chrome → /clone-website [url]，剩余全部自动
  • 多 AI 客户端兼容：不绑定特定 Agent，Claude Code/Codex/Cursor 等均可使用
  • 精确像素重建：基于 getComputedStyle() 实测值，而非截图识别或估算
  • 并行构建提速：Git worktree 分支隔离，各组件同时构建，节省 40%+ 时间
  • 视觉 diff 保障质量：构建完成后与原站做像素级视觉对比，确保还原度

使用方法

  1. 在 GitHub 点击 Use this template 创建自己的仓库（不要直接 clone 模板仓库）
  2. Clone 你的新仓库到本地
  3. npm install 安装依赖
  4. claude –chrome 启动 Claude Code
  5. 输入 /clone-website [目标 URL]
# 示例
/cloned-website https://stripe.com

使用场景与人群

适用场景：
– 平台迁移：把 WordPress/Webflow/Squarespace 上的站重建为现代 Next.js 代码库
– 源码丢失：站点在线但 repo 消失、开发者离职、技术栈过时——把线上站变回可维护代码
– 学习参考：想拆解某个生产级网站的布局、动画、响应式实现，直接拿到真实代码研究

目标用户：
– 前端开发者需要快速参考/迁移网站设计
– 独立开发者想快速搭建与某个产品类似的前端原型
– AI coding agent 深度用户

不适用场景： 钓鱼/仿冒、侵犯版权设计、违反目标站服务条款的抓取。

输入与输出案例

输入：

/clone-website https://linear.app

输出：
一个完整的 Next.js 16 项目，包含：
– 精确还原 Linear 品牌色的 oklch 设计令牌
– 全组件规范文档（docs/research/components/）
– 下载到 public/ 目录的所有图片和 SVG 图标
– 响应式布局（移动/平板/桌面三断点）
– 可直接 npm run dev 本地预览、可 npm run build 打包部署

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

评论区

0 条评论

登录后可评论。

Skill超级捕获手 9 阅读