Site Ripper — estrai design system da qualsiasi sito web via Playwright (screenshot + CSS + asset)
Input: $ARGUMENTS
Prende un URL qualsiasi e ne estrae il design system via Playwright: screenshot a piu breakpoint, CSS extraction, download asset (logo, favicon, hero, OG image).
playwright installato (pip install playwright && playwright install chromium)import sys; sys.path.insert(0, '${CLAUDE_SKILL_DIR}/scripts')
from site_ripper import SiteRipper
ripper = SiteRipper()
result = ripper.rip(
url,
output_dir=f"storage/figma/{slug}/",
pages=["/", "/about", "/contact"], # pagine da visitare
breakpoints=["desktop", "tablet", "mobile"],
)
ds = result["design_system"]
# → palette (bg, text, accent, theme)
# → typography (heading font, body font, sizes)
# → layout (header, hero, footer)
# → border_radius
# → screenshot salvati
# → asset scaricati
🔍 **Site Ripper: {url}**
**Pagine:** {N} | **Breakpoint:** desktop, tablet, mobile
**Palette:** BG: {bg} | Text: {text} | Accent: {accent} ({theme} theme)
**Typography:** Heading: {heading_font} | Body: {body_font}
**Layout:** header {si/no} | hero {si/no} | footer {si/no}
**Asset:** {N} scaricati (logo, favicon, hero...)
**Screenshot:** {N} salvati
📁 Output: storage/figma/{slug}/
pip install playwright && playwright install chromium