SuperAPI AI 工具集

polish

前端与建站

查看项目

更新于 10-16 08:21

技能介绍

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、不要忽视系统性问题、不要只完美一处而其他粗糙。

适用场景:前端界面、产品功能在交付前的最终质量检查与细节打磨。限制:该技能主要针对界面与交互质量,不涉及后端逻辑或业务功能实现;具体平台、收费、价格等信息暂未提供。