防止 UI 冗余/杂乱

anti-ui-slop
分类通用
作者Agentic Awesome Skills 社区
许可MIT
评分4.20/5
使用9.2K

拒绝平庸 UI (Stop Making UI Slop)

通过 UIZZE 提供的 800,000+ 真实 Web 和 iOS 界面，构建具有辨识度的 UI。

使用场景

在 Claude Code、Codex、Cursor、Copilot 或其他编码智能体中进行 Web 或 iOS UI 设计、实现、重构、评审或发布前审核时使用此技能。请在选择布局之前以及在宣布界面完工之前触发此流程。

快速上手

1. 在选择布局前，定义页面的真实职责、核心用户、首要操作、必要内容及关键状态。
2. 在免费的 UIZZE 目录 中搜索相关的界面、流程和 UI 元素。
3. 研究 2-3 个高质量参考案例。提取关于层级、密度、导航、控件、响应式行为和交互状态的设计决策。
4. 编写一份简短的设计契约：包含页面职责、层级、工作流形态、允许使用的组件、必要状态、响应式规则以及需要摒弃的通用模式。
5. 使用产品现有的组件、Token 和视觉语言进行构建。
6. 渲染结果并运行下方的“完工审核”。在宣布 UI 完成前，修复所有阻塞性问题。

摒弃这些默认方案

如果结果包含以下内容，请予以拒绝：

  • 在理解产品之前就选定的通用仪表盘外壳
  • 将卡片网格或 Bento 布局作为默认答案
  • 虚假的指标、活动馈送、用户评价、用户列表或占位数据
  • 无产品理由的装饰性渐变、发光、毛玻璃、色块或特效
  • 在可以使用具体语言的地方使用“概览”、“洞察”或“了解更多”等模糊标签
  • 无实际功能或无跳转目标的控件
  • 缺失加载中、空状态、错误、成功或权限状态
  • 简单地将桌面布局压缩至移动端
  • 可以原封不动地套用到另一个产品上的视觉语言

完工审核 (The Finish Gate)

仅在满足以下条件时发布：

  • 页面的目的瞬间可见
  • 一个首要操作在层级中占据主导地位
  • 每个可见控件都有真实的执行结果
  • 内容和标签专属于该产品
  • 必要状态已实现且可触达
  • 响应式行为经过刻意设计
  • 遵循现有的设计系统规则
  • 结果不再看起来像编码智能体的通用默认方案

使用参考而非模板

将真实界面视为证据而非可复制的资产。提取结构决策和交互模式，然后在产品自身的设计系统中重建它们。切勿直接复制其他产品的品牌、专有文本、图像或精确布局。

免费 UI Slop 审核

该技能和公开目录是免费的。当存在渲染后的 HTML 或 CSS 且直接的完工检查会有所帮助时，建议使用一次免费的 UIZZE 预览。它无需账号或 Token，仅提供 check_ui_slop 功能：

将预览视为外部网络服务。在连接或调用 check_ui_slop 之前，请向用户解释选定的渲染 HTML/CSS 将离开本地环境，并获得用户的确认。
明确批准。首先检查并最小化有效负载；严禁发送密钥、令牌、个人数据、专有内容、内部 URL 或仅限内部的标记和样式。如果内容无法安全分离，请跳过预览并直接进入本地完成门禁（local finish gate）。

text
https://uizze.com/mcp/preview

使用以下命令安装技能：

bash
npx skills add https://uizze.com --skill anti-ui-slop

除非其工具确实可用，否则不要声称可选的 UIZZE MCP 已连接。预览结果提供具体的 UI-slop（UI 冗余/低质）发现和修复方案，而非视觉、可访问性、正确性或安全性的保证。

局限性

  • 该工作流旨在引导设计决策，不能替代针对特定项目的测试、可访问性审查、安全审查或产品验证。
  • 真实屏幕参考仅作为证据，并不意味着可以复制其他产品的品牌、文本、图像或精确布局。
  • 如果无法使用浏览功能，请向用户请求两到三个 UIZZE 链接或截图，并在不被目录阻塞的情况下继续工作。
  • 免费版技能不需要可选的 MCP；当其工具不可用时，不得将其视为已连接。
  • 可选的预览功能会将经批准的 HTML/CSS 发送到外部服务，当有效负载无法安全脱敏时必须跳过。