AI 辅助 UX 文案与交互
AI 辅助 UX 文案与交互
AI 不只是写代码，还能加速界面文案、空状态、可访问性提示与微交互脚本。
生成一致的文案语气
你是产品文案，请为登录页生成：标题/副标题/按钮文案/错误提示。
品牌语气：温暖、清晰、有行动感。
约束：不超过 30 字；错误提示包含解决方案。
让 AI 输出多个备选并标注差异。
设计空状态与引导
- 要求 AI 输出空态文案 + 示例插图描述 + CTA 链接。
- 补充“触发条件”和“成功指标”，便于后续验证。
可访问性辅助
请审查 @components/Form.tsx 的可访问性：label/aria/键盘导航/错误提示。
输出问题列表和修复 patch。
让 AI 生成 a11y 检查表和 patch，减少遗漏。
微交互与动效脚本
- 让 AI 设计“加载、成功、失败”的动画或状态机描述，再生成代码。
- 要求给出“终端/移动端”的差异处理。
练习
选一个页面组件，让 AI：1) 生成统一语气的文案 2) 给出空态与 CTA 3) 输出 a11y 修复建议。比较 AI 方案与现有文案，择优合并。
📚 相关资源
❓ 常见问题
关于本章主题最常被搜索的问题，点击展开答案
让 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 失败的丢掉，这样最终质量比单边采纳高。