How to use the No Design Slop agent skill: install and trigger it

What the No Design Slop skill makes the agent do

Once installed, the agent acts as a passive design quality gate while it builds, revises, or reviews websites, apps, screenshots, mockups, and design code. It looks for generic AI-style defaults, decorative choices that serve no purpose, and common UI defects, then removes or fixes the most damaging ones.

The skill is explicit that slop is not a particular colour, font, gradient, card, or animation. It is a choice made by reflex rather than for the product. The skill also keeps the product's own look: it preserves the chosen art direction instead of forcing a neutral redesign.

• Checks the result against gates for system consistency, hierarchy, composition, typography, colour and material, product truth, interaction states, and motion and access.
• Applies a removal test: name the suspect element, state its job, and delete it if meaning, state, action, hierarchy, or brand character survives.
• Renders the result at relevant viewports and inspects the interface itself, not only the source code.
• Reports the material removals or corrections and why they improved the design.

Install the skill from the ZIP download

Download the ZIP for the skill from the directory page. Then unzip it into one of two locations, depending on how you want to use it. Put it in ~/.claude/skills/ to make it available to your own Claude Code setup, or put it in a project's .claude/skills/ folder to make it available only in that project.

If you use the Claude apps instead, you can upload the skill through the settings. Open Settings, go to Capabilities, then Skills, and upload it there.

• Personal use: unzip into ~/.claude/skills/.
• Single project: unzip into the project's .claude/skills/ folder.
• Claude apps: Settings → Capabilities → Skills, then upload the skill.

Trigger the skill with natural requests

You do not need a special command. The skill describes when it applies: while creating, revising, or reviewing UI work, or when you explicitly ask for an anti-slop cleanup. Describe the task in plain language and name the surface you want checked.

For a narrow change, ask the agent to fix only the requested surface. For a full page or detailed pass, say so. If you only want a formal review without any edits, ask for that explicitly, because the skill points to a separate audit workflow (audit-ai-design-slop) for read-only reviews.

• "Build a landing page for my app and avoid generic AI-looking design."
• "Do an anti-slop cleanup pass on this dashboard screenshot."
• "Review this mockup for decorative elements that don't help the user."
• "Revise the pricing section but keep our current brand look."

Example: a cleanup pass on a landing page

Suppose you ask the agent to clean up a landing page that has a glowing radial background, a row of icon tiles, and an eyebrow label above every heading. The skill asks the agent to name each element, state its job, and remove it mentally. If the page still communicates the same meaning without the glow and the labels, the agent removes them.

Where removal would cause a real loss, such as a hero with no clear focal point, the agent makes the smallest correction using the existing design system rather than adding a new effect.

What the skill needs and what it runs

The listing states that the skill requires nothing beyond the agent itself. It does not run scripts and does not use the network. The skill is guidance for the agent rather than a standalone tool, so it works through the instructions it gives your agent and the design files you share with it.

The skill's own reference material is a pattern library (ARTICLE.md) and a references list (REFERENCES.md). The agent reads ARTICLE.md only for full page redesigns, anti-slop passes, or detailed reviews.

• Requires: nothing listed.
• Runs scripts: no.
• Uses network: no.
• Files: agents/openai.yaml, ARTICLE.md, REFERENCES.md, SKILL.md.

Tips for getting useful results

Give the agent your local design context before asking for changes. The skill tells the agent to read local instructions, tokens, DESIGN.md, screenshots, and existing components before choosing a direction, so providing these makes the cleanup more accurate.

Be clear about whether you want a redesign. The skill is built to preserve your existing art direction, so it will not give you a new visual identity unless you ask for one and the task allows it.

• Share screenshots or a rendered mockup so the agent can judge the visible result.
• Name the viewports you care about so the agent checks them.
• Ask for a summary of removals to review what changed and why.
• Do not use it for a read-only audit; use the separate audit workflow instead.