Skill This
AI Skill Report Card

Generated Skill

B-70·Mar 28, 2026·Source: Web
YAML
---
name: replicating-websites
description: Creates exact HTML/CSS replicas of websites from URLs with mobile and desktop layouts. Use when you need to recreate or clone existing web pages with pixel-perfect accuracy.
---

Website Replication Skill

Quick Start
Python
# Install required tools
pip install playwright beautifulsoup4 requests

# Basic replication workflow
from playwright.sync_api import sync_playwright
import requests
from bs4 import BeautifulSoup

def replicate_website(url):
    with sync_playwright() as p:
        browser = p.chromium.launch()
        page = browser.new_page()
        page.goto(url)
        
        # Capture screenshots for reference
        page.screenshot(path="desktop.png", full_page=True)
        page.set_viewport_size({"width": 375, "height": 667})
        page.screenshot(path="mobile.png", full_page=True)
        
        # Extract HTML and styles
        html = page.content()
        browser.close()
    
    return html
Recommendation▾
Consider adding more specific examples
Workflow

Progress:

  • Analyze Target: Screenshot desktop (1920x1080) and mobile (375x667) layouts
  • Extract Structure: Get HTML, identify sections, measure spacing
  • Capture Assets: Download images, fonts, detect colors/typography
  • Build Base HTML: Create semantic structure with proper sections
  • Implement CSS: Start mobile-first, add desktop breakpoints
  • Quality Check: Screenshot comparison between original and replica
  • Refine: Adjust spacing, typography, and responsive behavior

Detailed Process:

  1. Initial Analysis
Python
# Capture reference screenshots
page.screenshot(path="reference-desktop.png", full_page=True)
page.set_viewport_size({"width": 375, "height": 667})
page.screenshot(path="reference-mobile.png", full_page=True)

# Extract computed styles
styles = page.evaluate("""() => {
    const elements = document.querySelectorAll('*');
    return Array.from(elements).map(el => ({
        tag: el.tagName,
        styles: window.getComputedStyle(el),
        text: el.textContent?.trim()
    }));
}""")
  1. Structure Extraction
Python
def extract_sections(page):
    sections = page.evaluate("""() => {
        const sections = [];
        document.querySelectorAll('header, nav, main, section, article, aside, footer').forEach(el => {
            const rect = el.getBoundingClientRect();
            sections.push({
                tag: el.tagName,
                content: el.innerHTML,
                position: rect,
                styles: window.getComputedStyle(el)
            });
        });
        return sections;
    }""")
    return sections
  1. Asset Collection
Python
def download_assets(page, base_url):
    # Extract and download images
    images = page.evaluate("""() => {
        return Array.from(document.images).map(img => img.src);
    }""")
    
    # Extract fonts
    fonts = page.evaluate("""() => {
        const fonts = new Set();
        document.querySelectorAll('*').forEach(el => {
            fonts.add(window.getComputedStyle(el).fontFamily);
        });
        return Array.from(fonts);
    }""")
    
    return images, fonts
Recommendation▾
Include edge cases
Examples

Example 1: Input: https://stripe.com Output:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* Mobile-first approach */
        .hero { padding: 2rem 1rem; }
        .hero h1 { font-size: 2rem; line-height: 1.2; }
        
        /* Desktop breakpoint */
        @media (min-width: 768px) {
            .hero { padding: 4rem 2rem; }
            .hero h1 { font-size: 3.5rem; }
        }
    </style>
</head>
<body>
    <header class="header">
        <nav class="nav"><!-- replicated nav --></nav>
    </header>
    <main class="hero">
        <h1>Financial infrastructure for the internet</h1>
        <!-- exact content and layout -->
    </main>
</body>
</html>

Example 2: Input: https://tailwindcss.com Output: Complete replica with:

  • Exact color scheme (#0F172A, #38BDF8, etc.)
  • Typography (Inter font, specific weights)
  • Component layouts (hero, feature grid, footer)
  • Mobile hamburger menu functionality
Quality Control Process
Python
def quality_check(original_url, replica_file):
    with sync_playwright() as p:
        browser = p.chromium.launch()
        
        # Screenshot original
        page1 = browser.new_page()
        page1.goto(original_url)
        page1.screenshot(path="original.png", full_page=True)
        
        # Screenshot replica
        page2 = browser.new_page()
        page2.goto(f"file://{replica_file}")
        page2.screenshot(path="replica.png", full_page=True)
        
        # Compare dimensions and layout
        original_metrics = page1.evaluate("""() => ({
            height: document.body.scrollHeight,
            sections: document.querySelectorAll('section, div').length
        })""")
        
        replica_metrics = page2.evaluate("""() => ({
            height: document.body.scrollHeight,
            sections: document.querySelectorAll('section, div').length
        })""")
        
        browser.close()
        
        return {
            "height_match": abs(original_metrics['height'] - replica_metrics['height']) < 50,
            "structure_match": original_metrics['sections'] == replica_metrics['sections']
        }
Best Practices
  • Start Mobile-First: Build for 375px width, then scale up
  • Use CSS Grid/Flexbox: Modern layout methods for responsive design
  • Preserve Typography: Extract exact font families, weights, and sizes
  • Maintain Spacing: Use consistent padding/margin patterns
  • Optimize Assets: Compress images, use modern formats (WebP, AVIF)
  • Include Hover States: Replicate interactive behaviors
  • Test Breakpoints: Common sizes: 375px, 768px, 1024px, 1920px
Common Pitfalls
  • Don't ignore viewport meta tag - Essential for mobile rendering
  • Don't use absolute positioning - Breaks responsive behavior
  • Don't skip alt attributes - Accessibility and SEO matter
  • Don't hardcode pixel values - Use relative units (rem, %, vw/vh)
  • Don't forget focus states - Keyboard navigation accessibility
  • Don't copy inline styles - Extract to organized CSS classes
  • Don't ignore loading states - Add skeleton screens or loaders
  • Don't skip cross-browser testing - Test in Chrome, Firefox, Safari

Screenshot Comparison Tips

Python
# Use visual regression testing
def pixel_comparison(img1_path, img2_path, threshold=0.95):
    # Compare images pixel by pixel
    # Return similarity percentage
    # Flag major layout differences
0
Grade B-AI Skill Framework
Scorecard
Criteria Breakdown
Quick Start
11/15
Workflow
11/15
Examples
15/20
Completeness
15/20
Format
11/15
Conciseness
11/15
Save to My Skills