Real UI, ready for
your AI workflow

Browse 6,544 real websites, apps and dashboards. Pick a reference, copy an original build prompt, and ship it in Cursor or Claude Code.

Go Pro →

VercelDeveloper Tools

New collection

Real page sections

Heroes, pricing tables and feature grids cut from live products, each with its palette, fonts and an original build prompt.

Creative studio

Festival ads & social posts

Diwali graphics →Browse all graphics →

Build with AI

From reference to running code

Every reference ships an original build brief: structure, palette, type and spacing written for Claude Code, Cursor, v0 and Lovable. Copy it, paste it, review what comes back.

Explore prompts →Connect via MCP

# Build brief · Linear
Layout: 12-col grid, 1200px max, 96px section rhythm
Hero: left-aligned H1 48/1.05, muted lede, one primary CTA
Palette: #0f0f10 · #f4f4f5 · #5e6ad2 accent
Type: Inter 600 headings / Inter 400 body
Sections: hero → logo row → features (3-up) → pricing → FAQ
Output: Next.js + Tailwind, responsive, no placeholder text

Frequently Asked Questions

Questions, answered.

The reference library, AI build prompts, MCP server tools, and how to plug UI Discovery into your design & engineering workflow.

Setting up MCP or the API?

One-click config for Claude Code & Cursor.

Connect MCP

API Documentation →·Submit your site →

What is UI Discovery?

A curated library of real-world product design — full websites, iOS apps, web apps and the individual sections inside them — captured at retina quality and organized so you can find the right reference in seconds.

What comes with each reference?

Website and web-app references include captured screenshots and available extracted palettes, fonts and text. Original website build prompts use your signed-in design allowance. iOS entries vary: some contain App Store listing images, others reviewed in-app screens or recordings; machine-read text is not a verified screen name.

How do the AI build prompts work with Claude, Cursor, and v0?

Use an original brief to describe the layout, available palette and typography, your own content, and required interface states. Website prompts use the signed-in design allowance; API/MCP build tools require Pro. Your coding tool generates the implementation, which you must review and test. The Claude Code guide includes one recorded React fixture; other editorial prompts are not guaranteed model outputs.

How do I connect it to ChatGPT, Claude, Cursor or Codex?

Follow the MCP connection guide for your client, add the hosted server URL, and sign in to authorize your account. Reference search is available within your plan allowance; API/MCP build briefs, image plans, prompts and starter code require Pro. Supported clients expose the available tools after connection. Your AI tool has separate subscriptions and usage limits.

Is there an API?

Yes. The JSON REST API supports metered reference search and visual metadata. Use the API documentation for authentication and current plan allowances. Build briefs, image plans, prompts and starter code are paid API content; public catalogue browsing is not unlimited API access.

What about Graphics, Templates, Motion and Flow Kits?

They're built right into the Studio workspace alongside Websites, Web Apps, Dashboards, Sections and Mobile. Browse festival and campaign graphics, customize live page and signature templates, inspect animated motion references, step through multi-screen flow kits, or generate structured build plans in the Brief Planner.

Can I use the screenshots in my own work?

The captured designs belong to their respective owners and are provided as reference and inspiration. The build prompts are original and yours to use — they describe structure, palette and type, and ask for original copy and placeholder brand assets.

How often is new content added?

Regularly. New sites, apps and sections are captured and added to the library as they're reviewed.

How do I submit my site or portfolio to be featured?

Visit the Submit page to share your live website, portfolio, or UI project. Our editorial team reviews every submission for craft, interaction polish, and typography before featuring it in the Maker Showcase and indexing it into the reference library.