Image AI Concept ArtIntermediate60 minSaves 1 hour

SaaS Pricing Page Mockup with Tiered Comparison

Q: How do I ensure the generated mockup matches my company's existing brand identity?

Provide precise inputs for `{{company_name}}`, `{{product_name}}`, `{{brand_color_palette}}` (with hex codes), and `{{font_styles}}`. The more specific your inputs, the closer the visual alignment will be to your brand.

SaaS PMMs and web designers: rapidly generate brand-consistent pricing page mockups. Visualize three-tiered layouts with comparison tables and subscription toggles for faster design cycles.

This prompt helps PMMs and web designers at SaaS companies generate UI-fluent, brand-consistent pricing page mockups. It focuses on a three-tiered layout, including a feature comparison table and an annual/monthly subscription toggle for dynamic pricing display.

Midjourney Flux

READY-TO-USE PROMPT

Copy Prompt

prompt.txt

Role: Act as a UI/UX designer specializing in SaaS product interfaces. Your expertise lies in creating clear, functional, and aesthetically consistent digital experiences, particularly for critical conversion points like pricing pages.

Context: I am developing a new pricing page for {{company_name}}'s {{product_name}} product or redesigning an existing one. The objective is to present a three-tiered subscription model clearly and persuasively to potential customers. This page needs to communicate value proposition effectively through feature comparisons and offer flexible billing options. The design must align with our established brand identity, ensuring a professional and trustworthy appearance.

Task: Generate a high-fidelity visual mockup description for a SaaS pricing page. This description should be comprehensive enough for an advanced image generation model to produce a detailed, actionable visual. Focus on the core elements: three distinct pricing tiers, a comparative feature table, and a functional annual/monthly billing toggle.

Constraints:
Screen Type: Design primarily for a desktop web interface. The layout should imply responsiveness, but the primary view is a standard desktop resolution.
Layout: Employ a clean, modern, and intuitive layout. The three pricing tiers should be prominently displayed, perhaps in a card-like structure, with a clear visual hierarchy guiding the user's eye. Ensure ample white space for readability. The feature comparison table should be concise and easy to scan, highlighting key differentiators between tiers. The annual/monthly toggle should be a clear, interactive element positioned logically, typically above the pricing tiers.
Palette: Adhere strictly to the provided `{{brand_color_palette}}`. This palette dictates the primary, secondary, accent, and neutral colors used throughout the page. If a specific palette is not provided, use a professional, minimalist SaaS-appropriate color scheme (e.g., a dominant cool tone like blue or teal, complemented by grays, whites, and a single accent color for calls-to-action).
Typography: Implement `{{font_styles}}` for all textual elements, including headings, subheadings, body text, and button labels. If specific font styles are not provided, use a clean, modern sans-serif font family (e.g., Inter, Lato, Montserrat) for optimal legibility across different screen sizes. Ensure consistent font sizing and weighting.
Interactive States: Depict the default state of the pricing page (e.g., monthly billing selected, no tier highlighted). Additionally, describe the hover state for call-to-action buttons (e.g., a slight color change, shadow, or subtle animation). Consider how the annual/monthly toggle visually changes when activated.
Negatives: Avoid any elements that detract from a professional SaaS aesthetic. This includes: overly complex animations, cartoonish or overly playful graphic elements, cluttered layouts, excessive use of gradients, or any stock photography featuring people. The focus should be on clean UI elements and data presentation.

Output: A detailed textual description formatted for image generation, covering the screen type, overall layout, specific color palette application, typography choices, and descriptions of key interactive states.

Estimated results

DifficultyIntermediate

Setup time60 min

Time saved1 hour

Best modelsMidjourney, Flux

Best audienceSaaS

Editor's note

Why this prompt matters

Developing an effective SaaS pricing page often involves significant iteration between product marketing, design, and development teams. The challenge lies in translating strategic pricing models into a clear, visually appealing interface that converts. Product marketing managers need to ensure the value proposition of each tier is communicated accurately, while web designers focus on user experience and brand consistency. This often means delays as mockups are created, reviewed, and revised.

