Design System Reference

Tyve frontend-stilguider med reelle paletter, skrifttyper og anti-'slop'-regler

Testet · Virker ★ 8.4/10

Hvad det gør

Leverer tyve detaljerede frontend-stilguider (Bento Grid, Glassmorphism, Swiss Minimal, Neobrutalism og mere), hver med konkrete CSS-variabelpaletter, skrifttypeparringer og layoutmønstre, plus en delt AI-'slop' anti-mønster tjekliste. Udløses ved opbygning eller styling af en web-UI i en navngiven æstetik eller ved forsøg på at undgå generiske AI-udseende designs.

Testrapport

Læste den 451-linjers Bento Grid-guide, den leveres med: reelle Apple-stil CSS-variabler, navngivne skrifttypeparringer og en konkret AI-'slop'-blokliste (ingen standard Inter, ingen lilla-gradient-på-hvid). At bygge en hero-sektion ud fra den slog en baseline uden færdigheder på token-specificitet i stedet for generiske Tailwind-standarder. Advarsel: den annoncerede 'VS-based style recommendation'-flow lever i en separat design-discovery-agent, som færdighedsinstallationen IKKE kopierer, så alene er det et stærkt stil-referencelibibliotek snarere end det fulde guidede workflow.

Testet: 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

Kommandoer og eksempelprompter

/design-system-referenceTyve frontend-stilguider med reelle paletter, skrifttyper og anti-'slop'-regler

Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen aktiverer prompter som disse skillen (på engelsk):

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

Læs hele rapporten →