Prompt Examples & Use Cases

This page contains a curated collection of practical use cases for what you can create using Maker's AI-powered frontend tools.

Each card below includes a detailed prompt you can use as a starting point to generate powerful, responsive, and on-brand components and layouts. These are grouped into four categories: Pages, Sections, Components, and Animations & Effects.

Use them to:

Get inspired when starting a new build
Learn prompt structure best practices
Speed up prototyping and iteration
Understand how to break down use cases into UI logic

💡 Heads up!

AI output can vary — results may not always be perfect or follow your intentions directly. The prompts listed here are just examples to get you started. For best results, iterate, test, and refine using your brand tokens and structure.

You can click the prompt box to reveal a convenient copy button — so you can quickly paste and tweak the examples inside Maker.

Enhanced PDP

Design a high-conversion product detail page (PDP) for a fashion brand.
- Audience: DTC shoppers looking for premium garments.
- Primary goal: Increase add-to-cart rate by showcasing trust and product clarity.
- Layout: Full-width hero banner with high-res image, product name, and CTA above the fold.
- Product Gallery: Lightbox-enabled, swipeable on mobile.
- Comparison: Grid or carousel with similar variants and price differences.
- Trust Bar: Include return policy, shipping info, and secure checkout icons.
- Review Block: Add collapsible customer reviews with star highlights.
- Responsive: Optimized for mobile-first experience, scaling up to desktop.
- Style: Follow {{theme.tokens.style}} with emphasis on editorial clarity.

SaaS Landing

Create a responsive SaaS landing page for a product launch.
- Audience: Founders and growth marketers exploring SaaS tools.
- Goal: Generate free trial signups and increase feature engagement.
- Hero: Full-width hero with value prop headline, CTA, and supporting graphic.
- Features: Icon blocks with short benefit copy (3 to 6 features).
- Testimonials: Quote carousel with logos of recognizable clients.
- CTA: Sticky or repeated CTAs across key scroll points.
- Pricing: Tiered plan layout with toggle (monthly/yearly).
- Footer: Include trust logos, terms, and additional CTA.
- Responsive: Fluid stacking layout for mobile and tablet.
- Style: Use {{theme.tokens.style}}, with a focus on clarity and conversion.

Collection / Lookbook

Design a collection landing page or seasonal lookbook.
- Audience: Fashion-forward users discovering seasonal items.
- Goal: Drive product discovery and increase time on site.
- Layout: Grid or carousel with auto masonry for image flow.
- Hero: Include a styled collection intro section with headline + visual.
- Products: Hover-on-image reveals style name and price.
- Filtering: Optional collection tags or category chips.
- Interaction: Smooth scroll or snap to sections for curated drops.
- Responsive: Prioritize thumb-based navigation for mobile.
- Style: Align with {{theme.tokens.style}} using bold, modern visuals.

Pricing & Plans

Create a clear pricing page that helps users compare and decide.
- Audience: New and existing SaaS users evaluating plans.
- Goal: Increase plan upgrades and reduce confusion.
- Layout: 3 or 4 column grid with toggles for Monthly/Annual pricing.
- Highlights: Use ribbons or badges to mark 'Most Popular'.
- Features: Each plan lists features in a consistent format.
- CTA: Button beneath each plan with consistent styling.
- Responsive: Columns stack into cards on mobile.
- Style: Follow {{theme.tokens.style}} with clear visual hierarchy.

Event Page + Calendar

Design an event landing page with RSVP capabilities.
- Audience: People interested in online/offline events.
- Goal: Maximize RSVP and calendar syncs.
- Hero: Event title, date, and hero image or video.
- Details: Event description, agenda, location or stream info.
- RSVP: Form with confirmation state and calendar add option.
- Countdown: Optional timer component if time-sensitive.
- Responsive: Must perform cleanly on mobile.
- Style: Branded look using {{theme.tokens.style}}.

