需要 Node.js 24+，低版本无法运行；克隆前必须在代理中开启浏览器访问权限；Claude Code 用 /clone-website 命令，其他代理直接读取 .agents/skills 下的技能文件
ai-website-cloner-template
JCodesMoreMIT活跃维护用 AI 编码代理一条命令克隆任意网站，自动逆向还原页面结构与样式，生成可运行的 Next.js/React 前端模板。
Clone any website with one command using AI coding agents
v0.6.1发布于 2026-10-05 07:34 UTC38,952star +184 / 7 天5,798fork同步于 2026-11-10 17:20 UTC
npm install
npm run check 硬件要求按 README 说明
README 未说明，仅要求 Node.js 24+ 和具备浏览器访问能力的 AI 编码代理
有 Docker 镜像
给 AI 编码代理一个 URL，就能把网站重建成干净的 Next.js 应用
用 AI 编码代理一条命令克隆任意网站，自动逆向还原页面结构与样式，生成可运行的 Next.js/React 前端模板。
核心能力
- 用 /clone-website 技能按 Map、Observe、Build、Compare 四步克隆
- 提取真实图片、字体与 SVG 资源并放入 public/sites 目录
- 生成可编辑的 React 组件与可交互行为，而非静态截图
- 在相同尺寸与状态下对比源站和本地页面并修复差异
- 内置 lint、typecheck、build 的生产检查命令
容易踩的坑
内容由模型根据 README 生成，可能不完整或不准确，以官方文档为准。看原文 README
- v0.6.1v0.6.1 - Rule-based fidelity guidance最新正式版2026-10-05 · 2026-10-05 07:34 UTC
Sharper cloning guidance that catches more fidelity drift with fewer, more general directives.
- Treat each observation as a sample of a rule: read declared values and vary viewport width (including wider than the design), height, input, and state.
- Use the files the source actually loads, and build shared components and page-wide behavior, such as smooth scrolling, from every observed state.
- Compare beyond the design width and judge scroll and pointer behavior with real input.
Full changelog: https://github.com/JCodesMore/ai-website-cloner-template/compare/v0.6.0...v0.6.1
- v0.6.0v0.6.0 - Improved cloning workflow2026-10-05 · 2026-10-05 07:09 UTC
查看更新说明
A simpler shared workflow for recreating websites, with improved guidance for responsive layouts, asset extraction, and interactive or animated pages.
- Streamlined cloning instructions with focused inspection and motion references.
- Updated project documentation and Claude command guidance to match the shared skill.
Full changelog: https://github.com/JCodesMore/ai-website-cloner-template/compare/v0.5.1...v0.6.0
- v0.5.1v0.5.1 - Security Patch & Opus 5.52026-09-27 · 2026-09-27 04:31 UTC
查看更新说明
Security Patch & Opus 5.5
This release updates Next.js to 16.3.5 to fix known vulnerabilities. The README now recommends Claude Code with Opus 5.5. Update if you started from an earlier version of the template.
Highlights
- Patched dependencies: Next.js and eslint-config-next are pinned exactly to 16.3.5, and vulnerable transitive dependencies are refreshed.
npm auditreports 0 known vulnerabilities. - Opus 5.5 recommendation: the README now recommends Claude Code with Opus 5.5.
- Current Star History: the README chart now runs through September 2026.
What's Changed
Changed
- Recommend Claude Code with Opus 5.5 in the README
- Refreshed the static Star History chart through September 2026
- Removed a redundant note about editing the canonical skill from the README
Security
- Update Next.js and eslint-config-next to 16.3.5 with exact version pins, and refresh vulnerable transitive dependencies. Thanks to @atahan150 for the report in #117 and proposed fix in #118.
Full Changelog: https://github.com/JCodesMore/ai-website-cloner-template/compare/v0.5.0...v0.5.1
- Patched dependencies: Next.js and eslint-config-next are pinned exactly to 16.3.5, and vulnerable transitive dependencies are refreshed.
- v0.5.0v0.5.0 - Simpler Setup & Shared Agent Skills2026-09-17 · 2026-09-17 23:45 UTC
查看更新说明
Simpler Setup & Shared Agent Skills
Get started by asking your coding agent to prepare a standalone project, or create your own GitHub repository with the template button. Claude Code, Codex, Cursor, and OpenCode now share one maintained cloning workflow.
Highlights
- Two-step Quick Start — prepare your project, then run one cloning command.
- One skill to maintain — a canonical
.agentsskill and a small Claude Code command bridge replace generated copies and sync scripts. - One README — English is the single maintained entry point.
Compatibility
Maintained support is now limited to Claude Code, Codex, Cursor, and OpenCode. Other generated agent integrations have been removed. Edit
.agents/skills/clone-website/directly; there is no synchronization step.What's Changed
Added
- Repository ranking badges in the README
Changed
- Simplified Quick Start with a copyable agent setup prompt, a template button, and one cloning command example
- Consolidated Claude Code, Codex, Cursor, and OpenCode support around one canonical Agent Skill in
.agents/skills/clone-website/ - Reduced the Claude Code integration to a thin command bridge that forwards arguments to the canonical skill without creating a duplicate skill in other agents
- Moved the website inspection guide into the canonical skill's on-demand references
Removed
- Expired sponsor integrations
- Japanese and Simplified Chinese READMEs; the English README is the single maintained entry point
- Redundant workflow diagrams from the READMEs
- Generated skill and instruction copies for unsupported or redundant agent platforms
- The agent-rule and skill synchronization scripts and their generated-file CI gate
Full Changelog: https://github.com/JCodesMore/ai-website-cloner-template/compare/v0.4.0...v0.5.0
- v0.4.0v0.4.0 - Expanded Agent Support & Reliable Multi-Page Cloning2026-08-10 · 2026-08-10 05:10 UTC
查看更新说明
Expanded agent support and more reliable multi-page cloning
This release makes the template easier to use across more AI coding agents, preserves existing pages across repeated cloning runs, and strengthens the project foundation with current dependencies, Docker support, synchronized generated files, and clearer documentation.
Highlights
- Persistent page cloning — later
/clone-websiteruns preserve existing pages while isolating routes, research, components, assets, and downloaders for each target - Broader agent support — adds Kiro and complete generated workspace skills for Cline and Roo Code
- Current project foundation — moves to Node.js 24, Next.js 16.3, React 19.2.4, and patched dependencies
- Reliable maintenance — CI now rejects generated agent rules or skills that drift from their source files
- Better onboarding — adds Docker workflows, Chinese and Japanese documentation, pipeline diagrams, contribution guidance, and a security policy
What's Changed
Added
- Docker workflows for local development and multi-stage production builds
- Kiro support through a generated workspace
/clone-websiteskill - Complete generated workspace skills for Cline and Roo Code, including a Roo slash-command bridge
- Simplified Chinese and Japanese READMEs with matching onboarding and workflow guidance
- Contributor and security policies, including a private vulnerability-reporting path
- CI enforcement that generated agent rules and skills remain synchronized with their source files
- Compact pipeline diagrams and a static Star History chart in every README
Changed
- Raised the Node.js baseline to 24 across local development, CI, Docker, and contributor documentation
- Refreshed Next.js to 16.3, React to 19.2.4, and related dependencies
- Updated
/clone-websiteso later runs preserve existing pages and use isolated output for each target - Improved multi-origin and query/fragment planning with collision-resistant namespaces and explicit route verification
- Redesigned README onboarding around the template workflow, Opus 5 recommendation, supported platforms, and community links
- Hardened the rule and skill generators for current platform schemas and deterministic output
Fixed
- Gemini CLI command validation by adding the required name and flattening the prompt schema
- Cline and Roo Code invocation, frontmatter, and argument handling
- Next.js documentation resolution in generated agent rules
- Vulnerable framework dependencies and generated-file consistency checks
Removed
- Aider from the officially supported-platform list because it cannot currently run the complete browser and subagent workflow reliably;
.aider.conf.ymlremains available for general project context
Security
- Documented responsible vulnerability disclosure through GitHub private vulnerability reporting
- Updated vulnerable dependencies to patched releases
Contributors
Thank you to @biisal, @CodAr-man, @rsamf, @ZijieZh, @YAMRAJ13y, @AydinAdnan, @tura-ai-agent, and @Kavleri for contributions included in this release.
Full Changelog: https://github.com/JCodesMore/ai-website-cloner-template/compare/v0.3.1...v0.4.0
- Persistent page cloning — later
用户点评
登录用户的真实使用记录，可按版本和硬件筛选共 0 条
还没有人点评。第一个说出真实体验的人最有价值。
AI Website Cloner Template
Clone any website with one command
Give your AI coding agent a URL and watch it recreate the website as a clean Next.js app.
Best results with Claude Code + Opus 5.5. Also supports Codex, Cursor, and OpenCode.
Quick Start · Watch Demo · Supported Platforms
Demo
Click the image above to watch the full demo on YouTube.
Quick Start
1. Set up your project
Recommended: ask your agent. Paste this into Codex, Claude Code, or your coding agent:
Set up https://github.com/JCodesMore/ai-website-cloner-template
as a standalone project in a new folder on my computer.
Ask me where to put it. Clone the repository, remove its origin remote,
install dependencies, and run npm run check. Leave it ready for me
to clone a website.
Or create your own GitHub repository:
Give it a name and click Create repository. Then give your agent the new repository's link and ask it to clone it onto your computer, install dependencies, and run npm run check.
2. Clone a website
Open the project in your agent with browser access enabled. In Claude Code or Cursor, run:
/clone-website https://example.com
Replace the URL with the website you want to recreate. Once it's built, ask your agent for any changes you want.
Supported Platforms
| Agent | Status |
|---|---|
| Claude Code | Recommended — Opus 5.5 |
| Codex CLI | Supported |
| OpenCode | Supported |
| Cursor | Supported |
Prerequisites
- Node.js 24+
- An AI coding agent (see Supported Platforms)
Tech Stack
- Next.js 16 — App Router, React 19, TypeScript strict
- shadcn/ui — Base UI primitives + Tailwind CSS v4
- Tailwind CSS v4 — oklch design tokens
- Lucide React — default icons (replaced by extracted SVGs during cloning)
How It Works
The /clone-website skill follows four steps:
- Map — map source URLs to local routes and preserve existing work.
- Observe — inspect desktop/mobile pages, extract real assets and fonts, and exercise alternate states.
- Build — implement editable components and working interactions; delegate independent sections when useful.
- Compare — review source and local pages at matched sizes/states, repair visible differences, and run the production check.
Framer pages and animated sites have focused inspection guidance for responsive variants, media, sticky scenes, and scroll/time-driven motion. Direct HTTP or asset tools handle extraction where practical; browser comparisons establish appearance and behavior. Deliverables include route mappings, run instructions, comparison screenshots, and any remaining gaps.
Use Cases
- Platform migration — rebuild a site you own from WordPress/Webflow/Squarespace into a modern Next.js codebase
- Lost source code — your site is live but the repo is gone, the developer left, or the stack is legacy. Get the code back in a modern format
- Learning — deconstruct how production sites achieve specific layouts, animations, and responsive behavior by working with real code
Not Intended For
- Phishing or impersonation — this project must not be used for deceptive purposes, impersonation, or any activity that breaks the law.
- Passing off someone's design as your own — logos, brand assets, and original copy belong to their owners.
- Violating terms of service — some sites explicitly prohibit scraping or reproduction. Check first.
Project Structure
src/
app/ # Next.js routes
components/ # React components
ui/ # shadcn/ui primitives
sites/<site>/ # Source-specific components and extracted SVGs
lib/utils.ts # cn() utility
types/ # TypeScript interfaces
hooks/ # Custom React hooks
public/
sites/<site>/ # Source-specific images, fonts, videos, and other assets
docs/
research/<site>/ # Page brief, asset map, and inspection evidence
design-references/ # Screenshots
.agents/skills/
clone-website/ # Canonical skill and inspection reference
.claude/commands/
clone-website.md # Thin Claude Code bridge
AGENTS.md # Agent instructions (single source of truth)
CLAUDE.md # Claude Code config (imports AGENTS.md)
Commands
npm run dev # Start dev server
npm run build # Production build
npm run lint # ESLint check
npm run typecheck # TypeScript check
npm run check # Run lint + typecheck + build
If using docker
docker compose up app --build # build and run the app
docker compose up dev --build # run the app in dev mode on port 3001
Agent Support
The project keeps one portable Agent Skill at .agents/skills/clone-website/. Codex, Cursor, and OpenCode read it directly. Claude Code uses the small command bridge at .claude/commands/clone-website.md so /clone-website and its arguments continue to work without exposing a duplicate skill to the other agents.
Star History
License
MIT