Split-screen with visual
Form fields on one side, visual panel on the other — product screenshot or branded graphic
92 prompts · 15 categories
UI Prompt Library for Vibe Coders
A curated library of layout prompts for vibe coders. Pick a structure, copy the prompt, paste it into your AI tool — and let it match your screenshot's aesthetic.
All
92 prompts
Centered card on background
Floating card with heading, email, password, CTA, and sign-up link on a full-page background
Minimal single-column
No card container — just logo, heading, fields, and CTA stacked cleanly
Social-first stack
Social login buttons primary at top, email/password secondary below a divider
Magic link only
Single email input and one CTA — no password field, magic link flow
Multi-step wizard
Progress indicator at top, signup split across 2–3 logical steps with back/next
Classic 3-tier cards
Three side-by-side tier cards with the middle highlighted as recommended
Monthly/annual toggle
Billing toggle at top with a 'save X%' badge, prices update based on selection
Comparison table
Plans as columns, features as rows with checkmarks and dashes
Single-tier hero
One large centered card with price, full feature list, and prominent CTA
Usage slider
Interactive usage slider that dynamically updates the displayed price
Credit pack grid
Grid of credit pack tiles with amounts, prices, and badges
Free vs Pro split
Two-column split with strong visual contrast between Free and Pro
Stacked mobile-first cards
Full-width stacked cards, one per tier, each with its full feature list
3-column icon grid
Three-column grid with icon, feature title, and short description
Bento grid
Asymmetric tiles of varying sizes, important features in larger tiles
Alternating rows
Zigzag rows with text on one side and visual on the other, alternating
Tabbed features
Tabbed interface where each tab shows a different feature with visual
Accordion list
Vertical accordion of collapsible rows with full description on expand
Scroll-triggered reveal
Sticky visual on one side, feature descriptions scroll on the other
Icon wall
Dense grid of small icon tiles — compact cards with icon and short label
Before/after comparison
Side-by-side comparison showing without vs. with the product
Centered text + screenshot
Centered heading, subheading, CTAs at top, large product screenshot below
Split hero
Heading and CTAs on one side, product mockup on the other
Video background
Looping video or animated background behind heading and CTAs
Animated gradient mesh
Animated gradient mesh background with heading and CTAs on top
Terminal/code hero
Terminal or code-editor visual as central element with animated typing
Floating UI elements
Multiple product screenshots or UI cards floating around the central heading
Big bold typography
Oversized, bold typography as the focal point with minimal supporting elements
Hero with inline form
Email capture form embedded directly under the heading
Full-bleed gradient banner
Full-bleed section with gradient background, centered heading, and CTA
Split CTA card
Contained card with heading on one side and CTA button on the other
Sticky bottom bar
Fixed bar at viewport bottom with message, CTA, and dismiss option
Patterned background
Subtle pattern or texture behind centered message and button
Dual-CTA
Two buttons side by side — primary and secondary action
Inline email capture CTA
Email input and submit button inline beneath heading and subheading
Testimonial + CTA combo
Customer quote above the heading and CTA for social proof
Horizontal 4-column numbers
Four large numbers in a row with descriptive labels underneath
Animated count-up
Numbers animate counting up when scrolled into view
Icon + stat pairs
Relevant icon paired with each number and label
Logo bar + stats combo
Customer logos above or beside key stats like '10k+ users'
Vertical stacked stats
Vertical stack suited for a narrow column or sidebar
Stats over full-bleed image
Full-bleed image or gradient background with stats overlaid
Card-based stats
Row of individual bordered cards, each containing one stat
Minimal logo + links + CTA
Logo left, links center/right, CTA button far right
Centered logo split nav
Logo centered with navigation links split evenly on either side
Mega menu
Full-width mega menu dropdown with categorized sub-links
Sidebar nav
Vertical sidebar with logo at top, links stacked, user section at bottom
Floating pill nav
Rounded pill detached from top edge, centered with subtle shadow
Transparent over hero
Transparent when over hero, becomes solid on scroll
Command-palette nav
Prominent search/command-palette input (⌘K) as central element
Bottom mobile nav
Bottom tab bar for mobile — icons with labels, app-style
3-column quote cards
Three side-by-side quote cards with photo, name, role, and quote
Marquee scroll
Infinite horizontally scrolling marquee of testimonial tiles
Masonry grid
Masonry/Pinterest-style grid of varied-height testimonial cards
Single featured testimonial
One large featured quote with photo, name, role, and company logo
Video testimonial grid
Grid of clickable video thumbnails with play icon, name, and company
Tweet wall
Cards styled like X/Twitter posts — avatar, handle, timestamp, content
Logo cloud
Clean grid or row of customer/partner logos with heading above
Carousel with dots
Single-testimonial carousel with navigation dots or arrows
Multi-column sitemap
Grouped links (Product, Company, Resources), logo, tagline, copyright
Minimal single-row
Logo, a few key links, and copyright text inline in one row
Giant logo footer
Huge wordmark as centerpiece with links arranged around it
Newsletter-first footer
Newsletter signup as dominant element with nav links secondary below
Status indicator footer
Live system status indicator alongside the usual links and logo
Accordion single column
Single-column accordion — each question expands its answer on click
Two-column accordion
Questions split across two columns in accordion layout
Chat-bubble Q&A
Questions and answers in alternating chat bubbles
Searchable FAQ
Search bar at top that filters the question list as user types
Categorized tabs
Category tabs at top that switch between filtered sets of questions
Sidebar + main content
Vertical sidebar with nav, main content area filling the rest
Top nav + content
Horizontal top nav with full-width content beneath — no sidebar
Three-pane layout
Sidebar, middle list/feed pane, and detail panel on the right
Kanban board
Columns representing stages with draggable cards within each
Metric cards + chart
Grid of metric cards at top with a larger chart below
Empty state
Centered illustration or icon, heading, and CTA to get started
Checklist onboarding
Checklist of setup tasks with progress indicators and expandable items
Tour tooltips
Guided tour with tooltip callouts pointing to UI elements
Video walkthrough modal
Modal with embedded walkthrough video and get started CTA
Illustrated empty state
Custom illustration, short heading, supporting sentence, and CTA
Magazine grid
Large featured post at top with smaller cards in a grid beneath
Single column reading view
Clean single-column with generous line spacing and readable width
Sidebar TOC
Sticky table of contents sidebar highlighting current section on scroll
Card grid with filters
Post card grid with category filter tags above
Split form + details
Contact form on one side, details (email, phone, address) on the other
Support channel cards
Grid of cards for different support channels — chat, email, docs, community
Full-page minimal form
Full-page centered form with heading, minimal fields, and one submit button
Comparison table (us vs competitors)
Your product vs competitors with checkmarks and dashes
Feature announcement banner
Slim bar at top with 'new' tag, short message, link, and dismiss
Cookie banner
Bottom-corner card with message, accept/reject, and settings link
404 page
'Page not found' message, explanation, and CTAs for home/support
Loading state
Skeleton layout mirroring final content structure with shimmer animation
Auth Forms
6 prompts
Split-screen with visual
Form fields on one side, visual panel on the other — product screenshot or branded graphic
Centered card on background
Floating card with heading, email, password, CTA, and sign-up link on a full-page background
Minimal single-column
No card container — just logo, heading, fields, and CTA stacked cleanly
Social-first stack
Social login buttons primary at top, email/password secondary below a divider
Magic link only
Single email input and one CTA — no password field, magic link flow
Multi-step wizard
Progress indicator at top, signup split across 2–3 logical steps with back/next
Pricing
8 prompts
Classic 3-tier cards
Three side-by-side tier cards with the middle highlighted as recommended
Monthly/annual toggle
Billing toggle at top with a 'save X%' badge, prices update based on selection
Comparison table
Plans as columns, features as rows with checkmarks and dashes
Single-tier hero
One large centered card with price, full feature list, and prominent CTA
Usage slider
Interactive usage slider that dynamically updates the displayed price
Credit pack grid
Grid of credit pack tiles with amounts, prices, and badges
Free vs Pro split
Two-column split with strong visual contrast between Free and Pro
Stacked mobile-first cards
Full-width stacked cards, one per tier, each with its full feature list
Features / Bento
8 prompts
3-column icon grid
Three-column grid with icon, feature title, and short description
Bento grid
Asymmetric tiles of varying sizes, important features in larger tiles
Alternating rows
Zigzag rows with text on one side and visual on the other, alternating
Tabbed features
Tabbed interface where each tab shows a different feature with visual
Accordion list
Vertical accordion of collapsible rows with full description on expand
Scroll-triggered reveal
Sticky visual on one side, feature descriptions scroll on the other
Icon wall
Dense grid of small icon tiles — compact cards with icon and short label
Before/after comparison
Side-by-side comparison showing without vs. with the product
Hero Sections
8 prompts
Centered text + screenshot
Centered heading, subheading, CTAs at top, large product screenshot below
Split hero
Heading and CTAs on one side, product mockup on the other
Video background
Looping video or animated background behind heading and CTAs
Animated gradient mesh
Animated gradient mesh background with heading and CTAs on top
Terminal/code hero
Terminal or code-editor visual as central element with animated typing
Floating UI elements
Multiple product screenshots or UI cards floating around the central heading
Big bold typography
Oversized, bold typography as the focal point with minimal supporting elements
Hero with inline form
Email capture form embedded directly under the heading
CTA Banners
7 prompts
Full-bleed gradient banner
Full-bleed section with gradient background, centered heading, and CTA
Split CTA card
Contained card with heading on one side and CTA button on the other
Sticky bottom bar
Fixed bar at viewport bottom with message, CTA, and dismiss option
Patterned background
Subtle pattern or texture behind centered message and button
Dual-CTA
Two buttons side by side — primary and secondary action
Inline email capture CTA
Email input and submit button inline beneath heading and subheading
Testimonial + CTA combo
Customer quote above the heading and CTA for social proof
Stats Bars
7 prompts
Horizontal 4-column numbers
Four large numbers in a row with descriptive labels underneath
Animated count-up
Numbers animate counting up when scrolled into view
Icon + stat pairs
Relevant icon paired with each number and label
Logo bar + stats combo
Customer logos above or beside key stats like '10k+ users'
Vertical stacked stats
Vertical stack suited for a narrow column or sidebar
Stats over full-bleed image
Full-bleed image or gradient background with stats overlaid
Card-based stats
Row of individual bordered cards, each containing one stat
Testimonials
8 prompts
3-column quote cards
Three side-by-side quote cards with photo, name, role, and quote
Marquee scroll
Infinite horizontally scrolling marquee of testimonial tiles
Masonry grid
Masonry/Pinterest-style grid of varied-height testimonial cards
Single featured testimonial
One large featured quote with photo, name, role, and company logo
Video testimonial grid
Grid of clickable video thumbnails with play icon, name, and company
Tweet wall
Cards styled like X/Twitter posts — avatar, handle, timestamp, content
Logo cloud
Clean grid or row of customer/partner logos with heading above
Carousel with dots
Single-testimonial carousel with navigation dots or arrows
FAQ
5 prompts
Accordion single column
Single-column accordion — each question expands its answer on click
Two-column accordion
Questions split across two columns in accordion layout
Chat-bubble Q&A
Questions and answers in alternating chat bubbles
Searchable FAQ
Search bar at top that filters the question list as user types
Categorized tabs
Category tabs at top that switch between filtered sets of questions
Dashboards
6 prompts
Sidebar + main content
Vertical sidebar with nav, main content area filling the rest
Top nav + content
Horizontal top nav with full-width content beneath — no sidebar
Three-pane layout
Sidebar, middle list/feed pane, and detail panel on the right
Kanban board
Columns representing stages with draggable cards within each
Metric cards + chart
Grid of metric cards at top with a larger chart below
Empty state
Centered illustration or icon, heading, and CTA to get started
Onboarding
4 prompts
Checklist onboarding
Checklist of setup tasks with progress indicators and expandable items
Tour tooltips
Guided tour with tooltip callouts pointing to UI elements
Video walkthrough modal
Modal with embedded walkthrough video and get started CTA
Illustrated empty state
Custom illustration, short heading, supporting sentence, and CTA
Blog / Content
4 prompts
Magazine grid
Large featured post at top with smaller cards in a grid beneath
Single column reading view
Clean single-column with generous line spacing and readable width
Sidebar TOC
Sticky table of contents sidebar highlighting current section on scroll
Card grid with filters
Post card grid with category filter tags above
Contact
3 prompts
Split form + details
Contact form on one side, details (email, phone, address) on the other
Support channel cards
Grid of cards for different support channels — chat, email, docs, community
Full-page minimal form
Full-page centered form with heading, minimal fields, and one submit button
Bonus
5 prompts
Comparison table (us vs competitors)
Your product vs competitors with checkmarks and dashes
Feature announcement banner
Slim bar at top with 'new' tag, short message, link, and dismiss
Cookie banner
Bottom-corner card with message, accept/reject, and settings link
404 page
'Page not found' message, explanation, and CTAs for home/support
Loading state
Skeleton layout mirroring final content structure with shimmer animation