Extracts comprehensive design systems, CSS styles, and visual assets from any website using Playwright.
Site Ripper is a sophisticated design intelligence tool for Claude Code that automates the extraction of brand identities and UI patterns from live websites. By leveraging Playwright in a headless environment, it captures multi-breakpoint screenshots, identifies typography and color palettes, and downloads essential brand assets like logos and hero images. This skill is indispensable for developers and designers who need to reverse-engineer styles, perform competitive analysis, or document existing design systems directly within their development workflow.
Key Features
01Comprehensive CSS extraction for typography, color palettes, and border radii
02Structural layout analysis identifying headers, hero sections, and footers
03Multi-breakpoint visual capture for desktop, tablet, and mobile views
04Automated asset downloading including logos, favicons, and OG images
05Safety-first implementation with built-in rate limiting and headless execution
060 GitHub stars
Use Cases
01Reverse-engineering design systems and UI components for frontend development
02Auditing brand consistency and visual assets across multiple website pages
03Gathering design inspiration and technical CSS specifications for site migrations
