6 个每位 AI 工程师必备的 GitHub 仓库。

1. AI Website Cloner Template
   使用可复用的 AI 工作流程，克隆并逆向工程几乎任何网站。
   https://github.com/JCodesMore/ai-website-cloner-template…

2. Recordly
   Screen Studio 的开源替代品，具备自动缩放、平滑光标移动和精美的屏幕录制功能。
   https://github.com/webadderallorg/Recordly…

3. Agent-Reach
   让你的 AI Agent 访问 X、Reddit、YouTube 和 GitHub——无需为 API 付费。
   https://github.com/Panniantong/Agent-Reach…

4. SkillClaw
   你的 AI 自动从每次会话中学习，并保持你的技能库有序并随时间提升。
   https://github.com/AMAP-ML/SkillClaw…

5. Open Generative AI
   使用 AI 编码代理自动生成图像、视频和媒体内容。
   https://github.com/Anil-matcha/Open-Generative-AI…

6. Firecrawl
   将任何网站转换为干净的 Markdown 和结构化数据，AI Agent 可以实际使用。
   https://github.com/firecrawl/firecrawl…

你最先收藏哪个仓库？

JCodesMore/ai-website-cloner-template

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

AI Website Cloner Template

一个可复用的模板，用于使用 AI 编码代理将任何网站逆向工程为干净、现代的 Next.js 代码库。

推荐：Claude Code（https://docs.anthropic.com/en/docs/claude-code）配合 Opus 4.8 以获得最佳效果——但也可与多种 AI 编码代理配合使用。指向一个 URL，运行 /clone-website，你的 AI 代理将检查网站、提取设计令牌和资源、编写组件规范，并分派并行构建器来重建每个部分。

演示

观看演示（https://youtu.be/O669pVZ_qr0）

点击上方图片在 YouTube 上观看完整演示。

快速开始

重要： 首先使用 GitHub 的 Use this template 按钮创建你自己的副本。不要直接克隆此模板仓库用于你的网站项目，也不要在此处针对你生成的网站提交 Pull Request。

1. 从此模板创建你自己的仓库
   在该项目的 GitHub 页面上，点击 Use this template，然后点击 Create a new repository。为你的新仓库命名，选择公开或私有，然后点击 Create repository。如果 GitHub 显示 Include all branches 选项，可以忽略。这样你就拥有了自己的独立项目，你的网站更改将保留在你的账户中，而不会回到主模板。

2. 在你的计算机上打开新仓库
   GitHub 创建副本后，打开那个新仓库。点击 Code，并用你偏好的编码工具打开或克隆你的新仓库。如果使用终端，命令将如下所示：

   git clone https://github.com/YOUR-USERNAME/YOUR-NEW-REPOSITORY.git
   cd YOUR-NEW-REPOSITORY
   

3. 安装依赖

   npm install
   

4. 启动你的 AI 代理——推荐 Claude Code：

   claude --chrome
   

5. 运行技能：

   /clone-website [<url>]
   

6. 自定义（可选）——基础克隆构建完成后，根据需要修改

使用其他代理？打开 AGENTS.md 查看项目说明——大多数代理会自动读取。

支持的平台

前提条件

• Node.js (https://nodejs.org/) 24+
• 一个 AI 编码代理（参见支持的平台）

技术栈

• Next.js 16 — App Router, React 19, TypeScript strict
• shadcn/ui — Radix 原语 + Tailwind CSS v4
• Tailwind CSS v4 — oklch 设计令牌
• Lucide React — 默认图标（克隆时替换为提取的 SVG）

工作原理

/clone-website 技能运行一个多阶段管道：

1. 侦察 — 截图、设计令牌提取、交互扫描（滚动、点击、悬停、响应式）
2. 基础 — 更新字体、颜色、全局样式，下载所有资源
3. 组件规范 — 编写详细的规范文件（docs/research/components/），包含精确的 CSS 计算值、状态、行为和内容
4. 并行构建 — 在 git worktree 中分派构建器代理，每个部分/组件一个
5. 组装与质量检测 — 合并 worktree，组装页面，与原始版本进行视觉差异对比

每个构建器代理都会内联接收完整的组件规范——精确的 getComputedStyle() 值、交互模型、多状态内容、响应式断点和资源路径。无需猜测。

使用场景

• 平台迁移 — 将你拥有的网站从 WordPress/Webflow/Squarespace 重建为现代的 Next.js 代码库
• 丢失源代码 — 你的网站仍在线上，但仓库丢失了、开发者离开了、或者技术栈过时了。通过现代格式找回代码
• 学习 — 通过实际代码解读生产网站如何实现特定的布局、动画和响应式行为

不适用于

• 钓鱼或冒充 — 本项目不得用于欺骗目的、冒充或任何违法活动。
• 将他人的设计冒充为自己的 — 标志、品牌资产和原创内容属于其所有者。
• 违反服务条款 — 某些网站明确禁止抓取或复制。请先检查。

项目结构

src/
  app/               # Next.js 路由
  components/        # React 组件
    ui/              # shadcn/ui 原语
  icons.tsx          # 提取的 SVG 图标
  lib/utils.ts      # cn() 工具函数
  types/             # TypeScript 接口
  hooks/             # 自定义 React Hooks
public/
  images/            # 从目标网站下载的图片
  videos/            # 从目标网站下载的视频
  seo/               # Favicon、OG 图片
docs/
  research/          # 提取输出及组件规范
  design-references/ # 截图
scripts/
  sync-agent-rules.sh   # 重新生成代理指令文件
  sync-skills.mjs       # 为所有平台重新生成 /clone-website
AGENTS.md            # 代理说明（唯一真相来源）
CLAUDE.md            # Claude Code 配置（导入 AGENTS.md）
GEMINI.md            # Gemini CLI 配置（导入 AGENTS.md）

命令

npm run dev          # 启动开发服务器
npm run build        # 生产构建
npm run lint         # ESLint 检查
npm run typecheck    # TypeScript 检查
npm run check        # 运行 lint + typecheck + build

如果使用 Docker

docker compose up app --build       # 构建并运行应用
docker compose up dev --build       # 在开发模式下运行应用（端口 3001）

为其他平台更新

两个真相来源文件为所有平台提供支持。编辑源文件，然后运行同步脚本：

每个脚本会自动重新生成平台特定的副本。原生读取源文件的代理无需重新生成。

Star 历史

Star History Chart (https://star-history.com/#JCodesMore/ai-website-cloner-template&Date)

许可证

MIT