SuperAPI AI 工具集

polish

前端与建站

查看项目

更新于 10-15 00:29

技能介绍

用途

Polish 是一个前端界面交付前的最终质量打磨技能,属于 aladicf/better-web-ui 技能集。它的目标是在功能开发完成后,对界面进行系统性的细节检查与修正,让现有层级和系统更加精确,而不是用来装饰薄弱的基础。技能描述明确指出:打磨是最后一步,不是第一步,不要打磨尚未功能完成的工作。

主要能力

该技能覆盖以下打磨维度:

  • 视觉对齐与间距:像素级对齐、间距使用统一比例、光学对齐、响应式一致性、网格遵循、分组清晰度、表面分隔。
  • 排版精修:层级一致性、行宽 45-75 字符、行高、孤行寡行、断词、字距、字体加载、基线对齐、链接克制、数字对齐、标题克制。
  • 颜色与对比:对比度符合 WCAG、设计令牌使用、主题一致性、颜色含义一致、焦点可见、带色中性色、彩色背景上的灰色处理、调色板纪律。
  • 交互状态:默认、悬停、焦点、激活、禁用、加载、错误、成功等状态完整,且动作层级在各状态下保持。
  • 微交互与过渡:150-300ms 过渡、一致缓动(ease-out-quart/quint/expo,不用弹跳或弹性)、60fps、尊重 prefers-reduced-motion。
  • 内容与文案:术语一致、大小写一致、语法拼写、长度适当、标点一致。
  • 图标与图片:风格一致、尺寸适当、对齐、替代文本、加载状态、Retina 支持、截图可读性、图标尺寸纪律。
  • 表单与输入:标签一致、必填指示、错误消息、Tab 顺序、自动聚焦、验证时机。
  • 边界与错误状态:加载、空状态、错误、成功、长内容、无内容、离线、空状态层级。
  • 响应式:所有断点、触摸目标 44x44px、可读文本不小于 14px、无水平滚动、合理重排。
  • 性能:快速初始加载、无布局偏移、流畅交互、图片优化、懒加载。
  • 代码质量:移除 console 日志、注释代码、未使用导入、命名一致、类型安全、无障碍。

使用方式

用户通过 /polish 启动该工作流。技能激活后,需要加载 $frontend-design,其中包含设计原则、反模式以及 Context Gathering Protocol。必须遵循该协议;如果尚无设计上下文,必须先加载 $setup。此外还需收集质量基准(MVP 还是旗舰功能)。

技能建议在打磨前先做评估:确认功能是否完整、是否有需要保留的已知问题(用 TODO 标记)、质量基准是什么、何时交付(有多少时间用于打磨)。然后识别打磨区域:视觉不一致、间距与对齐问题、交互状态缺口、文案不一致、边界与错误状态、加载与过渡流畅度。

技能还建议在特定问题上参考其他技能:空状态设计参考 empty-state 技能;更广泛的激活流程、顿悟时刻或首次运行策略参考 onboard 技能。同时建议参考层级检查清单、文本层级与可读性、动作层级、语义颜色、设计系统对齐、表面分隔、图片处理、收尾细节等内部参考。

适用场景

适用于前端界面功能已基本完成、准备交付前的最终质量检查。适合需要把界面从“能用”提升到“精致”的场景,尤其是对细节一致性、交互状态完整性、响应式表现和代码整洁度有要求的项目。

限制

技能明确列出禁止事项:不要在功能完成前打磨;如果 30 分钟后就要交付,不要花数小时打磨(需分诊);打磨时不要引入 bug(需充分测试);不要忽视系统性问题(如果间距到处都不对,应修复系统);不要只完美一处而其他粗糙(质量水平应一致);不要用边框、阴影或颜色装饰来掩盖未解决的层级问题;不要在更安静的分离方式更合适时使用亮链接色、边框杂乱或装饰性重叠。

最终验证建议:亲自使用、在真实设备上测试、请他人审查、与设计对比、检查所有状态。

暂未提供

该技能的收费、价格、平台支持范围、具体安装命令等事实在资料中暂未提供。