Home/Forum/Claude Skills/Gratis Claude Skill: landingspagina's ontwerpen met smaak, niet de standaard AI-look
Gratis Claude Skill: landingspagina's ontwerpen met smaak, niet de standaard AI-look
1 bericht · 2 weergaven
Angelo
Lid
OP #129 juli 2026, 20:48
De meeste AI-pagina's verraden zichzelf meteen: een paarse
gradient-hero over een donkere mesh, drie identieke feature-kaarten,
Inter op slate-900, een nep-dashboard van div-jes en een em-dash in elke
kop.
Deze skill benoemt precies die tells,
kiest een uitgesproken richting zodra de brief vaag is, en bewijst de
mechanische regels met een script voordat er iets wordt opgeleverd.
Het begint met een design read. De skill leest de signalen (soort pagina, sfeerwoorden, referenties, doelgroep, merk, stille eisen), spreekt in een regel een richting uit, en zet drie dials: variatie, beweging en dichtheid. Is de brief te vaag, dan stelt hij precies een vraag, geen hele lijst.
Daarna kiest hij een systeem of een esthetiek. Leest de brief als een bekend product-ecosysteem, dan installeert en gebruikt hij het officiele design-system-pakket in plaats van de look na te bouwen. Leest hij als een esthetiek (glas, bento, brutalist, editorial, dark tech), dan de eerlijke native uitvoering. Een systeem per project, niet mengen.
En het belangrijkste: niets wordt opgeleverd
voordat het door de pre-flight is. Een dependency-vrij script spoort de
mechanische tells op (em-dashes, standaard-fonts en verboden paletten,
AI-slop-copy, nep-versiebadges, ruwe scroll-listeners, puur zwart/wit,
beweging zonder reduced-motion-guard), en een oordeels-ronde vangt wat
een script niet ziet.
Elke FAIL wordt gefixt,
elke onterechte WARN opgelost, en het script draait opnieuw tot het
schoon is. Geen "je zou X nog kunnen verbeteren"-notitie; hij verbetert
het.
Wat je krijgt:
- Een kant-en-klare Claude Skill (SKILL.md + alle instructies) die je in je project laat vallen en direct werkt.
- Een script zonder installatie of afhankelijkheden dat ongeveer 20 mechanische tells opspoort in HTML, JSX/TSX of CSS.
- Een uitgesproken rulebook: typografie, kleur, layout-variatie, materiaal, interactie- en formulier-states, hero- en layout-discipline, beeldstrategie, contentdichtheid, quotes en thema-lock.
- Aparte referenties voor beweging, performance, toegankelijkheid en dark mode, plus een catalogus van AI-tells om standaard te vermijden.
- Vaste toegankelijkheids-poorten: WCAG AA-contrast op knoppen en formulieren, prefers-reduced-motion, geen puur zwart/wit, licht en donker.
Voor wie: developers, designers, bureaus en ondernemers die een landingspagina, portfolio of redesign willen dat op een bewuste keuze lijkt en niet op een AI-template.
Deze skill is voor marketing-pagina's: landingspagina's, portfolio's, redesigns, editorial- en event-pagina's. Niet voor dashboards, zware datatabellen of meerstaps product-UI. Het script bewijst alleen de mechanische regels; smaak, hierarchie, copy en de test op echte apparaten blijven mensenwerk. Voor een diepe toegankelijkheidscheck verwijst hij door naar de gratis accessibility-audit skill.
Installeren (Claude Code)
Pak
de zip uit in .claude/skills/frontend-taste/ en herstart Claude. Werkt
ook in andere Agent Skills-hosts. Alleen Node 18+ nodig voor het script,
geen betaalde tools.
Gebruiken
Gebruik de frontend-taste skill.
Bouw: een landingspagina voor <product>.
Doelgroep: <voor wie>.
Sfeer: <bijv. minimalistisch en rustig / premium / speels agency>.
Merk: <kleuren, fonts, logo als je die hebt>.