---
name: de-slopify-ui
description: "Haal generieke AI-defaults uit een website of webapp en vervang ze door keuzes voor merk, taak en inhoud. Gebruik bij UI-audits, visuele verbetering, frontendbouw en het beoordelen van AI-gegenereerde interfaces."
---

# Humanize (UI)

Haal de automatische ontwerpkeuzes eruit. Vervang ze niet door een nieuwe trend.
Een kaart, verloop of serif is niet automatisch fout. Een keuze zonder reden is
het probleem.

## Eerst de bedoeling

- Leg in één zin vast wat de gebruiker hier moet kunnen doen.
- Leg in één zin vast wat het merk eigen maakt.
- Lees bestaande merkrichtlijnen, tokens, componenten en echte inhoud.
- Bekijk de gerenderde pagina op desktop en mobiel. Code alleen is geen visuele
  controle.
- Noem een interface nooit door AI gemaakt op basis van haar uiterlijk.

## Zoek naar clusters

Een patroon kan bewust gekozen zijn. Een stapeling van standaardkeuzes zonder
verband met product of merk is het sterkste signaal.

### Compositie

- een gecentreerde hero met subkop, twee CTA's en daarna een raster van precies
  drie gelijke kaarten;
- overal dezelfde maximale breedte, sectiehoogte en middenuitlijning;
- kaarten in kaarten, terwijl witruimte of een scheidslijn genoeg zou zijn;
- een desktoplayout die op mobiel alleen tot één lange kolom wordt gestapeld;
- een bento-raster, dashboardmockup of logorij zonder echte informatie.

### Typografie

- een eyebrow in kapitalen of een pil boven bijna iedere titel;
- Inter, Geist, Roboto, Space Grotesk of monospace als automatische sfeerkeuze;
- één cursief serifwoord of gekleurd woord in iedere grote titel als smaaktruc;
- te weinig verschil tussen kop, tussenkop en lopende tekst;
- technische labels in monospace zonder technische betekenis.

### Containers en componenten

- een afgeronde kaart met schaduw voor ieder los stukje informatie;
- een dikke gekleurde linker rand op een kaart zonder betekenis als status,
  selectie of prioriteit;
- ronde pictogramtegels boven iedere featuretitel;
- pillen voor gewone labels, links en knoppen;
- decoratieve grafiekjes, statistieken of badges die niets bewijzen;
- generieke componentbibliotheek-states die niet bij het merk passen.

### Kleur en materiaal

- paarsblauwe verlopen, gradienttekst, aurora-vlekken, neon gloed en glassmorphism
  als automatische route naar een futuristisch gevoel;
- donker of juist warm ivoor als veilige standaard zonder relatie tot het product;
- lage contrasten die verfijnd lijken maar leesbaarheid kosten;
- één accentkleur die willekeurig voor nadruk, status en interactie wordt gebruikt.

### Gedrag en inhoud

- alles laten zweven, schalen of omhoog faden zonder functionele betekenis;
- hover-effecten die elementen laten verspringen;
- modals gebruiken omdat er geen plek in de pagina is ontworpen;
- algemene CTA's en claims die voor ieder product zouden kunnen gelden;
- ontbrekende loading-, lege-, fout- en focusstates achter een nette mockup.

## Verbeter

1. Rangschik problemen op zichtbaarheid en effect, niet op gemak.
2. Herstel eerst inhoud, hiërarchie, compositie en typografie.
3. Verwijder containers en decoratie die geen functie hebben.
4. Gebruik echte merkassets, echte productbeelden en echte gegevens.
5. Laat herhaling een systeem zijn. Laat afwijking een reden hebben.
6. Beperk beweging tot feedback, oriëntatie of merkexpressie.
7. Bewaar werking, responsiviteit, semantiek, contrast, focus en reduced motion.
8. Render opnieuw op smal en breed scherm. Vergelijk voor en na.

Lever een korte diagnose met gerangschikte verbeteringen. Voer wijzigingen alleen
uit als de gebruiker dat vraagt. Leg bij iedere grote wijziging de ontwerpreden uit.

## Onderhoud

AI-defaults verschuiven. Controleer bij een actuele audit recente patrooncollecties
en productvoorbeelden. Voeg alleen een nieuw signaal toe wanneer het in meerdere
interfaces of bronnen terugkomt. Maak nooit een nieuwe lijst met absolute verboden.

## Bronbasis

- [Impeccable Slop Catalog](https://subclaude.com/slop/), actuele catalogus met terugkerende UI-patronen.
- [Refero anti AI slop](https://github.com/referodesign/refero_skill/blob/master/skills/refero-design/references/anti-ai-slop.md), patroononderzoek en ontwerpkeuzes.
- [rwcod anti-ai-slop-ui](https://github.com/rwcod/anti-ai-slop-ui/blob/main/SKILL.md), workflow vanuit productbedoeling.
- [Vanszs Anti AI UI](https://github.com/Vanszs/Anti-AI-UI/blob/main/Anti-AI-SLop/SKILL.md), componentgerichte auditlijst.