Design System Reference

Tjue frontend-stilguider med reelle paletter, fonter og anti-slop-regler

av wigtn · wigtn/wigtn-plugins

Bestått ★ 8.4/10

Design System Reference — Tjue frontend-stilguider med reelle paletter, fonter og anti-slop-regler

Hva den gjør

Leverer tjue detaljerte frontend-stilguider (Bento Grid, Glassmorphism, Swiss Minimal, Neobrutalism og mer), hver med konkrete CSS-variabelpaletter, fontparinger og layoutmønstre, pluss en delt AI-slop anti-mønster sjekkliste. Utløses når du bygger eller styler et web-grensesnitt i en navngitt estetikk eller når du prøver å unngå generiske AI-lignende design.

Testrapport

Leste den 451-linjers Bento Grid-guiden den leverer: reelle Apple-stil CSS-variabler, navngitte fontparinger, og en konkret AI-slop blokkliste (ingen standard Inter, ingen lilla-gradient-på-hvit). Å bygge en hero-seksjon fra den slo en grunnlinje uten ferdigheter på token-spesifisitet i stedet for generiske Tailwind-standarder. Advarsel: den annonserte 'VS-baserte stilanbefalings'-flyten lever i en separat design-oppdagelsesagent som ferdighetsinstallasjonen IKKE kopierer, så frittstående er det et sterkt stilreferansebibliotek snarere enn den fullstendige guidede arbeidsflyten.

Testet på: 2026-07-20 · Claude Code 2.x (agent harness)

Installer

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-referenceTjue frontend-stilguider med reelle paletter, fonter og anti-slop-regler

Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen 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