The best Chrome extension
for designers and developers
Stop juggling ColorZilla, WhatFont, SVG Grabber, screenshot tools, and DivMagic. PocketUI does everything in one extension — extract colors, fonts, SVGs, screenshots, and components from any website. Save to organized folders. Export to Figma and code. Connect to AI.
Free tier available. No credit card required.
Six tools in one extension
Everything you need to capture design inspiration from any website.
Color Extraction
Auto-detect every color on any page — backgrounds, text, borders, gradients. Save palettes to folders.
Font Detection
Identify every font family, weight, and style. Google Fonts tagged with direct links.
SVG Grabber
Extract every SVG on the page — inline, external, and CSS-embedded. Preview and download.
Screenshot Clipper
Capture any section of any website and save it to organized design folders.
Design Bookmarks
Save website bookmarks with visual previews — a swipe file that actually works.
Component Extractor
Click any element and get clean HTML + Tailwind, Vue SFC, or React JSX code.
One extension replaces eight
Most designers have 5-8 Chrome extensions for different design tasks. PocketUI replaces them all — and adds organized folders, code export, and AI integration that none of them have.
ColorZilla
Color picking
WhatFont
Font identification
SVG Grabber extensions
SVG extraction
html.to.design
Website to Figma
DivMagic
Website to code
Eagle / Savee
Design library
CSS Peeper
CSS inspection
Screenshot extensions
UI screenshots
Why an all-in-one design extension matters
Everything in one library
When you save a site's colors, fonts, SVGs, screenshots, and components separately, the connection between them is lost. PocketUI saves everything into the same folder — "Dark SaaS UIs" contains the colors AND the fonts AND the screenshots AND the code. Context preserved.
From inspiration to production
Separate tools give you raw data — a hex code here, a font name there. PocketUI gives you the full design language of any site, organized and ready to export as Figma styles, Tailwind config, or component code. Your inspiration becomes your build material.
One extension, less overhead
Fewer extensions means less memory usage, fewer permissions to manage, and one interface to learn. PocketUI's popup gives you every extraction mode in a clean, iOS-style interface that opens and closes in under a second.
AI-connected design library
No standalone tool connects your saved design tokens to AI coding tools. PocketUI's MCP server lets Claude, Cursor, and Cline read your colors, fonts, and components — so your AI writes code using your actual design library.
Built for solo developers too
Solo developers and indie hackers don't have a design team. PocketUI is your design library — build your personal design system from sites you admire, then export as code or let your AI reference it.
Collect
Browse the web and save colors, fonts, and components that match your product's vibe. Build a reference library organized by concept.
Export
Export colors as CSS variables or Tailwind config. Export components as HTML + Tailwind or Vue/React code. Push everything to Figma.
Build with AI
Connect your library to AI coding tools via MCP. Your AI writes code using your exact design tokens — no more "make it look like the reference."
Frequently asked questions
- What makes PocketUI the best Chrome extension for designers?
- PocketUI combines color extraction, font detection, SVG grabbing, screenshot capture, component extraction, and visual bookmarking into one extension. Most designers use 5-6 separate tools for these tasks. PocketUI replaces them all with a single install, adds organized folders, code export, Figma integration, and AI connectivity via MCP.
- Can developers use PocketUI too?
- Yes. PocketUI was built for both designers and developers. Designers use it to build a visual design library. Developers use it to extract components as HTML + Tailwind, Vue, or React code. The MCP server connects your saved components to AI coding tools like Claude, Cursor, and Cline.
- What tools does PocketUI replace?
- PocketUI replaces ColorZilla (color picking), WhatFont (font identification), SVG Grabber (SVG extraction), html.to.design (website to Figma), DivMagic (website to code), Eagle/Savee (design library), CSS Peeper (CSS inspection), and screenshot extensions. One extension instead of eight.
- Is PocketUI free?
- Yes. The free plan includes 3 folders, 50 saves per month, color/font/SVG detection, screenshots, and bookmarks. Pro ($15/mo) adds unlimited everything, Figma export, code export, MCP server, and cloud sync. Lifetime ($79) includes everything in Pro forever.
- Does it work on all Chromium browsers?
- Yes. PocketUI works on Chrome, Arc, Brave, Edge, Opera, Vivaldi, and any other Chromium-based browser. Firefox support is on the roadmap.
- How is this different from browser dev tools?
- Dev tools let you inspect one element at a time. PocketUI auto-detects everything on the page at once — all colors, all fonts, all SVGs — and saves them into organized folders. Plus it exports to code and Figma, which dev tools can't do.
- Can I use PocketUI as a design system tool?
- PocketUI is a design inspiration library, not a design system manager. But it's perfect for solo developers and small teams who build design tokens from sites they admire. Extract colors, fonts, and components, organize by project, and export as code or Figma — your design system starts from real-world inspiration.
- What output formats does PocketUI support?
- Colors export as HEX, RGB, HSL, CSS variables, and Tailwind config. Fonts export as CSS font-family declarations. Components export as HTML + Tailwind, HTML + scoped CSS, Vue SFC, and React JSX. Everything can also be pushed to Figma as editable layers and styles.
Replace 8 extensions with one
Colors, fonts, SVGs, screenshots, components, bookmarks — all in one extension. Organized, exportable, AI-connected.
Stop recreating designs you've already seen
Join now and get 30% off your first year as an early supporter.
One email on launch day. That's it.