AI & interfaces hub
Describe interfaces in observable, buildable terms
Move from a visual impression to precise vocabulary, expected behavior, and criteria an AI system can verify.
Direct answer
A good UI instruction is neither a component name nor an aesthetic alone. It connects the user goal, visible content, behavior, states, accessibility constraints, and expected proof.
What you will be able to do
- Translate a vague description into a canonical term and behavioral intent.
- Separate appearance, structure, interaction, and technical implementation.
- Write acceptance criteria that can be checked with keyboard, touch, and mobile layouts.
Start here
The pillar guide
12 min read
Describe a user interface to an AI with precise UI vocabulary
Explain a website or app interface to an AI assistant using its goal, components, behaviors, states, and verifiable criteria.
Read the guide7 min read
Form errors: explain, correct, and retry
Build a validation journey with field messages, server errors, focus, and safe recovery.
Read the guide7 min read
File upload: progress, validation, and recovery
Specify file selection, trustworthy progress, server checks, storage permissions, cancellation, and retry.
Read the guide7 min read
Verify keyboard and screen reader accessibility of a website
Check that an interface or website stays readable and usable with a keyboard and screen reader, then inspect semantics, focus, contrast, and reflow with reproducible evidence.
Read the guide6 min read
Let people choose several items
Choose checkboxes, a multiselect list or removable tokens, then verify keyboard selection and recovery.
Read the guide5 min read
Make a page work on narrow screens
Adapt a page to phones and browser zoom while keeping its content and actions available.
Read the guide5 min read
Make titles and body text easy to follow
Organize a page with meaningful headings, readable text and spacing that survives user adjustments.
Read the guide5 min read
Confirm a risky action
Connect consequence, explicit confirmation, cancellation and a verifiable outcome before deleting a workspace.
Read the guide5 min read
Search, refine and recover from no results
Connect input, filters, loading, results, clarification and recovery without dropping explicit constraints.
Read the guide8 min read
Delete a project safely
Follow a safe project deletion mission: check scope and permission, rehearse cancellation, act in your test app and verify the outcome.
Read the guide8 min read
Create an account and succeed at first use
Follow a guided mission from registration and verification to a first useful task, then return to check the saved result.
Read the guide5 min read
Onboarding: show value before asking for an account
Choose a guest trial, a first guided task or mandatory sign-in without losing the work.
Read the guide5 min read
Loading, empty or broken: show the right next step
Distinguish waiting, first-use emptiness, no matching results and a failed service.
Read the guide5 min read
Keep a draft without promising a remote backup
Choose explicit save or autosave and recover from storage failures, offline use and conflicting revisions.
Read the guide5 min read
Confirm an action without duplicate submissions
Choose inline status, Toast or a result page and recover from slow or uncertain writes.
Read the guide5 min read
Open details without losing your place
Choose a page, side panel or dialog and preserve list filters, Back behavior and focus.
Read the guide5 min read
Find an item in a long list without hidden filters
Combine text search, filters, sorting and pagination while preserving a clear result count and reset path.
Read the guide5 min read
Animate a confirmation with a static alternative
Choose useful state feedback, optional animation and a readable fallback without losing the result.
Read the guide5 min read
Ask for a permission when its purpose is clear
Explain camera, microphone or location access, handle refusal and show when the capability is actually active.
Read the guide