Why AI-made screens look like slop, and how patterns fix it

Ask any coding agent for an onboarding flow and you get something that looks finished in four seconds. Look again and the problems show up. Three permission prompts on the first screen. A skip button as loud as the main action. No screen for what happens when someone says no. It is not ugly. It is generic, and it is wrong in the ways that matter.

We call this UI slop: screens that pass a glance and fail a real user. After a year of watching agents draw inside Wonderblok, we think the cause is simple. We were asking the agent to make two kinds of decision at once, and it is only good at one of them.

Drawing is cheap. Deciding is not.

An agent is very good at turning a decision into layers. Given a clear structure, it will lay out a screen, match your tokens and link the flow faster than any of us. What it does badly is the decision itself: which screens a flow needs, in what order, and what each one must never do. Those answers come from years of shipped products and failed experiments, and a model averaging the internet gives you the average answer.

The fix was not a better prompt. It was taking the structural decisions away from the agent and handing it ones that already work.

Patterns carry the decisions

A Universe pattern is not a screenshot. It is the structure of a flow: the screens, the rules each one follows, the states it has to cover and the slots where your content goes. When your agent starts from Onboarding / Permission priming, it already knows to show value before asking for anything, to ask for one permission per screen and to design the denied state.

// The pattern your agent receives, not a picture to copyuse_pattern("onboarding/permission-priming")  rules:  value before ask · one permission per screen          say why before the system prompt · always a way forward  states: allowed · denied · not determined  slots:  hero art · title · reason · primary · secondary

Your brand stays yours because the pattern has no look of its own. The look comes from your toppings: your tokens, your type, your voice, your platform and languages. Same structure, very different apps.

Structure from the pattern, look from your brand, layers from your agent.

What changed when we did this

We ran the same brief through two setups: an agent drawing freely, and the same agent starting from a pattern with the Kopi Senja kit. The difference was less about polish and more about what was missing.

1. The free agent skipped the denied-location state every time. The pattern made it a required state, so it was always drawn.
2. Skip was as loud as Continue in most free runs. The pattern rule "always a way forward" turned it into a quiet text link.
3. Reviews got shorter. Notes moved from "this is wrong" to "use our photo here", which is the kind of note people should be leaving.

Where this goes next

Patterns cover the flows most apps share. The next step is private patterns: the flows your team has already proven, saved once and reused by every agent that opens your files. That is coming to Team later this year.

If you want to try it now, open the Kopi Senja sample in Wonderblok and ask your agent to add a checkout. It will start from Pay with QRIS, and you can watch it decide less and draw more.