Categories › Software Development › Frontend, UI components & design-to-code
Checks UI code for AI-default design patterns and gives the fix. By Precious Studio.
Remote server: your requests and data go to sloppatterns.com. Claude Code: claude mcp add --transport http slop-patterns https://sloppatterns.com/mcp · Claude app: Settings → Connectors → Add custom connector.
The tools this server listed when we connected to it, in its own words.
check_design — 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 elist_patterns — List the whole Slop Patterns taxonomy: code, id, name and one-liner for every documented AI design anti-pattern.get_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,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 — Plain-language search across the library. "gradient headline" returns A10 Gradient Text Headline.report_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 why — Return only the causal explanation for one pattern — which model, tool or template default produces it.Not tested by KitScout yet. When our harness runs it, pros, cons and the tasks we tried appear here, with the date and evidence.