by ericshang98
A true AI agent for pixel-perfect web cloning. Multi-agent architecture built on Claude Agent SDK with 40+ specialized tools. Clones from CSS & structured blocks—not screenshots—enabling perfect reproduction where single-model tools like Cursor/Claude Code fail.
# Add to your Claude Code skills
git clone https://github.com/ericshang98/Perfect-Web-CloneOpen Source Agent Co-work System
Claude Code for web cloning. A vertical AI agent with 40+ specialized tools.
English | 中文 | 日本語 | 한국어 | Español | Português | Deutsch | Français | Tiếng Việt
Don't want to self-host? Use the Perfect Web Clone Skill directly in Claude Code.
A true AI agent — not just a wrapper around an LLM. Multi-agent collaboration with real tools, self-correction loops, and a complete sandbox environment to build production-ready code from scratch.
Others guess from screenshots. We extract the real code — DOM, styles, components, interactions. that screenshot-based tools simply cannot achieve.
No comments yet. Be the first to share your thoughts!
https://github.com/user-attachments/assets/248af639-20d9-45a8-ad0a-660a04a17b68
This entire multi-agent system is open source. Learn from it, use it, build upon it.
Working with a single AI is like asking one coworker to handle everything alone — they get overwhelmed. Traditional single-model approaches hit a wall:
Our solution: A team of specialized agents working together, like coworkers each focused on what they do best. Less back-and-forth, more getting things done.
We tried. Even with the complete extracted JSON — full DOM tree, all CSS rules, every asset URL — single-model tools struggle:
| Challenge | | Multi-Agent | |-----------|-------------------------------|---------------------| | 50,000+ line DOM tree | ❌ Context overflow, truncates critical parts | ✅ Task distributed to worker agents | | 3,000+ CSS rules | ❌ Loses specificity, misses variables | ✅ Parallel processing by workers | | Component detection | ❌ Guesses boundaries, creates monoliths | ✅ Structured workflow ensures consistency | | Responsive breakpoints | ❌ Often hardcodes single viewport | ✅ Extracts all media queries | | Hover/animation states | ❌ Cannot see, cannot reproduce | ✅ Browser automation captures all | | Output quality | ❌ "Close enough" approximation | ✅ Pixel-perfect, production-ready |
The core problem: A 200KB extracted JSON exceeds practical context limits. Even if it fits, a single agent can't maintain coherence when context gets polluted with too much information. The solution isn't smarter agents — it's task distribution with reliable workflows.
Honest limitation: Complex animations are still hard to extract perfectly — but that's a crawler problem, not an agent problem. The multi-agent architecture itself is capable of far more than web cloning. Imagine: automated refactoring, codebase migration, documentation generation, or any task too large for a single agent to handle.
┌─────────────────────────────────────────────────────────┐
│ Multi-Agent System │
├─────────────────────────────────────────────────────────┤
│ ┌───────────────┐ │
│ │ Main Agent │ │
│ │ (Coordinator)│ │
│ └───────┬───────┘ │
│ │ distributes tasks │
│ ┌────────────────┼────────────────┐ │
│ ▼ ▼ ▼ │
│ ┌───────────┐ ┌───────────┐ ┌───────────┐ │
│ │ Worker │ │ Worker │ │ Worker │ ... │
│ │ Agent 1 │ │ Agent 2 │ │ Agent N │ │
│ └─────┬─────┘ └─────┬─────┘ └─────┬─────┘ │
│ └────────────────┼────────────────┘ │
│ ▼ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ Tools │ │
│ │ • File Operations • Code Analysis │ │
│ │ • Browser Control • API Calls │ │
│ └─────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ Sandbox (BoxLite) │ │
│ │ Isolated execution environment for safe │ │
│ │ code generation, testing, and preview │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘
This pattern — Agent + Tools + Sandbox — is reusable for any AI agent product:
| Component | Purpose | In Nexting | |-----------|---------|------------| | Main Agent | Coordinates workflow and distributes tasks | Analyzes page, spawns workers, merges results | | Worker Agents | Execute subtasks with scoped permissions | Process sections in parallel, isolated context | | Tools | Capabilities agents can invoke | File I/O, Browser automation, API calls | | Sandbox | Safe execution environment | BoxLite - Embedded micro-VM runtime |
BoxLite: Hardware-level isolated micro-VMs for AI agents. No root access needed, runs OCI containers with true kernel isolation. → github.com/boxlite-ai/boxlite
Building something with this architecture? Have questions? Reach out:
Built on Claude Agent SDK — the same foundation as Claude Code. This isn't a chatbot with API calls; it's a real agent that thinks, plans, executes, and self-corrects in an isolated sandbox.
| Category | Tools | Purpose |
|----------|-------|---------|
| File Operations | read_file, write_file, edit_file, delete_file, rename_file, create_directory | CRUD operations on project files |
| Search & Discovery | glob, grep, ls, search_in_file, search_in_project | Find files and content (ripgrep-powered) |
| Task Management | todo_read, todo_write, task, get_subagent_status | Track progress, spawn sub-agents |
| System Execution | bash, run_command, shell | Run any command in sandbox |
| Network | web_fetch, web_search | Fetch URLs, search the web |
| Terminal | create_terminal, send_terminal_input, get_terminal_output, install_dependencies, start_dev_server | Manage multiple terminal sessions |
| Preview | take_screenshot, get_console_messages, get_preview_dom, get_preview_status | Inspect live preview state |
| Diagnostics | verify_changes, diagnose_preview_state, analyze_build_error, get_comprehensive_error_snapshot | Debug and validate |
| Self-Healing | start_healing_loop, verify_healing_progress, stop_healing_loop | Auto-fix bui