AI-generated pages all look the same

Your agent writes great code. It has no idea what a good settings page, onboarding flow, or pricing table looks like. Give it 212,600+ real screens from shipped products — it studies what shipped before it writes a line of code.

What your agent can do

12 tools. Search screens, flows, components, and apps. Access your favorites and collections. Your agent does the research — you review the output.

Find screen references

Your agent searches real app screens to find designs that match what you're building — dashboards, settings pages, login screens, pricing pages, and more.

"Find dark-themed analytics dashboard designs from SaaS apps"

Study user flows

Search multi-step user flows from real products — onboarding sequences, checkout processes, invite flows — to inform your own.

"Show me onboarding flows with email verification and team invite steps"

Browse UI components

Search modals, forms, navbars, tables, dropdowns, and other UI patterns extracted from shipped products.

"Find data table components with sorting and filtering"

Explore app showcases

Discover apps by category — project management, CRM, analytics — and browse their full screen collections for end-to-end inspiration.

"Show me project management apps similar to Linear"

Use your saved references

Your agent searches your favorited screens, flows, components, and apps as a personal design library.

"Use my saved references for the settings page layout"

Organize into collections

Create collections and save screens directly from agent conversations — build a curated moodboard without leaving your editor.

"Save these dashboard screens to a new "Admin redesign" collection"

Automated design research in seconds

Every screen includes structured metadata — page type, UI elements, layout patterns, descriptions. Your agent reads the blueprint before it looks at the image. It can review hundreds of screens in seconds — more design context than a person gathers in a full day of research.

Set up in seconds

One config block. One restart. Pick your tool below.

Claude Code

One command in your terminal. Done.

Claude Desktop

Drop a JSON block into your config file.

Cursor

Add via Settings > MCP, paste, restart.

Lovable

Paste the MCP server URL in project settings.

ChatGPT

Add as a connector in Settings. Requires Plus, Pro, or Team.

Codex

Add to your config.toml or use the CLI.

Windsurf

Edit your MCP config file, paste, restart.

VS Code

Works with Copilot Chat and any MCP extension.

Zed

Add to your context_servers config.

Pricing

MCP access is included with every Pro subscription. The same account that unlocks the full design library also powers your AI agent — no separate API key, no extra cost.

Questions

Need help setting things up or have a question about the MCP server?