OnionSkin — Design System Extractor

Trace any page’s design system — colours, type, spacing, hover states — and send it to Claude, ChatGPT, Gemini, or Cursor.

OnionSkin reads what a live page is actually doing — colours, type, spacing, radii, shadows, and interaction states like hover and focus — then hands you a clear sheet to build from. Not a CSS scraper. It measures computed styles on the live DOM and reads the stylesheet object model for the things computed styles can’t tell you. WHAT YOU GET • Palette — primary, accent, surfaces, text, semantic colours • Type — families, scale, weights, tracking, per-heading specs • Spacing & shape — grid, radii, shadows, pills • Interaction states — hover, focus, active from real stylesheets • Components — buttons, cards, fields, with copy-paste CSS blocks • Confidence scores so you know what’s solid vs guessed SEND TO YOUR AI One click copies a design brief (and screenshot) you can paste into the chat or coding assistant you already use. Switch between a prompt and a system file. Clipboard copy always works as a fallback. FOLIO (OPTIONAL UNLOCK) Keep every snap locally: search, tags, compare two systems token-by-token, match against your own tokens, and export in the formats your workflow already uses. PRIVACY • Uses activeTab — nothing runs until you click Snap • Sheets & screenshots stay on your device • No “read all websites” permission • Licence checks go to Polar only when you buy/activate Folio • Extension pages load no remote analytics OnionSkin is an independent product from BryteLabs. It is not affiliated with any third-party AI products. Website & privacy: https://onionskin.brytelabs.co Privacy policy: https://onionskin.brytelabs.co/privacy Support: hello@brytelabs.co