# Why fake UI looks fake

> Name the five ways a product illustration fails, and set a word budget so your agent's demo reads as a real product instead of a generated one.

Module: Product demos · Level: beginner · 7 min · https://school.agents.org.in/media/faux-ui/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 (A drawn picture of a product's interface, made for a landing page, feature card or docs page. It looks like the real app but is simplified to tell one moment).

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.

*[Interactive demo: Same story, same kit. Only the decision changes.]*

## One sentence to hold on to

Everything in this module hangs on one line from Benji Taylor, who built Stageshow (Benji Taylor's open-source kit and skill for building faux product UI in React: real-looking windows, phones and a scripted cursor, plus examples and a filming script to check the result), the kit every demo in this course is made with:

> **In plain words.** It reads as a real product, simplified to what the viewer needs, framed with intent, and every motion has a cause.

A product shot (An illustration of one moment in a product, framed like a photo: cropped to where the story happens, not a whole screenshot pasted into a box) 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 (The handful of real words (usually 3 to 7) a product illustration is allowed. Everything else becomes a placeholder bar, so the eye goes straight to what matters). Everything else becomes a placeholder bar (A short gray line that stands in for text nobody needs to read in a product illustration. Its width varies row to row and it sits at the height of the text it replaces), a short gray line standing in for text nobody needs to read.

*[Interactive demo: One scene written once. The fidelity setting decides what becomes a bar.]*

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.

*(A word budget is not an element budget. A calendar still needs a populated week.)*

## 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.

  **Before (avoid):**

Every row: name, subject, ticket number, SLA badge, time. A header with three stats. A satellite with six lines.

  **After (do this):**

The title, three real subjects, and "Assigned to Maya". Bars everywhere else.

## 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.

> **Stageshow or no Stageshow.** If your project uses React, install Stageshow and let it own the build: it ships the kit, about forty gold examples and a filming script. In any other stack, the rules in this module still apply; you build them in your own code.

## Tell your agent

**Brief a product illustration (paste into your agent):**

```text
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.
```

**Check yourself:** Your agent's inbox demo has a real name, subject, ticket number and time in all ten rows. What is the fix?

- [ ] Delete the inbox and show just the result card
- [x] Keep the ten rows, keep real words only on the 2–3 rows the story touches, and turn the rest into placeholder bars
- [ ] Make every row a gray bar so nothing distracts
- [ ] Shrink the font so it all fits

*Why:* Too much detail reads as generated, but stripping everything gives a wireframe. Keep the full structure and spend a small word budget where the story is.

## In the skill

- https://school.agents.org.in/skill/faux-ui/MOC-faux-ui.md
- https://school.agents.org.in/skill/faux-ui/faux-ui-restraint.md
- https://school.agents.org.in/skill/faux-ui/stageshow-reconciliation.md