Read any website's
design system.
Send it to your AI.
One click reads colors, fonts, spacing, shadows, and component styles from any live page — and drops a structured design brief into Claude, Cursor, or ChatGPT.
From live CSS to AI-ready brief in one click.
UIDrop reads every rendered style on the page and sends your AI a structured design brief it can build from immediately — no manual copying.
Extract colors, fonts & spacing from any website.
Click the UIDrop icon on any website. The extension reads the live DOM and extracts every rendered color, font, spacing value, shadow, and component style — in under a second.
- Reads getComputedStyle on every visible element
- Detects primary & accent colors from CTAs
- Captures gradients, shadows, and radii
- Automatic light/dark mode detection
UIDrop
Complete design tokens — not just a color picker.
UIDrop extracts the full design language — semantic color palette, typography scale, elevation shadows, border radii, gradients, and component specs for buttons, cards, and inputs.
- 6-color semantic palette (primary → muted)
- Typography scale with font families & weights
- Shadow scale sorted by visual weight
- Button, card & input component specs
Send the design brief to Claude, ChatGPT, or Cursor.
One click opens your AI coding assistant with the full design brief pre-pasted — exact CSS tokens, component specs, and a screenshot. Your AI starts building immediately.
- Opens Claude or ChatGPT with brief injected
- Screenshot auto-attached to the conversation
- Copy to clipboard for Cursor or any IDE
- Drag & drop screenshot into any chat
Claude
claude.ai
Primary: #635BFF · Accent: #00D4AA · Surface: #FFF
Heading: Inter 700 · Body: Inter 400 · Radius: 8/12/16px
writing code...
Button, card & input styles — ready to build.
UIDrop captures the actual rendered styles of interactive components — not class names, not guesses. Your AI gets exact padding, radii, font weight, and colors to reproduce the design pattern.
- Primary button: bg, text, radius, padding, font
- Card component: border, shadow, radius, spacing
- Input field: border, bg, focus state, placeholder
- Link styles and text transforms
Built for developers & designers who build with AI.
Whether you code from scratch or prompt your way there — UIDrop gives you real CSS tokens instead of vague descriptions.
Web Designers
Extract any site's palette, type scale, and spacing to use as a starting point for new projects.
Frontend Devs
Get exact CSS tokens — colors, radii, shadows, font stacks — without inspecting elements one by one.
UI/UX Engineers
Capture design systems from live products to analyze patterns, build specs, or reverse-engineer tokens.
Graphic Designers
Pull brand colors and typography from any website — no eyedropper needed, no guessing hex codes.
Vibe Coders
See a site you like? Read its design, send the brief to Claude or Cursor, and start building immediately.
Stop inspecting elements one by one.
Read the entire design system in one click — colors, fonts, spacing, shadows, components — and send it straight to your AI as a structured brief.
Snap Library — your permanent
design archive.
Every site you snap, saved forever. Browse your history, compare two designs side by side, export tokens anywhere, and send straight to your AI — all for a single one-time payment.
Snap Library
Browse all your saved design systems in a searchable, filterable grid.
Side-by-side Compare
Pick any two snaps and see every token difference highlighted instantly.
Moodboard View
Full-bleed screenshot grid for pure visual inspiration sessions.
Export Anywhere
One click per format.
100% Private
UIDrop runs entirely in your browser. No servers, no analytics, no data collection, no accounts. Your design briefs never leave your machine unless you send them to an AI yourself.
Read a site. Let your AI build.
One click sends a complete design brief to your AI. Free forever. No accounts.
Add to Chrome — FreeNo account · No cloud · No tracking