This workflow addresses the bottleneck by enabling rapid generation of high-fidelity pricing page mockups. It is designed for SaaS product marketing managers and web designers who need to visualize tiered subscription models, feature comparison tables, and annual/monthly billing toggles without extensive manual design work. By providing specific brand and layout parameters, teams can quickly produce multiple design options that align with their brand guidelines.

The prompt is most useful when you need to explore different visual approaches for a new pricing structure, or when you are redesigning an existing page and require multiple layout variations for A/B testing or internal stakeholder review. It streamlines the initial conceptualization phase, allowing teams to move from idea to visual representation in minutes, accelerating the overall design cycle.

Anatomy

Prompt engineering breakdown

Role

Act as a UI/UX designer specializing in SaaS product interfaces. Your expertise lies in creating clear, functional, and aesthetically consistent digital experiences, particularly for critical conversion points like pricing pages.

Context

I am developing a new pricing page for {{company_name}}'s {{product_name}} product or redesigning an existing one. The objective is to present a three-tiered subscription model clearly and persuasively to potential customers. This page needs to communicate value proposition effectively through feature comparisons and offer flexible billing options. The design must align with our established brand identity, ensuring a professional and trustworthy appearance.

Goal

Generate a high-fidelity visual mockup description for a SaaS pricing page. This description should be comprehensive enough for an advanced image generation model to produce a detailed, actionable visual. Focus on the core elements: three distinct pricing tiers, a comparative feature table, and a functional annual/monthly billing toggle.

Constraints

Screen Type: Design primarily for a desktop web interface. The layout should imply responsiveness, but the primary view is a standard desktop resolution. Layout: Employ a clean, modern, and intuitive layout. The three pricing tiers should be prominently displayed, perhaps in a card-like structure, with a clear visual hierarchy guiding the user's eye. Ensure ample white space for readability. The feature comparison table should be concise and easy to scan, highlighting key differentiators between tiers. The annual/monthly toggle should be a clear, interactive element positioned logically, typically above the pricing tiers. Palette: Adhere strictly to the provided `{{brand_color_palette}}`. This palette dictates the primary, secondary, accent, and neutral colors used throughout the page. If a specific palette is not provided, use a professional, minimalist SaaS-appropriate color scheme (e.g., a dominant cool tone like blue or teal, complemented by grays, whites, and a single accent color for calls-to-action). Typography: Implement `{{font_styles}}` for all textual elements, including headings, subheadings, body text, and button labels. If specific font styles are not provided, use a clean, modern sans-serif font family (e.g., Inter, Lato, Montserrat) for optimal legibility across different screen sizes. Ensure consistent font sizing and weighting. Interactive States: Depict the default state of the pricing page (e.g., monthly billing selected, no tier highlighted). Additionally, describe the hover state for call-to-action buttons (e.g., a slight color change, shadow, or subtle animation). Consider how the annual/monthly toggle visually changes when activated. Negatives: Avoid any elements that detract from a professional SaaS aesthetic. This includes: overly complex animations, cartoonish or overly playful graphic elements, cluttered layouts, excessive use of gradients, or any stock photography featuring people. The focus should be on clean UI elements and data presentation.

Output format

A detailed textual description formatted for image generation, covering the screen type, overall layout, specific color palette application, typography choices, and descriptions of key interactive states.

Why this structure works

The prompt utilizes role priming to establish a specific expertise, guiding the model toward appropriate design principles. Explicit constraints on layout, palette, and typography ensure brand consistency and UI/UX best practices are followed. The structured output request helps the model generate a comprehensive description suitable for image generation, covering all necessary visual elements.

Pick your version

Prompt variations

BeginnerWorks with any model

For initial concept generation or when needing a straightforward visual without deep UI/UX specifics. Requires fewer detailed inputs.

prompt.txt

Imagine you are a web designer creating a simple pricing page for {{company_name}}'s {{product_name}}. I need a visual idea for a page with three pricing options. Show these options side-by-side, like cards, each with a clear price and a button. Include a small table underneath or within each card that lists a few features to compare them. Also, add a switch at the top to let users pick 'monthly' or 'yearly' payments. Use a clean, simple layout. For colors, use mostly white and gray, with {{primary_color}} for important buttons. Make sure the text is easy to read. Avoid anything too fancy or distracting. The goal is a straightforward, professional look for a computer screen.

