mcpField
A
anti-ui-slop

anti-ui-slop

github.com/davepoon设计与 UI3.7k520 次安装1 天前更新
代码仓库

关于 anti-ui-slop

anti-ui-slop 是用于设计、实现、评审和完善 Web 与 iOS 界面的工作流技能。它依据产品背景和现有设计系统规划界面及状态；MCP 参考资料为可选项。

主要功能

  1. 01结合产品背景与设计系统
  2. 02规划界面层级和控件
  3. 03覆盖加载等界面状态
  4. 04支持时渲染并检查结果

适用场景

  1. 01改进显得通用的初稿
  2. 02重新设计 Web 或 iOS 页面
  3. 03检查响应式布局和交互

MCP 相关

此工作流无需 MCP。另有可选的 UIZZE MCP，在具备认证连接时提供界面参考和视觉素材搜索工具。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/davepoon/buildwithclaude --skill anti-ui-slop

安装后在 Claude Code 中输入/anti-ui-slop确认已加载。

详细介绍

停止制造 UI 垃圾

使用 UIZZE 的免费反 UI 垃圾工作流，构建贴合产品的界面。结合产品简介、现有组件和设计系统，让屏幕的层级、内容、控件和状态都经过精心设计。

何时使用此技能

可用于设计、实现、重新设计、评审或完善 Web 或 iOS 界面，尤其适合初稿显得千篇一律或遗漏了重要状态时。

如何使用

  1. 阅读目标屏幕、产品背景和现有设计系统。确定主要用户、操作、内容和限制。
  2. 复用项目的组件、设计令牌、字体排版和交互惯例。对于大幅重新设计，撰写简短的设计约定；小修小补则保持精简。
  3. 使用贴合产品的标签，并遵循真实的数据需求。不要为了填充布局而编造指标、活动、推荐语或控件。
  4. 实现所需的加载、空白、错误、成功、禁用和权限状态。明确主要操作和恢复路径。
  5. 如果环境支持，渲染结果并修复可见的裁切、重叠、交互无响应和响应式问题。运行项目相关检查，并总结所做的更改。

此工作流无需账户、令牌、脚本或 MCP 连接即可使用。无法获取外部参考时，请依据仓库中的现有信息继续。

示例

Use anti-ui-slop on our billing settings page. Make the current plan,
payment method, and invoice history easy to scan. Reuse our components
and tokens. Cover no invoices, payment failure, and read-only access.
Inspect desktop and mobile output and fix visible breakage.

进行有针对性的评审时，先找出最有价值的三项改进，并在要求的范围内实施。

可选 UIZZE 参考

单独付费的 UIZZE MCP 提供有针对性的参考搜索，可检索 800,000 多个真实的 Web 和 iOS 屏幕。它恰好提供两种工具：

  • find_ui_references 可查找或查看最多三个完整屏幕参考。
  • find_ui_materials 可查找最多三种托管字体、图标、动画图标或明确要求的素材包。

仅当宿主提供经过身份验证的连接，且具体的视觉问题确实能从参考中获益时，才使用这些工具。如果检索不到内容，请基于项目继续。切勿声称工具返回了宿主实际未提供的结果。

将有用的层级、密度、控件和状态设计决策调整为适合产品自身设计系统的方案。保留产品的特色和内容。

权威软件包与更多示例

此目录条目是独立工作流。安装完整的当前技能（包括有针对性的操作手册）：

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

权威来源 · 实用工作流 · UIZZE

评论

支持 Markdown