Design System Reference

Tjugo frontend-stilguider med verkliga paletter, typsnitt och anti-slop-regler

Testad · Fungerar ★ 8.4/10

Vad den gör

Levererar tjugo detaljerade frontend-stilguider (Bento Grid, Glassmorphism, Swiss Minimal, Neobrutalism med mera), var och en med konkreta CSS-variabelpaletter, typsnittsparningar och layoutmönster, plus en delad AI-slop anti-mönsterchecklista. Utlöses vid byggande eller styling av ett webbgränssnitt i en namngiven estetik eller när man försöker undvika generiska AI-utseende design.

Testrapport

Läst den 451-radiga Bento Grid-guiden den levereras med: verkliga Apple-stil CSS-variabler, namngivna typsnittsparningar och en konkret AI-slop-blocklista (inga standard Inter, ingen lila-gradient-på-vit). Att bygga en hero-sektion från den överträffade en baslinje utan färdighet vad gäller tokenspecificitet istället för generiska Tailwind-standarder. Varning: det annonserade 'VS-based style recommendation'-flödet finns i en separat design-discovery-agent som färdighetsinstallationen INTE kopierar, så fristående är det ett starkt stilreferensbibliotek snarare än det fullständiga guidade arbetsflödet.

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

Kommandon och exempelprompter

/design-system-referenceTjugo frontend-stilguider med verkliga paletter, typsnitt och anti-slop-regler

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

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 hela rapporten →