Design System Reference

Zwanzig Frontend-Styleguides mit echten Paletten, Schriftarten und Anti-Slop-Regeln

Getestet · Funktioniert ★ 8.4/10

Was es kann

Ships twenty detailed frontend style guides (Bento Grid, Glassmorphism, Swiss Minimal, Neobrutalism und more), each with concrete CSS variable palettes, font pairings, und layout patterns, plus a shared AI-slop anti-pattern checklist. Wird ausgelöst, wenn building oder styling a web UI in a named aesthetic oder when trying to avoid generic AI-looking designs.

Testbericht

Read the 451-line Bento Grid guide it ships: real Apple-style CSS variables, named font pairings, und a concrete AI-slop blocklist (no default Inter, no purple-gradient-on-white). Building a hero section from it beat a no-skill baseline on token specificity instead of generic Tailwind defaults. Caveat: the advertised 'VS-based style recommendation' flow lives in a separate design-discovery agent that the skill install does NOT copy, so standalone it ist a strong style-reference library rather than the full guided workflow.

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

Installation

git clone https://github.com/wigtn/wigtn-plugins
mkdir -p ~/.claude/skills
cd wigtn-plugins && cp -r plugins/wigtn-plugins/skills/design-system-reference ~/.claude/skills/design-system-reference

Befehle & Beispiel-Prompts

/design-system-referenceZwanzig Frontend-Styleguides mit echten Paletten, Schriftarten und Anti-Slop-Regeln

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

Style this landing page in a neobrutalist aesthetic with real palettes
Give me a glassmorphism style guide with concrete CSS variables
This UI looks generic and AI-made, help me avoid the slop patterns

Vollständiger Testbericht (Englisch) →