FAQ with Search Bar

Design a searchable FAQ section to guide users.
- Audience: New or confused users needing product or service guidance.
- Goal: Reduce support load and bounce rate by providing quick answers.
- Layout: Full-width section with centered search bar and grouped questions.
- Interaction: Search input filters matching answers in real-time.
- Answers: Accordion-style expandable blocks organized by category.
- Tags: Optional labels or filters for better organization.
- Responsive: Fully collapsible for mobile views.
- Style: Use {{theme.tokens.style}} with clean readability and clear spacing.

Step-by-Step Wizard

Create a step-by-step guided wizard interface.
- Audience: Users performing a setup, form fill, or configuration process.
- Goal: Improve completion rate through guided progress.
- Layout: Linear or segmented progress bar with numbered steps.
- Content: Each step includes question, field, or action with tooltip if needed.
- Transitions: Buttons to go back/next with validation checks.
- Visuals: Use illustrations or icons where possible for clarity.
- Responsive: Mobile-friendly stacked card flow.
- Style: {{theme.tokens.style}}, intuitive and smooth step flow.

Survey & Feedback Form

Design a feedback or survey form interface.
- Audience: Users post-purchase or after interaction with feature.
- Goal: Collect sentiment and actionable data to improve experience.
- Layout: One-column form with clear spacing and optional sections.
- Inputs: Star ratings, multiple-choice, open text, and NPS.
- CTA: Submit button with success confirmation.
- Conditional Logic: Show/hide follow-up fields based on answers.
- Responsive: Thumb-friendly tap targets and clean spacing.
- Style: Apply {{theme.tokens.style}}, user-friendly and non-intrusive.

Blog Post

Create a structured blog post layout.
- Audience: Users consuming thought leadership or SEO-driven content.
- Goal: Increase dwell time and shareability of the content.
- Layout: Featured image, headline, byline, publish date, and tags.
- Body: Rich text formatting with subheads, quotes, and embedded media.
- Meta: Estimated reading time, author bio snippet, share buttons.
- Navigation: Related posts and breadcrumbs below content.
- Responsive: Text line length optimized for readability on all screens.
- Style: Use {{theme.tokens.style}} with elegant editorial tone.

Timeline / About Us

Design an animated timeline for About page.
- Audience: Visitors evaluating credibility or culture of the company.
- Goal: Convey story and key milestones with visual clarity.
- Layout: Vertical or horizontal scroll with time anchors and image pairings.
- Content: Each item includes date, title, description, optional media.
- Animation: Fade-in or slide-in as user scrolls.
- Hero: Optional mission statement or founder intro at the top.
- Responsive: Scroll-pinned behavior on mobile.
- Style: Clean and legible, following {{theme.tokens.style}}.

Showcase Page

Create a showcase-style project or case study layout.
- Audience: Leads or customers evaluating the brand’s capability.
- Goal: Highlight results and creative approach.
- Layout: Hero with summary, followed by sections: goals, process, results.
- Media: Full-width images, sliders or embedded video.
- Details: Metrics or testimonials at bottom.
- Responsive: Layout adapts for long scrolls and swipeable elements.
- Style: Modern, clear layout using {{theme.tokens.style}}.

Location Page with Map

Design a location or store finder page.
- Audience: Users planning a visit to store, studio, or event space.
- Goal: Help users easily find and access physical locations.
- Hero: Address and brand image.
- Map: Embedded map (Google Maps or Mapbox) with marker and hover info.
- Details: Address, phone, hours, parking, and ‘Get directions’ CTA.
- Optional: Region selector or multiple location listings.
- Responsive: Scroll-pinned map or collapsed address stack on mobile.
- Style: Practical and polished using {{theme.tokens.style}}.

Hero Sections

