Here's the deal — I'm just going to give you 20 layout prompts that actually work. No buildup. Scroll to the one you need and copy it.
Each one is a short excerpt from the full prompt in our layout library. Every prompt works in v0, Bolt.new, and Cursor. Paste it, see what you get, then grab the full version (with mockdown) if you want the complete spec.
Dashboards
1. SaaS Analytics Dashboard
Full KPI row, revenue charts, transactions table, collapsible sidebar. The workhorse template for any SaaS admin view.
Create a SaaS analytics dashboard. Fixed left sidebar (240px): logo, nav (Dashboard,
Analytics, Revenue, Users, Settings), user avatar + name at bottom. Collapsible on
mobile. 4 KPI cards: Total Revenue ($124,500, +12%), Active Users (8,320, +4%),
Churn Rate (2.1%, -0.3%), MRR ($10,375, +8%) — each with icon, sparkline, change
badge. Full-width Revenue Over Time line chart with Revenue/MRR toggle. Two columns:
bar chart + donut chart. Recent Transactions table with pagination.
Full prompt + mockdown → SaaS Analytics Dashboard
2. CRM Contact Dashboard
Sales pipeline summary, deal stages, contact table, and activity feed. Built for B2B sales teams.
Build a CRM dashboard for a B2B sales team. Fixed 240px sidebar: logo ("PipelineHQ"),
nav (Dashboard, Contacts, Deals, Companies, Activities, Reports, Settings), blue
"New Contact" button at the bottom. 4 KPI cards: Open Deals (47), Pipeline Value
($284,000), Won This Month (11 / $63,500), Avg Deal Size ($5,772). Horizontal
pipeline strip — 5 stages: Lead, Qualified, Proposal Sent, Negotiation, Closed Won,
each with count + total value. Below: Contacts table (60%) + Activity Feed (40%).
Full prompt + mockdown → CRM Contact Dashboard
3. Project Management Dashboard
Sprint burndown chart, kanban summary, overdue task alerts, and team utilization panel.
Build a project management dashboard for an agile team. App: "SprintOS". Fixed
240px sidebar with nav (Overview, Projects, My Tasks, Team, Reports, Settings) and
a collapsible Projects list. 4 KPI cards: Open Tasks (38), Completed This Sprint
(22/30, 73%), Overdue (5 tasks, red badge), Team Velocity (44 pts/sprint). Full-width
sprint burndown chart: ideal line (dashed) vs actual (solid). Three-column lower
section: Kanban summary, top contributors, and upcoming deadlines table.
Full prompt + mockdown → Project Management Dashboard
Landing Pages
4. SaaS Product Landing Page
Sticky nav, hero with social proof, feature grid, testimonials, 3-tier pricing preview, footer CTA.
Design a SaaS product landing page. Sticky nav: logo left, 4 links center, ghost +
solid CTA buttons right. Hero: large headline "Ship projects faster, together.",
two CTAs, row of 5 social proof logos, browser-frame app mockup below. Feature grid:
3 cards × 2 rows, each with icon + bold name + 2-sentence description. Testimonials
band: 3 quote cards on gray background with star rating, quote, and author details.
Pricing: 3 cards — Starter ($19), Pro ($49, highlighted), Enterprise (contact).
Footer CTA banner + 4-column footer.
Full prompt + mockdown → SaaS Product Landing Page
5. AI Tool Landing Page
Live demo embed, before/after text comparison, metrics strip, and feature grid. Great for AI writing, coding, or productivity tools.
Build a landing page for an AI writing tool called "Draftly". Sticky nav: logo,
links (Product, Pricing, Docs, Blog), ghost + solid CTA. Hero: pill badge ("✨ Now
powered by GPT-4o"), bold H1, subtitle, two CTAs, trust line with logos. Live demo
card: split pane — "Before" textarea left, "After — Draftly" output right, tone/
length toolbar above, "Rewrite →" button. Metrics strip: 4 stats row. 2×3 feature
grid. Pricing section. Social proof testimonials. Footer.
Full prompt + mockdown → AI Tool Landing Page
6. Developer Tool Landing Page
Terminal demo hero, copy-paste install command, integration logos, docs-first CTA. Built for CLI tools, APIs, and dev infrastructure products.
Build a landing page for a developer tool called "Shiplog". Left-aligned hero:
pill badge, bold H1 "Structured logging for production apps.", subtitle, two CTAs
("Read the docs" + "View on GitHub →"), supported runtimes list. Right side: dark
terminal window card showing npm install + init command output. Metrics strip.
Feature grid. Integration logos. FAQs. Footer.
Full prompt + mockdown → Developer Tool Landing Page
7. Mobile App Landing Page
Phone mockup hero, App Store + Google Play badges, screenshot carousel, social proof.
Build a mobile app landing page for "Focusly". Sticky nav with rounded "Download
Free" button. Two-column hero: left — eyebrow label, bold H1, subtitle, App Store +
Google Play CTA buttons, star rating line; right — phone mockup with two floating
feature cards. Logos strip: "Loved by teams at" + 6 greyscaled logos. 3 feature
highlight cards. Full-width dark section: screenshot carousel, 4 screens. 3
testimonial cards. Footer.
Full prompt + mockdown → Mobile App Landing Page
E-Commerce
8. Product Detail Page
Image gallery with zoom, variant selector, reviews, add to cart, related products.
Build an e-commerce product detail page for a DTC store. Two-column layout: left —
large 4:5 image with hover zoom, 4 thumbnails below, "360° View" badge; right —
brand in small caps, H1 product name, price, star rating, size variant selector,
color picker, quantity stepper, "Add to bag" primary CTA, shipping/returns info,
"Add to wishlist" secondary link. Below: tabbed section (Description, Reviews, Size
Guide). 4-item related products grid.
Full prompt + mockdown → E-Commerce Product Detail Page
9. Product Listing & Catalog Page
Filter sidebar (price, brand, rating), grid/list view toggle, sort controls, quick-add to cart.
Build a product listing page for an art supply store called "Crafter Supply Co."
Two-column layout: left — sticky filter sidebar (256px): price range slider, checkboxes
for brand and product type, rating radio buttons, in-stock toggle; right — product
grid. Top of grid: breadcrumb + "148 products" count, sort dropdown, grid/list toggle.
Each product card: image, name, brand, price, star rating, quick-add button.
Pagination at the bottom.
Full prompt + mockdown → Product Listing & Catalog
10. Shopping Cart & Checkout
3-step checkout flow: cart → shipping → payment. Two-column: form left, order summary right.
Build a multi-step checkout for "Crafter Supply Co." Minimal sticky header: logo,
"🔒 Secure checkout" label, cart icon. Progress stepper: 1. Cart → 2. Shipping →
3. Payment. Two-column: left (60%) = active step form; right (40%) = sticky order
summary (line items, subtotal, shipping, discount field, total, CTA). Step 1: cart
line items with quantity stepper and remove link. Step 2: shipping address form.
Step 3: card payment form and place order button.
Full prompt + mockdown → Shopping Cart & Checkout
Pricing
11. Three-Tier Pricing Page
Monthly/annual toggle, highlighted Pro plan, comparison table, FAQ accordion, book-demo CTA.
Build a SaaS pricing page. Centered header: "Simple, transparent pricing." +
monthly/annual pill toggle with "Save 20%" badge. 3 plan cards: Starter ($19/mo),
Pro ($49/mo, blue border + "Most popular" badge above), Enterprise (custom). Each
card: feature list with checkmarks + CTA button. Full-width feature comparison table
below cards. FAQ accordion: 5 billing questions. Bottom CTA band: "Still not sure?
Talk to a human." + "Book a demo" button.
Full prompt + mockdown → Three-Tier Pricing Page
Auth & Onboarding
12. Sign In / Sign Up Auth Screens
Split-panel layout: branded illustration right, form left. Social OAuth buttons, email/password, strength meter.
Create a split-panel auth UI: two screens — Sign In and Sign Up. Split 50/50.
Right panel: dark blue background, product screenshot/illustration, headline, 3
bullet points. Hidden on mobile. Left panel: logo, heading, social sign-in buttons
("Continue with Google", "Continue with GitHub"), "or continue with email" divider,
email + password fields. Sign In: "Forgot password?" link, Sign In button. Sign Up:
Full Name, Work Email, Password with strength meter, Confirm Password, ToS checkbox,
Create Account button.
Full prompt + mockdown → Sign In & Sign Up Auth
13. SaaS Onboarding Wizard
4-step guided flow: profile setup → team invite → workspace config → success screen.
Build a 4-step onboarding wizard for a SaaS product, displayed as a centered card.
Top: step progress indicator (steps 1–4, checkmarks for completed, blue for active)
+ "Skip for now →" link. Step 1: profile form (Full Name, Job Title, Company, Size).
Step 2: multi-row email invite with role selector per row. Step 3: workspace config
(name, subdomain, default timezone, template picker). Step 4: success screen with
confetti, "You're all set!", and two next-step action cards.
Full prompt + mockdown → SaaS Onboarding Wizard
SaaS App Screens
14. Kanban Task Board
4-column board with draggable cards, priority badges, assignee avatars, sprint header, and filter bar.
Build a Kanban task board for "SprintOS". App shell: 64px icon rail sidebar. Board
header: project breadcrumb, sprint label ("Sprint 15 — Feb 17–28"), progress pill
("14 / 22 done"), filter controls, "+ New task" button. Filter bar: search input,
Assignee/Priority/Label dropdown chips. 4 columns: To Do (8), In Progress (5),
In Review (3), Done (14 — faded, strikethrough). Each card: title, priority dot,
assignee avatar, label chip, due date, story points.
Full prompt + mockdown → Kanban Task Board
15. Inbox & Messaging Layout
Three-pane layout: icon nav rail, conversation list, full thread view. Modeled after Gmail + Intercom.
Build a three-pane inbox for "Replybase" (customer support SaaS). Pane 1 (64px):
icon-only nav rail — Home, Inbox (active, badge "12"), Contacts, Reporting,
Automations, Settings, user avatar at bottom. Pane 2 (280px): "Inbox" header +
compose icon, search input, filter tabs (All 47 / Open 12 / Pending 8 / Closed 27),
scrollable conversation list with avatar, name, message snippet, timestamp, unread
indicator. Pane 3: full conversation thread + reply composer at the bottom.
Full prompt + mockdown → Inbox & Messaging Layout
16. Data Table CRUD Interface
Search, role/status filters, sortable columns, inline row edit, bulk actions, CSV export, pagination.
Build a data table CRUD interface for managing "Team Members" in a SaaS admin panel.
Page header: "Team Members" title, search input, Export CSV ghost button, + Add
member solid CTA. Filter toolbar: Role dropdown, Status dropdown, Joined date range,
active filter chips. Table columns: checkbox, Avatar + Name, Email, Role, Status,
Joined, Last Active, Actions (Edit / Delete). 8 data rows. Bulk action bar appears
when rows are selected. Pagination: "Showing 1–10 of 38 members".
Full prompt + mockdown → Data Table CRUD Interface
17. App Shell with Command Palette
Collapsible sidebar, workspace switcher, notification drawer, ⌘K command palette with grouped results.
Build a complete SaaS app shell. Top nav (48px): workspace switcher left (logo +
name + dropdown), fake search bar "Search or jump to... ⌘K" center, notification
bell + help button + user avatar right. Left sidebar (240px, collapsible to 64px
icon rail): primary nav — Home, Inbox, Projects, Tasks, Docs; Projects section with
colored project dots + "New project" button; Favorited section; upgrade nudge at
bottom. ⌘K command palette modal: search input, grouped results (Recent, Projects,
People, Actions), keyboard shortcut hints per row.
Full prompt + mockdown → App Shell with Command Palette
Settings & Blog
18. Account Settings Panel
Sidebar nav with Profile, Security, Notifications, Billing, and Danger Zone tabs. Card-based forms.
Create an account settings page. Left sidebar (200px): nav links — Profile, Password
& Security, Notifications, Billing, Danger Zone. Active tab highlighted blue. On
mobile: horizontal scrollable tab strip. Default active: Profile — card with avatar
upload, Full Name, Display Name, Email (Verified badge), Bio textarea, Timezone
select, Save + Cancel buttons. Password section: Current/New/Confirm Password +
2FA toggle. Notifications: toggle list with labels and descriptions. Billing: current
plan card + payment method + invoice table.
Full prompt + mockdown → Account Settings Panel
19. Editorial Blog Article Layout
Reading progress bar, sticky table of contents, author bio, social share, related posts. Great for long-form content sites or marketing blogs.
Design a long-form editorial article page. Reading progress bar: thin blue fixed line
at viewport top that fills as user scrolls. Article header: category badge, H1
headline, subheadline, author row (avatar + name + date + read time), social share
buttons (X, LinkedIn, copy link), full-width 16:9 hero image. Two-column body:
left (~680px) — article content with styled H2s, blockquotes, and inline code; right
(260px, sticky) — Table of Contents with active section highlight. Below article:
author bio card, tags, social share row, related posts grid (3 cards).
Full prompt + mockdown → Editorial Blog Article
Marketing
20. Product Launch Email
Responsive HTML email with hero, 3-column feature highlights, testimonial, and CTA. Table-based for email client compatibility.
Design a responsive HTML email (max 600px, table-based, inline styles) for a SaaS
product launch. Pre-header: "🚀 Introducing the feature you've been waiting for..."
Header: centered logo, thin bottom border. Hero: 600×300 product screenshot, bold
centered headline "Introducing Smart Automations", subtitle, large blue CTA button
"See it in action →". 3-column feature highlights (stacked on mobile): each with
icon, bold name, 2-sentence description. Single testimonial quote with avatar, name,
and role. Footer: logo, unsubscribe link, company address.
Full prompt + mockdown → Product Launch Email
That's 20 layouts you can build in the next hour.
For the full prompt and mockdown for any of these, they're all in the layout library. And if you want to understand how to write your own prompts like these, Vibe Coding with AI: How to Describe Layouts That Actually Work breaks down the method.