Frontend Design

• Een nieuwe UI-component of pagina bouwen waarbij visuele kwaliteit en onderscheidendheid belangrijk zijn, niet alleen functionele correctheid.
• Een product of landingspagina prototypen en je wilt iets dat er echt ontworpen uitziet in plaats van automatisch gegenereerd.
• Creatieve richtingen verkennen voor een merk, app of campagne voordat je je vastlegt op een ontwerpsysteem.
• Een saaie of generieke bestaande interface vervangen door iets met een duidelijk esthetisch standpunt.

• Als je strikte naleving van merk-/designsystemen nodig hebt — deze skill geeft prioriteit aan creatieve onderscheidenheid en kan afwijken van bestaande stijlgidsen.
• Als je alleen een backend-API of datalaag nodig hebt — deze skill richt zich uitsluitend op frontend-presentatiecode.

Voordat er ook maar één regel code wordt geschreven, verbindt de skill zich aan een duidelijke conceptuele toon — brutaal minimalistisch, maximalistische, organisch, luxueus, industrieel, redactioneel, en nog veel meer. Het resultaat is een interface met een coherent standpunt, geen generieke samenraapsel.

Generieke lettertypestapels (Inter, Roboto, Arial) worden bewust vermeden ten gunste van karaktervolle combinaties van display- en broodtekstlettertypen. Kleurpaletten maken gebruik van CSS-variabelen met dominante tinten en scherpe accenten, in plaats van timide, gelijkmatig verdeelde schema's.

Animaties worden strategisch ingezet — georchestreerde pagina-laadanimaties met gespreide vertragingen, scroll-getriggerde effecten en hover-states die verrassen. Voor HTML gaat de voorkeur uit naar CSS-only oplossingen; de Motion-bibliotheek wordt gebruikt voor React wanneer beschikbaar.

Achtergronden gaan verder dan effen kleuren: verloopnetten, ruistexturen, geometrische patronen, gelaagde transparanties, dramatische schaduwen, korrelende overlays en decoratieve randen worden contextueel ingezet om diepte en sfeer te creëren.

Indelingen geven de voorkeur aan asymmetrie, overlapping, diagonale stroming en elementen die het raster doorbreken. Royale negatieve ruimte of gecontroleerde dichtheid wordt bewust gekozen — nooit als standaard.

Gegenereerde code is functioneel en productieklaar, met ondersteuning voor HTML/CSS/JS, React, Vue en andere frameworks. De complexiteit sluit aan bij de esthetische visie — maximalistische ontwerpen bevatten uitgebreide animaties; minimalistische ontwerpen leveren precisie en terughoudendheid.

Een oprichter wil een landingspagina die zich onderscheidt van de concurrentie. De skill kiest een gedurfde esthetische richting — bijvoorbeeld redactioneel/tijdschrift met een sterke typografische hiërarchie — en genereert een volledig werkende pagina met scrollanimaties en een onderscheidend kleurensysteem.

Een ontwerper of ontwikkelaar heeft een persoonlijke site nodig die hun persoonlijkheid weerspiegelt. De vaardigheid vermijdt sjabloonachtige structuren en produceert iets gedenkwaardigs, misschien met een asymmetrische lay-out, een aangepaste cursor en een zorgvuldig gekozen lettertypecombinatie.

Een team heeft behoefte aan een data-intensieve interfacecomponent — een tabel, grafiekkaart of filterpaneel — die toch ontworpen aanvoelt. De skill past een utilitaire of verfijnd minimalistische esthetiek toe met nauwkeurige spatiëring en subtiele animatie om de component een gepolijste uitstraling te geven.

Een campagnepagina moet meeslepend en visueel indrukwekkend zijn. De skill kan een maximalistische, animatierijke pagina produceren met gelaagde visuele effecten, dramatische typografie en georchestreerde entrée-animaties die echte verrukking teweegbrengen.