Agent skill · design visual · SylphAI-Inc
clone-anywebsite
Clone any website's landing page with pixel-perfect fidelity. Visual-first workflow: screenshot → sniper CSS extraction → deep DOM interrogation → animation detection → rebuild in React + Tailwind + Framer Motion. Uses AdaL browser-use agent tools. Includes ready-to-use extraction scripts, gotcha catalog, quality checklist, and speedrun prompt.
Why this skill is useful
Includes ready-to-use extraction scripts and a detailed workflow for pixel-perfect website cloning that the AI wouldn't generate on its own.
What it needs
Requires adal installed locally. About 10k tokens when loaded. Last updated 2026-08-06. 101 stars on the source repository.
What this skill does
Guide: Visual-First Web Cloning Recipe v2 When building a high-fidelity landing page clone, the biggest trap is relying purely on DOM trees and CSS dumps. Modern website builders (Framer, Webflow) generate deeply nested "div soup" and obfuscated CSS to create visual effects. The Golden Rule: Trust your "eyes" (screenshots) first, but when an effect looks too complex to be pure CSS, use Deep DOM Interrogation to steal the exact asset — never guess the math. Tool note: This guide uses AdaL browser-use agent tools (navigate, javascripttool, computer, resizewindow, tabscontext, bash). If you're not on AdaL, the same JS payloads work with Chrome DevTools MCP (evaluatescript), Playwright (page.evaluate), or any browser automation tool — just swap the invocation wrapper. The 80/20 Cloning Philosophy Divide your workflow into two phases so you don't get bogged down pixel-pushing too early: 1. The 80% Sprint (Speed & Structure): Get the page laid out rapidly. Fetch the semantic HTML, scaffold the React component tree (Navbar, Hero, Features), and apply basic Tailwind for layout (Flex/Grid) and spacing. Accept approximations — solid colors instead of gradients, standard shadows, static backgrounds. Move fast. 2. The 20% Polish (Pixel Perfection & Physics): Once the structure is on screen, shift to meticulous engineering. Use "Sniper CSS" to extract exact multi-stop gradients, rip WebGL canvas backgrounds to .webm, map massive multi-layer box-shadows, and implement Framer Motion spring physics. --- The 4-Phase Workflow Phase 1: Visual Discovery Goal: Understand what you're cloning before touching code. Step 0: Screenshot Matrix (3 Viewports) Always capture the target at multiple sizes before coding. Do not optimize only for the first screenshot. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills SylphAI-Inc/clone-anywebsite