SO

shengwanlin/one-click-clone

开发工具

本页由 AI 翻译,技术细节请以原文为准。 查看原文

0 stars 质量 59 趋势 0MIT

AI-powered website replication toolkit. Clone any website into a production-ready Next.js codebase.

概览

One-Click Clone is an open-source AI skill that lets you replicate any website with a single command. The AI opens a browser, inspects the page, downloads every asset, extracts exact styles, and builds a working Next.js clone — all without you writing a single line of code. on landing pages, including layout, colors, animations, and interactive elements. We've tested on multiple sites — , , , , — the methodology works across different design systems and frameworks. This isn't traditional "write HTML, adjust CSS" web development. The AI uses to: - the website through browser automation (click, scroll, hover) - layout patterns, design tokens, color systems, animations - exact computed styles, not approximations - each section in parallel via isolated agent worktrees - from each clone through a built-in experience accumulation system Claude Code is battle-tested. Other platforms are compatible but less tested — the core SKILL.md methodology is universal. The core is a (SKILL.

README

以下为原文 README 节选,完整内容请查看原文。

One-Click Clone

English | 中文

English

No code. No frontend skills. Just tell AI which website to clone.

One-Click Clone is an open-source AI skill that lets you replicate any website with a single command. The AI opens a browser, inspects the page, downloads every asset, extracts exact styles, and builds a working Next.js clone — all without you writing a single line of code.

Current fidelity: ~70–80% on landing pages, including layout, colors, animations, and interactive elements.

See It In Action

Left: Clone | Right: Original

We’ve tested on multiple sites — Kling AI, Claude Cowork, Linear, Vercel, Gemini — the methodology works across different design systems and frameworks.

Quick Start

Step 1: Install (paste this to your AI)

Help me install the One-Click-Clone site-clone skill from https://github.com/CloveSVG/One-Click-Clone.
Install only, don't run a clone yet. After install, check browser automation is available, then ask me which site to clone.

Step 2: Clone

/site-clone https://any-website.com

That’s it. The AI handles everything:

① Browser    →  Opens Chrome, visits target, scrolls to trigger all content
② Assets     →  Downloads every image, video, font locally
③ Styles     →  Extracts exact CSS via getComputedStyle, to the pixel
④ Layout     →  Breaks page into independent sections
⑤ Build      →  Dispatches parallel AI agents to code simultaneously
⑥ Verify     →  Compares with original, fixes discrepancies on the spot

How It Actually Works

This isn’t traditional “write HTML, adjust CSS” web development. The AI uses multimodal capabilities to:

  • See the website through browser automation (click, scroll, hover)
  • Understand layout patterns, design tokens, color systems, animations
  • Extract exact computed styles, not approximations
  • Build each section in parallel via isolated agent worktrees
  • Learn from each clone through a built-in experience accumulation system

Platform Support

Platform Status Skill File
Claude Code Fully tested .claude/skills/site-clone/SKILL.md
Cursor Compatible .cursor/commands/site-clone.md
Windsurf Compatible .windsurf/workflows/site-clone.md
Codex CLI Compatible .codex/skills/site-clone/SKILL.md
Trae / Cline / Copilot / Gemini CLI Compatible See repo for configs

Claude Code is battle-tested. Other platforms are compatible but less tested — the core SKILL.md methodology is universal.

This Is a Framework, Not a Walled Garden

The core is a 600+ line structured methodology (SKILL.md) that teaches any AI how to clone websites. You can feed this pattern to any AI tool with browser control.

在 GitHub 查看完整 README

推荐工具

换一个关键词,或者移除筛选条件。

安装

npx skillfish add shengwanlin/one-click-clone
新手?先看 mcpskill.org 教程 →