UIDrop

Extract any website's colors, fonts, spacing & components in one click. Send the design brief to Claude, Cursor or ChatGPT instantly

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. No setup. ━━━━━━━━━━━━━━━━━━━━━━ 🎯 WHAT IT DOES Click "Snap this page" on any website. UIDrop reads the live CSS of every visible element and extracts: • Color palette — primary, accent, surface, elevated, text, and muted colors detected from actual interactive elements (buttons, links, CTAs), not guesses • Typography — heading and body font families, weights, and a full type scale (hero, mid, body sizes) • Spacing & border radius — the radius scale and spacing patterns used across real components • Shadows & elevation — shadow scale sorted by visual weight (subtle → medium → strong) • Gradients — brand gradients captured from hero text, CTA buttons, and accent surfaces • Component styles — button, card, input, and link specs including background, border, radius, padding, font weight, and text transform Everything is 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 1 second 4. Choose where to send: → Claude — opens claude.ai with the full brief and screenshot pre-pasted → ChatGPT (Codex) — opens chatgpt.com with brief and screenshot injected → Cursor — copies the brief to your clipboard, ready to paste into Composer → Clipboard — copy the brief text and drag the screenshot into any AI chat ━━━━━━━━━━━━━━━━━━━━━━ 🔧 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 ━━━━━━━━━━━━━━━━━━━━━━ 🔒 PRIVACY UIDrop runs 100% in your browser. No servers, no analytics, no data collection, no accounts, no API keys, no external requests. Your design briefs never leave your machine unless you choose to send them to an AI service (which is governed by that service's own privacy policy). ━━━━━━━━━━━━━━━━━━━━━━ ✨ KEY FEATURES ✓ One-click design system extraction from any website ✓ Reads live rendered CSS — not source stylesheets, not class names ✓ Full color palette with semantic roles (primary, accent, surface, text) ✓ Typography extraction with font families, weights, and size scale ✓ Shadow, gradient, and border radius token detection ✓ Button, card, and input component style capture ✓ Automatic light/dark mode detection ✓ Screenshot capture with drag-and-drop into any chat ✓ Three built-in send targets: Claude, Cursor, ChatGPT ✓ Pure JavaScript — no external APIs, no servers, no setup ✓ Works on any website with publicly visible CSS ✓ Free forever. No premium tier. No limits. ━━━━━━━━━━━━━━━━━━━━━━ 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.