MCP Server

Your Design Library, Connected to AI

PocketUI's MCP server gives ChatGPT, Claude, Cursor and other AI agents direct access to your saved colors, fonts, components and screenshots. Add one link, sign in, click Allow.

Early supporters get 30% off their first year. No spam, ever.

The problem

The copy-paste loop is killing your flow

1

You browse

You find a pricing page with the perfect colors and button style, and save it to PocketUI.

2

You code

You open Cursor or Claude Code and want those exact colors. The AI has no idea what you saved.

3

You copy and paste

Back to the tab, grab a hex code, paste it in the prompt. Forty times per project.

PocketUI's MCP server kills that loop entirely.

How it works

Three steps. Then AI knows your design library.

  1. 1

    Save while you browse

    Save colors, fonts, SVGs, screenshots and full components from any website, into folders like "Dark SaaS" or "Pricing".

  2. 2

    Connect the MCP server

    Add PocketUI's URL to ChatGPT, Claude, Cursor or any agent, sign in and click Allow. No keys to copy.

  3. 3

    Build with your inspiration

    Say "use the palette from my Dark SaaS folder" and the AI pulls the real values from your library. No guessing.

~/.cursor/mcp.json
{
  "mcpServers": {
    "pocketui": {
      "url": "https://pocketui.app/api/mcp"
    }
  }
}

ChatGPT or Claude? Paste https://pocketui.app/api/mcp as a connector. Every agent

What it shares

Everything you saved. Nothing you didn't.

Color palettes

HEX, RGB, HSL, Tailwind tokens. Grouped by folder.

Typography

Font families, weights, sizes, line heights. Ready for CSS or Tailwind config.

Components as code

Saved sections exported as HTML + Tailwind. AI can reference and adapt them.

Screenshots with context

Visual references AI can see and match against.

SVGs and icons

Clean SVG code, ready to drop into any project.

Design system snapshots

Full extractions from a single page: colors, fonts, spacing, all at once.

Compare

PocketUI MCP vs Figma Dev Mode MCP

They solve different problems. Design in Figma first? Use Figma's. Build from what you find on the web? Use this. Use both if you do both.

PocketUI MCPFigma Dev Mode MCP
SourceAny live websiteYour Figma files only
SetupBrowse + save + connectDesign in Figma first
What it exposesColors, fonts, components, code, screenshotsFigma layers, styles, variables
Best forUsing real-world inspiration directly in codeImplementing your own Figma designs
Works without FigmaYesNo
Use cases

What people are building with it

“I told Cursor to match the pricing page I saved from Vercel”

The MCP server gives Cursor the exact colors, font sizes and component structure, so the pricing table it writes matches on the first try.

“My entire design system came from 10 websites”

A solo founder saves the best bits of ten SaaS sites. When building, the AI pulls buttons from one, colors from another, type from a third.

“I stopped sending screenshots in prompts”

Instead of interpreting a picture, the AI reads the actual colors, fonts and code that were saved.

MCP server questions

PocketUI's MCP server works with any tool that supports the Model Context Protocol, including ChatGPT, Claude, Claude Code, Cursor, VS Code, Windsurf, Gemini CLI and Codex. If your tool supports MCP servers, it works with PocketUI.

Only the design assets you've saved to PocketUI. color palettes, fonts, components (as HTML + Tailwind code), screenshots, SVGs, and bookmarks. Everything is organized by folder. The AI can only read your library, never modify it.

No. Add PocketUI's URL to your AI tool, sign in and click Allow. For scripts or tools set up by hand, a personal token from Profile → AI works too.

No. MCP access works on every plan, Free included, so you can connect your AI tool and try it on your first saves. Free is 50 saves in total; Pro and Studio make the library unlimited.

Figma's MCP exposes your Figma file layers and design tokens. PocketUI's MCP exposes design inspiration you've saved from live websites: real colors, fonts, and components from sites you admire. They solve different problems and work well together.

No. The MCP server is read-only. AI tools can query your folders, read saved assets, and use the values in code generation. but they cannot add, edit, or delete anything in your library.

More featuresSVG GrabberColor Palette ExtractorFont DetectorScreenshot ClipperDesign BookmarksComponent Extractor
Purple gradient background

Stop recreating designs you've already seen

Join now and get 30% off your first year as an early supporter. A quick confirmation now, then one email on launch day.