Create a dynamic hero section for a landing or homepage.
- Audience: First-time visitors or return users needing quick context.
- Goal: Communicate value and encourage immediate action (e.g., signup or scroll).
- Layout: Full-width block with centered or side-aligned headline, subtitle, and CTA.
- Media: Optional image, video, or animation background.
- CTA: Single primary button with optional secondary link.
- Interaction: Text fade-in, scroll indicator, or countdown timer.
- Responsive: Mobile layout stacks elements vertically with centered CTA.
- Style: Follow {{theme.tokens.style}}, striking and accessible.

Social Proof / Testimonials

Add a social proof block using testimonials or brand logos.
- Audience: Shoppers or leads assessing product or service trustworthiness.
- Goal: Reinforce credibility through visual or quote-based proof.
- Layout: Carousel or grid with quotes, star ratings, and customer photos.
- Logos: Optionally include partner or client logo bar above or below.
- Highlight: Use emphasized keywords or animated stars.
- Responsive: Stack logos or testimonials appropriately on mobile.
- Style: Clean and authentic tone using {{theme.tokens.style}}.

Before & After Compare

Create a draggable before-and-after comparison slider.
- Audience: Users needing proof of transformation (e.g., design, beauty, fitness).
- Goal: Visually demonstrate improvements or outcomes.
- Layout: Side-by-side image slider with draggable control.
- Labels: Add optional 'Before' and 'After' tags or icons.
- Context: Short caption or overlay explaining change.
- Responsive: Full-width interaction that remains intuitive on touch devices.
- Style: Polished layout that emphasizes contrast, using {{theme.tokens.style}}.

Benefit Grids

Create a responsive grid layout to highlight benefits.
- Audience: Shoppers or leads scanning for product value.
- Goal: Provide fast, visual access to key differentiators.
- Layout: 2–4 column responsive grid with icon + title + short text.
- Optionally: Use light background sections to alternate rhythm.
- Icons: Branded SVGs or theme-matched icons.
- Responsive: Stack to single column on mobile.
- Style: Clean, modular blocks following {{theme.tokens.style}}.

Interactive FAQ w/ Search Bar

Design a smart FAQ section with live search.
- Audience: Visitors who need self-service troubleshooting or guidance.
- Goal: Increase answer discovery and reduce support load.
- Search: Keyword input with real-time filtering of answers.
- Accordion: Expand/collapse grouped questions by topic.
- Highlighting: Auto-focus or highlight matched terms.
- Tags: Category chips for quick filtering.
- Responsive: Optimized touch targets and reduced scroll friction.
- Style: Support-focused and highly legible using {{theme.tokens.style}}.

Masonry Gallery

Create a masonry-style image or video gallery.
- Audience: Users visually exploring creative content or inspiration.
- Goal: Showcase media in a natural, engaging flow.
- Layout: Masonry or Pinterest-style grid with auto-fit columns.
- Media: Allow mix of image and video with hover state or play button.
- Overlay: Optional titles, tags, or lightbox triggers on hover.
- Pagination: Infinite scroll or load more button.
- Responsive: Adaptive column count based on device width.
- Style: Crisp, minimal aesthetic aligned with {{theme.tokens.style}}.

Comparison Tables

Design a side-by-side comparison table for products or plans.
- Audience: Decision-stage users comparing options.
- Goal: Make it easy to evaluate differences and choose the right option.
- Layout: Table with columns for each product/plan, rows for features.
- Highlight: Emphasize most popular or recommended option.
- Features: Use checkmarks, tooltips, or icons for clarity.
- Responsive: Transform table into stacked cards or scrollable grid on mobile.
- Style: Structured and easy to scan using {{theme.tokens.style}}.

Feature Accordions

Create a collapsible accordion layout for feature details.
- Audience: Users reviewing feature explanations or technical info.
- Goal: Make content easy to explore without overwhelming the layout.
- Layout: Stacked vertical accordions with headers and expandable content.
- Interaction: Smooth open/close animation with indicator icons.
- Use case: Ideal for feature sets, product specs, or FAQs.
- Responsive: Full-width and tap-friendly for mobile.
- Style: Structured clarity using {{theme.tokens.style}}.

