JCodesMore/ai-website-cloner-template

Clone any website with one command using AI coding agents

解决的问题

通过向 AI 编码代理提供一个 URL,允许用户将现有网站重建为干净、现代的 Next.js 应用程序。这在迁移平台(例如从 WordPress 迁移到 Next.js)、从线上站点恢复丢失的源代码,或研究专业网站的构建方式时特别有用。

如何工作

该项目提供一个模板和一套操作指南(即“技能”),AI 编码代理使用这些来执行多阶段流水线:

  1. 侦察:代理获取截图并提取设计令牌和交互行为。
  2. 基础搭建:设置字体、颜色和全局样式,并下载必要的资源。
  3. 组件规范:创建包含每个组件精确 CSS 值和行为的详细规范文件。
  4. 并行构建:多个构建代理并行工作,创建各个部分或组件。
  5. 组装与质量检查:将各部分合并为最终页面,并使用视觉差异对比与原始站点进行核对。

适用人群

  • 希望将旧网站迁移到现代技术栈的开发者
  • 丢失原始源代码的网站所有者
  • 想要拆解生产级布局和动画的学习者

亮点

  • 广泛代理支持:兼容 Claude Code、Cursor、Windsurf、GitHub Copilot、Gemini CLI 等。
  • 现代技术栈:使用 Next.js 16、React 19、Tailwind CSS v4 和 shadcn/ui 生成代码。
  • 高精度:使用 getComputedStyle() 确保精确的视觉还原,而非猜测。
  • 自动化工作流:包含专为支持的 AI 代理设计的 /clone-website 命令。

相关

  • 项目
  • 项目
  • 项目
  • 项目
  • 项目