AI Toolkit · Claude Resources
unslop: van AI-slop naar een ontworpen scherm
Een skill voor Claude en Claude Code die vibecoded schermen ontwerpt: paarse verlopen, gloed, emoji en schreeuwende teksten eruit, een eigen karakter erin. Nederlandse bewerking van unslop door Damir Sokolovsky, met regels voor Nederlandse teksten.
Zo ziet het eruit
Links een typische vibecoded landingspagina: paars-blauwe verlopen, een glanzende blob, sterretjes en een kop die bij elk product past. Rechts hetzelfde product na unslop. Sleep de schuif om te vergelijken.
Bij een dashboard gaat het om rust in het chrome: één neutrale kleurreeks, geen emoji, labels zonder hoofdletters, getallen in één notatie en de kleur alleen waar ze iets betekent.
Voor
NaOp verzoek maakt de skill er een korte video van: je scherm dat zichzelf opschoont, met rode redlines op de slop. Vierkant en ongeveer tien seconden, klaar om te posten.
Wat de Nederlandse versie extra doet
De originele skill is Engelstalig. Onze bewerking spreekt Nederlands en kent de valkuilen van Nederlandse interfaceteksten:
| Voor | Na |
|---|---|
| Welkom terug, Olaf! 👋 | Oktober 2026 |
| Ontgrendel de kracht van AI ✨ | Facturen versturen en betaald krijgen |
| +12%!! | +12% t.o.v. vorige maand |
| BETAALD DEZE MAAND | Betaald deze maand |
| $48,210 en 12.5% | € 48.210 en 12,5% |
| Bekijk uw facturen · Maak je account aan | Bekijk je facturen · Maak je account aan |
| Settings, Insights, Get started | Instellingen, Inzichten, Aan de slag |
Wat de skill doet
unslop werkt zoals een ontwerper die een redline-ronde doet: eerst kijken, dan een richting kiezen, dan laag voor laag verbeteren. De functies, de inhoud en de volgorde van je pagina blijven staan. Wat verandert: elke maat, kleur, elk woord en elk beeld wordt een bewuste keuze.
- 1
Audit
Claude bekijkt het scherm (in de code, in de browser, of via een link naar een live site) en zet elk signaal van slop op een lijst, met waar het staat.
- 2
Richting
Vijf korte regels uit je product zelf: wat het doet, het karakter, de wereld waar het bij hoort, de één of twee momenten die kleur krijgen en één kenmerkend detail. Claude laat de audit en de richting zien en wacht op jouw akkoord.
- 3
Negen rondes
Witruimte, kleur, iconen, tekst, typografie, layout, details, beeld en beweging, in die volgorde, telkens over het hele scherm.
- 4
Controle en verslag
Een checklist, een nieuwe render tegen de auditlijst, en een kort verslag per ronde. Is je scherm al goed, dan zegt Claude dat en stelt hooguit een paar kleine verfijningen voor.
Werkt in React, Next.js, Vue, Svelte, Tailwind en gewone HTML en CSS, voor dashboards, apps en landingspagina's. Heb je alleen een link of een screenshot, dan bouwt Claude het scherm eerst na en levert een herontworpen versie in code op.
Installeren in Claude (web en desktop)
- 1
Download de skill
Kies de Nederlandse of de Engelse versie. Beide werken op Nederlandse en Engelse schermen; het verschil is de taal van de instructies.
- 2
Ga naar Customize → Skills
Open Claude in de browser of de desktop-app en ga naar 'Customize' → 'Skills'. Skills werken met een betaald abonnement. Zie je Skills niet, zet dan in de instellingen code-uitvoering aan.
- 3
Upload de zip
Klik op het '+'-icoon, kies voor uploaden en selecteer de zip die je net downloadde. Pak hem niet eerst uit.
- 4
Gebruik hem
Upload een screenshot of plak je code en vraag: "Unslop dit scherm". Claude herkent de skill vanzelf.
Installeren in Claude Code of Codex
- 1
Pak de zip uit in je skills-map
Dit zet de skill klaar voor al je projecten. Alleen voor één project? Gebruik dan .claude/skills/ in die projectmap. Voor Codex is het ~/.agents/skills/ (of .agents/skills/ in een project).
mkdir -p ~/.claude/skills && unzip ~/Downloads/unslop-nina-nl.zip -d ~/.claude/skills/
- 2
Typ /unslop met wat je wilt
Of vraag het in je eigen woorden: Claude pakt de skill vanzelf op. Andere voorbeelden: /unslop de hero van https://example.com, of /unslop mijn landingspagina en maak de storyvideo zodat ik hem kan posten.
/unslop dit dashboard
Live sites en storyvideo's
Om een live site op te slaan of een storyvideo te maken, heeft de skill Playwright met Chromium nodig. Draai dit in de projectmap waar je de skill gebruikt. Voor de video moet ook ffmpeg geïnstalleerd zijn.
- 1
Playwright installeren
npm install -D playwright && npx playwright install chromium
Beelden genereren
Voor een hero kan de skill een echte scène of een object laten maken met een beelddienst zoals fal, Replicate, OpenAI of Higgsfield, als je die als koppeling hebt. Claude laat dan eerst de prompt zien en vraagt toestemming voor elke betaalde generatie. Dashboards en apps hebben meestal geen gegenereerd beeld nodig: daar komt het moment uit je eigen product.
Wie het maakte
- 1
Damir Sokolovsky (@heydamir)
Maker van unslop en van de serie Unslopping op X. De skill valt onder CC BY 4.0: je mag hem gebruiken, aanpassen en delen, ook commercieel, met bronvermelding.
- 2
Bewerking door NinA AI Agency
Wat wij veranderden: de instructies in het Nederlands, regels voor Nederlandstalige interfaces (aanspreekvorm, notatie van bedragen, procenten en datums, hoofdletters, gedachtestreepjes, Engelse labels en lange woorden) en een regel over reduced motion. De referenties, beelden en scripts zijn het origineel. Alles staat in LICENSE.md in de zip.