Diwali Special40% off every SkillGild Pro plan

Claim 40%

Halloween Special40% off your first 3 months of SkillGild Pro

Code FESTIVE40Claim 40%

Festive Special40% off your first 3 months of SkillGild Pro

Code FESTIVE40Claim 40%
SkillGild
Sign inCreate account

De-Slop

Turns vibecoded, AI-looking UI into a designed interface with its own character. Catalogs 40+ visual tells, establishes authentic product-rooted direction, applies a disciplined 9-pass refactor across spacing, color, icons, copy, type, layout, details, visuals, and motion, and renders an animated transformation video with live redline measurements.

  • Included with SkillGild Pro
  • Runs locally in your agent
  • v1.0.0
  • SkillGild
skillgild install de-slop
Works with
  • Claude Code
  • Codex
  • Cursor
  • Gemini CLI
  • Antigravity
and any MCP client

License: SkillGild · Created by SkillGild

SkillGild

SkillGild

What you get

  • A systematic 9-pass design transformation that elevates vibecoded, AI-generated UI into clean, authentic interfaces.
  • Comprehensive audit checklist covering 40+ detected visual slop tells across colors, gradients, typography, emojis, buttons, cards, and motion.
  • Disciplined design tokens: 4px spacing scale, quiet tinted neutral ramps, mathematical nested corner radii, and high-contrast tabular typography.
  • Authentic hero visual and product preview patterns that replace generic purple blobs and AI sparkles with concrete product substance.
  • Built-in headless snapshot tool (scripts/snapshot.mjs) to capture and inspect live web pages and components.
  • Optional 10-second animated story video generator (scripts/story.mjs) with real-time CSS morphing and live redline measurement overlays.

Is it a good fit?

Good for

  • Dashboards, SaaS web apps, and landing pages that look too generic, templated, or obviously AI-generated.
  • Fixing predictable vibecoding tells: purple hue gradients, glowing pills, emoji labels, hype copy, and uneven padding.
  • Design systems and component libraries built with Tailwind CSS, React, Next.js, Vue, Svelte, or plain HTML/CSS.
  • Founders, engineers, and teams who want premium design polish without hiring an agency for weeks.
  • Showcasing transformation progress to stakeholders with an animated before-and-after story video.

Not for

  • Building a brand identity from scratch without any product concept or user context.
  • Low-fidelity wireframing or rough napkin sketches.
  • Replacing existing bespoke brand identities with generic monochromatic templates.

Requirements

  • Node.js 18+ and Chrome, Edge, or Chromium installed (or set CHROME_PATH).
  • ffmpeg on PATH for story video rendering (or ffmpeg-static via npm).
  • No third-party API keys required; image generation tools (e.g. DALL-E, Midjourney, fal) are optional.

Install the De-Slop skill

Choose your agent and run one command. SkillGild signs you in when needed and connects the skill for you.

Install the SkillGild CLI first. If you already have it, run skillgild update once.

  1. Install this skill for Claude Code.

    Terminal
    skillgild install de-slop --agent claude-code

    On first use, approve the sign-in request in your browser. SkillGild connects Claude Code automatically. Restart or reload your agent, then ask it to use this skill.

Developer detailsAPI examples, server tools and input schemas

How it runs

  1. Your agent starts a session. SkillGild checks your access and allowance, counts one run, and sends the skill's instructions for this task.
  2. Your agent does the work with its own model and tools, in your project. SkillGild makes no AI model call.

Use it from code

Start a session, follow its guide, then end it. Create an API key under Account and pass it as a bearer token.

Terminal
# Prints the session ID, its tools and the instructions for your agent
skillgild session de-slop
skillgild end <session-id>

Questions

What exactly is 'UI slop'?

UI slop is the predictable visual residue left by code-generation LLMs: vibrant purple-to-indigo gradients, colored glowing drop-shadows, emoji labels, '✨ New' pills everywhere, all-caps tracked category headers, arbitrary spacing (like mt-[13px]), and exclamation-heavy hype copy. De-Slop strips away these tells and injects intentional brand craft.

Does De-Slop change my app's functionality or routes?

Never. De-Slop adheres to a strict rule: it does not rename your product, change core feature architecture, invent fake data, or shuffle your navigation. It elevates the visual hierarchy, tokens, typography, and styling around your real product features.

How does De-Slop work with Tailwind CSS?

De-Slop works natively with Tailwind. It replaces arbitrary bracket values (e.g., p-[17px]) with calibrated scale steps (p-4), swaps saturated hue gradients for clean surface ramps, cleans up border-radius math, and unifies typography and icon weights.

What is the Story Video?

The Story Video is a 10-second square video that animates your UI de-slopping itself in real time. It uses CSS morphing and animated redline measurement overlays that show spacing and radii adjusting live. It is ideal for X/Twitter launch teasers and team showcase demos.

Can I use De-Slop on live URLs?

Yes. Run node scripts/snapshot.mjs <url> baseline.html to take an inlined high-fidelity snapshot of the live webpage, audit the visual tells, and refactor.

How do I install De-Slop in Claude Code or other agents?

Install via the SkillGild CLI with `skillgild install de-slop --agent claude-code`. You can also choose `--agent codex`, `--agent cursor`, or `--agent gemini-cli`.

Related guides

Setup steps and worked examples for this kind of skill.

Reviews

No reviews yet

Used De-Slop? Your rating helps the next person decide.

Be the first to rate De-Slop
Tap a star
View all