Autoplay Video Sections

Design a full-width section with autoplay video.
- Audience: Emotion-driven users exploring brand/product story.
- Goal: Tell a story or demonstrate value without relying on text.
- Layout: Background or inline video with overlay headline and subtext.
- Interaction: Mute by default, loop on scroll; autoplay must be smooth.
- CTA: Optional button placed over or below video.
- Responsive: Fallback image on mobile or reduced motion.
- Style: Immersive and branded, using {{theme.tokens.style}}.

Blog Highlights Slider

Create a horizontal blog highlights slider.
- Audience: Visitors scanning for updates, inspiration, or stories.
- Goal: Increase blog traffic and improve time on site.
- Layout: Horizontal card slider with thumbnail, title, tag, and publish date.
- Navigation: Scroll or swipe with visible arrows or snap behavior.
- Cards: Clickable with brief summary or hover animation.
- Responsive: Scrollable on touch, stacked fallback if needed.
- Style: Visually engaging and editorial using {{theme.tokens.style}}.

Sticky Elements

Add sticky UI elements to improve navigation and usability.
- Audience: Users reading long pages or completing complex flows.
- Goal: Maintain visibility of key CTAs, headers, or tools.
- Use case: Sticky navbars, add-to-cart buttons, section indicators.
- Behavior: Stick at top or bottom on scroll with smooth animation.
- Breakpoints: Define stickiness for desktop and/or mobile as needed.
- Responsive: Ensure overlap with content is avoided.
- Style: Lightweight and non-intrusive using {{theme.tokens.style}}.

Interactive Feature Tabs

Create a tabbed interface to display product features or comparisons.
- Audience: Users seeking interactive demos or segmented info.
- Goal: Improve comprehension of complex features or variations.
- Layout: Horizontal tab bar with icon/label combo.
- Content: Swap copy, media, or embedded components on selection.
- Animation: Smooth fade or slide transitions between tabs.
- Responsive: Collapse tabs into accordion or scrollable nav.
- Style: Highly interactive but minimal, using {{theme.tokens.style}}.

Carousel / Sliders

Create a responsive carousel or slider for showcasing content.
- Audience: Visitors navigating image galleries, testimonials, or featured products.
- Goal: Allow compact and interactive display of multiple items.
- Layout: Horizontal slider with image, label, and optional CTA.
- Navigation: Swipe gestures, arrows, or dot indicators.
- Content: Each slide may include text, rating, or clickable links.
- Responsive: Touch-optimized interaction on mobile; keyboard accessible on desktop.
- Style: Smooth transitions, consistent spacing, using {{theme.tokens.style}}.

Tabs Switcher

Add a tab switcher for toggling between content blocks.
- Audience: Users comparing data, specs, or browsing help topics.
- Goal: Reduce scroll fatigue and group content logically.
- Layout: Horizontal tab row above switchable content area.
- State: Active tab highlighted with animation or visual cue.
- Interaction: Smooth transition between tabs with no page reload.
- Responsive: Stack into vertical list or scrollable tab bar on mobile.
- Style: Minimal, intuitive interface aligned with {{theme.tokens.style}}.

Lightbox Modals

Implement a lightbox modal system for images, videos, or embedded elements.
- Audience: Users engaging with product images, galleries, or feature previews.
- Goal: Provide immersive experience for focused content.
- Trigger: Clickable thumbnail, CTA, or icon to open modal.
- Layout: Centered overlay with darkened background and close button.
- Features: Esc key to close, optional zoom controls or fullscreen toggle.
- Responsive: Scales to viewport with swipe dismissal on mobile.
- Style: Elegant and non-distracting using {{theme.tokens.style}}.

Tooltip Hints

