ui-ux-polish

UI/UX 润色

通过迭代式增强工作流，将可正常运行的 Web 应用从尚可提升至世界一流水平。涵盖桌面端和移动端的独立优化方式、视觉设计模式及无障碍标准。

适用场景：应用运行正常，已有基础样式，你希望通过迭代改进提升视觉质量。也适用于应用特定设计模式（玻璃拟态、新拟态、Bento 网格）或审核无障碍体验。

不适用场景：应用无法正常运行或存在 Bug（请先修复 Bug）、样式存在根本性问题（需要彻底改版），或尚未建立基础设计系统。

快速参考

模式	技术	要点
迭代润色	运行同一润色提示词 10 次以上	微小改进累积起来效果显著
桌面端/移动端分开优化	分别独立优化每种使用方式	避免两者相互妥协，导致体验都受影响
玻璃拟态	backdrop-blur-xl + bg-white/70 + 边框	在保证易读性的同时营造功能性层次感
新拟态	双向盒阴影	最适合浅色模式；添加边框以满足无障碍要求
Bento 网格	使用 rounded-3xl 单元格的 CSS Grid	主视觉单元格跨越多列或多行
WCAG 2.2 AA	对比度 + 目标尺寸 + 焦点可见性	文本 4.5:1，UI 3:1，目标尺寸 24x24px
减少动态效果	prefers-reduced-motion: reduce	为对动态效果敏感的用户禁用动画
语义化 HTML	地标 + 标题层级 + 原生元素	使用 <button>，而不是 <div role="button">
包容性设计	多种输入方式 + 容错设计	同等支持键盘、语音和触控
字体排版层级	使用一致的比例，划分清晰层级	字号、字重和间距节奏
间距节奏	使用一致的内边距和外边距比例	使用设计令牌的倍数（4px、8px、16px）
悬停/焦点状态	所有交互元素都提供清晰反馈	键盘用户需要清晰可见的焦点指示器
动画/过渡	进入使用 ease-out，退出使用 ease-in，时长 100-300ms	优先使用 transform/opacity 进行 GPU 合成
微交互	按钮按下、切换、聚焦、成功/错误	始终遵循 prefers-reduced-motion

常见错误

错误	正确做法
对无法正常运行的应用进行润色	先修复所有功能 Bug，再进行迭代润色
只进行一次大幅调整，而非多次小幅调整	迭代 10 次以上；渐进式改进会累积出显著效果
同时优化桌面端和移动端	将两者视为独立的使用方式，分别优化
修改看起来很少时就停止	持续迭代；细微的间距和字体排版调整也会逐渐见效
对所有元素都应用玻璃拟态	策略性地仅在卡片和模态框上使用玻璃效果
使用新拟态却不添加无障碍边框	添加 1px 边框，为低视力用户提供支持（满足对比度要求）
忽略 prefers-reduced-motion	在 CSS 中始终遵循系统的动态效果偏好
使用带点击处理程序的 <div>，而不是 <button>	使用原生语义化 HTML 元素，以获得内置的无障碍支持

委派

• 并行打磨桌面端和移动端：使用 Task Agent 分别针对每种设备形态进行打磨
• 视觉回归验证：使用 Explore Agent 检查打磨过程中是否破坏了布局或无障碍功能
• 设计系统对齐规划：使用 Plan Agent 在打磨前制定间距、排版和配色方案
• 全面的无障碍审计：委派给 accessibility 技能，深入检查 WCAG 合规性、ARIA 模式、焦点管理和屏幕阅读器测试

参考资料

• 打磨工作流 —— 迭代打磨提示词、其有效原因、迭代流程和多 Agent 策略
• 设计模式 —— 玻璃拟态、新拟态、使用 Tailwind 实现的便当盒网格
• 无障碍 —— WCAG 2.2 AA 标准、语义化 HTML、ARIA、包容性设计和减少动态效果
• 动画和微交互 —— CSS 过渡、加载状态、弹簧动画、页面过渡和 Tailwind 动画实用工具