ui-ux-polish

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

UI/UX Polish

UI/UX打磨

Iterative enhancement workflow that takes working web applications from decent to world-class. Covers desktop and mobile optimization as separate modalities, visual design patterns, and accessibility standards.

When to use: The app works correctly with basic styling in place and you want to improve visual quality through iterative refinement. Also use for applying specific design patterns (glassmorphism, neumorphism, bento grids) or auditing accessibility.

When NOT to use: The app is broken or buggy (fix bugs first), styling is fundamentally wrong (needs complete overhaul), or no basic design system exists yet.

面向已正常运行的Web应用，将其从不错的水准提升至世界级水平的迭代增强工作流。涵盖桌面端与移动端的独立优化、视觉设计模式以及无障碍标准。

适用场景：应用功能正常且具备基础样式，希望通过迭代优化提升视觉品质时使用。也适用于应用特定设计模式（玻璃拟态、新拟态、便当网格）或审核无障碍性的场景。

不适用场景：应用存在故障或bug（需先修复bug）、样式存在根本性问题（需要彻底重构），或是尚未建立基础设计系统的情况。

Quick Reference

快速参考

Pattern	Technique	Key Point
Iterative polish	Run the same polish prompt 10+ times	Small improvements compound dramatically
Desktop/mobile split	Optimize each modality independently	Prevents compromises that hurt both
Glassmorphism	`backdrop-blur-xl` + `bg-white/70` + border	Functional depth with legibility
Neumorphism	Dual-direction box shadows	Best in light mode; use borders for a11y
Bento grid	CSS Grid with `rounded-3xl` cells	Hero cell spans multiple columns/rows
WCAG 2.2 AA	Contrast ratios + target sizes + focus visible	4.5:1 text, 3:1 UI, 24x24px targets
Reduced motion	`prefers-reduced-motion: reduce`	Disable animations for motion-sensitive users
Semantic HTML	Landmarks + heading hierarchy + native elements	Use `<button>` not `<div role="button">`
Inclusive design	Multiple input methods + error forgiveness	Support keyboard, voice, and touch equally
Typography hierarchy	Consistent scale with clear levels	Font size, weight, and spacing rhythm
Spacing rhythm	Consistent padding and margin scale	Use design token multiples (4px, 8px, 16px)
Hover/focus states	Visible feedback on all interactive elements	Keyboard users need visible focus indicators
Animation/transitions	`ease-out` enter, `ease-in` exit, 100-300ms	Prefer transform/opacity for GPU compositing
Micro-interactions	Button press, toggle, focus, success/error	Always respect `prefers-reduced-motion`

模式	技术要点	核心说明
迭代式打磨	重复使用相同的打磨提示10次以上	微小改进会产生巨大的复合效应
桌面/移动端拆分	独立优化每个终端	避免做出损害双方的妥协
玻璃拟态	`backdrop-blur-xl` + `bg-white/70` + 边框	在保证可读性的同时实现功能性深度
新拟态	双向盒阴影	最适用于浅色模式；为无障碍性添加边框
便当网格	带有 `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` 设置

Common Mistakes

常见错误

Mistake	Correct Pattern
Running polish on a broken app	Fix all functional bugs first, then apply iterative polish
Making one large pass instead of many small ones	Run 10+ iterations; incremental improvements compound
Optimizing desktop and mobile simultaneously	Treat each as a separate modality and optimize independently
Stopping after changes appear minimal	Keep iterating; subtle spacing and typography tweaks add up
Applying glassmorphism to all elements	Use glass effects strategically on cards and modals only
Neumorphism without accessibility borders	Add a 1px border for low-vision users (contrast requirement)
Ignoring `prefers-reduced-motion`	Always respect system motion preferences in CSS
Using `<div>` with click handlers instead of `<button>`	Use native semantic HTML elements for built-in accessibility

错误	正确做法
在存在故障的应用上进行打磨	先修复所有功能性bug，再进行迭代式打磨
一次性进行大量修改而非多次小修改	执行10次以上迭代；渐进式改进会产生复合效果
同时优化桌面端和移动端	将两者视为独立终端，分别进行优化
在变化看似微小时停止优化	持续迭代；细微的间距和排版调整会累积产生显著效果
为所有元素应用玻璃拟态	仅在卡片和模态框等元素上战略性地使用玻璃效果
使用新拟态但未添加无障碍边框	为低视力用户添加1px边框（满足对比度要求）
忽略 `prefers-reduced-motion`	在CSS中始终遵循系统动画偏好设置
使用带有点击事件的 `<div>` 而非 `<button>`	使用原生语义化HTML元素以获得内置的无障碍支持

Delegation

任务分配

Desktop and mobile polish in parallel: Use
```
Task
```
agent to run separate polish passes for each modality
Visual regression verification: Use
```
Explore
```
agent to check that polish iterations have not broken layout or accessibility
Design system alignment planning: Use
```
Plan
```
agent to establish spacing, typography, and color patterns before polishing
Full accessibility audits: Delegate to
```
accessibility
```
skill for in-depth WCAG compliance, ARIA patterns, focus management, and screen reader testing

并行打磨桌面端与移动端：使用
```
Task
```
agent分别对两个终端进行打磨
视觉回归验证：使用
```
Explore
```
agent检查打磨迭代是否破坏了布局或无障碍性
设计系统对齐规划：使用
```
Plan
```
agent在打磨前确定间距、排版和颜色模式
完整无障碍审核：委托给
```
accessibility
```
skill进行深度WCAG合规性检查、ARIA模式、焦点管理以及屏幕阅读器测试

References

参考资料

Polish Workflow -- The iterative polish prompt, why it works, iteration protocol, and multi-agent strategies
Design Patterns -- Glassmorphism, neumorphism, bento grids with Tailwind implementations
Accessibility -- WCAG 2.2 AA standards, semantic HTML, ARIA, inclusive design, and reduced motion
Animation and Micro-interactions -- CSS transitions, loading states, spring animations, page transitions, and Tailwind animation utilities

打磨工作流 -- 迭代式打磨提示、其工作原理、迭代协议以及多Agent策略
设计模式 -- 玻璃拟态、新拟态、便当网格的Tailwind实现
无障碍性 -- WCAG 2.2 AA标准、语义化HTML、ARIA、包容性设计以及减少动画
动画与微交互 -- CSS过渡、加载状态、弹性动画、页面过渡以及Tailwind动画工具类