ai-website-cloner-template

输入网址,一条命令,AI 帮你克隆整个网站前端。

这是一个基于 AI 编程代理的网站克隆模板,用户只需一条命令即可克隆任意网站。它利用 Claude Code 等 AI 代理,通过反向工程目标网站的 HTML、CSS 和 JavaScript,自动生成功能等价的前端代码。项目基于 Next.js 和 React 构建,提供了完整的项目脚手架,包括路由、组件、样式和配置。它解决了手动复制网站结构费时费力的问题,让开发者能够快速获取参考实现的代码,用于学习、二次开发或快速原型验证。核心能力包括:自动抓取网页结构、生成可运行的 React 组件、保留原有交互逻辑,并支持自定义修改。

开源 free 编程开发
访问官网 ↗ GitHub ↗ 文档 ↗
GitHub 星标 ★ 34786
维护状态 活跃
是否开源 是
定价模式 free

项目数据

分类编程开发
开发团队JCodesMore
所属国家
官网地址
定价模式free
价格说明开源项目,MIT 许可证,完全免费,可自行部署使用。
访问状态
是否开源是
开源协议MIT
主要语言TypeScript
技术栈/模型ai,ai-agents,ai-tools,automation,boilerplate,claude,claude-code,clone,developer-tools,nextjs,react,reverse-engineering,shadcn-ui,skills,tailwindcss,template,typescript,web-scraping,website-clone
GitHub 星标★ 34786
30天Star增速
HF 下载量
上线时间2026-03-13 00:00:00
最近更新2026-09-22 00:00:00
维护状态活跃
中文支持
访问方式
移动端支持
综合评分
收录时间2026-08-09
浏览次数4

使用教程

难度:入门 约 15 分钟 部署方式:命令行工具 7 步

环境要求

  • GitHub 账号(用 Use this template 创建自己的仓库)
  • Node.js 与 npm 环境(用于执行 npm install)
  • AI 编程代理:推荐 Claude Code + Opus 5,同时支持 Codex、Cursor、Gemini
  • 可选:Docker(使用 docker compose 方式运行时需要)

安装与启动步骤

  1. 1创建模板副本

    在 GitHub 项目页点 Use this template,再点 Create a new repository,生成属于你自己的仓库。

  2. 2克隆新仓库

    把命令里的用户名和仓库名换成你刚创建的仓库地址,再在本地执行。

    git clone https://github.com/YOUR-USERNAME/YOUR-NEW-REPOSITORY.git
    cd YOUR-NEW-REPOSITORY
  3. 3安装依赖

    在项目根目录执行,安装 Next.js / React 项目所需依赖,装好后才能运行。

    npm install
  4. 4启动 AI 代理

    推荐 Claude Code 搭配 Opus 5,--chrome 让代理可访问浏览器;Codex、Cursor、Gemini 也可。

    claude --chrome
  5. 5执行克隆技能

    把占位符换成目标网站地址,多个网址用空格分隔,代理会反向生成 Next.js 应用。

    /clone-website  [ ...]
  6. 6改用 Docker 运行

    可选方式。app 为构建并运行应用,dev 为开发模式并监听 3001 端口,需先装好 Docker。

    docker compose up app --build
    docker compose up dev --build
  7. 7自定义修改

    基础克隆完成后,可按需修改组件、样式和交互逻辑,用于学习或二次开发。

如何确认成功

npm install 无报错;执行 docker compose up app 能成功构建并启动容器,dev 模式监听 3001 端口。

常见问题

Q:能直接 clone 这个模板仓库来用吗?

A:不能。README 明确要求先用 GitHub 的 Use this template 创建自己的仓库,直接在模板仓库上开发不合适。

Q:支持哪些 AI 客户端?

A:推荐 Claude Code + Opus 5 效果最佳,同时兼容 Codex、Cursor、Gemini 等,多数客户端直接提供 /clone-website。

Q:客户端里没有 /clone-website 命令怎么办?

A:改用自然语言触发:Clone using the clone-website workflow,项目说明见仓库中的 AGENTS.md。

Q:能把生成的网站 PR 回模板仓库吗?

A:不要。README 明确说明不要用生成的网站向模板仓库提交 pull request。

注意事项

  • 项目采用 MIT 协议,可自由使用与修改。
  • 务必替换命令中的 YOUR-USERNAME、YOUR-NEW-REPOSITORY 与 等占位符。
  • 克隆他人网站请注意版权与目标站点的使用条款,仅用于学习、原型验证等场景。

核心亮点

  • 一键克隆,大幅节省手动复制网站结构的时间
  • 基于 Claude Code 等主流 AI 代理,生成代码质量高
  • 提供完整 Next.js 模板,克隆后即可直接运行和二次开发

不足之处

  • 克隆结果可能无法完美复现复杂交互和动态数据
  • 文档/社区待观察

适用场景

  • 快速获取参考网站的 UI 实现,用于学习或灵感借鉴
  • 为已有设计稿生成前端代码的起点,加速原型开发
  • 逆向分析竞品网站的前端技术栈和布局方式

替代项目

screenshot-to-code、v0 by Vercel、html2react

项目介绍

ai-website-cloner-template 是自动化工作流领域的开源项目,由 JCodesMore 开发,是 2026 年新上线的项目。

在全站 13,090 个收录项目中,它的 GitHub 星标数(34,786)位列前 2%,在自动化工作流分类的 509 个项目里位列前 3%。

近 41 天,它的 GitHub 星标从 31,808 增加到 34,786,净增 2,978。

项目目前处于活跃维护状态,最近一次代码更新于 2026-09-22。MIT 许可证,完全免费,可自行部署使用。

它主要面向的使用场景是:快速获取参考网站的UI实现,用于学习或灵感借鉴。同类可对比的替代方案包括 screenshot-to-code、v0 by Vercel、html2react。

上一篇:youtube-automation-agent

下一篇:flyte

同类项目推荐

n8n 开源

拖拽搭建自动化流程,轻松接入 AI 与 400+ 应用,搞定重复工作。

Fair-code workflow automation platform with native AI capabilities. Combine visual b···

★ 205700 2026-08-10
feishu-docx 开源

让 AI 代理轻松读写飞书文档,双向转换 Markdown

Feishu/Lark Docs、Sheet、Bitable <-> Markdown | AI Agent-friendly knowledge base exp···

★ 262 2026-08-09
robotcode 开源

让 Robot Framework 拥有现代 IDE 体验,调试、补全、运行一气呵成。

Open Source Toolkit for Robot Framework, providing Language Server Protocol support,···

★ 301 2026-08-10
puppeteer 开源

用 JavaScript 轻松操控无头浏览器,搞定自动化测试与网页抓取。

JavaScript API for Chrome and Firefox

★ 95609 2026-08-10