Add contextual tooltips for terms or icons in the interface.
- Audience: Users needing extra clarity without leaving the page.
- Goal: Explain technical terms or icons in a minimal, helpful way.
- Trigger: Hover or tap on icons or underlined keywords.
- Placement: Top or side depending on screen edge.
- Content: One or two short lines of text only.
- Responsive: Touch-friendly delay or tap-to-close behavior.
- Style: Clean, minimal, theme-consistent using {{theme.tokens.style}}.

Dark Mode Toggle

Implement a dark mode toggle with saved preference state.
- Audience: Users on low-light environments or with visual comfort preferences.
- Goal: Improve accessibility and personalization.
- Position: Top-right or in user settings panel.
- Behavior: Instant theme swap across all tokens (background, text, buttons).
- State: Save preference to local storage or session.
- Responsive: Ensure consistent theme behavior across breakpoints.
- Style: Use inverted {{theme.tokens.style}} definitions for dark mode.

Multilingual Switcher

Add a multilingual toggle to switch between languages.
- Audience: Global users or regions with multiple language needs.
- Goal: Let users toggle language without leaving the current page.
- Layout: Simple dropdown or flag icon group in header.
- Behavior: Update copy across entire interface (texts, labels, CTAs).
- Accessibility: Announce changes and use ARIA roles where needed.
- Responsive: Compact dropdown or icon-only toggle on mobile.
- Style: Maintain layout stability using {{theme.tokens.style}} regardless of language.

Marquee Text

Implement a horizontally scrolling marquee text component.
- Audience: Visitors on landing pages or promo sections.
- Goal: Highlight key phrases, categories, or announcements.
- Content: Short sentence or set of tags repeated in a loop.
- Speed: Adjustable scroll speed with optional hover pause.
- Layout: Full-width or contained block with typographic emphasis.
- Responsive: Adapts font size and scroll speed on mobile.
- Style: Bold, high-contrast typography using {{theme.tokens.style}}.

Countdown Timers

Add a countdown timer to indicate urgency for a campaign or event.
- Audience: Visitors viewing a limited-time deal or registration page.
- Goal: Increase conversions by emphasizing time sensitivity.
- Layout: Days, hours, minutes, seconds in a horizontal row or stacked.
- End Behavior: Display message or CTA once timer completes.
- Placement: Inline with CTA or in a sticky banner.
- Responsive: Auto-reflow and rescale layout on small screens.
- Style: Clear, bold numbers with branded accents from {{theme.tokens.style}}.

FABs (Floating Action Buttons)

Create a floating action button (FAB) for quick interaction.
- Audience: Mobile users or UIs needing persistent actions.
- Goal: Improve accessibility to high-priority tools like Chat, Buy, or Help.
- Placement: Bottom-right or bottom-center with z-index elevation.
- Behavior: Expand to show multiple actions on click (optional).
- Icon: Single icon or + icon with motion hint.
- Responsive: Tappable area respects safe zones on mobile.
- Style: Circular, clean visual hierarchy aligned with {{theme.tokens.style}}.

Scroll-Triggered Fade

Add scroll-triggered fade-in animation to elements.
- Audience: Users reading long-form or storytelling content.
- Goal: Improve visual rhythm and focus without overwhelming the user.
- Target: Apply to sections, cards, images, or text blocks.
- Behavior: Elements fade in as they enter viewport (once or repeatable).
- Delay: Optional staggered timing per block.
- Responsive: Timing and distances adjust for mobile interaction.
- Style: Subtle and smooth, using {{theme.tokens.style}} for animation timing.

Parallax Speed Layers

Create a parallax effect with multiple speed layers.
- Audience: Visitors on branded storytelling or product feature pages.
- Goal: Add dimensionality and elegance through scroll interaction.
- Layers: Background, midground, foreground content with varying scroll speeds.
- Target: Images, illustrations, or abstract shapes.
- Interaction: Scroll-controlled, non-distracting speed differential.
- Responsive: Disable or simplify for mobile to preserve performance.
- Style: Modern, atmospheric implementation aligned with {{theme.tokens.style}}.

