Turn any website into a design library
PocketUI captures colors, fonts, SVGs, screenshots, and components from any website in one click. Export them as code, push them to Figma, or plug them into AI coding tools via MCP.
Export to Figma
Select any section on a live website and export it as editable Figma layers. Colors become color styles. Fonts become text styles. No Figma plugin required.
Website to Code
Click any element on any website and get clean HTML + Tailwind code. Hover states, animations, and CSS variables are preserved.
Component Extractor
Extract individual components. buttons, cards, navbars, hero sections. as production-ready code you can paste directly into your project.
MCP Server
Connect your saved design library to Claude Code, Cursor, and Cline. AI pulls real colors, fonts, and components from your folders. no copy-pasting.
Your entire web design library, one click away
Every color, font, SVG, screenshot, and component you save from the Chrome extension lands in a searchable web library. Organize folders by project, mood, or brand. Share a folder as a read-only link. Drop any item back into Figma or paste it as code.
- Folders that think like you do. Group saves by concept, "Dark UI", "Onboarding flows", "Mobile nav", not by which site you found them on.
- Searchable across everything. Find a shade of orange you saved three months ago or every font tagged "display".
- Syncs with the extension. Save in Chrome, browse on the web, share with your team.
- AI-ready. Point Claude Code, Cursor, or Cline at your library via MCP, your real colors and fonts, in every prompt.
Extract anything from any live page
PocketUI detects and pulls design elements from any website, colors, fonts, SVGs, screenshots, and bookmarks, automatically, without dev tools or copy-paste.
SVG Grabber
Extract SVG icons, logos, and illustrations from any website and save them to organized folders.
Color Palette Extractor
Detect every color on any page - backgrounds, text, borders, gradients - and save them as a reusable palette.
Font Detector
Detect font families, weights, and styles from any page - with direct links to Google Fonts when available.
Screenshot Clipper
Take targeted screenshots of UI sections, hero areas, or full pages - organized in your design library.
Design Bookmarks
Save website bookmarks with visual previews into organized design folders - a swipe file that actually works.
Frequently asked questions
Quick answers about PocketUI, pricing, browser support, and integrations.
PocketUI is a free Chrome extension and web library that captures colors, fonts, SVGs, screenshots, and components from any website. Save everything into organized folders, export as HTML + Tailwind code, push to Figma, or plug it into AI tools like Claude Code and Cursor via MCP.
Yes. PocketUI has a generous free tier with 3 folders and 50 saves per month. Pro unlocks unlimited folders, cloud sync, team sharing, and priority support.
PocketUI works on any Chromium-based browser: Chrome, Arc, Brave, Edge, and Opera. A Firefox version is on the roadmap.
Yes. Click any element on a live website and PocketUI converts it to clean HTML + Tailwind CSS, hover states, focus styles, CSS variables, and animations included. Paste it directly into your Vue, React, or Nuxt project.
Yes. Export any section of a website as editable Figma layers, colors become styles, fonts become text styles, and components land as real frames. No Figma plugin required.
Yes. The PocketUI MCP server connects your design library to Claude Code, Cursor, and Cline. AI pulls real colors, fonts, and components from your folders instead of hallucinating placeholder values.
PocketUI is built for designers who want a visual swipe file of websites, developers who need to extract real code from live sites, and teams sharing a design inspiration library.
Still wondering? Browse the free component library or read more about PocketUI.
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.