About PocketUI

PocketUI is a design inspiration tool built as a Chrome extension. It automatically extracts colors, fonts, SVGs, screenshots, and components from any website you browse. Save everything into organized folders, export visual components as clean HTML + Tailwind code, push design tokens to Figma, and connect your entire design library to AI coding tools like Claude, Cursor, and Cline via MCP.

One extension replaces ColorZilla, WhatFont, SVG Grabber, html.to.design, DivMagic, and more. Built for designers who collect inspiration and developers who turn it into code.

Who built this

PocketUI is built by Soraia, a developer and designer who got tired of switching between six Chrome extensions to capture design inspiration. The idea was simple: one tool that detects everything on a page, saves it into folders, and exports it as code.

What started as a personal tool grew into PocketUI. The goal is to make design inspiration actionable, not just collectible. Every saved color, font, and component should be one click away from your codebase, Figma file, or AI assistant.

What PocketUI does

  • Extracts design elements — Colors, fonts, SVGs, screenshots, and components from any website
  • Organizes by concept — Folders like "Dark UI" or "SaaS Landing Pages," not by source URL
  • Exports as code — Clean HTML + Tailwind, Vue SFC, or React JSX
  • Pushes to Figma — Colors as Figma styles, components as editable layers
  • Connects to AI — MCP server feeds your design tokens to Claude, Cursor, Windsurf, and Cline

Contact

Follow the build journey on X (Twitter). For support or partnerships, reach out via DM.

Purple gradient background

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.