SO

shengwanlin/one-click-clone

Developer tools

이 페이지는 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
MCP 초보자라면? mcpskill.org 가이드부터 시작하세요 →