website-cloning

Use Playwright to save the target page's raw HTML, screenshots, design tokens, and all images before building. Then create a React + Vite app, replace the scaffold CSS with plain CSS using extracted design tokens, and build one component per section from the raw HTML.

Use page.evaluate to read getComputedStyle on key elements like headings, buttons, and cards, and iterate document.styleSheets for CSS variables and @font-face rules. Download actual .woff2 font files when available, or map proprietary fonts to the closest Google Fonts equivalent.

Sites with persistent WebSocket or analytics connections never reach network idle, so the call hangs. Use wait_until="domcontentloaded" with a page.wait_for_timeout(5000) delay instead, and set timeout=60000 on all page.goto calls.

CDNs like Shopify and Cloudinary reject requests without a browser User-Agent header. Send a real Chrome User-Agent string, retry with fallback agents, and upscale resolution by rewriting URL patterns such as _small.jpg to _1200x.jpg.

Cloning is acceptable for your own site, client work, learning, staging copies, or platform migration. It must be refused for impersonation, phishing, traffic theft, or trademark infringement, and non-owned clones should replace logos, brand names, and product data.

Screenshots alone lead to guessed structure, wrong fonts, and fabricated content. The raw HTML must be the source of truth for all text, element order, and classes, with computed styles supplementing it for exact colors, spacing, and alignment.