Staggered Hero Entrance

Apply staggered entrance animations to hero section elements.
- Audience: First-time visitors arriving on marketing or campaign pages.
- Goal: Draw attention to key message hierarchy with motion.
- Targets: Title, subtitle, CTA, and media all enter sequentially.
- Timing: Use delays between each element to build rhythm.
- Behavior: Triggered on initial page load, not repeated on scroll.
- Responsive: All animations should feel fast and fluid on mobile.
- Style: Timed transitions in sync with {{theme.tokens.style}} motion tokens.

Infinite Marquee Text

Implement an infinite marquee effect for horizontally scrolling text.
- Audience: Users browsing hero sections or campaign banners.
- Goal: Add motion emphasis to key slogans, tags, or categories.
- Behavior: Text scrolls endlessly in one direction (optional hover pause).
- Layout: Looping in-line element or banner strip with overflow hidden.
- Speed: Adjustable and consistent across devices.
- Responsive: Scales typography and padding for mobile.
- Style: Bold typography and seamless looping using {{theme.tokens.style}}.

Animated Text

Apply animated text styling to important headlines or callouts.
- Audience: Readers on marketing sections or stat callouts.
- Goal: Enhance message hierarchy and visual interest.
- Animation Types: Typewriter, reveal, blur-in, or wave effect.
- Timing: Delayed entry on scroll or load.
- Use case: Section headers, stats, or intro lines.
- Responsive: Animation should feel fast and intentional on mobile.
- Style: On-brand and legible motion synced with {{theme.tokens.style}}.

Number Count-Up

Add a number count-up animation to stat blocks or KPI bands.
- Audience: Visitors reviewing social proof, revenue, or growth numbers.
- Goal: Create a sense of motion and legitimacy to key data.
- Behavior: Animate from 0 to value on scroll into view.
- Format: Thousands separator, optional prefix/suffix (e.g. $, %).
- Speed: 1–2 seconds, based on number size.
- Responsive: Size and alignment adapt to smaller screens.
- Style: Visually punchy and thematically bold using {{theme.tokens.style}}.

Floating Elements

Add slow-moving floating elements to the background or layout.
- Audience: Users on storytelling pages or visual-first sections.
- Goal: Enhance visual richness without distracting from core content.
- Behavior: Slow, continuous movement along X/Y axis or float loop.
- Use case: Icons, shapes, or brand motifs subtly animating in background.
- Performance: Pause or reduce motion on low-power/mobile devices.
- Layering: Ensure elements remain behind interactive content.
- Style: Light, ambient use of {{theme.tokens.style}} motion patterns.

Flip Card on Click

Create a card that flips on click or tap to reveal more information.
- Audience: Visitors browsing features, pricing, or product details.
- Goal: Allow compact display of dual-sided content (e.g., question/answer, front/back).
- Animation: 3D rotation effect with smooth easing.
- Content: Front includes teaser (icon/title); back includes full description or CTA.
- Interaction: Tap/click to toggle; esc or click outside to reset optional.
- Responsive: Touch-friendly, stacking behavior on mobile.
- Style: Branded color and elevation, using {{theme.tokens.style}}.

Viewport Progress Bar

Add a viewport progress indicator bar at the top of the screen.
- Audience: Users navigating long-form content or scrollable sections.
- Goal: Improve content flow awareness and reduce bounce.
- Position: Fixed top (or optional left side) bar.
- Behavior: Fills as user scrolls through the page.
- Style: Thin, unobtrusive bar with motion easing based on {{theme.tokens.style}}.
- Responsive: Width-based and compatible with mobile Safari/Chrome.
- Accessibility: ARIA label and focus visibility respected.

PreviousPrompt Basics NextDebugging with Prompts

Last updated 5 months ago

Was this helpful?