
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