Design System Reference

Dwadzieścia przewodników po stylach frontendowych z rzeczywistymi paletami, czcionkami i zasadami anty-niedoskonałości

Autor: wigtn · wigtn/wigtn-plugins

Testowano · Działa ★ 8.4/10

Design System Reference — Dwadzieścia przewodników po stylach frontendowych z rzeczywistymi paletami, czcionkami i zasadami anty-niedoskonałości

Co robi ten skill

Dostarcza dwadzieścia szczegółowych przewodników po stylach frontendowych (Bento Grid, Glassmorphism, Swiss Minimal, Neobrutalism i inne), każdy z konkretnymi paletami zmiennych CSS, parowaniem czcionek i wzorcami układu, plus wspólną listę kontrolną antywzorców niedoskonałości AI. Uruchamia się podczas budowania lub stylizowania interfejsu użytkownika w nazwanej estetyce lub podczas próby uniknięcia ogólnych projektów wyglądających jak AI.

Raport z testu

Przeczytano 451-liniowy przewodnik Bento Grid, który dostarcza: rzeczywiste zmienne CSS w stylu Apple, nazwane parowania czcionek i konkretną listę blokowania niedoskonałości AI (brak domyślnego Inter, brak fioletowego gradientu na białym). Budowanie sekcji hero na jego podstawie przewyższało podstawowy test bez umiejętności pod względem specyfiki tokenów zamiast ogólnych domyślnych wartości Tailwind. Zastrzeżenie: reklamowany przepływ 'VS-based style recommendation' znajduje się w oddzielnym agencie do odkrywania projektów, którego instalacja umiejętności NIE kopiuje, więc samodzielnie jest to silna biblioteka referencyjna stylów, a nie pełny, prowadzony workflow.

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

Instalacja

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

Komendy i przykładowe prompty

  • /design-system-referenceDwadzieścia przewodników po stylach frontendowych z rzeczywistymi paletami, czcionkami i zasadami anty-niedoskonałości

Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):

  • 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