Skill This
AI Skill Report Card

Cloning Website Layouts

B-72·Mar 28, 2026·Source: Web

Website Layout Cloning

Creates exact visual replicas of websites from URLs with proper semantic HTML structure and responsive design.

Quick Start13 / 15
HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cloned Page</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
        
        /* Desktop styles */
        @media (min-width: 768px) {
            .container { max-width: 1200px; margin: 0 auto; }
        }
        
        /* Mobile styles */
        @media (max-width: 767px) {
            .container { padding: 0 16px; }
        }
    </style>
</head>
<body>
    <header>
        <h1>Main Title</h1>
        <nav>
            <h2 class="sr-only">Navigation</h2>
            <!-- Navigation items -->
        </nav>
    </header>
    <main>
        <section>
            <h2>Section Title</h2>
            <h3>Subsection</h3>
        </section>
    </main>
</body>
</html>
Recommendation▾
Replace abstract Example 2 with concrete HTML/CSS code showing actual input URL and complete output
Workflow14 / 15

Progress:

  • Analyze target website structure and visual hierarchy
  • Extract color palette, typography, and spacing values
  • Create semantic HTML with proper heading structure (h1-h6)
  • Build mobile-first CSS with breakpoints
  • Implement exact layout positioning and dimensions
  • Add interactive elements and hover states
  • Test responsive behavior across devices
  • Validate HTML semantics and accessibility

Analysis Phase

  1. Inspect target page's DOM structure
  2. Note heading hierarchy (h1 should be unique, h2-h6 for sections)
  3. Measure exact spacing, colors, fonts using browser dev tools
  4. Identify breakpoints where layout changes

HTML Structure

HTML
<h1>Page Title (only one per page)</h1>
<section>
    <h2>Main Section</h2>
    <article>
        <h3>Article Title</h3>
        <h4>Subsection</h4>
    </article>
</section>

CSS Implementation

  • Use CSS Grid/Flexbox for exact positioning
  • Implement mobile breakpoint: @media (max-width: 767px)
  • Desktop breakpoint: @media (min-width: 768px)
  • Extract exact font sizes, line heights, margins
Recommendation▾
Add specific before/after screenshots or detailed visual comparisons in examples section
Examples8 / 20

Example 1: Blog Homepage Input: https://example-blog.com Output:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog Clone</title>
    <style>
        .hero { background: #1a1a1a; color: white; padding: 80px 0; }
        .hero h1 { font-size: clamp(2rem, 5vw, 4rem); text-align: center; }
        .posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
        @media (max-width: 767px) {
            .hero { padding: 40px 16px; }
            .posts { grid-template-columns: 1fr; }
        }
    </style>
</head>
<body>
    <header class="hero">
        <h1>The Design Blog</h1>
    </header>
    <main class="posts">
        <article>
            <h2>Latest Post Title</h2>
            <h3>Subtitle Goes Here</h3>
        </article>
    </main>
</body>
</html>

Example 2: Product Landing Page Input: https://product-site.com/landing Output: Complete responsive clone with proper heading structure, matching fonts, colors, spacing, and layout breakpoints.

Recommendation▾
Include actual measurement techniques and tools (e.g., browser dev tools shortcuts, specific CSS values extraction methods)
Best Practices
  • Always start with semantic HTML structure before styling
  • Use proper heading hierarchy (h1 → h2 → h3, don't skip levels)
  • Implement mobile-first responsive design
  • Use CSS custom properties for repeated values (colors, fonts)
  • Include sr-only class for screen reader content when needed
  • Match exact pixel values for spacing and typography
  • Use modern CSS (Grid, Flexbox, clamp()) for responsive layouts
  • Include hover states and transitions from original
Common Pitfalls
  • Don't use multiple h1 tags - only one per page
  • Don't skip heading levels (h1 to h3 without h2)
  • Don't forget viewport meta tag for mobile responsiveness
  • Don't hardcode pixel values - use relative units where appropriate
  • Don't ignore accessibility - maintain proper contrast ratios
  • Don't copy copyrighted images - use placeholders or descriptions
  • Don't forget to test on actual mobile devices, not just browser resize
0
Grade B-AI Skill Framework
Scorecard
Criteria Breakdown
Quick Start
13/15
Workflow
14/15
Examples
8/20
Completeness
10/20
Format
15/15
Conciseness
12/15
Save to My Skills