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.
Last updated
Was this helpful?
Was this helpful?
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.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.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.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.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}}.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.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.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.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.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}}.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}}.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}}.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.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}}.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}}.
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}}.
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}}.
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}}.
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}}.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}}.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}}.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}}.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}}.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}}.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}}.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}}.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}}.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}}.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.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.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}}.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}}.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}}.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.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}}.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.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}}.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}}.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}}.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.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}}.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.