Skip to main content

How to create AI prototypes with Bubble.io

Figma won't validate

your AI solutions

Figma won't validate your AI solutions

Smart Recruiters is a Figma house. In 2024 they announced Winston their Gen-AI companion. (in)validating Winston with Figma became an overnight blocker

  • Figma won't generate new content on each load
  • Figma can't respond dynamically to data being input

Put down Maslow's instrument 🔨
& embrace new tools

  • interaction is becoming more conversational
  • content is different every time
  • facts are not always facts
  • things are slow (again)
  • people think AI is a panacea (it's not)
  • ethics tested to new extremes

Credit: Viral Laughs TV

Expectations vs reality

There was a temptation to treat AI app builders as a panacea to our problem.

The AI app builders to date, can get you 90% of the way there 80% of the time. However then we need to jump into complex code that, as designers, you're probably ill suited to working with. This is compounded by the fact without that last 10% you'll only learn 20% of what you need. A vital step is broke, a critical data point is missing, without it you were no better off than using a click-through built in Figma.

AI Missing AI

A suprising amount of AI app builders can't build an AI product, so it is worth experimenting with a few before you commit. Remember the goal here isn't to build a prototype in AI but to have AI in the prototype.

Time to burst your Bubble.io

Bubble.io is the Steve Sasson of AI app builders, it bridges the conventions of the last generation with the opportunities presented by the next.

Bubble.io gives you the power to use AI in your designs while maintaining full agency of the decision making on how each constituent part of the design looks, feels, and works. It takes longer up front but delivers more believable experiences for better in(validation).

How to create AI prototypes with Bubble.io

  1. Sign-up to Bubble.io (should I pay?)
  2. Get an AI API account, let's use OpenAI's LLM
  3. Ask Bubble.io to mock an interface for your thing
  4. Stub your prototype with AI

Sign-up to Bubble.io

You can start on the free plan, but you will at some point need to migrate to a Starter plan in order to unlock some key features we'll be using.
Visit Bubble.io

Should I pay?

A general buyer strategy for AI today

With the AI product space accelerating so rapidly it is important to be adaptable and unencumbered.

  1. do not pay until you hit the point of needing the paywall features
  2. pay the premium of a pay-monthly subscription over a yearly one
  3. do your due compliance checks before you pay

Grab a coffee

Bubble.io feels like a familiar WYSIWYG editor; however, there are some new paradigms to learn, particularly around harnessing data. So grab a coffee and run through some tutorials to get up to speed. I recommend PlanetNoCode on YouTube.

Visit PlanetNoCode on YouTube

Get an AI API account

Let's use OpenAI's LLM

You won't get away with not paying for an LLM API Key. Still, the various AI models available offer different pricing structures that make the cost affordable for low-scale applications, such as those typically seen in prototypes. Just remember that the same buyer strategy applies to the low-code tool vendor choice. Of course, you might be building with your own model, in which case the cost will potentially be negligible.

I've used OpenAI, and with some smart design choices, you can swap in and out different AI models pretty easily. If you're testing models, that can be a great advantage of prototyping with Bubble.io

Ask Bubble.io to mock an interface for your thing

While you can ask Bubble.io to develop an entire applciation with a single prompt, we'll create a single page to start off.
There are lot of tips and tricks to write good prompts to get the output you were expecting.

Stop press

At the time of writing Bubble.io's AI page generator isn't up to the standard of the vibe coder tools on the market. There's no refinement options, no point-and-shoot prompting, and no agentic experience (AI taking controls). The focus here isn't to use AI to build but include AI in the prototype itself, which Bubble.io performs strongly.

Stub your prototype with Gen-AI

Having realistic content in a prototype is more important than ever. It not only helps users avoid suspending their disbelief but it also helps test the outputs of AI models themselves. Stubbing your prototype with AI responses let's you kill these two birds with 1 AI stone.

What does the future have in store?

Today these AI vibe code apps do a pretty decent job of making vanilla apps with limited specific requirements. That limits their use for customer validation, but for sure they'll get better.

  • more agency over the app without the need to code
  • integrations into systems like design tokens that will help create more desirable outputs
  • faster generation times, getting closer to the Doherty threshold
  • improves its capability to learn and understand intent to better match our mind's eye
Back to portfolio