skills.rest
ericosiu
ericosiuCOMMUNITY
Explore all skills by this author →
GitHub

clone-site

Reverse-engineer a website into a pixel-perfect Next.js replica with assets and components.

3.3k|656|Updated Mar 28, 2026
Search Tags:#next.js#chrome mcp#website cloning#asset extraction#component specs#computed styles#visual diff qa
One-click install
npx skills add https://github.com/ericosiu/ai-marketing-skills --skill clone-site
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clone-site
Source: https://github.com/ericosiu/ai-marketing-skills/tree/main/clone-site
Command: npx skills add https://github.com/ericosiu/ai-marketing-skills --skill clone-site

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It solves the time-consuming task of rebuilding a website by hand when you need the same layout, styling, interactions, and assets as an existing page.

Core Features & Use Cases

  • Pixel-perfect Next.js cloning: reverse-engineers computed CSS values and rebuilds sections as production-ready components.
  • Design token + asset extraction: captures fonts, colors, spacing, and downloads images/videos/SVGs needed for accurate rendering.
  • Section-by-section parallel construction: writes component specs first, then assembles via parallel builder agents with visual QA diffing.
  • Use case: rebuild a marketing landing page from a URL when you want a faithful clone for customization, migration, or rapid prototyping.

Quick Start

Tell Claude Code: clone https://yourcompany.com to generate a pixel-perfect Next.js replica with assets and components.

Frequently Asked Questions about clone-site

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I clone a website into a Next.js project?▼

Cloning a website into Next.js requires extracting computed CSS values, fonts, colors, and assets from the target URL, then assembling them section-by-section into a runnable Next.js, Tailwind v4, and shadcn/ui replica with visual QA verification.

What do I need to reverse-engineer a landing page for pixel-perfect replication?▼

Pixel-perfect landing page replication requires Chrome MCP for browser automation to capture computed styles and assets, plus a base Next.js, Tailwind v4, and shadcn/ui scaffold to assemble the extracted component specs into a runnable clone.

Can I extract design tokens and assets like fonts and images when cloning a site?▼

Yes, site cloning captures design tokens like fonts, colors, and spacing, and downloads required images, videos, and SVGs to ensure accurate rendering in the pixel-perfect Next.js replica.

Does website cloning with Chrome MCP work for rebuilding marketing sites?▼

Website cloning with Chrome MCP works for rebuilding marketing sites by reverse-engineering the target URL into component specs and assembling them via parallel builder agents into a faithful, production-ready Next.js replica.

What is the best way to automate visual QA diffing for a cloned website?▼

Automating visual QA diffing for a cloned website is best handled by writing component specs first, then assembling sections via parallel builder agents that visually verify the Next.js replica against the original target URL.

Related Skills

Explore More Design & Creative Skills→
BEIRUXBEIRUX

clone-website

Extracts assets, computed CSS, behaviors, component specs, and screenshots to rebuild websites in Next.js with shadcn/ui and Tailwind v4.

Official
Advanced
soq123soq123

recreate-screenshot

Reproduce a UI screen from a screenshot with pixel-perfect fidelity.

Community
Intermediate
MichaelSolatiMichaelSolati

clone-website

Clone public websites with computed styles, assets, and interactions.

Community
Advanced
paolomozpaolomoz
3

design-system-extractor

Extract design tokens and component styles from live websites using Puppeteer.

Community
Advanced