Slop Patterns

com.sloppatterns由 sloppatterns.com 发布官方发布者v1.2.1更新于 Nov 2, 2026

Checks UI code for AI-default design patterns and gives the fix. By Precious Studio.

已验证Streamable HTTP可网页运行知识与记忆开发者工具

概览

AI 生成的概览

对照公开的 AI 设计反模式库检查 UI 代码,返回每处匹配及对应修复方法。

可以做什么
  • 检查 CSS、HTML 或 JSX 代码片段,列出所有命中的反模式及修复建议
  • 用自然语言搜索并浏览分类体系,查看编号、名称和一句话说明
  • 按 id 或编号读取完整条目:外观、成因、受影响人群、修复方法与来源
  • 单独获取某个模式的成因解释,或查询库版本与更新日志以便引用
  • 提交尚未收录的反模式报告,交由人工审核
适用场景
适合在编码助手生成或审查前端 UI 代码时,先发现并修正 AI 默认风格的设计问题。也适合查询某个具体模式或引用库的版本。
运行要求
远程 HTTP 端点 sloppatterns.com/mcp,无需账号或 API 密钥。需要支持 HTTP 服务器的 MCP 客户端。
安装前请注意
检查工具只覆盖 101 个可机械识别的模式,未报问题并不代表设计合格。报告工具会把提交内容发送给维护者人工审核并署名,请勿包含机密代码。站点 Slop Score 扫描器是另一个未开源的独立项目。

安装

在 SourceWeft 中

  1. 打开 控制台中的 Slop Patterns,将其添加到工作区。
  2. 为需要使用其工具的对话启用该服务。

Web executable,通过 Streamable HTTP。 远程服务在工作区中配置后即可从网页运行时运行。

交给智能体安装

把这段提示词粘贴到 Claude Code、Codex、Cursor 等智能体,或 SourceWeft 对话中。智能体会读取该服务器的安装指南,先向你展示发布者、端点和登录方式,经你同意后再把它添加到你的客户端。密钥不会写进任何命令。

阅读 https://sourceweft.com/mcp/com.sloppatterns%2Fslop-patterns/install.md,并按其中说明把这个 MCP 服务器接入我的客户端。修改任何配置之前,先告诉我它的发布者、端点和登录方式,等我确认。不要把 API 密钥写进命令或我会提交的文件;问我密钥应从哪里获取。

查看智能体所依据的安装指南

其他 MCP 客户端

把它添加到你客户端的 mcpServers 配置中。

{
  "mcpServers": {
    "slop-patterns": {
      "type": "http",
      "url": "https://sloppatterns.com/mcp"
    }
  }
}

README

Slop Patterns

A public library of AI design anti-patterns: what they look like, why the tools produce them, and what to do instead. Live at sloppatterns.com.

  • License: MIT (LICENSE). Only the pattern library is here and MIT: patterns.json, the pattern text and sources, the site, and the MCP server in api/.
  • Scanner code is not open. The Slop Score scanner at sloppatterns.com/score (browser capture, live checks and grading) is a separate project and is not included in this repo.
  • The MCP server runs at https://sloppatterns.com/mcp. No account or key. See the "For agents" page on the site.
  • The research note, The Same Page, is in research/.

Maintained by Pavithra Lamahewa at Precious Studio. Suggest a pattern from the site, or open an issue.

Use it in your AI tools

Your coding agent calls check_design on the UI it writes and fixes what it finds before you see it.

  • Claude Code (plugin, MCP plus a skill):
    /plugin marketplace add pavithralamahewa/slop-patterns/plugin install slop-patterns@slop-patterns
  • Any MCP client: npx add-mcp https://sloppatterns.com/mcp, or add an HTTP server with that URL. It is in the official MCP Registry as com.sloppatterns/slop-patterns.
  • Cursor: add the server in Settings → MCP (type HTTP, URL above), then copy cursor/slop-patterns.mdc into .cursor/rules/.

Use the taxonomy

Every pattern has a stable code (for example A10) and a stable URL (https://sloppatterns.com/#gradient-text-headline). Codes never change meaning; when an entry is revised, its version and updated fields change.

  • All 534 patterns as data: taxonomy.json. Each entry says whether it is checked automatically (101 are; the scanner, the MCP server and the command line share 104 code rules, and 57 of them have passed a hand audit on whole pages) or needs a person.
  • Command line: npx slop-patterns check ./dist or npx slop-patterns scan example.com. See cli/.
  • One rule set: the scanner, the MCP server and the command line run the same rules.js, so they never disagree.
  • Cite it: see CITATION.cff. GitHub shows a "Cite this repository" button from it.

来源:README.md,提交 a3e704f

工具

7

check_design

Check UI code for AI design patterns

Check a snippet of CSS, HTML or JSX against the Slop Patterns library and return every AI design anti-pattern it matches, with the fix for each. Covers the 101 documented patterns that have a mechanical tell. Useful for reviewing generated UI code.

输入参数code必填shareStats

list_patterns

List all patterns

List the whole Slop Patterns taxonomy: code, id, name and one-liner for every documented AI design anti-pattern.

输入参数track

get_pattern

Get one pattern

Get one full pattern entry by id or code (e.g. "a1" or "the-unchosen-gradient"): what it looks like, why the tools produce it, who it hurts, the fix, sources.

输入参数id必填

changelog

Library changelog

The library version, what each release added or changed, and how patterns are versioned. Use it to cite a specific version of Slop Patterns.

无需输入参数。

search_patterns

Search patterns

Plain-language search across the library. "gradient headline" returns A10 Gradient Text Headline.

输入参数query必填

report_pattern

Report a new pattern

Report an AI design anti-pattern that is NOT yet in the library, for a design failure seen repeatedly that a search of the library does not find. Reports are reviewed by a human before anything is published, and published entries credit the reporter.

输入参数name必填creditexamplewhereSeendescription必填

why

Why a pattern happens

Return only the causal explanation for one pattern — which model, tool or template default produces it.

输入参数id必填

版本历史

1
  1. v1.2.1最新Oct 12, 2026

评分

已满足适用检查项的 100%

该评分衡量此收录条目的完整程度,依据注册中心条目、端点与公开来源计算得出。它不是对服务器本身的评价,也不表示服务器安全或当前可用:可连通性是带日期的检查结果,评分也不包含安装量或用户评价。

  • 近 30 天内可连通必需25 分
  • 已声明认证方式必需10 分
  • 已列出工具必需15 分
  • 描述必需15 分
  • 图标10 分
  • 文档15 分
  • 许可证10 分