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.

AI-Assisted UX Copy & Interaction

⏱️ 15 min

AI-Assisted UX Copy & Interactions

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.

📚 相关资源

❓ 常见问题

关于本章主题最常被搜索的问题，点击展开答案

让 AI 写界面文案怎么保持品牌语气一致？

在 prompt 里明确写出语气词 + 约束。本章登录页例子：语气“温暖、清晰、有行动感”，约束“不超过 30 字、错误提示包含解决方案”。再让 AI 输出多个备选并标注差异，挑出最贴合的版本。语气词不写清楚，AI 默认走“中性专业”，一上线就跟其他页面对不上。

空状态文案让 AI 写要包含哪几样？

3 件套：空态文案 + 示例插图描述 + CTA 链接。再补两件辅助：触发条件（什么时候显示这个空态）和成功指标（用户做了什么算“摆脱空态”）。少了触发条件，AI 写出来的文案可能跟实际场景对不上；少了成功指标，后续没法验证空态设计有没有用。

AI 怎么帮我做组件的 a11y 审查？

本章模板让 AI 审查 4 个维度：label、aria 属性、键盘导航、错误提示。然后输出问题列表 + 修复 patch。a11y 检查表 + patch 一起出，比人工拿 WCAG 清单一项项对照快得多 —— 关键是 prompt 要点名具体维度，否则 AI 容易只交一个泛泛的“建议加 alt”。

微交互动效让 AI 设计要分几步？

两步走：先让 AI 输出“加载、成功、失败”3 个状态的状态机描述（用文字或图描），确认逻辑对了再让它生成代码。同时要求给出“终端 / 移动端”差异处理 —— 比如 hover 在移动端要换成 tap、loading 动画在低端机要降级。直接出代码常常连状态都没数清。

练习题“页面文案 + 空态 + a11y”3 件事 AI 输出后怎么取舍？

本章练习的关键不是“全采纳”，是“比较 AI 方案与现有文案，择优合并”。具体做法：拿 AI 输出和现有版本逐句对照，每一句问“哪个更贴合品牌语气、更好懂、更短”，三选一胜出的留下。AI 完胜的合并、平手的保留现有、AI 失败的丢掉，这样最终质量比单边采纳高。