SuperAPI AI 工具集

refactor-ui

前端与建站

查看项目

更新于 10-15 23:33

技能介绍

用途:refactor-ui 用于在编辑前端代码时清理界面杂乱,包括泄露实现细节的文案、冗余 UI、重复操作、嵌套卡片和过度解释的界面。核心规则是先移除或合并,再考虑新增;除非用户明确要求改变产品范围,否则保持行为不变。

主要能力与流程:

  1. 盘点可见界面:列出标题、段落、辅助面板、徽章、按钮、重复标签、空状态和重复建议。
  2. 标记实现细节文案,准备删除或替换。
  3. 确定最小目标:每个屏幕区域一个标题,每个决策区域一个主操作,每个任务一条路径(除非不同路径有明确用户价值)。
  4. 修改文案:用用户动作语言替换内部语言,删除解释明显控件的文案,保持标签简短具体。
  5. 修改结构:移除嵌套卡片和多余面板,合并重复控件,将次要操作移入图标按钮、菜单或更安静的行,保持重复项卡片一致紧凑。
  6. 保留应用状态:不破坏现有 props、handlers、queries、routes、auth 或数据契约;不因展示清理而改变后端、schema 或 API 行为。
  7. 浏览器验证:优先检查移动端,查看实际屏幕文本而非仅代码,确认没有重复主 CTA 或实现用语。

参考:重写常见泄露文案或简化重复结构时阅读 references/refactor-patterns.md;需要移动端或 iOS 品味校准阅读 ../../references/modern-ios-app-design.md;若流程本身不清晰而非仅杂乱,先用 $design-frontend。

验收标准:界面应看起来像产品,而不是实现的状态报告。

限制:资料未提供具体安装命令、收费、价格、平台支持或效果数据。