UIDrop — Design System Extractor for AI

Extract any site's colors, fonts, spacing & components in one click. Sends the design system to your AI coding assistant.

UIDrop extracts the complete design system from any website — colors, fonts, spacing, border radius, shadows, gradients, and component styles — and sends a structured design brief directly to your AI coding assistant. One click. ━━━━━━━━━━━━━━━━━━━━━━ WHAT IT DOES Click "Snap this page" on any website. UIDrop reads the live CSS and extracts everything — colors, fonts, spacing, border radius, shadows, gradients, and button/card/input styles, pulled from the real rendered page, not guesses. It's organized into a clean, AI-ready design brief with exact token values, not vague descriptions. ━━━━━━━━━━━━━━━━━━━━━━ HOW IT WORKS 1. Visit any website you find inspiring 2. Click the UIDrop icon in your toolbar 3. Hit "Snap this page" — extraction takes under a second 4. Pick a destination: UIDrop opens your chosen AI assistant with the brief and screenshot already pasted in, or copies everything to your clipboard so you can paste it into any AI tool or code editor yourself Every snap is also saved to your Snap Library, so you can revisit, tag, pin, and compare past extractions without re-scanning the site. ━━━━━━━━━━━━━━━━━━━━━━ WHO IT'S FOR - Frontend developers who want exact CSS tokens from a site they're referencing - Web designers extracting color palettes, type scales, and spacing from live pages - UI/UX engineers reverse-engineering design systems from production products - Vibe coders who see a site they like and want to build something similar with AI - Graphic designers pulling brand colors and typography without manual eyedropping - Anyone briefing AI tools on a visual style — UIDrop gives your AI a real starting point instead of a vague prompt ━━━━━━━━━━━━━━━━━━━━━━ KEY FEATURES - Reads live rendered CSS — colors, type, spacing, radius, shadows, gradients, components - Standout components — individually striking elements (a gradient CTA, a shadowed pricing card, a distinct badge) picked out as their own draggable cards with scoped tokens and a cropped screenshot, so you can brief your AI on just one component - Automatic light/dark mode detection, with WCAG contrast checks - Screenshot capture, drag-and-drop into any chat - One-click send to your AI assistant of choice, or copy everything for any other tool - Export as a prompt brief, Skill markdown, Tailwind/shadcn, or Figma/CSS - Snap Library to save, tag, and compare past snaps - Works on any public website ━━━━━━━━━━━━━━━━━━━━━━ PRICING Snapping a page, reading the design system, and sending it to your AI of choice is free, with no limit. The Snap Library's advanced features (Compare, Figma/CSS/Tailwind export, Insights, Collections) are free for your first few uses of each, then unlock permanently for a one-time $2.50 payment — no subscription. Checkout and license validation are handled by Polar.sh, our merchant of record. ━━━━━━━━━━━━━━━━━━━━━━ PRIVACY UIDrop's design extraction runs 100% in your browser. Reading a page's CSS, building the brief, and generating the screenshot happen locally — no servers, no analytics, no tracking, nothing sent anywhere for that part of the extension. Two exceptions, both something you initiate directly: - When you choose to send a brief to an AI service, that brief is sent to whichever service you picked, governed by their own privacy policy, not UIDrop's. - If you unlock Pro, your license key is validated against Polar.sh's API to check purchase status. No design data, browsing history, or personal information is included in that request. UIDrop never collects analytics on the sites you visit or the snaps you take. ━━━━━━━━━━━━━━━━━━━━━━ UIDrop doesn't clone brands — it extracts design patterns. Your AI gets the tokens, the type scale, and the spatial rhythm to build something original inspired by what works.