Polish 是一个面向交付前最终质量打磨的技能,目标是在功能完成后进行细致入微的收尾,修复那些区分“好”与“出色”的小细节。它明确强调:打磨是最后一步,不是第一步,不要对尚未功能完整的工作进行打磨。
使用方式上,技能建议首先参考 frontend-design 技能获取设计原则与反模式,然后进行系统化的最终检查。
打磨前的评估:理解当前状态与目标,包括功能是否完整、是否有需要保留的已知问题(用 TODO 标记)、质量标准(MVP 还是旗舰功能)、交付时间(留出多少打磨时间)。同时识别需要打磨的领域:视觉不一致、间距与对齐问题、交互状态缺失、文案不一致、边界情况与错误状态、加载与过渡的流畅度。
系统化打磨的维度:
视觉对齐与间距:像素级对齐、使用间距刻度保持一致的间距、视觉重心对齐、响应式一致性、遵循网格。检查方法包括开启网格叠加、用浏览器检查器查看间距、在多个视口尺寸下测试。
排版精修:层级一致性、正文行长 45-75 字符、合适的行高、避免孤行寡行、合适的断词、必要时调整字距、避免字体加载闪烁。
颜色与对比度:对比度符合 WCAG 标准、使用设计令牌而非硬编码颜色、主题一致性、颜色含义一致、焦点指示器可见且对比度足够、中性色带轻微色调、避免在彩色背景上使用灰色文字。
交互状态:每个交互元素都需要默认、悬停、焦点、激活、禁用、加载、错误、成功等状态。
微交互与过渡:状态变化动画 150-300ms、使用自然的缓动(ease-out-quart/quint/expo),避免弹跳或弹性效果、保持 60fps、只动画 transform 和 opacity、尊重 prefers-reduced-motion。
内容与文案:术语一致、大小写一致、无拼写错误、长度合适、标点一致。
图标与图片:风格一致、尺寸合适、对齐正确、有替代文本、加载不引起布局偏移、支持视网膜屏幕。
表单与输入:标签一致、必填指示清晰、错误信息有帮助、Tab 顺序合理、自动聚焦适度、验证时机一致。
边界情况与错误状态:加载状态、空状态、错误状态、成功状态、超长内容、无内容、离线处理。
响应式:所有断点测试、触摸目标至少 44x44px、移动端文字不小于 14px、无横向滚动、合理重排。
性能:快速初始加载、无布局偏移、交互流畅、图片优化、懒加载。
代码质量:移除 console 日志、移除注释代码、移除未使用导入、命名一致、类型安全、无障碍支持。
技能还提供了一份系统化的打磨清单,涵盖视觉对齐、间距令牌、排版层级、交互状态、过渡、文案、图标、表单、错误状态、加载状态、空状态、触摸目标、对比度、键盘导航、焦点指示器、控制台错误、布局偏移、浏览器兼容、减少动效偏好、代码整洁等检查项。
最终验证建议:亲自使用该功能、在真实设备上测试、请他人复查、与设计稿对比、检查所有状态而非仅正常路径。
技能同时列出不应做的事:不要在功能完整前打磨、不要在即将交付时过度打磨、不要引入新 bug、不要忽视系统性问题、不要只完美一处而其他粗糙。
适用场景:前端界面、产品功能在交付前的最终质量检查与细节打磨。限制:该技能主要针对界面与交互质量,不涉及后端逻辑或业务功能实现;具体平台、收费、价格等信息暂未提供。