Design Trends

17 komplette 2026 Webdesign-Styling-Systeme mit exakten CSS vars, Tailwind config und Do's/Don'ts.

von growthaudit · growthaudit/claude-design-skills

Getestet · Funktioniert ★ 9.6/10

Design Trends — 17 komplette 2026 Webdesign-Styling-Systeme mit exakten CSS vars, Tailwind config und Do's/Don'ts.

Was es kann

Wendet eines von 17 kompletten 2026 Webdesign-Trendsystemen (Neo-Brutalismus, Neumorphismus, Dark Mode, Retrofuturismus, Chatbot UI usw.) auf jedes UI-Artefakt an, jedes gebündelt mit CSS custom properties, Tailwind config, Typografie-Paarungen, Layout-Prinzipien, Do's/Don'ts-Regeln und Referenzkomponentenmustern. Wird ausgelöst, wenn der Benutzer einen Trend nennt, nach etwas 'trendy'/'2026 style'/'Y2K' fragt oder ein Design weniger generisch/KI-Standard wirken lassen möchte.

Testbericht

Wurde gebeten, einen Hero-Bereich neo-brutal zu gestalten: Es lieferte exakte, meinungsstarke Tokens (3px border, 5px/5px/0 harter Schatten, Schrift-Trio Space Grotesk/DM Sans/Space Mono, null border-radius, Hover-/Active-Shadow-Lift-Rezept) plus explizite Do's/Don'ts-Regeln – ein aus dem Gedächtnis unternommener Versuch ohne die Datei erzeugte nur vage 'dicke Ränder, kräftige Farben'-Vermutungen ohne konkrete Werte.

Getestet am: 2026-07-16 · Claude Code 2.x (agent harness)

Installation

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

Befehle & Beispiel-Prompts

/design-trends17 komplette 2026 Webdesign-Styling-Systeme mit exakten CSS vars, Tailwind config und Do's/Don'ts.

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

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

Vollständiger Testbericht (Englisch) →