How to Craft Effective Prompts for Bubble’s New AI Page Designer

A clear, high-quality prompt can help you generate pages that match your vision and pave the way for success.

Emmanuel Straschnov
June 17, 2024 • 4 minute read
How to Craft Effective Prompts for Bubble’s New AI Page Designer

If you’ve worked with generative AI tools like ChatGPT or MidJourney, you're likely familiar with the concept of a prompt: A prompt is essentially a text string that instructs AI on what to generate by providing important keywords and direction. 

Prompting for Bubble’s AI features works similarly to other AI engines, but there are a few ways to get the most out of your request when describing what you want to build. Let’s get into it.

🚀
Couldn’t make our AI launch event? Check out the recap and learn how Bubble’s new AI tools can help take your product from zero to one in just a few clicks.

Types of web app pages you can design with Bubble AI

Think about your Bubble app — it might include common areas like a landing page, product listing details, or even a social feed. With Bubble AI, you can now take many of these pages and bring them to life faster, easier, and more imaginatively. 

Here are the types of pages you can customize with Bubble AI:

Page type

Use for

Features

Landing pages

  • Marketing your product or service

  • Marketing headlines

  • Benefits and features

  • Calls to action

Dashboards

  • Visualizing data and metrics

  • Internal tools

  • External user analytics

  • Features

  • Graphs

  • Data tables

Social feeds

  • Displaying a stream of social content

  • Post creation

  • Scrollable feeds

  • Friends lists

Marketplace directories

  • Listing products or services

  • View and interact with available listings

  • Filter and search

User profiles

  • Displaying information about a user

  • User bios

  • Featured posts

  • Photos

Product listings

  • Providing details about an individual product

  • Product details

  • Photos 

  • Reviews

Settings

  • Configuring your app

  • Account settings

  • Notifications

  • App settings

Signup page

  • Account creation

  • User authentication

  • Sign up

  • Log in

  • Input forms

Understanding prompts, variables, and how to use them

Your prompt should be 1–2 sentences long and may include what we call variables. AI prompt variables are placeholder keywords that you can replace with your own description — they're key for helping Bubble AI understand your instructions and goals. By centering your prompt around these variables, our AI engine can more easily interpret your prompt and deliver on your intentions. (Prompts that violate our content guidelines won't be generated.) 

The list below isn’t exhaustive — or even required — but it can help stir ideas on how to structure your prompt:

Variable type

Examples

Page type

Landing page, dashboard, signup page (see the table above for more examples)

App type

Fitness tracking app, restaurant booking app, internal tool

Target audience

College students, musicians, veterinarians

Color mode

Dark, light

Your user’s goal

Track metrics, make a payment, book a service

Primary color

Blue, green, white

Tone or feeling you want to evoke

Friendliness, approachability, expert, adventure

Image type

Fantasy art, neon, renaissance

Font description

Bold, elegant, all-caps, script

Imagery and themes you can apply to your prompts

A mockup of Bubble's AI page desinger input that says "Tell us about your page."

Need a little aesthetic inspiration? Here are a couple of specific styles you might ask Bubble’s AI to use for your images:

Photographic: Connect with your users by incorporating unique and compelling photography throughout your app.

Line art: Convey your message with imagery influenced by this minimalist sketching technique. 

Comic book: Channel your inner Roy Lichtenstein with this creative, fun, and bold pop art style.

Cinematic: Evoke deep emotion with this visually striking and meaningful aesthetic.

Anime: Make your app come to life with designs inspired by the instantly-recognizable Japanese animation style.

These are just a few examples — you can experiment with other themes to suss out what makes sense for the look and feel of your app. 

(FYI, right now, color schemes that involve more than one color won’t work with our AI engine — but the sky’s the limit with other descriptive image types.)

Examples of effective Bubble AI prompts

Let’s put it all together: Clear direction + variables + imagery = a great prompt to help quickly, easily, and creatively build your desired pages. Here are a few examples:

Example 1

A landing page for a dog walking marketplace for college students who want to make money walking dogs or save time walking their own dogs. The page should be green, evoke emotions of friendliness, relaxation, and convenience, use photographic images, and a funky font.

A mockup of a landing page for a dog walking marketplace generated by Bubble's AI page designer.

Example 2

A dashboard for a fitness tracking app aimed at busy professionals who want to monitor their health efficiently. The page should be blue, evoke emotions of motivation and clarity, use digital art images, and a modern font.

A mockup of a fitness tracking app dashboard generated by Bubble's AI page designer.

Example 3

A social media feed for a travel blog targeting adventure enthusiasts who want to share and discover new destinations. The page should be orange, evoke emotions of excitement and exploration, use cinematic images, and a bold font.

A mockup of a social media feed for adventurers generated by Bubble's AI page designer.
Start building with a free account

Build your app on Bubble's Free plan. No need to upgrade until you're ready to launch your app.

Join Bubble

LATEST STORIES

blog-thumbnail

Top 2025 Web Design Trends to Know: Parallax Scrolling, Micro-animations, and More

Web designers are moving away from flat, minimalist aesthetics. Learn how they’re leaning into bolder, personality-packed experiences with the use of AI, non-traditional scrolling, bold colors and typography, and more.

Bubble
December 13, 2024 • 10 minute read
blog-thumbnail

Bubble Wrapped 2024: Our Top Moments, Your Best Builds, and More

That’s a (Bubble) wrap on 2024! Check out our collective year in review, including all the highlights of our community’s biggest accomplishments — from new product improvements to no-code topics you couldn’t stop talking about.

Bubble
December 13, 2024 • 5 minute read
blog-thumbnail

27+ SaaS Stats on Market Growth, Usage, Launching a SaaS Startup, and More

SaaS spend and growth is up in 2024, even though growth rates have cooled slightly from previous years. Get the details on why, the state of the SaaS market, and more in this roundup of stats you should know.

Bubble
December 11, 2024 • 11 minute read
blog-thumbnail

Bubble vs. Glide: Comparing the Top No-Code Platforms

Glide is great for a quick, out-of-the-box, no-code solution when you need less customization. However, Bubble offers much stronger customization, community, and versatility. Here’s our comparison of both platforms.

Bubble
December 11, 2024 • 24 minute read

What Can You Build on Bubble? 25 Examples to Inspire You

November 18, 2024 • 19 minute read

The Future of Bubble’s Editor: Introducing the New Workflow Tab

October 11, 2024 • 3 minute read

Efficient App Building 101: Improving Your Workload Usage

July 01, 2024 • 3 minute read

Build the next big thing with Bubble

Start building for free