Last updated

Why AI-Generated Empty States Are the Worst Part of Modern SaaS (and How to Fix Them)

Author

Renan Oliveira, Head of Design

Renan Oliveira, Head of Design

AI-Generated Empty States

Open the last product you shipped with Cursor, Lovable, or v0. Create a brand-new account. Before you add a single record, look at what the screen says.

Spot a gray inbox icon, "No data yet," and a "Get started" button? That’s the most expensive screen in your product. It’s the first thing new users see, and no one on your team actually designed it. The model just filled the gap because nobody told it what to do.

We audit AI-built SaaS products every week at Foundey. Dashboards look fine. Settings work. But open a fresh account, and the product goes silent. Empty states are always the first place AI-generated interfaces break, and the last thing founders review.

This isn’t about AI being bad at design. It’s about empty states needing product judgment, not just pixels, and that’s exactly what a model can’t deliver for your product. Here are the six failure patterns we see most, what they cost, and how to fix them fast without a full redesign.

What counts as an AI-generated empty state?

Two different things get called "AI empty states," and both cause trouble.

Empty states written by AI coding tools

Ask an agent to "build a projects page," and you’ll get a page with projects. If it adds an empty state, it grabs the internet’s default: a centered icon, a short headline, a muted subtitle, and one button. That same generic component ends up on every list in your app. The copy is flawless but says nothing about your product.

Empty states replaced by AI-generated content

The second kind is newer. Instead of a blank screen, the product generates a starting point: a drafted doc, a sample dashboard, a suggested workflow. When done right, it’s a real upgrade. When done carelessly, you get screens that look full but aren’t useful, or worse, fake activity that never happened.

Both share one root problem. Nobody decided what this screen is for.

Why AI tools are structurally bad at empty states

It’s tempting to blame the prompt. Better prompts help, but the problem goes deeper than just tweaking adjectives.

  • Demos have data. The code and interface examples models learn from mostly show features working. The zero-data screen rarely makes it into a tutorial because it is not impressive.

  • The prompt describes the happy path. "Build a contacts table" implies contacts exist. The model answers the question you asked.

  • Good empty states need knowledge the model doesn’t have. You need to know your user’s first outcome, which data source fills the screen, how long that takes, and what the populated view actually helps them do. That lives in your head and your analytics, not in the repo.

  • Defaults win when nothing overrides them. Without a clear rule, agents default to component library defaults. That’s why so many AI-built products have the same empty state. We break down the fix in our guide to keeping your design system consistent.

  • Nobody reviews it. Empty states only show up in a fresh account, and the team never uses one. As we wrote in Vibe Slop, teams review AI-generated code closely, then ship onboarding and empty states with zero review.

None of this is new. Years before vibe coding, Nielsen Norman Group noted that empty spaces remain empty by default. It saves dev time but confuses users and kills confidence. AI didn’t invent this habit; it just scaled it to every screen at once.

Six ways AI-generated empty states fail (from real audits)

These are patterns, not hypotheticals. Each one reappears when we open AI-built products in a clean account.

1. The universal "No data yet"

Every list, table, and dashboard card says the same thing: "No data yet." "Nothing here." "No items found." Technically true, practically useless. The user still doesn’t know what the screen is for, why it’s empty, or what fills it.

A quick rewrite shows the difference. "No integrations yet. Get started." becomes "Connect your store to see last week’s orders here. Setup takes a few minutes and we only read order data." Same space. One version is a shrug, the other is a reason to click.

2. State collapse

An empty table can mean at least five things: the user is brand new, a filter returned nothing, data is still loading, the request failed, or the user doesn’t have permission. AI-generated components usually show a single state across all five.

So a new user and a user whose sync just broke both see the same inviting "Get started" button. One is told to redo setup that already happened. That’s how you get a support ticket. The fix isn’t five components; it’s one component with explicit, required variants.

3. The empty state that lies

This is the worst one. The screen shows "No records" while data is still loading, then content pops in a second later. NN/g calls these misleading system-status messages especially harmful. Impatient users leave before the content appears, and those who stay learn not to trust the product.

In AI-generated fetch code, the cause is usually a single line: the component checks whether the list is empty before checking whether the request has finished. One line of logic, real damage to trust. A proper loading pattern, like the ones in our guide to skeleton screen UI design fixes.

4. Decorative filler

AI image tools make it easy to drop a cheerful illustration into every blank screen: a cat in a hammock, a person peering into an empty box. These images usually clash with your product’s visual language and eat up space the explanation requires.

