You type "create a landing page" into your AI tool. What comes out looks like it was designed by a committee in 2015. Sound familiar?
Here's the truth nobody wants to admit: most people are using AI UI generation completely wrong. They blame the tool when the problem is their prompt. A vague prompt produces vague output. A specific prompt produces something you can actually ship.
I've spent the last year testing, refining, and cataloging over 300 AI prompts for every UI component you'll ever need. The ones in this guide aren't theoretical—they're battle-tested templates that produce production-ready code on the first try.
This is your complete reference. Bookmark it. Share it. Stop reinventing the wheel every time you need a new component.
Key Takeaways
- Specificity wins: Prompts with layout, style, and behavior details outperform vague requests by 10x
- The 5-element formula: Component + Layout + Visual Style + Content + Technical Specs = consistent results
- Copy-paste ready: Every category includes prompts you can use immediately with 0xMinds, v0, Lovable, or Cursor
- 300+ templates: Covers every major UI pattern from hero sections to dark mode toggles
- Organized by use case: Find what you need in seconds, not hours
Table of Contents
- How to Use This Prompt Collection
- The Anatomy of a Good AI Prompt
- Page-Level Components
- Navigation Components
- Form Components
- Data Display
- Feedback Components
- Advanced Components
- The Prompt Formula Cheat Sheet
- Frequently Asked Questions
- Related Guides
How to Use This Prompt Collection
This isn't a guide you read cover-to-cover. It's a reference you'll return to dozens of times.
Here's how to get maximum value:
For quick wins: Jump to the section matching your current task. Each category has copy-paste prompts that work immediately.
For learning: Read "The Anatomy of a Good AI Prompt" first. Understanding why these prompts work helps you adapt them for your specific needs.
For building complete pages: Start with the page-level components, then layer in navigation, forms, and data display. Each section references related guides that go deeper.
Pro tip: The prompts in this guide work across all major AI tools—0xMinds, v0, Lovable, Cursor, and more. The universal principle is specificity: the more context you provide, the better your output.
The Anatomy of a Good AI Prompt
Before diving into 300+ templates, let's understand what makes an AI prompt actually work.
Most failed prompts share the same problem: they're too vague. "Create a hero section" gives the AI no direction. It'll pick random defaults that probably don't match your vision.
Effective prompts include five key elements:
| Element | What It Covers | Example |
|---|---|---|
| Component Type | What you're building | Hero section, contact form, pricing table |
| Layout | Spatial arrangement | Split-screen, centered, grid layout |
| Visual Style | Colors, typography, mood | Dark mode, gradient background, minimal |
| Content | Text, data, interactions | Headlines, CTAs, placeholder data |
| Technical Specs | Framework, libraries | React, Tailwind, shadcn/ui |
Here's the formula in action:
[COMPONENT TYPE] for a [CONTEXT/INDUSTRY]. Layout: [SPECIFIC ARRANGEMENT] Visual: [COLORS, TYPOGRAPHY, MOOD] Content: [HEADLINES, CTAS, DATA] Technical: [FRAMEWORK + LIBRARIES]
Bad prompt:
Create a dashboard
Good prompt:
Create an analytics dashboard for a SaaS product. Layout: Left sidebar navigation, main content area with 4 metric cards at top, large line chart below, and recent activity table at bottom. Visual: Dark mode (#0a0a0a background), purple accent color, clean shadows. Content: Metric cards show Users, Revenue, Conversion, Churn with sample data. Chart shows last 30 days. Activity table has 10 rows. Technical: React, Tailwind CSS, Recharts for visualization, shadcn/ui components.
The second prompt eliminates guesswork. The AI knows exactly what to build.
Now let's apply this formula across every major UI component.
Page-Level Components (Hero, Landing, Pricing)
Page-level components are the big pieces: hero sections, feature grids, pricing tables, and full landing pages. These set the tone for everything else.
Hero Sections
The hero section has about 3 seconds to convince someone to stay. Generic prompts produce generic results—and generic results get ignored.
For deep-dive templates and 25+ variations, see our complete AI hero section prompts guide.
SaaS Hero Template:
Create a SaaS hero section for a project management tool. Layout: Split-screen, headline + CTAs on left, product mockup on right. Visual: White background, blue accent (#2563eb), clean shadows on mockup. Content: Bold headline about team productivity, "Start Free" primary CTA, "Watch Demo" secondary button. Trust badge showing "10k+ teams". Technical: React + Tailwind CSS, fully responsive (stack on mobile).
Startup Launch Hero:
Build a pre-launch hero for a fintech startup. Layout: Centered content, email capture prominent, waitlist counter. Visual: Dark mode with gradient mesh background (purple to blue), minimal. Content: Bold claim headline, single email input, "Join X others" counter. Technical: React, Tailwind, animate counter on load.
E-commerce Hero:
Fashion brand hero section, editorial style. Layout: Full-bleed product image with minimal text overlay. Visual: High contrast, magazine aesthetic, no clutter. Content: Brand name top-left, "Shop Collection" bottom-center. Technical: React + Tailwind, image lazy loading, responsive.
| Hero Type | Best For | Key Elements |
|---|---|---|
| Split-screen | SaaS, B2B | Product mockup + headline |
| Centered | Startups, launches | Email capture, social proof |
| Full-bleed | E-commerce, portfolios | Visual-first, minimal text |
| Video background | Agencies, premium brands | Atmosphere over information |
Landing Page Sections
Beyond the hero, landing pages need features, social proof, and calls-to-action. Our AI landing page prompts guide covers 50+ templates for every section.
Bento Grid Features:
Create a bento grid feature section with 6 cards. Layout: Asymmetric grid (2 large cards, 4 small). Visual: Muted backgrounds, purple accent on icons, subtle hover lift. Content: Icon + headline + one-line description per card. Features: Real-time sync, Team collaboration, Custom workflows, Analytics, API access, Priority support. Technical: React, Tailwind, CSS grid.
Testimonial Section:
Build a testimonial carousel with 3 visible cards. Layout: Horizontal scroll on mobile, cards side-by-side on desktop. Visual: Light background, large quotation marks as background element. Content: Quote, name, title, company, avatar for each. Auto-rotate. Technical: React, Tailwind, pause on hover.
For dedicated testimonial templates that build real trust, check our AI testimonial section prompts guide.
Pricing Tables
Pricing pages are conversion battlegrounds. The right prompt can mean the difference between "I'll think about it" and "take my money."
Three-Tier Pricing:
Design a pricing section with 3 tiers: Free, Pro, Enterprise. Layout: Three cards side-by-side, middle tier highlighted. Visual: Middle card elevated with shadow, "Most Popular" badge. Content: Plan name, price/month, feature list with checkmarks, CTA. Monthly/yearly toggle at top with "Save 20%" for yearly. Technical: React + Tailwind + shadcn/ui.
Comparison Table:
Create a pricing comparison table. Layout: Feature rows, plan columns, sticky header. Visual: Clean lines, checkmarks for included, X for excluded. Content: 10 feature rows, 3 plan columns with specific values. Technical: React, Tailwind, convert to accordion on mobile.
Our AI pricing table prompts guide has 20+ templates that convert—not just display.
Navigation Components (Navbar, Sidebar, Footer)
Navigation makes or breaks usability. Users should find what they need without thinking.
Navbars
Standard SaaS Navbar:
Create a navbar for a SaaS product. Layout: Logo left, links center, CTA button right. Visual: White background, subtle bottom border, fixed on scroll. Content: Links: Features, Pricing, Docs, Blog. CTA: "Get Started". Mobile: Hamburger menu with slide-in drawer. Technical: React, Tailwind, useState for mobile menu.
Mega Menu:
Build a navbar with mega menu dropdown. Layout: Standard navbar with Products dropdown showing categories. Visual: Mega menu opens to full-width with 3 columns of links. Content: Product categories with icons and descriptions. Technical: React, Tailwind, hover to open, click on mobile.
For 40+ navigation templates including complex mega menus, see our AI navbar & footer prompts guide.
Sidebars
Sidebars are essential for dashboards and admin panels. Get them wrong and your app feels like a maze.
Collapsible Dashboard Sidebar:
Create a collapsible sidebar for a SaaS dashboard. Layout: Icons when collapsed, icons + labels when expanded. Visual: Dark background, active state highlight, smooth transition. Content: 8 navigation items with icons, grouped into sections. Collapse button at bottom. User avatar at top. Technical: React, Tailwind, persist state in localStorage.
Admin Panel Sidebar:
Build an admin sidebar with nested navigation. Layout: Multi-level menu with expandable sections. Visual: Light mode, indented sub-items, arrow indicators. Content: Top-level: Dashboard, Users, Products, Settings. Each has 3-4 sub-items. Technical: React, Tailwind, recursive component for nesting.
Our AI sidebar & drawer prompts guide covers 30+ patterns for SaaS navigation.
Footers
Footers often get neglected—but they're prime real estate for links, social proof, and conversions.
Standard Footer:
Create a footer with 4 link columns and newsletter signup. Layout: Link columns left, newsletter form right, legal at bottom. Visual: Dark background, organized, social icons included. Content: Columns: Product, Company, Resources, Legal. Newsletter with email input and "Subscribe" button. Technical: React, Tailwind, mobile-responsive grid.
Form Components (Inputs, Validation, Multi-step)
Forms are deceptively hard. They look simple—a few inputs and a button—but edge cases will eat you alive if you're not specific.
Our AI form prompts guide has 35+ templates covering every form type. Here are the essentials:
Contact & Registration Forms
Contact Form with Validation:
Create a contact form with name, email, and message. Validation: All required, email format check, 500 char limit on message. States: Loading on submit, success toast, inline error messages. Technical: React Hook Form, Tailwind, accessible labels + ARIA.
Registration Form:
Build a signup form with name, email, password. Validation: Email format + "already exists" check, password strength meter. Content: Requirements checklist for password, terms checkbox. States: Loading, success redirect, error handling. Technical: React Hook Form, Zod validation, Tailwind.
Multi-Step Wizards
Onboarding Wizard:
Create a 3-step onboarding wizard. Step 1 - Personal: Name, email, avatar upload. Step 2 - Preferences: Industry dropdown, company size, use cases. Step 3 - Setup: Username with availability check, notification toggles. Include: Progress bar, Previous/Next buttons, validation per step, data persists between steps. Technical: React, Tailwind, form state management.
For complete onboarding flow patterns, see our AI onboarding flow prompts guide.
File Uploads
File uploads break constantly when prompts are too vague. Be explicit about behaviors.
Drag-and-Drop Uploader:
Create a file upload component with drag-and-drop. Features: Dropzone area, file preview, progress bar, file type validation. Limits: 5MB max, images only (jpg, png, webp). States: Idle, dragging over, uploading, complete, error. Technical: React, Tailwind, mock upload progress.
Our AI file upload prompts guide covers drag-drop, multi-file, and image cropping patterns.
Form Comparison
| Form Type | Key Challenge | Must-Have in Prompt |
|---|---|---|
| Contact | Spam prevention | Validation rules, success states |
| Registration | Password complexity | Strength meter, confirmation |
| Multi-step | State persistence | Progress indicator, navigation |
| File upload | Error handling | Size limits, type validation |
| Payment | Security perception | Card formatting, trust badges |
Data Display (Tables, Charts, Cards)
Dashboards live or die on data display. Tables need to sort. Charts need to inform. Cards need to organize.
Data Tables
Tables are notoriously tricky—sorting, filtering, and pagination all need explicit instructions.
Sortable Data Table:
Create a data table with sorting and filtering. Layout: Table with header row, 10 data rows, pagination at bottom. Features: Click header to sort (asc/desc indicators), search input above, column filters, row selection checkboxes. Visual: Clean borders, hover state, alternating row colors. Technical: React, Tailwind, TanStack Table patterns.
Admin User Table:
Build a user management table for an admin panel. Columns: Avatar, Name, Email, Role (badge), Status (badge), Actions. Actions: Edit button, delete with confirmation, status toggle. Features: Search, role filter dropdown, bulk actions. Technical: React, Tailwind, shadcn/ui Table components.
Our AI data table prompts tutorial has 15+ templates for complex tables.
Charts & Visualization
Charts require library specificity—Recharts, Chart.js, and D3 produce very different code.
Dashboard Line Chart:
Create a line chart showing revenue over time. Data: Last 30 days, mock data with upward trend. Features: Hover tooltip with exact values, axis labels, responsive. Visual: Single line in brand color, grid lines, clean labels. Technical: React, Recharts, Tailwind wrapper.
Multi-Chart Dashboard:
Build a dashboard section with 4 charts. Layout: 2x2 grid of chart cards. Charts: Line (revenue), Bar (users by region), Pie (traffic sources), Area (daily active users). Visual: Consistent color palette, chart titles, legends. Technical: React, Recharts, Tailwind grid.
For 25+ chart templates and data visualization patterns, check our AI chart prompts guide.
Dashboard Layouts
SaaS Dashboard:
Create a SaaS analytics dashboard. Layout: 4 metric cards top, large chart middle, activity table bottom. Metrics: Users, Revenue, Conversion %, Churn % with trend arrows. Chart: 30-day line chart, toggleable between metrics. Table: Recent activities with timestamp, user, action columns. Technical: React, Tailwind, Recharts.
Our AI dashboard prompts guide covers 40+ templates for admin panels and analytics views.
Feedback Components (Modals, Toasts, Alerts)
Feedback components tell users what's happening. Modals grab attention. Toasts confirm actions. Alerts warn of problems.
Modals & Dialogs
Confirmation Modal:
Create a confirmation dialog for delete actions. Layout: Centered modal with overlay, icon at top. Content: Warning icon (red), title "Are you sure?", description, Cancel and Delete buttons. Visual: Red accent for danger, subtle animation on open. Technical: React, Tailwind, focus trap, escape to close.
Form Modal:
Build a modal containing a contact form. Layout: Modal with header, form body, footer with buttons. Content: Name, email, message fields. Cancel + Submit buttons. Behavior: Validate before submit, close on success, show errors inline. Technical: React, Tailwind, shadcn/ui Dialog, React Hook Form.
Our AI modal & popup prompts guide has 30+ templates for every modal type.
Toast Notifications
Toast System:
Create a toast notification system with 4 variants. Types: Success (green), error (red), warning (yellow), info (blue). Features: Auto-dismiss after 4s, dismiss button, stacks multiple, position in top-right corner. Technical: React, Tailwind, context for global state.
Alert Components
Inline Alert:
Build alert components for 4 states. Types: Success, error, warning, info. Layout: Icon left, text right, optional dismiss button. Visual: Colored left border, muted background matching type. Technical: React, Tailwind, polymorphic component.
Advanced (Animations, Dark Mode, Accessibility)
Advanced components separate professional UIs from amateur ones. These patterns add polish that users feel even when they can't articulate it.
Animations & Micro-interactions
Animations done wrong are janky. Done right, they feel magical.
Hover Effects:
Create a card component with polished hover animations. Default: Subtle shadow, normal scale. Hover: Lifts (translateY -4px), shadow deepens, content shifts slightly. Transition: Smooth 200ms ease, no jank. Technical: React, Tailwind transitions, or Framer Motion.
Loading States:
Build a loading skeleton system for a card grid. Layout: 3x3 grid of skeleton cards. Animation: Pulse/shimmer effect on each skeleton. Match: Same dimensions as actual content cards. Technical: React, Tailwind animate-pulse.
Page Transitions:
Create page transition animations. Behavior: Fade out current page, fade in new page. Duration: 300ms, easing curve ease-in-out. Technical: Framer Motion AnimatePresence, React Router.
For comprehensive animation patterns, see our AI animation & micro-interactions tutorial.
Dark Mode
Dark mode isn't optional anymore—but implementing it wrong creates accessibility nightmares.
Theme Switcher:
Build a dark mode toggle with system preference detection. Features: Toggle button, persists preference in localStorage, respects system preference on first visit. Visual: Sun/moon icon, smooth transition between themes. Technical: React, Tailwind dark: classes, useEffect for detection.
Dark Mode Color System:
Create a component that demonstrates dark mode theming. Light: White backgrounds, dark text, colored accents. Dark: Near-black backgrounds (#0a0a0a), light text, adjusted accents. Ensure: Proper contrast ratios (4.5:1 minimum). Technical: Tailwind CSS dark mode, CSS custom properties.
Our AI dark mode prompts guide covers complete theme systems that don't break.
Accessibility
96% of AI-generated UIs fail basic accessibility audits. These prompts fix that.
Accessible Form:
Create a contact form following WCAG 2.1 AA standards. Requirements: - Labels associated with inputs (not placeholders only) - aria-required on required fields - aria-describedby linking errors to fields - Focus visible on all interactive elements - Error states not color-only - 44x44px minimum touch targets Technical: React, Tailwind, proper semantic HTML.
Keyboard Navigation:
Build a dropdown menu with full keyboard support. Keyboard: Arrow keys navigate, Enter selects, Escape closes, Tab moves to next focusable element. Visual: Clear focus indicator on active item. Technical: React, Tailwind, useRef for focus management.
Screen Reader Optimization:
Create an accordion component optimized for screen readers. Requirements: - Button triggers with aria-expanded - aria-controls linking to content panels - Content hidden with proper aria-hidden - Announce state changes Technical: React, Tailwind, semantic HTML.
The Prompt Formula Cheat Sheet
Here's a quick reference for writing prompts that work:
Essential Elements
1. COMPONENT TYPE: What are you building? 2. LAYOUT: How is it spatially arranged? 3. VISUAL STYLE: Colors, typography, mood 4. CONTENT: Text, data, interactions 5. TECHNICAL: Framework, libraries, constraints
Template by Component Type
Hero Section:
[Industry] hero section. Layout: [split/centered/full-bleed] Headline: [topic or text] CTA: [button text] Visual: [background, colors, mood] Technical: [framework]
Form:
[Form type] form with [fields]. Validation: [rules per field] States: [loading, success, error handling] Technical: [form library, styling]
Data Table:
[Context] data table. Columns: [list with types] Features: [sort, filter, pagination, selection] Visual: [styling details] Technical: [table library, framework]
Modal:
[Purpose] modal/dialog. Layout: [structure] Content: [elements inside] Behavior: [open/close, keyboard, focus] Technical: [component library]
Quick Quality Checklist
Before submitting any prompt:
- Specified component type and context
- Included layout details (not just "nice layout")
- Mentioned colors or design system
- Described all states (loading, success, error)
- Listed technical requirements (framework, libraries)
- Added mobile/responsive requirements
- Included accessibility if relevant
Frequently Asked Questions
What's the ideal length for an AI UI prompt?
3-7 sentences covering the five key elements: component, layout, visual, content, and technical specs. More detail helps, but don't write novels. If you're over 200 words, you're probably overcomplicating it.
Which AI tool works best with these prompts?
These prompts are tool-agnostic—they work with 0xMinds, v0, Lovable, Cursor, and most AI code generators. The principle (specificity) is universal. Some tools may interpret certain keywords differently, but the core approach applies everywhere.
How do I get consistent results across generations?
Include your design system constraints in every prompt: "Use Tailwind CSS, shadcn/ui components, Inter font, rounded-lg borders." Consistency comes from constraints. Without them, each generation is a fresh roll of the dice.
Can I combine prompts from different sections?
Absolutely. "Take the sidebar from the navigation section and pair it with the data table from the data display section" works well. Think of these as LEGO blocks—they're designed to work together.
Why does my output still look generic sometimes?
You're probably missing specific visual details. Add one unexpected element: a specific animation, unusual typography weight, distinctive color combination, or named design inspiration ("inspired by Linear's aesthetic"). Generic prompts produce generic outputs.
How do I handle complex multi-component pages?
Break them into sections. Generate each section separately, then assemble. Trying to generate an entire complex page in one prompt often produces lower quality than building incrementally.
What if the output is close but not perfect?
Iterate. Add the specific fix to your prompt: "Same as before but make the buttons rounded-full instead of rounded-lg." Small refinements compound into exactly what you need.
How often should I update my prompt library?
Whenever you find a prompt that works well for your specific use case, save it. The templates here are starting points—your personalized versions with your brand colors, your preferred component library, and your common patterns will be even more valuable.
Common Mistakes to Avoid
After reviewing thousands of AI-generated UIs, these are the patterns that consistently produce poor results:
Mistake 1: The Vague Aesthetic
Don't do this:
Create a modern, clean dashboard
"Modern" and "clean" are meaningless to an AI. Every designer interprets these differently. The AI will pick random defaults that probably don't match your mental image.
Do this instead:
Create a dashboard with: - White background, 4px border radius, subtle shadows - Inter or system font, 14px base size - Purple (#7c3aed) accent color - Inspired by Linear's minimal aesthetic
Mistake 2: Missing States
Forms without error states. Buttons without loading indicators. Cards without hover effects. If you don't specify states, you won't get them.
Always include:
- Loading states for any async action
- Error states for validation
- Empty states for lists and tables
- Hover/focus states for interactive elements
- Success confirmation for form submissions
Mistake 3: Ignoring Mobile
"Make it responsive" is better than nothing, but it's still vague. Specify what happens at each breakpoint.
Be explicit:
Responsive behavior: - Desktop: 3 cards per row - Tablet: 2 cards per row - Mobile: 1 card per row, stacked
Mistake 4: Forgetting Accessibility
Most AI outputs skip accessibility entirely. If you need accessible components (and you do), explicitly request:
- Proper heading hierarchy
- ARIA labels and roles
- Keyboard navigation
- Focus management
- Color contrast requirements
- Screen reader considerations
Mistake 5: Generic Content
Placeholder text like "Lorem ipsum" produces generic-looking output. Use realistic content:
Content: Real headlines about productivity gains. Actual feature names: "Smart Search", "Team Workspaces". Realistic metrics: "2.5x faster", "10k+ users".
Prompt Iteration Workflow
Getting perfect results on the first try is rare. Here's a workflow for refining prompts efficiently:
Step 1: Start Broad
Your first prompt should cover the essentials: component type, basic layout, and technical stack. Don't over-engineer the first attempt.
Step 2: Evaluate Structurally
Is the layout right? Are the major sections where you expect them? If structure is wrong, fix that before worrying about colors.
Step 3: Refine Visually
Once structure is correct, add visual refinements: colors, typography, spacing, shadows. These are easier to adjust than fundamental layout changes.
Step 4: Add Polish
Final pass: animations, hover states, micro-interactions. These are the details that separate good from great.
Step 5: Document What Works
When you nail a prompt, save it. Build your own library of templates customized for your tech stack and design system.
Building Your Prompt Library
The templates in this guide are starting points. Your personalized library will be even more valuable.
What to Save
- Prompts that worked first try
- Your brand colors and design system constraints
- Common component patterns for your app
- Technical requirements (libraries, frameworks)
- Accessibility requirements
Template Structure
Create a template for each component type you use regularly:
## [Component Name] ### Context - Used for: [describe use case] - Design system: [your constraints] - Framework: [your stack] ### Base Prompt [Your tested prompt here] ### Variations - Dark mode version: [prompt] - Compact version: [prompt] - Mobile-first version: [prompt]
Sharing and Collaboration
If you're on a team, maintain a shared prompt library. Consistency across team members means consistent UI output. Your junior developers can generate the same quality components as your seniors.
Related Guides
This pillar page gives you the overview. These guides go deep on specific component types:
Page Components
- AI Landing Page Prompts: 50+ Templates — Complete page templates from hero to footer
- AI Hero Section Prompts: 25+ Templates — Stop-the-scroll hero sections
- AI Pricing Table Prompts — Tables that actually convert
- AI Testimonial Section Prompts — Build trust with social proof
Navigation
- AI Navbar & Footer Prompts: 40+ Templates — Professional navigation patterns
- AI Sidebar & Drawer Prompts: 30+ Templates — SaaS and admin navigation
Forms & Input
- AI Form Prompts: 35+ Templates — Contact forms to multi-step wizards
- AI File Upload Prompts — Drag-drop, progress, validation
- AI Onboarding Flow Prompts — User journeys that convert
Data & Dashboards
- AI Dashboard Prompts: 40+ Templates — Admin panels and analytics
- AI Data Table Prompts: 15+ Templates — Sortable, filterable tables
- AI Chart Prompts: 25+ Templates — Data visualization done right
Feedback & Interaction
- AI Modal & Popup Prompts: 30+ Templates — Dialogs, confirmations, alerts
Advanced
- AI Animation Prompts — Micro-interactions and transitions
- AI Dark Mode Prompts — Theme systems that work
Start Building
You now have the complete playbook for AI UI generation. 300+ templates organized by use case. A formula that works across any tool. Deep-dive guides for every major component.
But prompts are only as good as what you build with them.
Pick a template. Customize it for your project. Generate something real. The best UI component is the one that's live—not the one you're still perfecting.
Ready to try these prompts? Start building with 0xMinds →
Written by the 0xMinds Team. We build AI tools for frontend developers who ship.