PocketUI Features — Design Library, Code Export & AI
PocketUI is the design inspiration tool that turns any website into a searchable library. Capture colors, fonts, SVGs, screenshots, and components in one click — then export as HTML + Tailwind code, push to Figma, or plug into AI coding tools via MCP.
Looking for individual components you can copy-paste? Browse the free Vue & Nuxt component library.
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.
Design extraction tools for any website
The PocketUI Chrome extension detects and extracts design elements from any live page — 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.
What is PocketUI?
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.
Is PocketUI free?
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.
Which browsers are supported?
PocketUI works on any Chromium-based browser: Chrome, Arc, Brave, Edge, and Opera. A Firefox version is on the roadmap.
Can I export saved components as code?
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.
Does PocketUI work with Figma?
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.
Can I connect PocketUI to AI coding tools?
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.
Who is PocketUI for?
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.