SuperDesign

• Je hebt een AI-agent nodig die UI-code (HTML/CSS/Tailwind) genereert die er verzorgd en modern uitziet, niet als een template.
• Je bouwt landingspagina's, dashboards of component-rijke interfaces en wilt dat er automatisch een gestructureerd ontwerpproces wordt gevolgd.
• Je wilt consistente thema's voor lichte/donkere modi met moderne kleurtechnieken zoals oklch().
• Je hebt toegankelijke, mobile-first, responsieve lay-outs nodig met correcte semantische HTML zonder extra configuratie.

• Je werkt in een native mobiele omgeving (iOS/Android) — deze richtlijnen zijn gericht op web.
• Je project maakt gebruik van een strikt ontwerpsysteem (bijv. strikte naleving van Material Design) dat in conflict is met de eigenzinnige themapatronen die hier worden aangeboden.

Elke gebruikersinterface wordt benaderd via Lay-outontwerp, Themaontwerp, Animatieontwerp en Implementatie — in die volgorde. Dit voorkomt dat er direct naar code gesprongen wordt voordat structuur en esthetiek zijn overwogen, wat resulteert in coherentere resultaten.

De skill vermijdt bewust verouderde generieke kleurpaletten (zoals Bootstrap-blauw) en promoot oklch() voor perceptueel uniforme, moderne kleurdefinities. Vooraf gebouwde themapatronen voor Donkere modus (Vercel/Linear-stijl), Neo-brutalisme en Glasmorfisme zijn inbegrepen met kant-en-klare CSS-variabelen.

Een zorgvuldig samengestelde lijst van Google Fonts in de categorieën sans-serif, monospace, serif en display wordt aangeboden, samen met CDN-klare integratie voor Lucide-iconen en Flowbite-componenten — zodat er geen giswerk meer nodig is bij typografiekeuzes.

Een beknopt notatiesysteem voor het plannen van micro-interacties (bijv. button: 150ms [S1→0.95→1] press) zorgt ervoor dat animaties doelgericht blijven. Aanbevolen tijdsbereiken voor entree-animaties, hover-staten, knopindrukking en paginaovergangen worden hierin vastgelegd.

Richtlijnen handhaven semantische HTML, een correcte koppenstructuur, ARIA-labels, een minimale kleurcontrastverhouding van 4,5:1 en ondersteuning voor toetsenbordnavigatie — zodat de uitvoer voldoet aan de basisnormen voor toegankelijkheid zonder extra aanwijzingen.

Eigenzinnige best practices voor kaarten, knoppen, formulieren en navigatie zijn ingebouwd — inclusief schaduwdiepte, aanraakdoelgrootte, focusstatussen, laad-/uitgeschakelde statussen en plakkerig headergedrag.

Vraag je agent om een SaaS-bestemmingspagina te bouwen en SuperDesign zorgt ervoor dat deze een gestructureerde indeling volgt (header → hero → functies → footer), een modern lettertypekoppel kiest, een samenhangend kleurthema toepast en mobile-first responsieve CSS genereert — allemaal zonder handmatige ontwerpbegeleiding.

Bij het prototypen van een analyse- of beheerdashboard begeleidt de vaardigheid de agent om eerst de lay-out te schetsen, consistente spatiëring en subtiele kaartschaduwen toe te passen, en hover- en animatiestatussen op te nemen — wat resulteert in een prototype dat er productierijp uitziet.

Gebruik deze skill om een samenhangend set knoppen, formuliervelden en navigatiecomponenten te genereren die dezelfde ontwerp-tokens delen (CSS-variabelen voor kleur, hoekradius en schaduw) en voldoen aan toegankelijkheidscontroles.

Bij het bouwen van een interface die zowel lichte als donkere modus moet ondersteunen, helpen de CSS-variabele aanpak en de oklch() kleurrichtlijnen van SuperDesign de agent om vanaf het begin een thema-bewust systeem te maken, in plaats van de donkere modus achteraf toe te voegen.