AI-Assisted UX Copy & Interaction
AI doesn't just write code. It can speed up interface copywriting, empty states, accessibility hints, and micro-interaction scripts too.
Generating Consistent Copy Tone
You're a product copywriter. Generate for the login page: headline / subtitle / button copy / error messages.
Brand voice: warm, clear, action-oriented.
Constraints: max 30 characters; error messages must include a resolution.
Have AI output multiple options and label the differences between them.
Designing Empty States & Onboarding
- Ask AI to output empty state copy + illustration descriptions + CTA links.
- Add "trigger conditions" and "success metrics" so you can validate later.
Accessibility Auditing
Review @components/Form.tsx for accessibility: labels / aria / keyboard nav / error messages.
Output an issue list and a fix patch.
Have AI generate an a11y checklist and patch to reduce missed issues.
Micro-interactions & Motion Scripts
- Have AI design "loading, success, failure" animations or state machine descriptions, then generate the code.
- Ask for platform-specific handling differences (desktop vs mobile).
Exercise
Pick a page component and have AI: 1) generate copy in a unified tone 2) provide empty state + CTA 3) output a11y fix suggestions. Compare the AI's suggestions with existing copy and merge the best parts.
📚 Related resources
❓ Common questions
Open a question to review the practical answer.
How do I keep brand voice consistent when AI writes UI copy?
Spell out tone words plus constraints in the prompt. The login example: voice “warm, clear, action-oriented”, constraints “under 30 chars, error messages include a solution”. Have AI generate several variants and mark the differences so you can pick the best fit. Without explicit tone words AI defaults to “neutral professional” and shipped copy clashes with the rest of the product.
What should an AI-written empty state contain?
A three-pack: empty-state copy + example illustration description + CTA link. Add two helpers: trigger condition (when this state shows) and success metric (what the user must do to leave it). Without the trigger, AI copy may mismatch the actual scenario; without the metric, you can't measure whether the empty state design works.
How can AI help with component accessibility review?
The template asks AI to audit four dimensions: label, aria attributes, keyboard navigation, error messages. Output is an issue list + fix patches. Getting the checklist and patches together beats manually walking through WCAG line by line — the key is naming dimensions explicitly, otherwise AI defaults to a generic “consider adding alt”.
How many steps should I follow when AI designs micro-interactions?
Two steps: first have AI output a state-machine description for loading/success/failure (text or diagram), confirm the logic, then ask for code. Demand desktop/mobile differences — hover becomes tap on mobile, heavy loading animations need a low-end device fallback. Going straight to code usually skips counting all the states.
After AI delivers the 3-part copy/empty-state/a11y exercise, how do I pick what to merge?
The exercise's point is not “accept all” — it is “compare AI output with existing copy and merge the best”. The method: line-by-line comparison, asking “which is more on-brand, clearer, shorter”. Keep the winner. Where AI wins clearly, replace; where it ties, keep existing; where it loses, discard. The merged result beats either side alone.