ProfessionalBest with midjourney

When a detailed, high-fidelity visual mockup is needed, providing comprehensive specifications for an image generation model.

prompt.txt

As a UI/UX specialist for SaaS, develop a comprehensive image generation prompt for a desktop pricing page for {{company_name}}'s {{product_name}}. The design must feature three distinct subscription tiers, presented in a visually balanced card-style layout, each with a primary call-to-action button. Integrate a detailed, scannable feature comparison table beneath or adjacent to the tiers, highlighting key differentiators. Crucially, include an interactive annual/monthly billing toggle positioned prominently above the tier section. Adhere to a minimalist, professional aesthetic, leveraging `{{brand_color_palette}}` for all UI elements, backgrounds, and interactive states. Specify `{{font_styles}}` for consistent typography across headings, body text, and button labels. Describe the default monthly selection and hover states for buttons (e.g., subtle background shift or border change). Ensure ample white space and clean lines. Exclude any stock photos of people, complex animations, or cluttered graphics, focusing purely on a functional, conversion-optimized UI.

Short VersionBest with flux

For quick iterations or when only a high-level visual concept is required, without delving into granular design details.

prompt.txt

Generate a clean SaaS pricing page mockup for {{company_name}} that includes three distinct tiers presented as cards. The page must feature a clear annual/monthly billing toggle at the top and a concise feature comparison table below the tiers. Use a professional, modern layout with ample white space. Apply a consistent color scheme, prioritizing {{brand_primary_color}} for calls to action. Ensure all typography is legible and consistent. The design should convey a trustworthy, brand-consistent image for {{product_name}}, suitable for desktop display, without any distracting elements or complex visuals.

EnterpriseBest with midjourney

For large organizations where designs must align with strict brand guidelines, design systems, and accommodate complex stakeholder reviews or compliance requirements.

prompt.txt

Assume the role of a lead enterprise UI architect tasked with conceptualizing a scalable pricing page for {{company_name}}'s {{product_name}}, designed for global deployment and rigorous A/B testing. Generate a high-fidelity visual mockup description that incorporates three distinct pricing tiers, a robust feature comparison matrix, and a prominent annual/monthly billing toggle. The design must strictly conform to our `{{brand_guidelines_document}}` and integrate seamlessly with `{{design_system_components}}`. Emphasize accessibility (WCAG 2.1 AA compliance implied), localization readiness, and a modular architecture that supports future iteration and stakeholder approval processes. Describe interactive states, error handling (if applicable to pricing selection), and ensure the visual aesthetic supports a high-trust, data-driven conversion environment. Focus on clarity, scalability, and adherence to corporate governance, avoiding any elements that could introduce compliance risk or detract from a serious business-to-business presentation.

What you'll get

Expected output

SCREEN TYPE: Desktop web interface. The primary view is a standard 1920x1080 resolution, with implied responsiveness for smaller viewports, but the focus is on the desktop experience.

LAYOUT: The page features a clean, modern design with ample white space. A subtle hero section at the top contains the product name "DataFlow" and a concise tagline. Below this, horizontally centered, is a clear annual/monthly billing toggle.

The core pricing structure consists of three distinct pricing cards arranged in a horizontal row. Each card is visually separated, perhaps with a subtle shadow or border. The middle card, representing the "Pro" tier, is slightly elevated or has a more prominent border to suggest it as the recommended option. Each card displays the tier name (e.g., "Basic", "Pro", "Enterprise"), a brief description, the price (monthly/annually), and a "Get Started" call-to-action button.

Below the pricing cards, a feature comparison table spans the width of the main content area. This table clearly lists features down the left column, with checkmarks or specific values under each pricing tier column. Key differentiating features are highlighted, perhaps with bold text. The table avoids excessive detail, focusing on scannability.

The footer is minimalist, containing standard navigation links and copyright information.

PALETTE:

