mcpField
D
deslop-ui

deslop-ui

github.com/kmaidaOther1139 installsUpdated 2d ago
Repository

About deslop-ui

deslop-ui is a design skill for generating and reviewing interfaces, cataloging visual cues that can make UI look AI-generated and ways to address them. It favors judging elements by their purpose in context over blindly applying a ban list.

Key features

  1. 01Review common visual cues in generated interfaces
  2. 02Offer fixes for identified cues
  3. 03Apply to both UI generation and review
  4. 04Judge elements by their contextual purpose
  5. 05Suggest follow-up skills for design tasks

Use cases

  1. 01Check whether decorative elements are justified while generating UI
  2. 02Review visual issues in UI code or screenshots
  3. 03Choose a refinement skill based on the design goal

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/kmaida/deslop-skills --skill deslop-ui

After installing, type/deslop-uiin Claude Code to confirm it loaded.

Bundled filesreference/tells.md

Details

From the project README

UI Slop Review

A focused catalog of the specific visual "tells" that make an interface read instantly as AI-generated, plus how to fix them. Use it both when generating UI and when reviewing UI (code or screenshots).

Core principle: intentionality, not prohibition

The slop is never the element. It is the reflexive, meaningless use of the element.

The single test for anything on screen is: "Does this convey real information or serve the context here?"

  • If yes, it is craft. Keep it. A nav icon that encodes a real category, a chevron that signals "expandable," a status pill that maps to a distinct state, a relative-time feed in an activity log, a dark-mode toggle: all good.
  • If it is there because it "looks like a dashboard" or "looks technical," it is slop. Cut it or replace it with something that earns its place.

Do not strip meaningful affordances in the name of avoiding tells. Over-correction (a flat banned-list applied blindly) is its own failure mode. The catalog reflects this: Tier 1 items are almost always reflex; Tier 2 items are good when meaningful and slop only when decorative.

When generating, your own house style is the highest-risk slop source. Counter your defaults by making context-driven decisions, not by imitating a different generator's defaults; slop points both loud (gradient maximalism) and quiet (unmade decisions). The catalog covers both directions.

Working with other design skills (all optional)

This skill stands alone; no other skill is required.

If a broader design-direction skill is installed (for example frontend-design), it owns aesthetic direction: font choice, palette strategy, layout philosophy. Where its guidance overlaps a tell in this catalog (purple gradients, nested cards, centered heroes, glassmorphism, bento sameness), follow the design-direction skill's fuller treatment and use this catalog as the review checklist. Invoke both on UI work when both exist.

If targeted refinement skills are installed, route to them by intent after building or reviewing. Skip this table when none are present. These are not all run together; some are mutually exclusive (bolder vs quieter). Suggest the most relevant one and let the user confirm.

Intent / cueSkill(s)
About to ship / production-readinessaudit, harden, polish
"Make it pop" / more strikingbolder, colorize, delight
"Too loud" / too muchquieter, distill
Conform to the design systemnormalize
Consolidate reusable components/tokensextract
Copy / microcopy unclearclarify
Responsive / cross-deviceadapt
Add motionanimate
Empty / first-run statesonboard
Performanceoptimize
Evaluate UX qualitycritique

The catalog and review checklist

The full Tier 1 / Tier 2 catalog, copy tells, and the review checklist live in reference/tells.md. Consult it whenever generating or reviewing UI.

Note: keep all output em-dash-free. The em dash used as clause punctuation is itself the most recognizable AI writing tell.

Comments

Markdown supported