
shengwanlin/one-click-clone
Developer tools이 페이지는 AI로 자동 번역되었습니다. 기술적인 세부 사항은 원문을 확인하세요. 원문 보기
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
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.
추천 도구
다른 키워드를 입력하거나 필터를 제거해 보세요.
설치
npx skillfish add shengwanlin/one-click-clone