Our rule is simple: if the image doesn’t explain the moment or guide the action, it’s just decoration. Decorative images also need to be hidden from screen readers, which AI output seldom does.

5. The chat box as an empty state

A newer habit: the dashboard is empty, so the product drops an "Ask AI anything" box in the middle with a sparkle icon. It feels modern. In practice, it hands a brand-new user the hardest task possible: inventing a good question about a product they’ve never used.

Suggested prompts only help when they’re real, job-specific to that account, like "Summarize this week’s failed payments," not "Tell me a fun fact." We break down this pattern and the alternatives in our guide to AI feature UX: sparkle buttons, chat panels, and what to build instead.

6. Fake fullness

This is the AI-filled version of the problem. A new account opens to a dashboard of generated metrics, invented teammates, and "recent activity." It looks alive. But if a user can’t tell sample content from their own data, you’ve built a trust problem into your first screen.

Worst case: someone makes a decision based on numbers that were never theirs. Sample content must be clearly labeled, removable with one click, and obviously fake.

If you spotted three or more of these in your own product, that’s normal for anything built fast with AI. The good news: it’s very fixable. Our free UX audit starts by opening a fresh account and walking every empty state with you.

What bad empty states actually cost a SaaS product

We won’t invent a conversion percentage for you. The honest answer: the cost scales with how much of your product’s value lives in the user’s own data. For most B2B SaaS, that’s nearly all of it.

  • The first session. In a self-serve product, the first-use empty state is the real first impression. If it doesn’t point to a first outcome, the user leaves, and most never tell you why.

  • Trust. Collapsed or misleading states teach users the product can’t be relied on, even when the system works fine.

  • Support load. "Is it broken?" tickets are often empty-state tickets in disguise.

  • Trials and evaluations. A prospect in a trial account, a procurement reviewer, or an investor clicking through your product all start in the same place your demo account never goes: an empty workspace.

To measure the impact in your own product, track activation rate for your named first outcome, time to first key action, and drop-off on screens with an empty state. Our post on SaaS onboarding UX patterns explains how to define that first outcome and why the seeded empty state is usually the fastest onboarding fix.

"But AI killed the empty state." Partly true. Here is the catch

Some say AI has made the empty state obsolete: it generates starting content, and users never see a blank screen. The best versions are genuinely good. Template routing at signup, AI-drafted first frames, and demo workspaces with sample data all shorten time to value. NN/g even highlights a log tool which offers demo data as a safe way to explore. We recommend seeding too.

But pre-filling doesn’t remove the need to design the state. It just moves the design problem. Someone still has to decide:

  • what gets generated, and from which signup answers

  • how sample content is labeled

  • how the user clears it, and what the screen looks like afterward

  • what happens when the AI guesses the wrong context ("I'm not a marketer, I'm the founder")

And generation only helps the first-use state. No-results, error, permission-denied, and user-cleared states persist across all products. No amount of generated content fixes "your sync failed." A model can fill a screen. It can’t decide what the screen is for.

How to fix AI-generated empty states without a redesign

Most of this work takes days, not months, and almost none of it touches your core architecture.

Step 1: Build a state inventory

Open a fresh account. Then open a test account with filters applied, network throttled, and a viewer-only role. Build a simple grid: screens down the side, states across the top (first-use, no results, user-cleared, loading, error, permission denied, partial data).

In most AI-built products we review, many cells are unhandled or identical. That grid becomes your backlog.

Step 2: Name the one outcome each screen exists for

For every screen, finish this sentence: "This screen exists so the user can ___." If you can’t write it, the empty state can’t either. This is the step AI skips, and the one that makes every other step easier.

Step 3: Write the copy like a human who knows the product

A good empty state answers three questions: what will appear here, why it’s empty right now, and the one action that fills it. Add expectation-setting where it matters, like how long a sync takes.


Generic AI copy

Rewritten

No data yet.

Your weekly revenue chart will appear here after your first sync.

No results found.

No invoices match "Acme, overdue." Clear the overdue filter to see all Acme invoices.

Something went wrong.

We couldn't reach Stripe. Your data is safe. Try again, or check the connection in Settings.

Nothing here yet!

You haven't invited anyone. Teammates you invite can review drafts before they go live.

Use your product’s real nouns. If your empty-state copy can't be pasted into any other app, it’s not done.

Step 4: Turn the empty state into a component your agent cannot skip

Build one EmptyState component with required props so it’s impossible to ship without making the decisions:

Then add a rule to the context file your coding agent reads every session: every new list, table, or dashboard card that uses this component ships with empty, loading, and error states, and the variant must match the cause. A design-system rule beats a prompt you have to remember.

