git404hub

what is slopslap fr?

vibedesignlab/slopslap — explained in plain English

Analysis updated 2026-05-18

24JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

tl;dr

A Claude Code plugin that inspects AI-generated UIs for generic visual cliches and fixes them using real design reference data.

vibe map

mindmap
  root((slopslap))
    What it does
      Finds AI slop patterns
      Fixes with real reference data
      Verifies fixes with checks
    Tech stack
      JavaScript
      Claude Code plugin
      Node.js scripts
    Use cases
      Fix decorative clutter
      Fix spacing and layout
      Fix color palettes
    Audience
      Frontend developers
      Claude Code users
    Modes
      Reductive mode
      Transform mode

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

what do people make with this?

VIBE 1

Scan an AI-generated web UI for cliched decorative elements and undisciplined layout.

VIBE 2

Automatically fix spacing, typography, and color problems using real reference data instead of guesses.

VIBE 3

Reshape a whole design's visual direction consistently using the transform mode.

VIBE 4

Get a before and after screenshot report showing what changed and why.

what's the stack?

JavaScriptClaude CodeNode.js

how it stacks up fr

vibedesignlab/slopslapaaaddress1/vibe-readingamirhosseinjpl/jpl-sub-processor
Stars242424
LanguageJavaScriptJavaScriptJavaScript
Setup difficultyeasymoderatemoderate
Complexity2/52/53/5
Audiencedeveloperresearcherops devops

Figures from each repo's GitHub metadata at analysis time.

how do i run it?

Difficulty · easy time til it works · 5min

Requires Claude Code with plugin support, browser rendering is only used for the final screenshot step.

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

in plain english

slopslap is a Claude Code plugin that finds and removes the generic, cliched visual patterns that AI-generated user interfaces tend to produce, sometimes called AI slop. The README explains that these interfaces often look off in ways that are hard to pin down, and it groups the common problems into five areas: overused decorative elements like glowing blobs and gradient text, undisciplined layout grids and fixed pixel widths, cramped or inconsistent spacing, decorative italic type used without reason, and rainbow color palettes with no basis. The tool runs as a pipeline rather than a back and forth conversation. It first makes a single upstream decision about the page's content and style intensity, then runs five checks for the five problem areas at the same time, each writing its findings to its own file. It builds a combined report from those findings, then fixes only the items that failed their check, working through the five areas in order. After fixing, it reruns the same checks to confirm the fix actually worked, and finally renders a before and after screenshot so a person can see the visible difference. A key design choice is that every finding is a real check computed from the source code, not just a status message the tool claims is true, so a fix has to actually pass the check again before it is considered done. Replacement values for things like spacing, color, and contrast are not invented by the AI. They come from real reference data generated from packages such as Tailwind and Radix, and from WCAG contrast rules. An optional transform mode goes further and reshapes the whole design in one consistent direction based on measurements taken from real, well designed websites, while leaving the actual copy, information, and content order untouched. Installation happens inside Claude Code as a plugin, added from the vibedesignlab marketplace and then installed with a plugin command. It is released under the MIT license.

prompts (copy fr)

prompt 1
Install the slopslap plugin from vibedesignlab and run it on my project.
prompt 2
Run /slopslap on this UI and show me the findings report.
prompt 3
Explain the five inspection areas slopslap checks for AI slop in a UI.
prompt 4
Run slopslap in transform mode using a reference site's style as the direction.

Frequently asked questions

what is slopslap fr?

A Claude Code plugin that inspects AI-generated UIs for generic visual cliches and fixes them using real design reference data.

What language is slopslap written in?

Mainly JavaScript. The stack also includes JavaScript, Claude Code, Node.js.

What license does slopslap use?

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

How hard is slopslap to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is slopslap for?

Mainly developer.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.