Design Trends

17 complete 2026 webdesign-stylingsystemen met exacte CSS-variabelen, Tailwind-configuratie en do's/don'ts.

Door growthaudit · growthaudit/claude-design-skills

Getest · Werkt ★ 9.6/10

Design Trends — 17 complete 2026 webdesign-stylingsystemen met exacte CSS-variabelen, Tailwind-configuratie en do's/don'ts.

Wat het doet

Past een van de 17 complete 2026 webdesign-trends (neo-brutalisme, neumorfisme, donkere modus, retrofuturisme, chatbot UI, etc.) toe op elk UI-artefact, elk gebundeld met CSS custom properties, Tailwind-configuratie, typografie-combinaties, lay-outprincipes, do/don't-regels en referentiecomponentpatronen. Activeert wanneer de gebruiker een trend noemt, vraagt om iets 'trendy'/'2026 style'/'Y2K', of een ontwerp minder generiek/AI-standaard wil laten aanvoelen.

Testrapport

Vroeg het om een hero-sectie neo-brutalistisch te maken: het leverde exacte, uitgesproken tokens (3px border, 5px/5px/0 hard shadow, Space Grotesk/DM Sans/Space Mono lettertype trio, zero border-radius, hover/active shadow-lift recept) plus expliciete do/don't-regels — een poging uit het geheugen zonder het bestand produceerde alleen vage 'dikke rand, felle kleuren'-gissingen zonder concrete waarden.

Getest op: 2026-07-16 · Claude Code 2.x (agent harness)

Installatie

git clone https://github.com/growthaudit/claude-design-skills
cd claude-design-skills
mkdir -p ~/.claude/skills
cp -r . ~/.claude/skills/design-trends

Commando's en voorbeeldprompts

  • /design-trends17 complete 2026 webdesign-stylingsystemen met exacte CSS-variabelen, Tailwind-configuratie en do's/don'ts.

Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):

  • Give this hero section a neo-brutalist look with real CSS values
  • Make this dashboard feel less generic, more 2026 Y2K style
  • Restyle our chatbot UI using an actual neumorphism token system