Interaction Engineering · 9 / 10

Put the State Machine and Boundaries in the Prompt

Last lesson translated "what you want" into goals and scenarios. This one covers "don't gloss over it." The rule is simple: AI only seriously writes the states you name; anything unnamed, it imagines as fair weather. So list every state, nail the edge cases, spell out error prevention—those three together are the interaction spec.

Five statesEdge-case wheelInterface postureSpec block builder
Why AI output is always the "fair-weather" version

You say "build an order list page," and AI always pictures: network fine, data fits one screen, user never mis-clicks. It's not lazy—your description only had fair weather. Lesson 2 covered the three states (loading, empty, error); lesson 3 covered error prevention and reversibility. Those taught you to spot the gaps; this lesson turns what you spotted into black-and-white clauses in the prompt.

Cross-lesson · The three states and the three parts of an error messageWhat loading, empty, and error should look like when they're done right, and how to write error copy in plain language—lesson 2 already walked it; we reuse that conclusion here.
Try it · State-machine completer

The prompt below is classic fair-weather; the five cells on the state board are still question marks. Tap a state chip to write that state into the prompt and watch the spec grow line by line.

State-machine completer Defined 0 / 5
Tap a state chip to write the matching clause into the prompt.
Build an order list page showing orders, amounts, and status, with status filters at the top.// Stop here and AI freestyles all five states below
Loading
AI freestyle
Empty list
AI freestyle
Load failed
AI freestyle
Weak-net timeout
AI freestyle
Success
AI freestyle
"Freestyle" in interaction usually means: blank screen, alert, or no response.
Duel · Same empty list, two fates

How much is that one line—"empty state gets guidance"—worth? Same order page, two versions in a new user's eyes: left prompt never mentions empty state; right adds one sentence. Tap the side you think keeps the newcomer.

Fair-weather vs all-weather Pick a side
A · Prompt never mentions empty state
shop.example.com/orders
My orders
All Pending payment Completed
No data
B · One extra empty-state clause
shop.example.com/orders
My orders
Your orders will show up here After your first order, tracking and invoices live here Browse
Edge-case wheel: six situations AI loves to gloss over

Once states are listed, deeper edge cases remain. Demo never hits them; week one after launch, they all show up. Draw one to see AI's default dodge—and which sentence to add to the prompt.

Edge-case wheel Drawn 0 / 6
? / 6Tap the button below to draw the first edge case
Draw all six and you have an edge-case self-check list.
State posture first, then state density

How finely you write states and edge cases depends on the interface posture. About Face 4, Chapter 9 sorts products into postures; here are the two you'll use most. Name the posture first in the prompt—AI will nail state density much better.

Sovereign posture
The all-day primary tool: IDE, admin console, spreadsheet. It owns the screen; the user is expert. States can be dense: skeleton screens, inline validation, batch progress, shortcut hints—all worth writing into the spec.
Transient posture
Use-and-go tools: scan, calculator, leave request. Every visit feels like the first. States should be few and loud: one job per screen, big plain feedback—no dense dashboards.

Classic posture mismatch: a leave-request page with sovereign-grade filters and charts, or a day-long monitoring console with poster-sized one-screen flows. Density follows posture; posture follows how often it's used.

Assemble · Interaction-spec block builder

Taste Engineering's block builder assembles visual specs; this one builds interaction specs. Toggle five clause groups; the preview updates live. Pick "Omit" and the preview flags where AI will freestyle. Assemble, copy, paste at the end of your generating-UI prompt.

Interaction-spec block builder
Full state set
Empty state
Network & errors
Dangerous actions
Controls & copy
All five on = a complete interaction-acceptance annex. Turn any off and the risk is flagged in the preview.
Quiz: how to write an error-prevention clause
Write error prevention for "Delete project"—which line is best? Single choice
ATwo confirm dialogs before delete, second with a countdown
BDelete immediately with an undo entry; trash keeps it 30 days
CMake Delete small and faint, bury it in a third-level menu
DDon't write it—AI knows delete needs care
Key Takeaways
✓

AI only writes states you name: loading, empty, error, weak net, success—name all five. Unnamed ones are a blank-screen and alert farm.

✓

Nail the edge cases: when the list is empty, when the network fails, when they double-submit, when permissions are missing—after every "when," one clear requirement.

✓

Posture first, then density: sovereign UIs can be dense; transient UIs stay few and loud—don't grab the wrong script.

✓

Ship the spec as an annex: goal + scenario (last lesson) first, interaction spec (this lesson) last—together they're the full brief for AI.

Source: Original to Xiaoshan Academy's Interaction Engineering series; error and state principles from About Face 4, Chapter 15; interface posture from Chapter 9 (Alan Cooper et al.).