界面打磨 是做什么的?
当用户希望现有界面感觉更完善,或正在实现一个视觉细节很重要的组件时,请使用此技能。在不改变产品视觉形象、信息架构或交互模型的前提下(除非另有要求),提高清晰度、一致性和反馈效果。
确立本地视觉语言
在编辑之前,请识别所用框架、样式处理方式、组件库、设计令牌以及附近组件的惯例。遵循现有系统,重用共享的组件和值。优先在一个共享源头处进行修复,而不是进行许多局部修补。不要为了一个打磨细节而添加依赖或样式系统。
视觉一致性是证据,但个人品味并非缺陷。当项目中一致地应用了某些设计惯例,如平面化表面或克制的动效时,请予以保留。
选择合适的模式
实施。 仅进行那些能解决观察到的具体问题或完成明确要求的处理方式的更改。保持行为的可访问性,并使实现方式符合项目的惯用风格。
审查。 除非同时要求实施,否则保持只读模式。说明检查的范围,评估相关状态,并仅报告由渲染界面或源代码证据支持的问题。不要将未观察到的视觉行为作为事实陈述。
对于任一模式,请阅读 references/polish-checklist.md 以获取决策指南、状态覆盖范围和报告格式。对于实施模式,请仅针对项目的实际技术栈阅读 references/implementation-recipes.md:CSS、Tailwind、React Motion、GSAP 或 Three.js。对于颜色、焦点、动效、控件或目标尺寸相关的工作,请阅读 references/wcag-accessibility.md;当前景色和背景色可解析为十六进制值时,请运行 scripts/check_contrast.py。
应用高价值改进
- 文本: 根据内容长度和视口选择换行方式;当实时数字值的变化宽度干扰附近内容时,稳定其显示。
- 表面: 将嵌套圆角、深度、图像边缘和图标放置视为视觉关系。当它们在渲染上下文中看起来不正确时,进行修正。
- 反馈: 使静止、悬停、聚焦、按下、选中、加载和禁用状态易于区分。不要让动效成为事情发生变化的唯一标志。
- 动效: 对于用户驱动的状态更改,使用可逆的过渡效果。将分阶段动画保留在那些能够解释层次结构或方向的罕见时刻。尊重
prefers-reduced-motion。 - 输入上下文: 不要让触控设备继承粘滞的悬停效果。在打磨控件的同时,保持可见的焦点行为、键盘操作和实用的目标尺寸不变。
避免进行没有用户可见益处的装饰性更改。不要使用大范围的过渡效果、永久性的性能提示,或使常规操作变慢或更难理解的动效。