Does it require external dependencies?

Yes, you must have Playwright installed (pip install playwright) and the Chromium browser binaries available on your system.

Is the extraction process safe for target websites?

Yes, it operates in a read-only, headless mode and includes a mandatory 1-second delay between page requests to prevent server strain.

How does Site Ripper extract design data?

It uses Playwright to render a website in a headless browser, analyzing computed styles and the DOM to identify fonts, colors, and layout patterns.

What specific assets can this skill download?

Site Ripper identifies and saves high-value assets such as logos, favicons, hero images, and Open Graph (OG) social sharing images.

Site Ripper

Name: Site Ripper
Author: giobi

bygiobi

0•

디자인 도구

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.

주요 기능

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

사용 사례

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

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add giobi/claude-skills site-ripper

For use in Claude.ai and ChatGPT