Step 5: Seed honestly

If you pre-fill new accounts, keep it to three to five sample items, label them clearly as samples, and offer a one-click "Clear sample data." Never generate fake people or fake activity, and never let sample data appear in billing, analytics exports, or anything a user may act on financially.

Step 6: Test the transitions, not just the screens

Empty states fail in motion. Walk the full cycle: empty, loading, populated, and cleared again. Does the layout jump? Does "No records" flash before data arrives? When a user deletes the last item, do they see a clear "all clear" message or the first-use onboarding again?

Check accessibility as you’re there. The pale gray helper text that AI loves often fails the WCAG contrast minimum, and screen reader users should be notified when content changes.

A 10-minute empty state check you can run today

Create a fresh account and work through this list:

  • The first screen tells a new user exactly what to do first.

  • Each empty list or table says what will appear there.

  • No-results states name the search or filter and offer to clear it.

  • Error states look and read differently from empty states.

  • "No data" never appears while content is still loading.

  • A viewer-role user sees an explanation, not a Create button they can’t use.

  • Sample content is labeled and can be removed in one click.

  • Illustrations match your visual language, and decorative ones are hidden from screen readers.

  • Helper text passes contrast checks.

  • The copy uses your product’s real nouns, not "items" and "data."

If three or more fail, you don’t need a redesign. You need a focused sprint on states.

What experienced product teams do differently

The teams that get this right aren’t using different tools. They make a few different decisions.

They design the empty state first. If the empty version of a screen works, the populated version almost always does too. The reverse is rarely true.

They treat states as part of the system. Empty, loading, and error states live in the component library with documented variants, just like buttons. Mature design systems like Carbon document empty states as a pattern for exactly this reason.

They review in a fresh account every release. It takes five minutes and catches what no code review will.

They put a human on the copy. AI can draft it. Someone who’s talked to customers should approve it.

Here’s what agencies and freelancers often miss: Figma files are full of populated mockups because those look good in a portfolio. When you evaluate a design partner, ask to see their empty and error states. We make the same point in our article on UI design services for SaaS, because those screens reveal real design depth faster than any hero shot.

And don’t overcorrect. A ten-step product tour on an empty screen, or three competing buttons, is just a louder version of the same problem. One obvious next step beats five options. If you want a wider gut check on AI-built interfaces, our 12 signs your SaaS is full of AI slop UX is a good companion read.

The blank screen is a product decision

AI has made the populated version of every screen cheap to build. The cost hasn’t disappeared. It’s just moved to the screens without data, where a model has nothing to copy and no idea what your user is trying to do.

That’s why AI-generated empty states are the worst part of modern SaaS. They’re the first thing new users see, the last thing teams review, and the one place where "looks fine" and "works" are furthest apart. The good news: they’re also one of the fastest, highest-leverage fixes in your product.

If you want a second set of eyes, book a free UX audit. We’ll open a fresh account with you, walk every empty state, and hand you a ranked list of what to fix first. If it turns into more than a list, we can embed with your team and fix it, just like we do for dashboards like Scotch.

FAQ

What is an AI-generated empty state?

It is either an empty state written by an AI coding tool, usually a generic icon with "No data yet" and a button, or an empty screen replaced by AI-generated starting content. Both fail when nobody decides what the screen is for and what the user ought to do first.

Why do AI coding tools skip empty states?

Prompts describe the happy path, most training examples show features with data, and a good empty state depends on product knowledge the model does not have: your user's first outcome, your data sources, and your setup time.

Should we replace empty states with AI-generated sample content?

For first-use screens, often yes, as long as samples are clearly labeled, minimal, and easy to clear. It does not replace the need to design the no-results, error, permission, and user-cleared states, which every product still needs.

What is the difference between sample data and fake data?

Sample data is labeled placeholder content that shows how the product works. Fake data is content that passes as real activity, like invented teammates or metrics. Sample data helps users learn. Fake data breaks trust.

How many empty states does a typical SaaS product have?

More than most teams think. Multiply every list, table, dashboard card, search, and panel by the states each can be in: first-use, no results, cleared, loading, error, and permission denied. Even a small product can have dozens of distinct combinations.

Can we fix empty states without redesigning the product?

Yes. In most cases, you need a state inventory, rewritten copy, one shared component with required variants, and a rule your coding agent follows. That is usually a focused sprint, not a rebuild.

Disclosure: Foundey uses AI tools for research and production every day. This article was written and reviewed by our design team.