Style Grabber

Extracts colors, typography, spacing, shadows, CSS variables, the full cascade, and a screenshot. Packaged as an agent-ready prompt.

Style Grabber is a Chrome extension that turns any webpage into a reusable design system. Click Extract Brand Kit and it pulls the live site’s visual language: colors, typography, font families, font sizes, spacing, border radius, shadows, CSS variables, design tokens, and the full CSS cascade. It also captures a screenshot so you can see the look, not just the values. Then click Copy for LLM. Style Grabber packages everything as structured Markdown — a brand kit you can paste into ChatGPT, Claude, Cursor, Copilot, or any coding agent when you need to match a site’s style, rebuild a UI, or generate on-brand CSS. Use it when you need to: Extract CSS and design tokens from a website Copy a color palette, fonts, and spacing scale from a live page Capture a site’s typography, shadows, and CSS variables Turn a webpage into an AI-ready style guide or brand kit Recreate a landing page, dashboard, or component in another stack Style Grabber runs locally in your browser. It inspects only the tab you choose, after you click Extract. Page data is not sent to LucenaCoder or anyone else. Works on regular websites. Chrome internal pages and other protected pages cannot be inspected. Local. Fast. Free. One click from a website to a prompt-ready design system.