DesignXstream

UI Prompt Library
for Vibe Coders

UI Prompt Library
for Vibe Coders

UI Prompt Library
for Vibe Coders

101 copy-and-paste UI prompts. Pick a layout, copy the prompt, and paste it into your AI tool to match your product’s style.

Browse the library

Auth

Pricing

Features

Heroes

CTAs

Stats

Navbars

Testimonials

Footers

FAQ

Dashboards

Onboarding

Blog

Contact

Extras

Browse by category

Jump to any section using the bar above, or scroll through all 101 prompts below.

Auth

Centered Card Login

Floating card over a full-page background with a sign-up link.

Magic Link Flow

One email field, one button, no password.

Minimal Single Column

No card — logo, heading, fields and button stacked cleanly.

Multi-Step Signup Wizard

Progress bar with signup broken into 2–3 steps.

Passkey / Biometric Login

One-tap passkey or fingerprint sign-in with a password fallback.

Social-First Login

Social buttons up top, email/password below a divider.

Split-Screen Auth

Form on one side, branded visual panel on the other.

Pricing

Classic Three-Tier Cards

Three plans side by side, middle one highlighted.

Credit Pack Grid

Grid of credit tiles with amounts, prices and a value badge.

Enterprise Contact Tier

Self-serve plans plus a 'Contact sales' enterprise card with no price.

Feature Comparison Table

Plans as columns, features as rows with checks and dashes.

Free vs Pro Split

Two columns with strong contrast between Free and Pro.

Monthly / Annual Toggle

Billing switch with a 'save %' badge; prices update live.

Single-Tier Hero

One big centered card with price, features and a bold button.

Stacked Mobile-First Plans

Full-width stacked cards, each with its full feature list.

Usage Slider Pricing

Interactive slider that updates the price as you drag.

Features

Accordion Feature List

Collapsible rows that expand to full detail.

Alternating Zigzag Rows

Text and visual swap sides on each row.

Before / After Comparison

Side-by-side of life without vs with the product.

Bento Grid

Asymmetric tiles of mixed sizes; key features go large.

Icon Wall

Dense grid of compact icon-and-label tiles.

Interactive Hotspot Tour

A product screenshot with numbered hotspots that reveal feature details.

Scroll-Triggered Reveal

Sticky visual on one side, features scroll past on the other.

Tabbed Features

Tabs that switch between features, each with a visual.

Three-Column Icon Grid

Icon, title and short blurb across three columns.

Heroes

Animated Gradient Mesh Hero

Living gradient mesh behind centered copy and buttons.

Big Bold Typography Hero

Oversized headline dominates; everything else minimal.

Centered Text + Screenshot

Centered headline and buttons, big screenshot below.

Diagonal Split Hero

Hero split by a diagonal edge — copy on one side, visual on the other.

Floating UI Elements Hero

Screenshots and cards floating around a central headline.

Hero With Inline Form

Email capture built right under the headline.

Split Hero

Copy and buttons on one side, product mockup on the other.

Terminal / Code Hero

Code-editor visual with animated typing beside the copy.

Video Background Hero

Looping video behind clearly legible headline and buttons.

CTAs

Dual-CTA Banner

Primary and secondary buttons side by side.

Full-Bleed Gradient Banner

Edge-to-edge gradient with centered headline and button.

Inline Email Capture CTA

Heading, subhead, then an inline email field and button.

Patterned Background CTA

Subtle texture behind a centered message and button.

Split CTA Card

Contained card, message on one side, button on the other.

Sticky Bottom Bar

Fixed bottom bar with message, button and dismiss.

Testimonial + CTA Combo

Customer quote above the headline for social proof.

Stats

Animated Count-Up Stats

Numbers count up when scrolled into view.

Card-Based Stats

A row of bordered cards, one stat each.

Four-Column Numbers

Four big numbers in a row with small labels.

Icon + Stat Pairs

A relevant icon beside every number and label.

Logo Bar + Stats Combo

Customer logos beside key numbers like '10k+ users'.

Stats Over Full-Bleed Image

Numbers overlaid on an image or gradient background.

Vertical Stacked Stats

Stats stacked for a narrow column or sidebar.

Testimonials

Carousel With Dots

One testimonial at a time with dots or arrows.

Logo Cloud

Clean grid or row of customer logos with a heading.

Marquee Scroll Testimonials

Infinite horizontally scrolling row of quote tiles.

Masonry Testimonial Grid

Pinterest-style grid of varied-height cards.

Rating Summary + Reviews

Big average rating and star breakdown beside a scrollable review list.

Single Featured Testimonial

One big quote with photo, name, role and logo.

Three-Column Quote Cards

Three quotes with photo, name, role.

Tweet Wall

Cards styled like social posts — avatar, handle, quote.

Video Testimonial Grid

Grid of clickable video thumbnails with play icons.

FAQ

Categorized FAQ Tabs

Tabs like Billing, Product, Technical switch question sets.

Chat-Bubble Q&A

Questions and answers in alternating chat bubbles.

Searchable FAQ

Search field up top filters questions as you type.

Single-Column Accordion FAQ

One column of questions that expand on click.

Two-Column Accordion FAQ

Questions split across two accordion columns.

Dashboards

Dashboard Empty State

Centered illustration, heading and a get-started button.

Kanban Board

Stage columns with draggable cards inside.

Metric Cards + Chart

Row of KPI cards over a larger chart.

Settings Page Layout

Settings nav on the left, grouped form sections on the right.

Sidebar + Main Content

Left nav rail with content filling the rest.

Three-Pane Layout

Sidebar, middle list/feed, right detail panel.

Top Nav + Content

Horizontal top nav, full-width content, no sidebar.

Onboarding

Checklist Onboarding

Setup checklist with progress and expandable steps.

Guided Tour Tooltips

Tooltip callouts pointing to UI, with next/skip.

Illustrated Empty State

Custom illustration, heading, one line and a button.

Video Walkthrough Modal

Modal centered on a walkthrough video with a CTA.

Blog

Card Grid With Filters

Post cards with category filter tags above.

Magazine Grid Blog

Big featured post over a grid of smaller cards.

Sidebar Table of Contents

Sticky TOC that tracks the current section.

Single-Column Reading View

Clean column, generous spacing, readable width.

Contact

Full-Page Minimal Form

Centered form, one heading, minimal fields, one button.

Split Form + Details

Form on one side, contact details on the other.

Support Channel Cards

Grid of channels — chat, email, docs, community.

Extras

404 Not Found Page

Clear not-found message with home/support buttons.

Command Menu (⌘K)

Centered command palette overlay with search and grouped actions.

Cookie Consent Banner

Bottom-corner card with accept/reject and settings.

Feature Announcement Banner

Slim top bar with a 'new' tag, message and dismiss.

Skeleton Loading State

Skeleton mirroring final layout with a shimmer.

Us vs Competitors Table

Your product beside rivals with checks and dashes.