Background: Off-white (#F8F9FA) for the main content area, with a potential very light gray (#E9ECEF) strip for the feature comparison table background to subtly differentiate it.
Primary Elements (Headings, Borders, Toggle Active State): Deep blue (#2A64E0).
Secondary Elements (Subheadings, Feature descriptions, Inactive Toggle State): Medium gray (#6C757D).
Accent (Call-to-Action Buttons, Selected Plan Highlight): Vibrant green (#28A745).
Text: Dark charcoal (#343A40) for body text and general labels.
Pricing Card Backgrounds: Off-white (#F8F9FA) with a subtle light gray border.

TYPOGRAPHY:

Headings (H1, H2): Inter Bold, larger font sizes (e.g., 48px, 36px) for main titles, 24px for pricing card titles.
Subheadings/Descriptions: Inter Regular, typically 18px-20px for larger descriptions, 16px for pricing card descriptions.
Body Text/Feature List: Inter Regular, 16px.
Button Labels: Inter Medium, 16px.
Pricing Figures: Inter Bold, larger size (e.g., 40px-56px) to stand out.

INTERACTIVE STATES:

Default State: Monthly billing selected in the toggle, displayed in deep blue (#2A64E0). Pricing figures reflect monthly rates. No pricing card is highlighted by default.
Annual/Monthly Toggle: When "Annual" is selected, the toggle visually shifts to highlight "Annual" in deep blue (#2A64E0), and the "Monthly" option fades to medium gray (#6C757D). All pricing figures update to annual rates.
Call-to-Action Buttons ("Get Started"): Default state is vibrant green (#28A745) with white text. On hover, the button background color slightly darkens to a richer green (e.g., #218838) or gains a subtle, contained shadow effect.

NEGATIVES: No complex animations, cartoonish graphics, cluttered layouts, or excessive gradients. No stock photography of people. The focus is on clean UI and data presentation.

Under the hood

Why this prompt works

This prompt's effectiveness stems from a combination of targeted prompt engineering techniques that guide the image generation model toward specific, high-quality UI mockups.

Firstly, role priming establishes the AI as a "UI/UX designer specializing in SaaS product interfaces." This immediately sets a professional tone and focuses the model on design principles relevant to the domain, ensuring the output aligns with industry standards rather than generic image generation.

Secondly, the prompt employs explicit constraints across multiple dimensions: screen type, layout, palette, typography, interactive states, and negatives. These granular instructions prevent ambiguity and reduce the model's creative latitude in areas where specific adherence is critical. For instance, dictating a "three-tiered subscription model" and "annual/monthly billing toggle" ensures core requirements are met, while the "negatives" section actively prunes undesirable visual elements.

The inclusion of structured output requirements, where the description must cover specific categories like "screen type" and "layout," forces the model to organize its response comprehensively. This structured approach helps in generating a detailed text description that is more likely to translate into a coherent and complete visual when fed into an image AI. It acts as a clear checklist for the model, ensuring all critical aspects of a pricing page are addressed systematically.

This structured, constrained approach yields far more precise and usable design mockups compared to a vague, single-sentence request.

Model fit

Best AI models for this prompt

Midjourney

Midjourney excels at generating aesthetically pleasing and coherent visual styles, making it suitable for capturing the overall brand-consistent look and feel of a SaaS pricing page. It interprets color palettes and general layout instructions well, producing polished mockups. However, achieving pixel-perfect UI elements, precise typography, or specific interactive states like exact button hovers can require multiple iterations or very detailed prompting. See the full Midjourney hub for deeper guidance.

Flux

Flux demonstrates stronger capabilities in rendering structured UI elements, which is beneficial for a pricing page with a feature comparison table and toggle. It generally produces more consistent typography and cleaner lines for user interface components. While it may require more explicit instruction for artistic flair, Flux is more reliable for translating specific layout and functional requirements into a coherent visual. See the full Flux hub for deeper guidance.

When to use

When prototyping initial design concepts for a new SaaS pricing page.
To quickly visualize different layout options for A/B testing pricing structures.
For translating specific brand guidelines (colors, fonts) into a functional UI mockup.
When presenting design ideas to stakeholders without needing full design software.
To explore visual treatments for feature comparison tables and billing toggles.

When not to use

When expecting production-ready code or fully interactive prototypes.
For designing highly complex user flows that extend beyond a single page.
If your primary need is illustrating user journeys rather than static UI elements.
When seeking detailed micro-interactions beyond basic hover states.
If the page requires highly specific, non-standard UI components not easily described textually.

Get more from it

Pro tips

1
Provide exact hex codes for your `brand_color_palette` to prevent generic interpretations and ensure brand consistency.
2
Clearly define `font_styles` by naming specific font families and weights to avoid inconsistent or unbranded typography.
3
Describe the annual/monthly toggle's visual states (e.g., active vs. inactive) to ensure functional clarity in the mockup.
4
Use precise language for feature table icons (e.g., "check mark icon," "X icon") to prevent misinterpretation of value propositions.
5
Specify desired button shapes (e.g., "rounded corners," "square") to maintain brand aesthetic and prevent visual discord.
6
Detail the visual hierarchy of pricing tiers (e.g., "highlighted 'Pro' tier") to guide user focus effectively on conversion.
7
Keep negative prompts explicit about elements to exclude, preventing unwanted visual noise or clutter on the page.

Don't ship this

Common mistakes

✗ Vague color descriptions lead to a generic or unbranded color scheme in the output.
Fix — Provide specific hex codes for primary, secondary, accent, and neutral colors to align with brand guidelines.
✗ Omitting font details results in inconsistent or unbranded typography across the page elements.
Fix — Name specific sans-serif font families and specify weights for headings and body text for clarity.
✗ Undefined toggle states create a static visual that lacks implied interactivity.
Fix — Describe both the default and active visual states for the annual/monthly switch clearly.
✗ Overly complex feature comparison tables become visually cluttered and hard to scan.
Fix — Focus on 3-5 key differentiators per tier, keeping the table concise and visually scannable.
✗ Neglecting negative prompts allows unwanted illustrative elements to appear in the mockup.
Fix — Explicitly list elements to avoid, like stock photos or overly playful graphics, for a professional look.
✗ Generic calls-to-action blend into the background, reducing their conversion effectiveness.
Fix — Describe distinct hover states and emphasize accent color usage for buttons to make them stand out.
✗ Not specifying layout hierarchy makes pricing tiers appear flat and undifferentiated.
Fix — Direct the model to visually emphasize a particular tier, like 'most popular,' to guide user attention.

Frequently asked questions

Q.Can I specify different layouts for mobile and desktop screens?

This prompt is optimized for desktop, implying responsiveness. For distinct mobile layouts, generate a separate prompt specifically describing the mobile screen type and its adjusted layout. Combining both in one prompt often yields mixed results.

Q.What if my brand doesn't have a strict color palette defined with hex codes?

The prompt defaults to a professional, minimalist SaaS scheme (cool tones, grays, whites, accent). For better control, describe your desired general feel (e.g., 'warm and inviting,' 'tech-focused green') to guide the model's color choices.

Q.How detailed should the feature comparison table descriptions be?

Focus on the *visual presentation* of the table itself—rows, columns, icons (checkmarks, X's). Avoid listing every single feature; the model is generating an *image*, not populating actual data or content.

Q.Will this prompt generate clickable elements or functional code for the page?

No, this prompt generates a static visual mockup. It produces images that *look* like a pricing page, including descriptions of interactive states, but it does not output functional code or interactive prototypes.

Q.How do I ensure the generated mockup matches my company's existing brand identity?

Provide precise inputs for {{company_name}}, {{product_name}}, {{brand_color_palette}} (with hex codes), and {{font_styles}}. The more specific your inputs, the closer the visual alignment will be to your brand.

Q.Can I add sections like testimonials or social proof to the pricing page mockup?

The current prompt focuses on core pricing elements. To add testimonials, you would need to extend the prompt's Layout section to explicitly describe the visual placement and style for such additional components.

Q.Is it possible to generate a pricing page with more than three tiers?

The prompt is structured for three tiers. While you could modify "three distinct pricing tiers" to "four distinct pricing tiers," extending significantly beyond four might lead to a cluttered layout if not carefully described.

Version 1.0Last reviewed August 6, 2026

Reviewed by PromptInFlow Editorial Team