AI 网站克隆模板：使用 AI 代理将任意网站重建为 Next.js

想象一下，将 AI 代理指向任意网站，就能获得一个完全功能齐全的 Next.js 代码库。不需要手动抓取、无需像素匹配、无需繁琐的逆向工程。AI 网站克隆模板 通过单个命令 /clone-website 即可实现。

🚀 工作原理（5 阶段 AI 流水线）

1. 侦察阶段：AI 捕获截图、提取设计令牌（颜色、字体、间距）、映射交互
2. 基础阶段：下载资源，使用 OKLCH 令牌设置字体/颜色/全局
3. 组件规范：生成精确的规范文件，包括计算的 CSS 值、状态、响应式行为
4. 并行构建：在 git worktrees 中启动构建代理（每个组件/部分一个）
5. 组装与 QA：合并一切，对原始网站运行视觉回归测试

🎯 杀手级用例

• 平台迁移：WordPress → Next.js，Webflow → React，Squarespace → 现代技术栈
• 丢失源代码恢复：有在线网站但无仓库？AI 重建它
• 学习解构：研究 Stripe/ProductHunt 如何实现复杂布局

🛠️ 经过实战考验的技术栈

• Next.js 16（App Router） + React 19 + TypeScript 严格模式
• shadcn/ui + Tailwind CSS v4（OKLCH 设计令牌）
• Node 24+ 配 Docker 多阶段构建
• 12+ AI 代理支持：Claude Code（推荐）、Cursor、Gemini CLI、Amazon Q、Continue 等

⚡ 快速启动（2 分钟）

git clone https://github.com/JCodesMore/ai-website-cloner-template.git my-clone
cd my-clone
npm install
claude --chrome  # 或您偏好的代理
/clone-website https://example.com

✅ 企业级就绪

• MIT 许可证（已有 7.2k ⭐️）
• Docker Compose 用于生产/开发
• ESLint + TypeScript 严格模式
• 多平台代理同步 脚本

观看演示：几分钟内克隆复杂营销网站。完美适用于代理机构、独立开发者以及现代化遗留网站的团队。

⚠️ 仅限道德使用：平台迁移、学习、源代码恢复。绝不用于钓鱼或违反 ToS。