MODULE 15 / 18 · PART 5 · LEAD THE AGENT & THE INTERFACE
UI/UX & Interface Engineering
Ask for states, constraints and accessibility — not “a nice design”.
THE SHORT ANSWER
What this module changes.
Most UI bugs are missing states, not wrong layouts. Design empty, loading, partial, error, offline and success explicitly, then check accessibility and content extremes.
Interface prompts fail when they ask for "a nice design". Ask instead for states, constraints, and accessibility — the parts of UI that are engineering problems rather than taste. Every prompt below assumes you own the interface, not just the component.
Mobile-first is not a slogan here; it is the default device, the default network and often the default payment method. Design for slow data, small screens, mixed Android versions and English/Swahili copy that changes length.
THE MODULE PROMPT LIBRARY
20 prompts for ui/ux engineering.
Copy any prompt, replace the [bracketed] slots with your own project context, and attach the files the agent needs. Use “Copy all prompts” when you want the full module in one place.
20 copy-ready prompts. Bracket text is a slot for your own context — replace it before you send the prompt.
Design the states for [component]: empty, loading, partial, error, offline, and success. Show me what the user sees in each and what they can do next.
Why it worksMost UI bugs are missing states, not wrong layouts.
Review this screen for accessibility: [description]. Check focus order, keyboard reachability, contrast, labels, and screen-reader announcements.
Why it worksAccessibility is a checklist, not a vibe; a checklist catches what taste misses.
Here is the flow: [flow]. Where can the user get stuck, lose data, or not know what happened? List the dead ends and the recovery path for each.
Why it worksDead ends and silent data loss are the two failures users never forgive.
What is the perceived performance of this interaction: [description]? Tell me what to render optimistically, what to skeleton, and what to block on.
Why it worksPerceived speed is a design decision, not a backend one.
Design the error messages for [feature]. Each one must say what happened, why, and what the user can do — in that order, in plain language.
Why it worksAn error message that does not offer a next step is a support ticket.
Here is the form: [fields]. Tell me which fields are unnecessary, which can be inferred, and which need inline validation versus on-submit.
Why it worksEvery field you remove raises completion rate more than any redesign.
Design the destructive action for [action]: confirmation, undo window, and what happens if the user is wrong.
Why it worksUndo beats confirmation dialogs; both beat an apology.
Review this component API: [props]. Which props are ambiguous, which should be required, and which combinations are invalid states?
Why it worksA component API is a public contract; ambiguity there becomes inconsistency everywhere.
Here is the design system: [context]. Tell me where this new screen diverges from it and whether the divergence is justified.
Why it worksUnjustified divergence is how a design system dies one screen at a time.
Design the responsive behavior for [screen] at mobile, tablet, and desktop. Tell me what is removed, what is reordered, and what is only available on larger screens.
Why it worksResponsive design is about deciding what to drop, not shrinking everything.
Here is the interaction: [description]. What feedback does the user get within 100ms, within one second, and beyond that?
Why it worksFeedback latency thresholds are what make an interface feel alive or broken.
Audit this UI for cognitive load: [description]. What can be removed, deferred, or defaulted without losing capability?
Why it worksEvery option you show costs attention even when it is not used.
Design the empty state for [feature] so it teaches the user what to do rather than just saying there is nothing here.
Why it worksThe empty state is the first-run experience for most features.
Here is the navigation: [structure]. Is the information architecture discoverable, or does it require memorization? Propose the fix.
Why it worksIf users must remember where things are, the IA has failed.
Design the keyboard and shortcut model for [app]. Show me the conflicts with browser and OS defaults.
Why it worksPower users live on the keyboard; conflicts make shortcuts worse than none.
Here is the component: [code]. Tell me what breaks when the text is 3x longer, the list is empty, the image fails to load, or the locale is right-to-left.
Why it worksContent and locale extremes break more layouts than viewport size does.
Design the loading strategy for [screen]: what is cached, what is streamed, what is deferred, and what the user sees while waiting.
Why it worksLoading is a product decision that is usually left to the framework default.
Review this UI copy: [text]. Rewrite it for clarity, consistency of voice, and action. Flag anything that blames the user.
Why it worksInterface copy is the product's tone of voice; it is also the cheapest usability fix.
Here is the user journey: [journey]. Identify the moments of highest friction and rank them by how many users abandon there.
Why it worksPrioritizes design work by drop-off rather than by opinion.
Design the telemetry for this interface: which interactions, drop-offs, and errors do we need to instrument to know whether this design works?
Why it worksA design you cannot measure is a design you cannot improve.
PRACTICE · 20–30 MINUTES
Try it on a project you actually own.
Take one screen. List its six states and write the copy for each. Fix the empty and error states before polishing the happy path.
- Pick one prompt from this module that matches a real task.
- Replace every bracketed slot with context from the feature you are working on now.
- Attach only the files the agent needs. Keep secrets, credentials and personal data out of the chat.
- Ask for the artifact — a spec, diff, test, runbook or decision note — and the evidence that it works.
- Record what changed and what remains unverified in the repository.
Want the same prompts across every module? Search the full prompt library or return to the course overview.