Next.jsReact启动器

ai-website-cloner-template — Next.js 启动器模板

作者 JCodesMore

一个基于 Next.js 的启动器模板，配合 AI 编码代理，通过 /clone-website 技能把目标网站重建为干净的 Next.js 应用。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

1 个预览视图

补采画面存在空白、加载或排版异常，当前保留可用的原始预览。

仓库预览 1
作者提供的预览

来自项目仓库的原始界面图片。

目前有 1 张原始预览，可打开完整图片查看设计细节。

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-09-27查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

01

通过 /clone-website 技能，用一条命令把目标网站重建为 Next.js 应用

02

五阶段流水线：侦察、基础搭建、组件规格、并行构建、组装与 QA

03

构建代理在 git worktree 中并行工作，每个代理收到含精确计算 CSS 值的完整组件规格

04

支持 Claude Code（推荐 Opus 5）、Codex CLI、Cursor、Gemini CLI、GitHub Copilot 等十余种 AI 编码客户端

05

技术栈为 Next.js 16、React 19、TypeScript strict、shadcn/ui、Tailwind CSS v4 与 Lucide React

06

AGENTS.md 与 SKILL.md 作为单一事实来源，通过同步脚本生成各平台配置

模板详细介绍

AI Website Cloner Template 是一个 Next.js 启动器模板，目标是用一条命令把任意网站重建为干净的 Next.js 应用。使用前需通过 GitHub 的 Use this template 创建自己的仓库，安装依赖后启动 AI 编码代理（官方推荐 Claude Code + Opus 5，也支持 Codex、Cursor、Gemini CLI 等十余种客户端），再执行 /clone-website <目标网址> 触发克隆流程。

克隆由 /clone-website 技能驱动，分五个阶段：侦察（截图、提取设计令牌、滚动/点击/悬停/响应式交互扫描）、基础搭建（更新字体、颜色、全局样式并下载资源）、组件规格（在 docs/research/components/ 写出含精确计算 CSS 值、状态与行为的规格文件）、并行构建（在 git worktree 中按区块分派构建代理）、组装与 QA（合并 worktree、接线页面并与原站做视觉对比）。每个构建代理都会收到内联的完整组件规格，避免猜测。

技术栈为 Next.js 16（App Router、React 19、TypeScript strict）、shadcn/ui（Radix + Tailwind CSS v4）、Tailwind CSS v4 的 oklch 设计令牌以及 Lucide React 图标。项目要求 Node.js 24+，提供 npm run dev/build/lint/typecheck/check 与 Docker Compose 命令；AGENTS.md 与 .claude/skills/clone-website/SKILL.md 是平台适配的单一事实来源，可用同步脚本重新生成各平台副本。

Next.jsReact启动器

适合你的项目吗？

适用场景

  • 平台迁移：把自己拥有的 WordPress、Webflow 或 Squarespace 站点重建为现代 Next.js 代码库
  • 源码丢失：网站仍在线但仓库丢失、开发者离开或技术栈过旧，需要以现代格式找回代码
  • 学习研究：通过真实代码拆解生产站点如何实现特定布局、动画与响应式行为

适合人群

  • 使用 Claude Code、Codex、Cursor、Gemini CLI 等 AI 编码代理的开发者
  • 需要把自有网站迁移到 Next.js 的团队或个人
  • 希望研究生产站点实现方式的 Next.js 学习者

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

  1. 1

    先在 GitHub 上点击 Use this template 创建自己的仓库，不要直接克隆模板仓库或向其提交生成的网站

  2. 2

    需要 Node.js 24+ 和一个受支持的 AI 编码代理

  3. 3

    安装依赖后启动代理（推荐 claude --chrome），再执行 /clone-website <目标网址>

  4. 4

    若客户端通过自然语言激活技能，可输入 Clone <target-url> using the clone-website workflow

  5. 5

    项目指令位于 AGENTS.md，修改后可用 scripts/sync-agent-rules.sh 与 scripts/sync-skills.mjs 同步到各平台

查看仓库使用说明

授权与来源资料

使用条件与限制

有额外使用条件

MIT许可证允许免费使用、修改和商用，但README明确禁止用于钓鱼、冒充、将他人设计据为己有或违反服务条款。

使用时需要遵守

  • 保留原作者版权声明和 MIT 许可证声明。
  • 保留版权声明和许可声明
  • 不得用于钓鱼或冒充等欺骗性目的
  • 不得将他人设计、logo、品牌资产或原创文案据为己有
  • 不得违反目标网站的服务条款

额外费用与待核对事项

  • README未明确第三方图片、字体或品牌素材的授权范围
查看原文依据

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software

许可证原文

**Phishing or impersonation** — this project must not be used for deceptive purposes, impersonation, or any activity that breaks the law.

README 原文

**Passing off someone's design as your own** — logos, brand assets, and original copy belong to their owners.

README 原文

**Violating terms of service** — some sites explicitly prohibit scraping or reproduction. Check first.

README 原文
https://github.com/JCodesMore/ai-website-cloner-template/blob/master/LICENSEhttps://github.com/JCodesMore/ai-website-cloner-template/blob/HEAD/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-09-24。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料较完整 · 94 / 100
技术栈
Next.js · React
网站类型
启动器
这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2026-09-17
截图检查日期
2026-09-17

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Next.js。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

当前版本没有可核对的编辑审核记录；旧的应用时间不代表已完成事实审核。

这条历史介绍未保存固定版本的来源快照。请对照当前仓库，发现不一致可反馈。

反馈内容错误

看看同类模板

对比同技术栈与用途的模板，找到更适合的视觉与内容结构。

Next.js SaaS Starter

Next.js SaaS Starter

Next.js SaaS Starter 是 Next.js 官方维护的 SaaS 起点模板，定位介于学习资源和可直接部署的脚手架之间。

Next.js · SaaS

Next.js Commerce

Next.js Commerce

Next.js Commerce 是 Vercel 团队维护的电商启动模板，基于 Next.js App Router 构建，采用服务端渲染、React Server Components、Server Actions …

Next.js · 电商

Next-js-Boilerplate

Next-js-Boilerplate

Next-js-Boilerplate 是一个面向 Next.js 16、Tailwind CSS 4 和 TypeScript 的启动器，核心定位是开发者体验优先。

Next.js · 启动器

tailwind-nextjs-starter-blog

tailwind-nextjs-starter-blog

tailwind-nextjs-starter-blog 是一个面向个人技术博客的 Next.js 与 Tailwind CSS 启动模板，其 v2 版本基于 App Router 与 React Server Comp…

Next.js · 博客

next-forge

next-forge

Production-grade Turborepo template for Next.js apps.

Next.js · 启动器

SaaS-Boilerplate

SaaS-Boilerplate

🚀🎉📚 SaaS Boilerplate built with Next.js + Tailwind CSS + Shadcn UI + TypeScript. ⚡️ Full-stack React applic…

Next.js · SaaS