site-design-scanner

What problem does it solve?

This Skill eliminates the manual, time-consuming work of reverse-engineering a website's visual design, animations, interactions, and implementation details so teams can accurately audit, replicate, or improve a site's front-end experience.

Core Features & Use Cases

• End-to-end site forensics: 15 ordered phases that detect tech stack, extract design tokens, analyze layout, and catalog media and responsive behavior.
• Scroll animation mapping: Three-pass scroll strategy that records style diffs, classifies animation types, and captures targeted screenshots for replication.
• Interaction & micro-interaction capture: Detects hover states, custom cursors, navigation behaviors, page transitions, and sound usage for accurate reproduction.
• Performance, accessibility & SEO checks: Gathers performance hints, ARIA usage, heading hierarchy, and SEO metadata to inform optimization work.
• Output for designers and engineers: Produces a domain-named folder with numbered screenshots and a structured site-report.md suitable for handoff or prototyping.

Quick Start

Scan https://example.com and generate a full site-report with screenshots, a scroll animation map, and extracted design tokens.