Your Design Library, Connected to AI
PocketUI's MCP server gives AI coding tools direct access to your saved colors, fonts, components, and screenshots. No more copy-pasting hex codes into prompts. No more describing "that button style from Stripe." Just build.
The copy-paste loop is killing your flow
1. You browse
You find a pricing page with the perfect color palette and button style. You save it to PocketUI.
2. You code
You open Cursor or Claude Code. You want to use those exact colors and that exact component. But the AI has no idea what you saved.
3. You copy-paste
You alt-tab back, grab a hex code, paste it into the prompt. Repeat for every color, every font, every spacing value. Forty times per project.
PocketUI's MCP server kills that loop entirely.
Three steps. Then AI knows your design library.
Save while you browse
Use the PocketUI Chrome extension to save colors, fonts, SVGs, screenshots, and full components from any website. Organize them into concept folders like "Dark SaaS," "Minimal Landing Pages," or "Stripe Vibes."
Connect the MCP server
Add PocketUI's MCP server to Claude Code, Cursor, or Cline. One config line. Takes 30 seconds.
{
"mcpServers": {
"pocketui": {
"command": "npx",
"args": ["@pocketui/mcp-server"],
"env": {
"POCKETUI_API_KEY": "your-key"
}
}
}
}Build with your inspiration
Now when you tell the AI "use the color palette from my Dark SaaS folder" or "match the button style I saved from Linear," it actually can. It pulls the real values from your library. No hallucinated colors. No guessing.
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.
PocketUI MCP vs Figma Dev Mode MCP
| PocketUI MCP | Figma Dev Mode MCP | |
|---|---|---|
| Source | Any live website | Your Figma files only |
| Setup | Browse + save + connect | Design in Figma first |
| What it exposes | Colors, fonts, components, code, screenshots | Figma layers, styles, variables |
| Best for | Using real-world inspiration directly in code | Implementing your own Figma designs |
| Works without Figma | Yes | No |
They solve different problems. If you design everything in Figma first, use Figma's MCP. If you build from inspiration you find on the web, PocketUI's MCP is what you need. Use both if you want.
What people are building with it
"I told Cursor to match the pricing page I saved from Vercel"
A developer saves Vercel's pricing section. The MCP server gives Cursor the exact colors (#000, #666, #0070F3), font sizes, and component structure. The AI generates a pricing page that actually looks like the reference, not a rough guess.
"My entire design system came from 10 websites"
A solo founder browses 10 SaaS sites over a week, saving the best bits to folders. When building, the AI pulls from the combined library: button styles from Linear, color palette from Raycast, typography from Cal.com.
"I stopped sending screenshots in prompts"
A freelancer used to screenshot design references and paste them into Claude. Now the MCP server handles it. The AI reads the actual design tokens instead of trying to interpret a blurry PNG.
Frequently asked questions
- What AI coding tools does PocketUI MCP work with?
- PocketUI's MCP server works with any tool that supports the Model Context Protocol, including Claude Code, Cursor, Cline, and Windsurf. If your tool supports MCP servers, it works with PocketUI.
- What data does the MCP server expose?
- 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.
- Is the MCP server open source?
- Yes. The @pocketui/mcp-server package is open source and available on GitHub. You can inspect exactly what data is shared with your AI tools.
- Do I need a Pro plan for MCP access?
- MCP server access is available on Pro and Lifetime plans. The free tier includes the extension and local saves, but cloud sync and MCP require an upgrade.
- How is this different from Figma's MCP / Dev Mode?
- 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.
- Does the AI modify my saved designs?
- 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.
Your inspiration, one config line away from AI.
Install PocketUI, save what inspires you, connect the MCP server. Next time you tell AI to "use those colors," it will actually know which ones you mean.
More features
SVG Grabber
Extract SVG icons, logos, and illustrations from any website...
Color Palette Extractor
Detect every color on any page - backgrounds, text, borders,...
Font Detector
Detect font families, weights, and styles from any page - wi...
Screenshot Clipper
Take targeted screenshots of UI sections, hero areas, or ful...
Design Bookmarks
Save website bookmarks with visual previews into organized d...
Component Extractor
Click any element on a live website and get clean HTML + Tai...
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.