Why fake UI looks fake

Scroll any good product page and you will see little pictures of the app: an inbox with one conversation highlighted, a cursor assigning it to someone, a small card saying it worked. None of those are screenshots. They are drawn on purpose, and they are called faux UI.

Ask an agent for one and you usually get something that looks almost right and somehow generated. Here are the five ways it goes wrong, each next to its fix. Tap through them.

One sentence to hold on to

Everything in this module hangs on one line from Benji Taylor, who built Stageshow, the kit every demo in this course is made with:

A product shot is not the product. It is an illustration of one moment in it. Your job is to decide what that moment is, and leave everything else quiet.

Too much, and its opposite

Left alone, an agent fills every row. It knows what a support inbox contains, so it writes names, subjects, counts, badges and timestamps everywhere. The more readable detail, the more generated the picture looks.

The over-correction is just as bad: two gray blobs and a button. That is a wireframe, and it no longer looks like any product at all.

The fix sits in between, and it has a number. Count the real strings: the title, the thing being acted on, what gets typed, the result. Usually 3 to 7. That is your word budget. Everything else becomes a placeholder bar, a short gray line standing in for text nobody needs to read.

Notice that the screen stays full at every setting: a sidebar, a header, six rows. Only the words change. Simplify the words, not the context.

The small rules that make it read as real

Most of the craft is in numbers you can hand straight to an agent:

• Words where the eye lands, bars at the edges. Gray bars on the subject read unfinished. Where the story touches a list, two or three real rows and at most as many bars.
• Bars vary in width (60, 45, 70, 52) and sit at the height of the text they replace, so a row keeps its rhythm.
• Real type sizes, 11 to 15px, one family. Nothing under 10px as it renders on a phone.
• A 12px inset between any words and the edge of their card, row or window. Under 8px looks like a mistake.
• A title sits 4 to 6px above its subtitle. The breathing room comes from the row's padding, not from that gap.
• Keep the domain's signature content. Album art keeps a music app a music app. Swap it for gray and it becomes a generic list.

Icons, logos and the color of AI

Icons come from one set, never drawn by hand: one size (14 to 16px), one stroke. Emoji are content, never icons.

A real company carries its real logo, or its name as plain text. A letter in a colored square next to a real company's name is an invented logo, and readers notice.

And no sparkles, wands or purple as "the color of AI". Show what the AI does: the answer streaming in, the row it filled. A generic sparkle is decoration.

Faking it honestly

A faux app lives inside someone else's page, so a few rules keep it polite:

• Its title is a plain div, never a heading (h1 to h6), so it does not break the page's outline.
• The whole stage gets role="img" and an aria-label that says what it shows, like "Assigning a conversation to Maya". Its fake buttons stay out of the tab order.
• Anything that loops for longer than 5 seconds gets a visible pause button. That is a WCAG rule, and demos are not exempt.

Tell your agent

Build a faux UI feature card (400 × 300) of our support inbox: one conversation being assigned to Maya.
- Word budget: at most 6 real strings (the title, the selected conversation and its two neighbours, "Assigned to Maya"). Everything else is a placeholder bar, widths varying row to row.
- Keep the screen full: sidebar, header, six rows. Simplify the words, not the context.
- Type 11–15px, one family, 12px inset from every edge.
- Icons from one set, no sparkles, no purple, no invented logos.
- The faux title is a div, the stage has role="img" and an aria-label.
If Stageshow is installed, start from its closest gold example.