Website Replicator Plugin

Capture and reconstruct website UI and scroll animations through systematic observation.

Philosophy

• Workflow over code - The process matters more than hardcoded scripts
• Observe, don't extract - Watch what changes, infer the cause
• Adapt, don't fail - When standard approaches don't work, try alternatives
• External vision - Use Gemini for screenshot analysis when needed

Structure

website-replicator/
├── .claude-plugin/
│   └── plugin.json          # Plugin metadata
├── skills/
│   ├── start-mcp/           # MCP server startup helper
│   └── website-replicator/
│       └── SKILL.md         # Core workflow logic (300+ lines)
├── scripts/
│   └── gemini_analyzer.py   # Automated Gemini API integration
├── docs/
│   └── gemini-integration.md # Gemini integration guide
├── commands/
│   └── replicate.md         # Entry point command
├── .gitignore
├── .skillforge-meta
├── CLAUDE.md                # Project instructions for Claude Code
└── README.md

Installation

Prerequisites

1. Chrome DevTools MCP - Required for browser automation
2. Google Gemini API - For automated screenshot analysis
3. Python 3.x with google-genai package

Setup

# 1. Install Python dependencies
pip install google-genai

# 2. Set Gemini API key
export GEMINI_API_KEY="your-api-key-here"

# 3. Install the plugin
# (Instructions depend on your marketplace setup)

Usage

/replicate https://example.com

The workflow is fully automated:

1. Load page and capture overview screenshot
2. AUTOMATED: Gemini API analyzes layout and likely animated elements
3. Analyze DOM and build watch list
4. Capture scroll animation data
5. AUTOMATED: Gemini API extracts design tokens
6. Generate replication code
7. OPTIONAL: Gemini API verifies output vs original

No manual copy-paste required - all Gemini analysis happens automatically via scripts/gemini_analyzer.py.

Workflow Phases

Phase 1: Initial Load & Overview

• Navigate to URL, wait for network idle
• Take full-page screenshot
• AUTOMATED: Gemini analyzes layout, design patterns, likely animated elements

Phase 2: DOM Reconnaissance

• Try multiple strategies to find animated elements:
  1. Class/attribute heuristics (animate, fade, slide, aos, gsap, etc.)
  2. Transform/opacity detection
  3. Structural analysis (sections, cards, features)
  4. AUTOMATED: Visual comparison via Gemini (compare scroll positions)
  5. Manual specification (ask user)

Phase 3: Animation Capture

• Inject monitoring script for watched elements
• Slow scroll through page, sampling properties
• Record transform, opacity, position changes

Phase 4: CSS Extraction

• Extract computed styles for key elements
• AUTOMATED: Gemini extracts design tokens (colors, typography, spacing)
• Test responsive behavior at multiple viewports

Phase 5: Asset Collection

• List network requests for images, fonts, icons
• Extract inline SVGs
• Note external dependencies

Phase 6: Analysis & Generation

• Analyze animation data to infer triggers and easing
• OPTIONAL: Gemini generates component hierarchy
• Generate code in preferred format (GSAP, CSS scroll-driven, Framer Motion, etc.)
• OPTIONAL: Gemini verifies output vs original

Key Files

skills/website-replicator/SKILL.md

The brain of the operation. Contains:

• 6-phase workflow with detailed steps
• Decision points and fallback strategies
• Tool usage patterns and JavaScript snippets
• Adaptability guidelines for when automation fails

scripts/gemini_analyzer.py

Automated Gemini API integration:

• 5 analysis functions (overview, compare, components, tokens, verify)
• Automatic retry logic with exponential backoff
• JSON response parsing with fallback handling
• CLI interface for testing

docs/gemini-integration.md

Comprehensive integration guide:

• Usage examples for each analysis function
• Workflow integration patterns
• Optimization tips and cost considerations
• Error handling strategies

commands/replicate.md

Entry point command with options:

• --quick - Skip responsive captures
• --animations-only - Focus only on scroll animations
• --static-only - Skip animation detection

Adaptability

The workflow is designed to adapt when automation fails:

• If heuristics fail → try structural analysis
• If structural fails → try visual comparison via Gemini
• If script injection blocked → use manual sampling
• If all automated approaches fail → ask user for hints
• Partial success is acceptable - capture what you can

Dependencies

Required

• Chrome DevTools MCP - Browser automation and screenshot capture
• Google Gemini API - Automated screenshot analysis (requires API key)
• Python 3.x - For Gemini integration script
• google-genai package - Python SDK for Gemini API

Chrome DevTools MCP Tools Used

navigate_page          - Load target URL
wait_for              - Allow page/animations to settle
take_screenshot       - Visual capture for analysis
take_snapshot         - Accessibility tree for structure
evaluate_script       - DOM inspection and monitoring
resize_page           - Responsive testing
list_network_requests - Find CSS/assets

Output

./website-replication-{timestamp}/
├── capture/
│   ├── overview.png
│   └── responsive-*.png
├── data/
│   ├── animation-data.json
│   └── styles.json
└── generated/
    └── [components, styles, animations]

ui-clone