skills.rest
BEIRUX
BEIRUXOFFICIAL
Explore all skills by this author →
GitHub

site-design-scanner

Analyze website visual design and animations to produce a structured site analysis report.

Updated Apr 3, 2026
Search Tags:#performance#accessibility#playwright#design-tokens#website-analysis#frontend-audit#scroll-animations
One-click install
npx skills add https://github.com/BEIRUX/agent-skills --skill site-design-scanner
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: site-design-scanner
Source: https://github.com/BEIRUX/agent-skills/tree/main/site-design-scanner
Command: npx skills add https://github.com/BEIRUX/agent-skills --skill site-design-scanner

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

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.

Frequently Asked Questions about site-design-scanner

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

FAQPage Schema
How do I extract design tokens and map scroll animations from a website?▼

You can extract design tokens and map scroll animations by running a multi-pass Playwright browser session that captures style diffs, classifies animation types, and saves screenshots into a structured site analysis report.

What is the best way to audit a website's visual design and front-end performance?▼

A comprehensive website visual design audit evaluates performance, accessibility, and responsive behavior by detecting the tech stack, capturing media assets, and checking ARIA usage to produce a structured report.

Can I analyze single page applications and static sites for responsive design behavior?▼

Yes, you can analyze SPAs and static sites for responsive design behavior by applying a multi-pass scrolling strategy across breakpoints to capture screenshots and document layout interactions in a domain-named folder.

Do I need a Playwright MCP browser session to run a frontend audit?▼

Yes, a connected Playwright MCP browser session with script execution permissions is required to perform multi-pass scrolling, capture screenshots, and save the website analysis outputs.

How does scroll animation mapping work for website replication?▼

Scroll animation mapping uses a three-pass strategy to record style differences during scrolling, classify the specific animation types triggered, and capture targeted screenshots for accurate visual replication.

What limitations exist when extracting design tokens from dynamic web pages?▼

Limitations include requiring explicit script execution permissions within the Playwright session to perform multi-pass scrolling and capture media assets, which may not fully document highly dynamic or restricted content.

Related Skills

Explore More Design & Creative Skills→
simotasimota
68

Navigator

Automate browser interactions with Playwright and Chrome DevTools Protocol.

Community
Advanced
FoundationForgeFoundationForge

design-handoff

Generate developer handoff documentation from Figma URLs or design descriptions.

Official
Intermediate
REVREBELREVREBEL

seo-firecrawl

Crawl, scrape, and map full websites for SEO analysis via Firecrawl MCP.

Official
Advanced
roviczzzroviczzz
1

web-design-reviewer

Automate visual inspection and source code fixing of website design issues.

Community
Advanced